/* EL PORTAL DEL CLIENTE — la hoja de estilo, compartida por las dos pantallas.
   ==========================================================================================
   Es el diseño de `portal-cliente/index.html`, la maqueta, portado tal cual. Lo que se agregó
   abajo son los estados que una maqueta no tiene: el intersticial del canje, el presupuesto
   vencido, la evidencia que ya no está, y las
   pantallas de error — que en un documento comercial son parte del diseño, no una excepción.

   Diseño: CLARO Y SOLO CLARO, a propósito. Es un documento comercial que se lee una vez, desde
   el teléfono, con la marca de la empresa — no una aplicación que alguien configura. Todos los
   colores van escritos, así que no depende del tema del aparato: un documento que cambia de
   color según el celular del cliente no se ve como un documento.

   Geometría recta 4px, sin bordes redondeados (`AGENTS.md` §4).
   ========================================================================================== */

:root{
  --marca:#e11b22;
  --tinta:#16181c;
  --tinta-2:#3c4048;
  --apagado:#6b6f76;
  --tenue:#8d929a;
  --papel:#ffffff;
  --fondo:#eceef1;
  --gris:#f6f7f9;
  --linea:#e2e4e8;
  --linea-2:#d5d9df;
  --ok:#1f7a4d;
  --ok-fondo:#eaf6ef;
  --aviso:#8a6d3b;
  --aviso-fondo:#fdf6e6;
  --info-fondo:#eef3f8;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--fondo);color:var(--tinta);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
button{font:inherit;color:inherit;}

/* ---------- barra fija: la unidad siempre a la vista ---------- */
.barra{
  position:sticky;top:0;z-index:30;background:var(--papel);
  border-bottom:1px solid var(--linea-2);
}
.barra-in{
  max-width:680px;margin:0 auto;padding:10px 18px;
  display:flex;align-items:center;gap:12px;
}
.barra img{height:26px;width:auto;flex:none;}
.barra-u{
  font-size:13.5px;font-weight:600;color:var(--tinta);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.barra-u span{display:block;font-size:11.5px;font-weight:400;color:var(--tenue);}

.hoja{max-width:680px;margin:0 auto;padding:0 18px 64px;}
.tarjeta{background:var(--papel);border:1px solid var(--linea);}
[hidden]{display:none!important;}

/* ---------- membrete ---------- */
/* El mismo dibujo que `membrete()` del correo — los encabezados 4A/4B. El
   `.lockup` lleva los dos logos y la banda del color de la marca (el color va en línea desde
   `MARCAS`, en `membreteHTML()`; `--marca` sigue siendo el cromo del portal y no cambia por
   marca), y la base «GRUPO SDO BILMET» va DEBAJO de la banda. Los anchos de los logos también
   vienen en línea desde `MARCAS`: acá solo el layout. Las mismas reglas visten la puerta (#720). */
.membrete{
  background:var(--papel);border:1px solid var(--linea);border-top:0;text-align:center;
}
.membrete .lockup{border-bottom:3px solid var(--marca);padding:34px 22px 26px;}
.membrete img.pri,.puerta img.pri{max-width:100%;height:auto;margin:0 auto;}
.membrete .sec,.puerta .sec{
  display:inline-flex;align-items:center;gap:12px;margin-top:18px;
  font-size:13px;color:var(--apagado);
}
.membrete .sec img.plano,.puerta .sec img.plano{height:auto;}
.base-grupo{
  padding:14px 22px 16px;font-size:11px;font-weight:700;letter-spacing:3px;
  color:#1b2a4a;white-space:nowrap;
}
.base-grupo .o{color:#3355e0;}
/* La marca corporativa neutra: se usa cuando el documento NO dice de qué marca es. Se pierde una
   marca, nunca se muestra la equivocada — ver `marcaDe()` en `documento.js`. */
.membrete .neutra{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  border-bottom:3px solid var(--marca);padding:26px 22px 18px;
}
.membrete .neutra img{height:40px;width:auto;}
.membrete .neutra b{font-size:17px;letter-spacing:.02em;}

/* ---------- estado ---------- */
.estado{
  padding:14px 20px;border:1px solid var(--linea);border-top:0;
  display:flex;gap:12px;align-items:flex-start;
}
.estado-pend{background:var(--aviso-fondo);border-color:#e6d3a8;}
.estado-ok{background:var(--ok-fondo);border-color:#bfe0cd;}
.estado-aviso{background:var(--aviso-fondo);border-color:#e6d3a8;}
.estado-info{background:var(--info-fondo);border-color:#cfdcea;}
.estado-ico{font-size:19px;line-height:1.35;flex:none;}
.estado-t{font-size:15px;font-weight:700;line-height:1.35;margin:0;}
.estado-d{font-size:13.5px;line-height:1.5;margin:3px 0 0;color:var(--tinta-2);}
.estado-pend .estado-t,.estado-aviso .estado-t{color:#6b5423;}
.estado-ok .estado-t{color:#155e38;}
.estado-info .estado-t{color:#1d3d5c;}

/* ---------- encabezado del documento ---------- */
.doc{padding:24px 22px 20px;border:1px solid var(--linea);border-top:0;}
.doc h1{
  font-size:22px;line-height:1.25;letter-spacing:-.015em;font-weight:700;
  margin:0 0 4px;text-wrap:balance;
}
.doc .dir{font-size:15px;color:var(--tinta-2);margin:0 0 12px;}
.doc .meta{font-size:13px;color:var(--tenue);margin:0;line-height:1.6;}
.doc .meta strong{color:var(--apagado);font-weight:600;}

/* ---------- total ---------- */
.total{
  margin:18px 0 0;border:1px solid var(--linea-2);background:var(--gris);
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  padding:16px 18px;flex-wrap:wrap;
}
.total-k{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--apagado);margin:0 0 2px;}
.total-v{
  font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:0;
  font-variant-numeric:tabular-nums;
}
.total-desg{font-size:13px;color:var(--apagado);text-align:right;font-variant-numeric:tabular-nums;line-height:1.7;}
.total-aj{flex:1 1 100%;margin:0 0 6px;font-size:12.5px;color:var(--apagado);}
.total-aj .nota{color:var(--tenue);}
/* Autorizado, y con la plata retirada: la línea que dice DÓNDE está el monto, para que retirarlo
   no se lea como que desapareció. Ver `esVisibleLaPlataYaAutorizada()` en `documento.js`. */
.total-guardado{
  margin:18px 0 0;border:1px solid var(--linea);background:var(--gris);
  padding:14px 18px;font-size:13.5px;color:var(--apagado);line-height:1.55;
}

/* ---------- secciones ---------- */
.sec-t{
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--apagado);
  margin:26px 0 10px;font-weight:600;
}

/* ---------- trabajo ---------- */
/* `scroll-margin-top` porque la barra es PEGAJOSA: el puente del recorrido (#trabajo-N, PRD-045)
   deja el artículo en y=0 y el encabezado le tapa justo el título — o sea que el cliente aterriza
   sin ver a qué trabajo llegó, que es lo único que fue a buscar. */
.trabajo{background:var(--papel);border:1px solid var(--linea);margin-bottom:12px;scroll-margin-top:64px;}

/* ⛔ EL PADDING DE ABAJO NO ES ESTÉTICA: SIN ÉL LA ÚLTIMA FOTO QUEDA PEGADA AL BORDE DE LA
   TARJETA Y SE LEE COMO CORTADA. Muerde justo en el diagnóstico, que es la etapa SIN plata: ahí
   no hay desglose debajo, así que la tira de evidencia es el último hijo de la caja. El aire lo
   pone la caja UNA sola vez, y por eso `.desg-btn` no trae `margin-top`. */
.trabajo-h{padding:16px 18px;}
.trabajo-tit{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
}
.trabajo-tit h3{font-size:16px;font-weight:700;line-height:1.35;margin:0;text-wrap:balance;}
.trabajo-tit .v{font-size:16px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;}
.trabajo p{margin:11px 0 0;font-size:14.5px;line-height:1.6;}
.trabajo .diag{color:var(--apagado);font-size:14px;}
.trabajo .sol{color:var(--tinta-2);}
.trabajo .sol strong{color:var(--tinta);}
.trabajo .term{color:var(--ok);}
.trabajo .term strong{color:#155e38;}
.trabajo .sin-fotos{
  margin:0;padding:9px 12px;background:var(--gris);border:1px dashed var(--linea-2);
  font-size:13px;color:var(--apagado);
}

/* LAS DOS COLUMNAS: la evidencia a la izquierda, el diagnóstico a la derecha. El `.dos` lo pone
   `trabajoHTML()` solo cuando hay las dos piezas — acá no se adivina, ver el porqué en
   `documento.js`.

   ⛔ Y EN PANTALLA ANGOSTA VUELVE A APILARSE, que no es una concesión: el cliente abre esto del
   teléfono. Dos columnas de 150 px no son dos columnas — son un texto que se lee de a tres
   palabras. Se apila en el mismo corte que el resto de la hoja, abajo. */
.trabajo-cuerpo{padding-top:12px;}
.trabajo-cuerpo.dos{
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;align-items:start;
}
/* La primera capa arranca a la altura de la primera foto: el aire de arriba lo pone el cuerpo. */
.trabajo-txt p:first-child{margin-top:0;}

/* LAS FOTOS DENTRO DE SU CAPA (PRD-045, decisiones 2, 4 y 5; la maqueta
   `docs/maquetas/acta-item-por-item.html` es el contrato visual). El documento que trae `capa`
   pinta un bloque acotado por capa —texto y su tira juntos—; la rejilla `.dos` de arriba queda
   para los documentos viejos, sin capa. */
.trabajo-cuerpo.capas{display:flex;flex-direction:column;gap:12px;}
.capa-b p{margin:0 0 8px;}
/* Un bloque cuya capa no trae texto igual lleva su rótulo, para que la tira no quede huérfana. */
.capa-b .capa-solo{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--apagado);}
/* `auto-fit` como la regla base —la pista que sobra se colapsa (ver arriba)—: con `auto-fill` las
   miniaturas se quedaban pegadas al piso de 92 px y el tope de 140 no llegaba nunca. */
.capa-b .fotos{grid-template-columns:repeat(auto-fit,minmax(92px,140px));}
/* La foto del SDO reutilizada por la solución: marco punteado y su rótulo, para que siempre se
   note de quién es cada foto (decisión 2). */
.fotos button.del-sdo{position:relative;border:1px dashed var(--marca);}
.fotos button.del-sdo .sdo-tag{
  position:absolute;left:0;bottom:0;padding:1px 5px;line-height:1.4;
  font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  background:var(--marca);color:#fff;
}
/* El puente del recorrido a su trabajo (PRD-045): un enlace chico al lado del estado.
   ⛔ Y `.rec-est` deja de ser `flex:none` cuando lo lleva: con el estado y el enlace juntos sin
   poder encoger, en un teléfono de 320 px la fila se salía de la tarjeta y la hoja entera ganaba
   barrido horizontal. Se permite envolver, que es lo que ya
   hace el resto de la hoja en el corte angosto. */
.rec-lista li:has(.rec-lnk) .rec-est{flex:0 1 auto;min-width:0;text-align:right;}
.rec-est .rec-lnk{margin-left:6px;font-size:12px;color:var(--marca);white-space:nowrap;}

/* La tira de evidencia. Rejilla y no `flex-wrap` para que las miniaturas queden en columnas
   parejas dentro de su columna —dos por fila con el ancho de arriba, más en la vista apilada—
   en vez de dejar un diente al final de cada línea.

   `auto-fit` y no `auto-fill`: la pista que sobra se colapsa, así que UNA sola foto ocupa el
   ancho entero de su columna en vez de quedar chica al lado de un hueco. Un trabajo con una
   foto es el caso más común del diagnóstico, y ahí la evidencia se mira. */
.fotos{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px;}
.fotos button{
  padding:0;border:1px solid var(--linea);background:none;cursor:pointer;
  line-height:0;transition:border-color .12s ease;
}
.fotos button:hover{border-color:var(--marca);}
/* ⛔ `contain`, NUNCA `cover`. Con `cover` y alto fijo la miniatura recortaba la foto —en una
   vertical de teléfono se comía la mitad— y eso es exactamente lo que se ve como «foto cortada»
   en un documento que sostiene un diagnóstico. Acá la foto se ve ENTERA y lo que sobra del
   marco queda en gris, que se lee como marco y no como falla. El visor abre el original igual. */
.fotos img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:var(--gris);}

.desg-btn{
  width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--linea);
  padding:12px 18px;cursor:pointer;
  display:flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:600;color:var(--apagado);
}
.desg-btn:hover{color:var(--marca);}
.desg-btn .signo{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border:1px solid currentColor;font-size:13px;line-height:1;flex:none;
}
.desg{padding:0 18px 16px;}
.desg table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums;}
.desg th{
  font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--apagado);
  font-weight:600;text-align:right;padding:6px 0;border-bottom:1px solid var(--linea);
}
.desg th:first-child{text-align:left;}
.desg td{padding:7px 0;text-align:right;color:var(--tinta-2);}
.desg td:first-child{text-align:left;color:var(--tinta-2);}
.desg td+td{padding-left:12px;}
.desg .num{color:var(--apagado);white-space:nowrap;}
.desg .mont{color:var(--tinta);white-space:nowrap;}
.desg tr.sub td{border-top:1px solid var(--gris);color:var(--apagado);}
.desg tr.aj td{color:var(--apagado);}
.desg tr.aj .nota{color:var(--tenue);font-size:11.5px;font-weight:400;}
.desg tr.tot td{border-top:2px solid var(--tinta);font-weight:700;color:var(--tinta);padding-top:9px;}

/* ---------- lo diagnosticado y no cotizado ---------- */
.nocot{
  background:var(--papel);border:1px solid var(--linea);border-left:3px solid var(--linea-2);
  padding:14px 18px;margin-bottom:12px;
}
.nc-k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--apagado);margin:0 0 8px;}
.nc-p{margin:0 0 8px;font-size:13.5px;line-height:1.55;color:var(--tinta-2);}
.nc-c{color:var(--apagado);}
.nc-pie{margin:0;font-size:12.5px;line-height:1.5;color:var(--apagado);}

/* ---------- video ---------- */
.video{
  background:var(--papel);border:1px solid var(--linea);
  display:flex;gap:14px;align-items:center;padding:14px 18px;
}
.video-play{
  width:64px;height:48px;background:#0f1115;color:#fff;border:0;cursor:pointer;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:19px;
}
.video-play:hover{background:var(--marca);}
.video h3{margin:0;font-size:14.5px;font-weight:700;}
.video p{margin:2px 0 0;font-size:13px;color:var(--apagado);line-height:1.5;}
.video video{width:100%;background:#0f1115;}

/* ---------- pago ---------- */
.pago{background:var(--papel);border:1px solid var(--linea);padding:15px 18px;}
.pago h3{margin:0 0 3px;font-size:14.5px;font-weight:700;}
.pago p{margin:0;font-size:13.5px;line-height:1.55;color:var(--tinta-2);}
.pago .cond{color:var(--aviso);margin-top:5px;}
.pago .vig{color:var(--apagado);margin-top:9px;padding-top:9px;border-top:1px solid var(--linea);font-size:13px;}

/* ---------- decisión ---------- */
.decidir{
  background:var(--papel);border:1px solid var(--linea-2);border-top:3px solid var(--marca);
  padding:20px 18px;margin-top:26px;
}
.decidir h2{font-size:17px;font-weight:700;margin:0 0 4px;}
.decidir .aviso{font-size:13.5px;color:var(--apagado);margin:0 0 15px;line-height:1.55;}
.botones{display:flex;flex-direction:column;gap:9px;}
.btn{
  display:block;width:100%;padding:14px 18px;border:1px solid transparent;
  font-size:15.5px;font-weight:700;text-align:center;cursor:pointer;
  text-decoration:none;transition:background .12s ease,border-color .12s ease;
}
.btn-si{background:var(--marca);color:#fff;}
.btn-si:hover{background:#c4161c;}
.btn-no{background:var(--papel);color:var(--tinta-2);border-color:var(--linea-2);}
.btn-no:hover{border-color:var(--apagado);color:var(--tinta);}
.btn:focus-visible{outline:2px solid var(--tinta);outline-offset:2px;}
/* El botón apretado y en vuelo. No se esconde ni se cambia de texto por sorpresa: se apaga y
   dice que está trabajando, para que el segundo toque no llegue nunca. */
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:default;pointer-events:none;}

/* ---------- vencido: lo que ocupa el lugar del botón ---------- */
.vencido{
  background:var(--papel);border:1px solid var(--linea-2);border-top:3px solid var(--aviso);
  padding:20px 18px;margin-top:26px;
}
.vencido h2{font-size:17px;font-weight:700;margin:0 0 4px;color:#6b5423;}
.vencido .aviso{font-size:13.5px;color:var(--apagado);margin:0 0 12px;line-height:1.55;}
.vencido-quien{font-size:14.5px;margin:0 0 12px;}
.vencido-mail{display:block;margin-top:9px;font-size:13.5px;color:var(--apagado);text-align:center;}

/* ---------- el recorrido completo (ADR 1028) ---------- */
.rec-sec{background:var(--papel);border:1px solid var(--linea);margin-bottom:10px;}
.rec-sec h3{margin:0;padding:11px 18px;font-size:14px;border-bottom:1px solid var(--linea);}
.rec-lista{list-style:none;margin:0;padding:6px 0;}
.rec-lista li{
  display:flex;align-items:baseline;gap:10px;padding:6px 18px;font-size:13.5px;
  line-height:1.5;color:var(--tinta-2);
}
.rec-ico{width:16px;flex:none;text-align:center;font-weight:700;}
.rec-item{flex:1;}
.rec-est{flex:none;font-size:12px;color:var(--apagado);}
.rec-bien .rec-ico{color:var(--ok);}
.rec-mal .rec-ico{color:var(--marca);}
.rec-mal .rec-est{color:var(--marca);font-weight:600;}
.rec-na{color:var(--tenue);}
.rec-na .rec-ico{color:var(--tenue);}

/* ---------- interlocutor ---------- */
.quien{
  background:var(--papel);border:1px solid var(--linea);padding:16px 18px;margin-top:12px;
}
.quien .k{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--apagado);margin:0 0 6px;}
.quien .n{font-size:15.5px;font-weight:700;margin:0;}
.quien .c{font-size:13px;color:var(--apagado);margin:1px 0 9px;}
.quien a{
  display:inline-block;font-size:15px;font-weight:600;color:var(--marca);text-decoration:none;
}
.quien a:hover{text-decoration:underline;}
.quien .mail{font-size:13.5px;font-weight:400;color:var(--apagado);display:block;margin-top:3px;}

/* El teléfono ANTES de que el cliente diga algo: se ve entero y se puede copiar, pero no es
   un enlace. No es un candado —el número está a la vista— sino el orden de dos pasos: primero
   queda escrito en el presupuesto, después hablamos. Ver `habilitarContacto()`. */
.quien .fono{
  font-size:15px;font-weight:600;color:var(--marca);margin:0;
  display:inline-block;
}
.quien-nota{
  font-size:12.5px;line-height:1.55;color:var(--apagado);margin:9px 0 0;
  border-top:1px solid var(--linea);padding-top:9px;
}
.quien-cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.quien-cta .ct{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1 1 148px;
  padding:11px 14px;font-size:14.5px;font-weight:700;text-decoration:none;
  border:1px solid var(--marca);color:var(--papel);background:var(--marca);
}
.quien-cta .ct.wa{background:#128c7e;border-color:#128c7e;}
.quien-cta .ct:hover{text-decoration:none;opacity:.9;}

/* ---------- pie ---------- */
.pie{text-align:center;padding:26px 18px 0;color:var(--tenue);font-size:12.5px;line-height:1.7;}
.pie .lema{font-style:italic;font-size:13px;margin:0 0 5px;}
.pie a{color:var(--tenue);text-decoration:none;}

/* ---------- visor de fotos ---------- */
.visor{
  position:fixed;inset:0;z-index:50;background:rgba(10,11,13,.94);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;
}
.visor img{max-width:min(1100px,100%);max-height:calc(100vh - 132px);object-fit:contain;}
.visor-pie{color:#d6d9de;font-size:13.5px;text-align:center;margin-top:14px;max-width:640px;}
.visor-nav{display:flex;gap:10px;margin-top:14px;}
.visor-nav button,.visor-x{
  background:none;border:1px solid #4a4f57;color:#e8eaee;cursor:pointer;
  padding:9px 16px;font-size:14px;font-weight:600;
}
.visor-nav button:hover,.visor-x:hover{border-color:#e8eaee;}
.visor-nav button[disabled]{opacity:.35;cursor:default;border-color:#33373d;}
.visor-x{position:absolute;top:14px;right:14px;padding:7px 13px;}

/* ---------- modal ---------- */
.modal{
  position:fixed;inset:0;z-index:60;background:rgba(10,11,13,.6);
  display:flex;align-items:center;justify-content:center;padding:18px;
}
.modal-caja{background:var(--papel);max-width:460px;width:100%;border-top:3px solid var(--marca);}
.modal-in{padding:22px 22px 20px;}
.modal h2{margin:0 0 10px;font-size:19px;font-weight:700;line-height:1.3;}
.modal p{margin:0 0 13px;font-size:14.5px;line-height:1.6;color:var(--tinta-2);}
.modal .monto{
  background:var(--gris);border:1px solid var(--linea);padding:12px 15px;margin:0 0 15px;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
}
.modal .monto span{font-size:13.5px;color:var(--apagado);}
.modal .monto strong{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;}
.modal textarea{
  width:100%;min-height:104px;padding:11px 12px;border:1px solid var(--linea-2);
  font:inherit;font-size:14.5px;line-height:1.55;resize:vertical;color:var(--tinta);
  background:var(--papel);
}
.modal textarea:focus{outline:2px solid var(--marca);outline-offset:-1px;border-color:var(--marca);}
.modal-pie{display:flex;gap:9px;flex-wrap:wrap;}
.modal-pie .btn{flex:1 1 150px;width:auto;padding:12px 16px;font-size:14.5px;}

/* ---------- sobre QUÉ es la duda (espeja `openClienteAclaracion()` de index.html) ----------
   El cliente marca puntos o marca toda la cotización. Cada punto repite su diagnóstico y su
   solución: el PRD-016 §4 llama "pedir la aclaración a ciegas" a mostrar solo el título, y es
   un defecto con consecuencia — objetar el hallazgo y objetar el arreglo son cosas distintas,
   y se resuelven en lados distintos de la empresa. */
.dud-lista{
  border:1px solid var(--linea-2);max-height:34vh;overflow:auto;margin:0 0 14px;background:var(--papel);
}
.dud-toda{
  display:flex;gap:9px;align-items:center;padding:11px 13px;cursor:pointer;
  font-size:14.5px;font-weight:700;background:var(--gris);border-bottom:1px solid var(--linea-2);
}
.dud-item{border-bottom:1px solid var(--linea);}
.dud-item:last-child{border-bottom:0;}
.dud-item > label{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;cursor:pointer;}
.dud-item input[type=checkbox],.dud-toda input[type=checkbox]{
  width:17px;height:17px;flex:0 0 auto;margin:0;accent-color:var(--marca);cursor:pointer;
}
.dud-item input[type=checkbox]{margin-top:2px;}
.dud-item .t{font-size:14.5px;font-weight:600;line-height:1.4;color:var(--tinta);display:block;}
.dud-item .d{font-size:13px;line-height:1.5;color:var(--apagado);display:block;margin-top:3px;}
.dud-item .s{font-size:13px;line-height:1.5;color:var(--tinta-2);display:block;margin-top:2px;}
.dud-item.no .t,.dud-item.no .d,.dud-item.no .s{color:var(--tenue);}
.dud-item .porque{padding:0 13px 12px 39px;}
.dud-item .porque textarea{min-height:62px;font-size:14px;}
.dud-lbl{display:block;font-size:14px;font-weight:600;margin:0 0 6px;color:var(--tinta);}
.dud-lbl span{font-weight:400;color:var(--apagado);}
.dud-err{
  margin:10px 0 0;padding:9px 12px;background:#fdecec;border-left:3px solid var(--marca);
  font-size:13.5px;line-height:1.5;color:#8a1c20;
}

/* ==========================================================================================
   LO QUE LA MAQUETA NO TENÍA — el intersticial, la espera y los caminos que no salen bien.
   ========================================================================================== */

/* ---------- la hoja chica: el intersticial y las pantallas de mensaje ---------- */
.hoja-chica{max-width:460px;margin:0 auto;padding:34px 18px 64px;}
.puerta{
  background:var(--papel);border:1px solid var(--linea-2);border-top:3px solid var(--marca);
  padding:26px 22px 22px;text-align:center;
}
.puerta img.marca{height:52px;width:auto;margin:0 auto 14px;}
.puerta .casa{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--apagado);margin:0 0 16px;}
/* La puerta CON marca (#720): el mismo dibujo del membrete del documento —`membreteHTML()` de
   `documento.js`, los encabezados 4A/4B— con la base del grupo. La tarjeta ya trae su
   borde superior del color de la marca (lo pone `entrar.js`), así que el `.lockup` acá no lleva
   banda; el resto de las reglas son las del membrete, más arriba. */
.puerta .lockup{border-bottom:0;padding:0;}
.puerta .base-grupo{padding:12px 0 16px;}
.puerta h1{font-size:20px;line-height:1.3;font-weight:700;margin:0 0 8px;text-wrap:balance;}
.puerta p{font-size:14.5px;line-height:1.6;color:var(--tinta-2);margin:0 0 16px;}
.puerta p.fino{font-size:13px;color:var(--apagado);}
.puerta .btn{margin-top:4px;}
.puerta .acuse{
  margin:14px 0 0;padding:12px 14px;background:var(--ok-fondo);border:1px solid #bfe0cd;
  font-size:13.5px;line-height:1.55;color:#155e38;text-align:left;
}
.puerta .malo{
  margin:0 0 16px;padding:12px 14px;background:var(--aviso-fondo);border:1px solid #e6d3a8;
  font-size:13.5px;line-height:1.55;color:#6b5423;text-align:left;
}

/* ---------- la escotilla del webview ----------
   El botón del correo abierto dentro de la aplicación de Gmail no siempre puede poner una cookie
   de sesión, y ahí el canje se pierde sin decir por qué. Misma escotilla que el ingreso del
   equipo (ADR 0002): la dirección a la vista, para copiarla al navegador de verdad. */
.escotilla{
  margin-top:18px;border-top:1px solid var(--linea);padding-top:14px;text-align:left;
}
.escotilla summary{
  font-size:13.5px;font-weight:600;color:var(--apagado);cursor:pointer;list-style:none;
}
.escotilla summary::-webkit-details-marker{display:none;}
.escotilla summary::before{content:"↗ ";}
.escotilla summary:hover{color:var(--marca);}
.escotilla p{font-size:13px;color:var(--apagado);margin:10px 0 8px;line-height:1.55;}
.escotilla code{
  display:block;background:var(--gris);border:1px solid var(--linea);padding:10px 12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;
  color:var(--tinta-2);word-break:break-all;user-select:all;line-height:1.5;
}
.escotilla button{
  margin-top:9px;padding:9px 14px;background:var(--papel);border:1px solid var(--linea-2);
  font-size:13.5px;font-weight:600;color:var(--tinta-2);cursor:pointer;width:100%;
}
.escotilla button:hover{border-color:var(--apagado);color:var(--tinta);}

/* ---------- la espera y los errores de la pantalla del documento ---------- */
.cargando{
  max-width:680px;margin:0 auto;padding:64px 18px;text-align:center;
  color:var(--apagado);font-size:14.5px;
}
.aviso-pantalla{
  background:var(--papel);border:1px solid var(--linea-2);border-top:3px solid var(--marca);
  padding:24px 22px;margin:34px 0;
}
.aviso-pantalla h1{font-size:19px;font-weight:700;margin:0 0 8px;line-height:1.3;}
.aviso-pantalla p{font-size:14.5px;line-height:1.6;color:var(--tinta-2);margin:0 0 14px;}
.aviso-pantalla p:last-child{margin-bottom:0;}

@media (max-width:520px){
  .hoja{padding:0 12px 52px;}
  .barra-in{padding:9px 12px;}
  .doc,.membrete,.estado,.decidir,.pago,.quien,.vencido{padding-left:16px;padding-right:16px;}
  .total{padding:14px 16px;}
  .total-v{font-size:26px;}
  /* Apiladas: la evidencia arriba y el diagnóstico debajo, en el orden en que están escritas. */
  .trabajo-cuerpo.dos{grid-template-columns:minmax(0,1fr);gap:12px;}
  .fotos{grid-template-columns:repeat(auto-fit,minmax(84px,1fr));}
  /* Con la misma especificidad que `.capa-b .fotos`, o el corte del teléfono no alcanzaría a las
     tiras por capa y este bloque sería letra muerta para el render nuevo. */
  .capa-b .fotos{grid-template-columns:repeat(auto-fit,minmax(84px,1fr));}
  .hoja-chica{padding:22px 12px 52px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}