/* El tablero de cuartos. Cuadros grandes: se toca con el pulgar, de pie, con
   una mano ocupada. 96 px es lo que cabe cómodo en un celular angosto. */
.tablero{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
 margin:12px 0}
@media(min-width:900px){.tablero{grid-template-columns:repeat(auto-fill,minmax(116px,1fr))}}
.cuarto{border:1px solid var(--sand);border-radius:13px;overflow:hidden;background:var(--card);
 display:flex;flex-direction:column}
.cuarto .cnum{font:inherit;font-size:21px;font-weight:700;color:var(--navy);background:none;
 border:0;padding:14px 8px 4px;cursor:pointer;width:100%;line-height:1.1}
.cuarto .cest{font-size:11.5px;color:var(--ink2);padding:0 8px 10px;text-align:center}
.cuarto .clim{font:inherit;font-size:11px;font-weight:700;letter-spacing:.4px;border:0;
 padding:7px 4px;cursor:pointer;width:100%;background:var(--sand2);color:var(--ink2)}
.cuarto.e-ocupada{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.cuarto.e-ocupada .cnum{color:var(--teal)}
.cuarto.e-salida{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.cuarto.e-salida .cest{color:var(--amber);font-weight:700}
.cuarto.e-llegada{border-color:var(--pizarra);box-shadow:inset 0 0 0 1px var(--pizarra)}
.cuarto.e-bloqueada{opacity:.62}
.clim.l-sucia{background:#FBF1EF;color:var(--alarm)}
.clim.l-limpia{background:#EAF3F1;color:#1a6b57}
.clim.l-proceso{background:#FBF4E9;color:var(--amber)}

/* Aviso de respuestas guardadas y sin mandar. Va fijo abajo, encima de todo,
   porque tiene que verse desde cualquier pantalla sin estorbar la captura. */
.pendiente{display:none;position:fixed;z-index:56;
 left:calc(10px + env(safe-area-inset-left));right:calc(10px + env(safe-area-inset-right));
 bottom:calc(74px + env(safe-area-inset-bottom));
 background:var(--amber);color:#fff;border-radius:13px;padding:12px 14px;
 box-shadow:0 8px 26px rgba(22,35,44,.3);
 gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pendiente.on{display:flex}
.pendiente b{display:block;font-size:14px}
.pendiente span{display:block;font-size:12.5px;opacity:.92;margin-top:2px}
.pendiente button{flex:none;background:#fff;color:var(--amber);border:0;border-radius:9px;
 padding:9px 15px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
@media(min-width:700px){.pendiente{left:auto;right:24px;max-width:520px;bottom:24px}}

/* Aviso de "esto ya quedó en la otra pestaña". Va arriba y ocupa el ancho:
   quien acaba de llegar de su correo tiene que verlo sin buscarlo. */
.yaentraste{display:none;position:fixed;left:0;right:0;z-index:60;
 top:calc(env(safe-area-inset-top) + 8px);
 margin:0 calc(10px + env(safe-area-inset-right)) 0 calc(10px + env(safe-area-inset-left));
 background:var(--navy);color:#fff;border-radius:14px;padding:14px 16px;
 box-shadow:0 10px 30px rgba(22,35,44,.35);
 gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.yaentraste.on{display:flex}
.yaentraste b{display:block;font-size:14.5px}
.yaentraste span{display:block;font-size:12.5px;color:var(--acero);margin-top:3px;max-width:52ch}

/* Vitrina de la muestra: mirar el cuestionario de otra función. */
.vitg{display:grid;gap:8px;grid-template-columns:repeat(2,1fr);margin:10px 0 4px}
@media(min-width:700px){.vitg{grid-template-columns:repeat(3,1fr)}}
.vitb{font:inherit;font-size:13.5px;font-weight:600;text-align:left;padding:12px 14px;
 border:1px solid var(--sand);background:var(--card);color:var(--navy);border-radius:11px;
 cursor:pointer}
.vitb:hover{background:var(--sand2);border-color:var(--teal)}
.vitr{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:space-between;
 background:var(--navy);color:#fff;border-radius:13px;padding:16px 18px;
 /* Despegada del riel: pegada al menú de arriba parecía parte de él. */
 margin:14px 0 20px}
.vitr b{display:block;font-size:14.5px}
.vitr span{display:block;font-size:12.5px;color:var(--acero);margin-top:2px}
.vitr .btn{flex:none}
#ptr{position:fixed;top:calc(10px + var(--sat));left:50%;transform:translateX(-50%);
 z-index:80;background:var(--navy);color:#fff;font-size:12.5px;font-weight:700;
 padding:9px 16px;border-radius:999px;opacity:0;pointer-events:none;
 box-shadow:0 4px 14px rgba(22,35,44,.3);transition:opacity .12s}
#ptr.listo{background:var(--teal)}
.flashmsg{position:fixed;left:50%;transform:translateX(-50%);
 bottom:calc(64px + env(safe-area-inset-bottom));z-index:85;background:var(--navy);
 color:#fff;font-size:13.5px;line-height:1.45;padding:12px 18px;border-radius:12px;
 max-width:min(480px,90vw);box-shadow:0 6px 20px rgba(22,35,44,.35);
 opacity:0;transition:opacity .2s}
.flashmsg.on{opacity:1}
.qv-row{display:flex;gap:12px;align-items:center;background:var(--card);
 border:1px solid var(--sand);border-radius:12px;padding:12px 14px;margin-bottom:8px;flex-wrap:wrap}
.qv-quien{flex:1 1 150px;min-width:140px}
.qv-quien b{display:block;font-size:14px;color:var(--navy)}
.qv-quien span{font-size:11.5px;color:var(--ink2)}
.qv-med{flex:2 1 180px;min-width:150px}
.qv-barra{height:7px;border-radius:99px;background:var(--sand);overflow:hidden}
.qv-barra i{display:block;height:100%;border-radius:99px;background:var(--teal)}
.qv-barra.done i{background:var(--teal)}
.qv-barra.poco i{background:var(--amber)}
.qv-med small{display:block;font-size:11.5px;color:var(--ink2);margin-top:4px}
.qv-row .btn{margin:0;width:auto;display:inline-block;padding:8px 12px;font-size:12.5px}
.hz-nums{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.hz-nums>div{flex:1 1 110px;background:var(--card);border:1px solid var(--sand);
 border-radius:12px;padding:11px 13px;text-align:center}
.hz-nums .n{font-size:22px;font-weight:700;color:var(--navy)}
.hz-nums .n.al{color:var(--alarm)}.hz-nums .n.ok{color:var(--teal)}
.hz-nums .k{font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--ink2);font-weight:700}
.hz-mat{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.hz-mat button{font:inherit;text-align:left;border:1px solid var(--sand);background:var(--card);
 border-radius:12px;padding:12px 13px;cursor:pointer}
.hz-mat button.on{border-color:var(--teal);box-shadow:0 0 0 2px rgba(24,131,150,.15)}
.hz-mat b{display:block;font-size:13.5px;color:var(--navy)}
.hz-mat span{font-size:11.5px;color:var(--ink2)}
.hz-mat .cnt{float:right;font-weight:700;font-size:16px;color:var(--navy)}
.hz-badge{display:inline-block;font-size:10px;letter-spacing:.6px;text-transform:uppercase;
 font-weight:700;border-radius:999px;padding:3px 9px;margin-left:6px;vertical-align:2px;
 background:var(--sand2);color:var(--ink2);border:1px solid var(--sand)}
.hz-badge.riesgo{background:#FBEFEC;color:#A33A2E;border-color:#ecc9c1}
.hz-badge.qw{background:#EAF3F1;color:#1d6b52;border-color:#bfe0d4}
.hz-badge.sin{background:#FBF4E9;color:#9a6a1d;border-color:#ecd9b3}
.hz-cand{background:var(--card);border:1px dashed var(--teal);border-radius:12px;
 padding:12px 14px;margin-bottom:8px}
.hz-cand .q{font-size:13.5px;color:var(--ink);font-weight:600}
.hz-cand .d{font-size:12px;color:var(--ink2);margin-top:3px}
.hz-cand .btn{margin:8px 8px 0 0;width:auto;display:inline-block;padding:8px 12px;font-size:12.5px}
.hz-filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.hz-filtros select{font:inherit;font-size:12.5px;border:1px solid var(--sand);
 border-radius:8px;padding:7px 9px;background:var(--card);color:var(--ink)}
/* En la vitrina los controles se ven pero no se tocan. El freno de verdad está
   en responder()/abierta(); esto es para que no parezca que se puede. */
.vitrina-on .gauge,.vitrina-on .eqg,.vitrina-on .note,.vitrina-on .qty,
.vitrina-on input,.vitrina-on select,.vitrina-on textarea{pointer-events:none;opacity:.9}

/* ═══════════ Centro de ayuda ═══════════
   Va como panel encima, no como pantalla aparte: quien pide ayuda está a la
   mitad de algo, y mandarlo a otra pantalla le costaría perder el hilo (y en
   un formulario a medio llenar, el trabajo). Se abre, se lee, se cierra, y
   atrás sigue todo igual. */
.fab{position:fixed;right:calc(16px + env(safe-area-inset-right));
 bottom:calc(16px + env(safe-area-inset-bottom));z-index:55;
 background:var(--navy);color:#fff;border:0;border-radius:999px;padding:12px 18px;
 font:inherit;font-size:14px;font-weight:700;cursor:pointer;display:none;
 align-items:center;gap:8px;box-shadow:0 6px 22px rgba(22,35,44,.3)}
.fab.on{display:flex}
.fab:hover{background:var(--pizarra)}
body.conbarra .fab{bottom:calc(74px + env(safe-area-inset-bottom))}
/* La franja del sistema se guarda en una variable en vez de llamar a `env()`
   en cada regla. Es lo que permite comprobarla: en un navegador de escritorio
   `env(safe-area-inset-top)` vale 0 siempre, así que sin la variable no hay
   forma de demostrar que el encabezado se aparta de verdad — solo de suponerlo.
   Con ella se le da un valor de prueba y se mide. */
:root{--sat:env(safe-area-inset-top);--sar:env(safe-area-inset-right);
 --sal:env(safe-area-inset-left);
 /* El navy plano se sentía a bloque. Todo recuadro navy lleva ahora el mismo
    degradado horizontal —navy → pizarra con un asomo de teal— para que la
    superficie tenga dirección sin salirse de la paleta. Es imagen ENCIMA del
    color: si el degradado no carga, el navy plano sigue abajo. */
 --gnavy:linear-gradient(102deg,#1F3B4D 0%,#23445A 42%,#2C5769 78%,#1F6D82 118%);
 /* El papel tapiz lo diseñó Eduardo: un compendio de los logos y marcas que
    ha desarrollado — historia oculta de quién es y quiénes somos. Se procesa de
    su original (Descargas) con escala, atenuación al 14 % hacia el papel y
    empalme de bordes para el mosaico; el resultado es public/tapiz-ohos.png.
    Vive en una variable para vestir chat y menú por igual. */
 --tapiz:url('tapiz-ohos.png')}
header,.pie,.vitr,.finrow.big,.ayhd,.fab,.btn-n,.d2 .tile.oscuro,.pub,.menu-p h3{background-image:none}
header,.pie,.vitr,.finrow.big,.ayhd,.fab,.btn-n,.d2 .tile.oscuro,.pub{background-image:var(--gnavy)}
/* Sin `bottom`: con arriba y abajo fijados a la vez el navegador ignora
   `height`, y entonces el `100dvh` que sigue no hacía absolutamente nada. */
.ayov{position:fixed;left:0;right:0;top:0;height:100dvh;
 background:rgba(22,35,44,.55);z-index:70;display:none}
.ayov.on{display:block}
/* El panel se mide contra el hueco que deja el teclado, no contra la ventana.

   En un teléfono, `inset:0` mide la ventana COMPLETA: al abrirse el teclado la
   barra de escribir se quedaba en y≈800 de 844 y desaparecía debajo de él. Desde
   fuera eso se ve como "no sale el teclado", porque el campo recibe el foco pero
   no se puede ver lo que se escribe. `dvh` lo resuelve solo donde existe; el
   ajuste con `visualViewport` de más abajo cubre a los demás. */
.aypan{position:absolute;right:0;top:0;height:100%;width:min(520px,100%);background:var(--paper);
 display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(22,35,44,.3)}
/* El encabezado empieza donde acaba la franja del sistema. Sin esto, el título
   y la × quedaban debajo del reloj, la señal y la batería: la × caía en
   y=12–44 px y la franja de un iPhone mide 47. */
.ayhd{background:var(--navy);color:#fff;flex:none;
 padding:calc(18px + var(--sat)) calc(20px + var(--sar)) 16px calc(20px + var(--sal))}
.ayhd h2{font-size:19px;margin:0 0 3px}
.ayhd p{font-size:12.5px;color:var(--acero);margin:0}
 /* Lo primero de cada pantalla no nace pegado al riel: el saludo y los
    títulos toman aire arriba. La portada queda fuera: su lienzo navy sí debe
    llegar al borde. */
#main>.mh:first-child,#main>.res-h:first-child{margin-top:16px}
.d2 .cab2{margin-top:12px}
.ayx{position:absolute;right:calc(12px + var(--sar));top:calc(12px + var(--sat));background:rgba(255,255,255,.14);border:0;color:#fff;
 font-size:20px;line-height:1;width:32px;height:32px;border-radius:999px;cursor:pointer}
.aybus{flex:none;padding:12px 16px 4px}
.aybus input{width:100%;border:1px solid var(--sand);border-radius:10px;padding:11px 13px;
 font:inherit;font-size:15px;background:var(--card);color:var(--ink)}
.aybody{flex:1;overflow:auto;padding:10px 16px 24px}
.aygrp{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink2);
 font-weight:700;margin:16px 0 8px}
.ayart{background:var(--card);border:1px solid var(--sand);border-radius:12px;margin-bottom:8px;
 overflow:hidden}
.ayart>button{width:100%;text-align:left;background:none;border:0;font:inherit;font-size:14.5px;
 font-weight:600;color:var(--navy);padding:14px 15px;cursor:pointer;display:flex;gap:10px;
 align-items:center;line-height:1.4}
.ayart>button:hover{background:var(--sand2)}
.ayart .fl{flex:none;color:var(--teal);font-weight:700}
.aycuerpo{display:none;padding:2px 15px 15px;border-top:1px solid var(--sand)}
.ayart.on .aycuerpo{display:block}
.aycuerpo ol{margin:12px 0 0;padding-left:20px}
.aycuerpo li{font-size:14px;line-height:1.65;color:var(--ink);margin-bottom:9px}
.aycuerpo .nota{font-size:13px;color:var(--ink2);line-height:1.6;margin-top:12px;
 background:var(--sand2);border-radius:9px;padding:11px 12px}
.aywa{margin-top:14px;width:100%;background:#25D366;color:#0b3d1f;border:0;border-radius:10px;
 padding:12px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.aywa:hover{filter:brightness(1.05)}
.ayvacio{text-align:center;color:var(--ink2);font-size:14px;padding:28px 10px;line-height:1.6}
/* ── el taller de documentos (v8.9) ── */
.dtipos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.taller{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:960px){.taller{grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);align-items:start}}
.dvista{background:#fff;border-radius:14px;overflow:auto;max-height:76vh;
 box-shadow:0 2px 12px rgba(31,59,77,.12)}
.dpanel{display:flex;flex-direction:column;gap:8px}
.dfalta{display:flex;align-items:center;gap:8px;background:var(--card);
 border-radius:10px;padding:8px 12px;font-size:13.5px}
.dfalta span{flex:1}
.dsecrow{display:flex;align-items:flex-start;gap:8px;background:var(--card);
 border-radius:10px;padding:9px 12px;cursor:pointer}
.dsecrow.on{outline:2px solid var(--teal)}
.dsr-t{flex:1;min-width:0}
.dsr-t b{font-size:13.5px}
.dsr-t i{display:block;font-size:12px;color:var(--pizarra);font-style:normal}
.dsr-b{display:flex;flex-direction:column;gap:4px;flex:0 0 auto}
.ddot{width:10px;height:10px;border-radius:99px;margin-top:4px;flex:0 0 auto}
.ddot.dok{background:#1E7D46}.ddot.dmed{background:#B26A00}
.ddot.dvac{background:#C0392B}.ddot.doc-x{background:var(--acero)}
.dchat{display:flex;flex-direction:column;gap:6px;max-height:180px;overflow:auto}
.dmsg{padding:7px 11px;border-radius:12px;font-size:13px;max-width:88%}
.dmio{align-self:flex-end;background:var(--teal);color:#fff}
.dagm{align-self:flex-start;background:var(--card)}
.dchatf{display:flex;gap:8px}
.dchatf input{flex:1;min-width:0}
.dvista .dsec.docsel{outline:3px solid var(--teal);outline-offset:4px;border-radius:6px}
/* ── evidencia de limpieza (v9) ── */
.evbar{height:8px;border-radius:99px;background:var(--sand);overflow:hidden}
.evbar i{display:block;height:100%;background:var(--teal);transition:width .2s}
.evcam{width:100%;max-height:52vh;border-radius:12px;background:#000;object-fit:cover}
.evfoto{width:100%;border-radius:12px}
.evref{background:var(--card);border-radius:10px;padding:10px 12px;margin:10px 0;font-size:13.5px}