/* EL PORTAL DEL CLIENTE — la hoja de estilo, compartida por las dos pantallas.
   ==========================================================================================
   Es el diseño de `portal-cliente/index.html`, la maqueta que el dueño revisó en pantalla el
   14-ago-2026, 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 .caja{background:#0f1115;padding:4px 8px;display:inline-flex;flex:none;}
.barra .caja img{height:18px;}
.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 ---------- */
.membrete{
  background:var(--papel);border:1px solid var(--linea);border-top:0;
  border-bottom:3px solid var(--marca);padding:26px 22px 18px;text-align:center;
}
.membrete img.pri{height:44px;width:auto;margin:0 auto;}
.membrete .pri-caja{background:#0f1115;padding:8px 14px;display:inline-flex;}
.membrete .pri-caja img{height:34px;width:auto;}
.membrete .sec{
  display:inline-flex;align-items:center;gap:8px;margin-top:11px;
  font-size:12px;color:var(--apagado);
}
/* 22px es el alto que ya usa el membrete de la página del cliente en index.html. A menos, el
   "RENT" del logo deja de leerse y queda un recuadro negro que no dice nada. */
.membrete .sec .caja{background:#0f1115;padding:5px 10px;display:inline-flex;}
.membrete .sec .caja img{height:22px;width:auto;}
.membrete .sec img.plano{height:20px;width:auto;}
/* 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;}
.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 ---------- */
.trabajo{background:var(--papel);border:1px solid var(--linea);margin-bottom:12px;}
.trabajo-h{padding:16px 18px 0;}
.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:12px 18px 0;padding:9px 12px;background:var(--gris);border:1px dashed var(--linea-2);
  font-size:13px;color:var(--apagado);
}

.fotos{display:flex;gap:8px;flex-wrap:wrap;padding:14px 18px 0;}
.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);}
.fotos img{width:96px;height:72px;object-fit:cover;}

.desg-btn{
  width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--linea);
  margin-top:16px;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;}

/* ---------- 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;}
.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;}
  .fotos img{width:84px;height:63px;}
  .hoja-chica{padding:22px 12px 52px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}