/* Scoped to the real grant detail; inherit the current Simplifik theme. */
.sg-ready { border: 1px solid var(--border); border-radius: var(--radius, 16px); padding: clamp(1rem, 3vw, 2rem); background: var(--surface); }
.sg-ready [hidden] { display: none !important; }
.sg-ready .sg-eyebrow { color: var(--muted); font-size: .875rem; margin: 0 0 .5rem; }
.sg-ready .sg-title { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; letter-spacing: -.025em; margin: 0; }
.sg-ready .sg-progress { font-size: .875rem; color: var(--muted); margin: .75rem 0 1.5rem; }
.sg-ready .sg-question { font-size: clamp(1.2rem, 2.5vw, 1.5rem); line-height: 1.4; margin: 0 0 1rem; max-width: 42rem; }
.sg-ready .confirm-item { display: block; border: 0; padding: 0; }
.sg-ready .confirm-item > .chk, .sg-ready .confirm-item > .crit { display: none; }
.sg-ready .mb-reeval { display: flex; flex-direction: column; align-items: stretch; gap: .6rem; margin: 0; max-width: 40rem; }
.sg-ready .sg-field-label { display: block; font-size: .875rem; color: var(--muted); margin-top: .5rem; }
.sg-ready .mb-reeval input:not([type=hidden]), .sg-ready .mb-reeval select, .mb-reeval textarea { width: 100%; max-width: 100%; min-height: 48px; font: inherit; font-size: 1rem; padding: .7rem .8rem; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--bg-2); }
.mb-reeval textarea { display: block; resize: vertical; margin-top: .5rem; }
.mb-reeval textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.preparacion-lista { padding-inline-start: 1.3rem; }
.preparacion-lista li { margin-block: 1rem; }
.preparacion-lista p { margin-block: .35rem; }
.preparacion-lista a { display: inline-block; padding-block: .5rem; }
.sg-ready .mb-reeval .btn { align-self: flex-start; min-height: 48px; font-size: 1rem; margin: .75rem 0; white-space: normal; }
.sg-ready button { font-family: inherit; cursor: pointer; }
.sg-ready .sg-secondary, .sg-ready .sg-edit { border: 0; background: transparent; color: var(--brand); font-size: .875rem; padding: .6rem .25rem; min-height: 44px; text-align: left; text-decoration: underline; text-underline-offset: .2em; }
.sg-ready .sg-secondary { margin: .5rem 1rem .5rem 0; }
.sg-ready .sg-explanation { font-size: .875rem; line-height: 1.6; margin: .75rem 0; }
.sg-ready summary, .sg-economics > summary { cursor: pointer; font-size: 1rem; line-height: 1.5; padding: .8rem 0; }
.sg-ready .confirm-det { padding: .5rem 0; display: block; font-size: .875rem; }
.sg-ready .sg-summary { border-top: 1px solid var(--border); margin-top: 1.25rem; }
.sg-ready .sg-list { list-style: none; margin: 0; padding: 0; }
.sg-ready .sg-summary-row { display: flex; justify-content: space-between; align-items: start; gap: 1rem; border-top: 1px solid var(--border); padding: .8rem 0; }
.sg-ready .sg-label { display: block; font-size: 1rem; font-weight: 500; }
.sg-ready .sg-value { display: block; color: var(--muted); font-size: .875rem; overflow-wrap: anywhere; }
.sg-ready .sg-edit { flex-shrink: 0; }
.sg-ready .sg-feedback:empty { display: none; }
.sg-ready .sg-feedback { font-size: 1rem; color: var(--text); border-left: 3px solid var(--warn); padding-left: .75rem; }
.sg-ready .sg-complete p { font-size: 1rem; max-width: 44rem; }
.sg-ready :is(button, input, select, summary):focus-visible, .sg-question:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.sg-economics { border-bottom: 1px solid var(--border); margin: 1rem 0; }
.sg-economics .proyecto-box { margin-top: .5rem; }
@media (max-width: 480px) {
  .sg-ready { padding: 1rem; }
  .sg-ready .mb-reeval .btn { width: 100%; }
  .sg-ready .sg-summary-row { gap: .5rem; }
  .sg-ready .sg-summary-row > div { min-width: 0; }
}


/* H4: presupuesto en una columna y etiquetas legibles; P2/P9 del playbook. */
.mb-budget{display:grid;gap:.85rem;max-width:100%}
.mb-budget .calc-lbl{display:grid;gap:.35rem;min-width:0}
/* `min-width:0`: un <input> trae anchura intrínseca y `min-width:auto`, así que la columna
   del grid no encogía por debajo de ella. */
.mb-budget input:not([type="hidden"]){width:100%;min-width:0;max-width:22rem;box-sizing:border-box;padding:.6rem;border:1px solid var(--border);border-radius:8px;color:var(--text);background:var(--surface)}
.mb-budget input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.mb-budget p{margin:0}.mb-budget .btn{justify-self:start}

/* Reflow por debajo de 320 px CSS (móvil con zoom alto). Medido: el suelo lo imponía el
   min-content del botón «Revisar presupuesto» (142 px: la palabra más larga más 52 px de
   acolchado), que clavaba la columna del grid y sacaba todo el formulario fuera de la
   página. Se deja partir la palabra SÓLO cuando no cabe y se recorta el acolchado lateral.
   No se usa overflow-x:hidden: eso escondería el síntoma. */
@media (max-width:420px){
  .mb-budget{min-width:0}
  .mb-budget .btn{white-space:normal;overflow-wrap:break-word;min-width:0;padding-inline:1.1rem}
  .mb-budget :is(p,.calc-lbl){overflow-wrap:break-word;min-width:0}
}