/* Hallazgos de obra · Estructurar Futuro
   El acta 2.0 hecha pantalla: papel blanco, franja azul con línea naranja, rótulos Karla en
   mayúsculas espaciadas, títulos en Libre Baskerville. Claro a propósito: se usa de día, en
   obra, muchas veces al sol. */

@font-face{font-family:Karla;font-weight:400;font-display:swap;src:url(fuentes/karla-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Karla;font-weight:500;font-display:swap;src:url(fuentes/karla-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Karla;font-weight:700;font-display:swap;src:url(fuentes/karla-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Libre Baskerville";font-weight:400;font-display:swap;src:url(fuentes/libre-baskerville-latin-400-normal.woff2) format("woff2")}

:root{
  color-scheme:light;
  --azul:#193C6E;
  --azul-hondo:#12305A;
  --azul-claro:#8FB2DC;
  --azul-tinte:#EDF1F7;
  --azul-linea:#C3CEDD;
  --linea-suave:#DCE3EC;
  --naranja:#ED6C3E;
  --naranja-hondo:#D2552A;
  --naranja-texto:#B4471A;
  --tinta:#1B2433;
  --gris:#5E6979;
  --papel:#FFFFFF;
  --fondo:#F3F5F8;
  --hundido:#0C1119;

  /* sellos del acta */
  --b-fondo:#E2EAF5; --b-tinta:#193C6E;
  --r-fondo:#FCEFD6; --r-tinta:#7F5200; --r-borde:#E9C27A;
  --m-fondo:#FBE3DA; --m-tinta:#A3341A; --m-borde:#EFA58C;
  --na-fondo:#ECEFF3; --na-tinta:#5E6979;
  --ok-fondo:#DDF0E5; --ok-tinta:#1E6B47;

  --radio:6px;
  --sombra:0 1px 2px rgba(18,48,90,.08),0 6px 20px rgba(18,48,90,.10);
  --sombra-alta:0 2px 6px rgba(12,17,25,.12),0 18px 48px rgba(12,17,25,.22);
  --salida:cubic-bezier(.23,1,.32,1);
  --cajon:cubic-bezier(.32,.72,0,1);
  --franja:56px;
  --pulgar:92px;
  --arriba:env(safe-area-inset-top,0px);
  --abajo:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--fondo)}
body{font-family:Karla,"Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.45;color:var(--tinta);background:var(--fondo);
  min-height:100dvh;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
::selection{background:#FBD5C4;color:var(--tinta)}
input,textarea,select,button{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
img{display:block;max-width:100%}
:focus-visible{outline:2.5px solid var(--naranja);outline-offset:2px;border-radius:4px}
[hidden]{display:none !important}
.ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

#app{min-height:100dvh;display:flex;flex-direction:column}

/* ---------- Franja azul de arriba, como el acta ---------- */
.franja{position:sticky;top:0;z-index:20;background:var(--azul);color:#fff;padding-top:var(--arriba)}
.franja::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--naranja)}
.franja-fila{height:var(--franja);display:flex;align-items:center;gap:4px;padding:0 6px 4px}
.franja .logo{height:26px;width:auto;color:#fff;margin-left:10px;display:block}
.franja .logo svg{height:100%;width:auto;display:block}
.franja h1{font-family:"Libre Baskerville",Georgia,serif;font-weight:400;font-size:19px;line-height:1.15;letter-spacing:-.01em}
.franja .titulos{flex:1;min-width:0;padding:0 4px}
.franja .titulos b{display:block;font-weight:700;font-size:17px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.franja .titulos span{display:block;font-size:13px;color:var(--azul-claro);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.franja .btn-icono{color:#fff}
.franja .contador{font-weight:700;font-size:17px;color:var(--naranja);white-space:nowrap;padding:0 6px;font-variant-numeric:tabular-nums}
.franja .contador small{font-size:13px;font-weight:500;color:var(--azul-claro)}
.franja .btn-franja{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-weight:700;font-size:15px;transition:transform 140ms var(--salida),background-color 140ms ease}
.franja .btn-franja:active{transform:scale(.96);background:rgba(255,255,255,.2)}
.franja .btn-franja .ico{width:20px;height:20px}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 20px;border-radius:var(--radio);font-weight:700;font-size:17px;line-height:1.1;transition:transform 140ms var(--salida),background-color 160ms ease,box-shadow 160ms ease}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn-pri{background:var(--naranja);color:#fff;box-shadow:0 1px 0 var(--naranja-hondo)}
.btn-pri:active{background:var(--naranja-hondo)}
.btn-azul{background:var(--azul);color:#fff}
.btn-sec{background:var(--papel);color:var(--azul);border:1px solid var(--azul-linea)}
.btn-peligro{background:var(--m-tinta);color:#fff}
.btn-ancho{width:100%}
.btn-chico{min-height:40px;padding:0 14px;font-size:15px}
.btn-icono{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:999px;color:var(--azul);transition:transform 140ms var(--salida),background-color 140ms ease}
.btn-icono:active{transform:scale(.92);background:rgba(127,150,190,.18)}
.btn-texto{color:var(--azul);font-weight:700;padding:10px 4px;min-height:44px;display:inline-flex;align-items:center;gap:6px}
@media (hover:hover) and (pointer:fine){
  .btn-pri:hover{background:var(--naranja-hondo)}
  .btn-sec:hover{background:var(--azul-tinte)}
  .btn-icono:hover{background:rgba(127,150,190,.14)}
}

/* ---------- Rótulos y secciones ---------- */
.rotulo{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gris)}
.seccion-cab{display:flex;align-items:baseline;gap:10px;margin:28px 0 12px}
.seccion-cab .n{font-weight:700;font-size:17px;color:var(--naranja-texto);font-variant-numeric:tabular-nums}
.seccion-cab h2{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--azul)}
.seccion-cab .nota{margin-left:auto;font-size:13px;color:var(--gris)}
.contenido{padding:4px 16px calc(120px + var(--abajo));max-width:720px;width:100%;margin:0 auto}

/* ---------- Casillas tipo acta: rótulo arriba, valor abajo ---------- */
.rejilla{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));background:var(--papel);border:1px solid var(--azul-linea);border-radius:var(--radio);overflow:hidden}
.casilla{position:relative;grid-column:span 6;display:flex;flex-direction:column;padding:9px 12px 6px;border-bottom:1px solid var(--linea-suave);min-width:0}
.casilla.s3{grid-column:span 3}.casilla.s2{grid-column:span 2}.casilla.s4{grid-column:span 4}
.casilla.der{border-right:1px solid var(--linea-suave)}
.casilla:last-child{border-bottom:0}
.casilla label,.casilla .rotulo{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.casilla label i{font-style:normal;font-weight:400;letter-spacing:0;text-transform:none}
.casilla input,.casilla textarea,.casilla select{border:0;background:none;padding:4px 0 2px;font-size:17px;min-height:34px;width:100%;caret-color:var(--naranja);outline:none;border-radius:0}
.casilla textarea{resize:none;min-height:84px;line-height:1.45}
.casilla:focus-within{background:var(--azul-tinte)}
.casilla:focus-within label{color:var(--azul)}
.casilla .fijo{font-weight:700;color:var(--azul);padding:6px 0 4px}
.casilla .con-boton{display:flex;align-items:flex-start;gap:6px}
.casilla .con-boton textarea{flex:1}
::placeholder{color:#8A93A1;opacity:1}

/* Fichas para escoger (tipo de visita, ciudad, proyecto) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--papel);border:1px solid var(--azul-linea);color:var(--azul);font-weight:700;font-size:16px;transition:transform 140ms var(--salida),background-color 140ms ease,border-color 140ms ease,color 140ms ease}
.chip:active{transform:scale(.96)}
.chip[aria-pressed="true"]{background:var(--azul);border-color:var(--azul);color:#fff}
.chip .ico{width:18px;height:18px}

.opciones{display:grid;gap:10px}
.opcion{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;text-align:left;padding:16px;border-radius:var(--radio);background:var(--papel);border:1px solid var(--azul-linea);transition:transform 140ms var(--salida),border-color 140ms ease,background-color 140ms ease}
.opcion:active{transform:scale(.985)}
.opcion .marca{grid-row:span 2;width:24px;height:24px;border-radius:50%;border:2px solid var(--azul-linea);display:grid;place-items:center}
.opcion b{font-size:18px;color:var(--tinta)}
.opcion span{font-size:15px;color:var(--gris)}
.opcion[aria-pressed="true"]{border-color:var(--azul);background:var(--azul-tinte);box-shadow:inset 0 0 0 1px var(--azul)}
.opcion[aria-pressed="true"] .marca{border-color:var(--azul);background:var(--azul);box-shadow:inset 0 0 0 4px var(--azul-tinte)}

/* ---------- Inicio ---------- */
.inicio-saludo{padding:22px 16px 6px;max-width:720px;margin:0 auto;width:100%}
.inicio-saludo h1{font-family:"Libre Baskerville",Georgia,serif;font-weight:400;font-size:26px;line-height:1.2;letter-spacing:-.015em;color:var(--azul)}
.inicio-saludo p{color:var(--gris);margin-top:6px;font-size:16px}
.lista{background:var(--papel);border:1px solid var(--azul-linea);border-radius:var(--radio);overflow:hidden}
.fila{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 12px 14px 14px;border-bottom:1px solid var(--linea-suave);min-height:64px;transition:background-color 120ms ease}
.fila:last-child{border-bottom:0}
.fila:active{background:var(--azul-tinte)}
.fila .cuerpo{flex:1;min-width:0}
.fila .cuerpo b{display:block;font-size:17px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila .cuerpo span{display:block;font-size:14px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila .derecha{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.fila > .ico{color:var(--azul-linea)}
.miniatura{width:52px;height:52px;border-radius:4px;object-fit:cover;background:var(--hundido);flex:none}
.miniatura.vacia{display:grid;place-items:center;color:var(--azul-claro);background:var(--azul-tinte)}
.dias{font-size:13px;font-weight:700;color:var(--gris);white-space:nowrap}
.dias.vencido{color:var(--naranja-texto)}
.local-cab{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:12px 14px 8px;background:var(--azul-tinte);border-bottom:1px solid var(--linea-suave)}
.local-cab b{font-size:15px;color:var(--azul)}
.local-cab span{font-size:13px;color:var(--gris)}

/* Sellos: tipo de visita, estado B/R/M/N/A y resultado */
.sello{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;border-radius:4px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.sello.tipo{background:var(--azul-tinte);color:var(--azul)}
.sello.ok{background:var(--ok-fondo);color:var(--ok-tinta)}
.sello.medio{background:var(--r-fondo);color:var(--r-tinta)}
.sello.malo{background:var(--m-fondo);color:var(--m-tinta)}
.sello.borrador{background:var(--na-fondo);color:var(--na-tinta)}

.vacio{padding:28px 20px;text-align:left;background:var(--papel);border:1px dashed var(--azul-linea);border-radius:var(--radio)}
.vacio h3{font-family:"Libre Baskerville",Georgia,serif;font-weight:400;font-size:20px;color:var(--azul);margin-bottom:8px}
.vacio ol{padding-left:20px;color:var(--gris);font-size:16px;display:grid;gap:4px}

/* Barra fija de abajo, al alcance del pulgar */
.barra-abajo{position:fixed;left:0;right:0;bottom:0;z-index:15;padding:12px 16px calc(12px + var(--abajo));background:linear-gradient(to top,var(--fondo) 70%,rgba(243,245,248,0))}
.barra-abajo .btn{width:100%;max-width:688px;margin:0 auto;display:flex;min-height:58px;font-size:18px}

/* ==========================================================================
   El recorrido: el mazo de fichas
   ========================================================================== */
.recorrido{height:100dvh;overflow:hidden;display:flex;flex-direction:column;background:var(--fondo)}
.mazo{flex:1;min-height:0;overflow:hidden;position:relative;touch-action:pan-y}
.pista{display:flex;height:100%;will-change:transform;transition:transform 220ms var(--salida)}
.pista.arrastrando{transition:none}
.ficha{flex:0 0 100%;height:100%;overflow-y:auto;overscroll-behavior:contain;padding:12px 12px 16px;display:flex;flex-direction:column;gap:12px}
.ficha-hoja{background:var(--papel);border-radius:8px;box-shadow:var(--sombra);overflow:hidden;display:flex;flex-direction:column;flex:1 0 auto}

/* la foto toma el alto que sobre: el texto y los sellos quedan cerca del pulgar */
.ficha-foto{position:relative;flex:1 1 42dvh;min-height:220px;background:var(--hundido)}
.ficha-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ficha-foto .ver{position:absolute;inset:0}
.ficha-num{position:absolute;left:12px;top:12px;background:var(--azul);color:#fff;font-weight:700;font-size:16px;padding:5px 10px 4px;border-radius:4px;font-variant-numeric:tabular-nums;letter-spacing:.02em;pointer-events:none}
.ficha-num::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--naranja);border-radius:0 0 2px 2px}
.ficha-nfotos{position:absolute;right:12px;top:12px;background:rgba(12,17,25,.62);color:#fff;font-size:13px;font-weight:700;padding:5px 10px;border-radius:999px;pointer-events:none}
.ficha-mas-foto{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--azul);font-weight:700;font-size:15px;box-shadow:0 2px 10px rgba(0,0,0,.25);transition:transform 140ms var(--salida)}
.ficha-mas-foto:active{transform:scale(.95)}
.ficha-sin-foto{position:absolute;inset:14px;border:2px dashed rgba(143,178,220,.55);border-radius:8px;display:grid;place-content:center;justify-items:center;gap:10px;color:var(--azul-claro);text-align:center;font-weight:700;font-size:17px}
.ficha-sin-foto .ico{width:44px;height:44px;stroke-width:1.5}
.ficha-sin-foto small{display:block;font-weight:400;font-size:14px;color:#9FB3CE}
.ficha-tira{display:flex;gap:6px;padding:8px 12px 0;overflow-x:auto;scrollbar-width:none}
.ficha-tira button{flex:none;width:56px;height:56px;border-radius:4px;overflow:hidden;background:var(--hundido);outline-offset:1px}
.ficha-tira img{width:100%;height:100%;object-fit:cover}

.ficha-texto{padding:12px 14px 4px;position:relative}
.ficha-texto textarea{width:100%;border:0;resize:none;background:none;font-size:19px;line-height:1.4;min-height:84px;caret-color:var(--naranja);outline:none;color:var(--tinta)}
.ficha-texto.sin-arriba{padding-top:0}
.ficha-texto .original{font-size:19px;line-height:1.4}
.ficha-texto .meta{margin-top:8px}
.ficha-texto textarea.nota{font-size:17px;min-height:56px;border-top:1px dashed var(--linea-suave);padding-top:8px}
.sello-btn.vencida,.sello-btn.vencida .ico{color:var(--naranja-texto)}
.casilla.suelta{border:1px dashed var(--azul-linea);border-radius:var(--radio);margin-top:12px}

.sellos{display:flex;flex-wrap:wrap;gap:8px;padding:6px 12px 14px}
.sello-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:var(--radio);border:1px solid var(--azul-linea);background:var(--papel);color:var(--azul);font-weight:700;font-size:15px;max-width:100%;transition:transform 140ms var(--salida),background-color 140ms ease}
.sello-btn:active{transform:scale(.96)}
.sello-btn .ico{width:18px;height:18px;color:var(--gris)}
.sello-btn .n{color:var(--azul);font-variant-numeric:tabular-nums}
.sello-btn .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sello-btn.vacio-el{border-style:dashed;color:var(--gris)}
/* elemento propuesto por lo dictado: azul, el naranja queda para la acción principal y lo vencido */
.sello-btn.sugerido{border:1.5px solid var(--azul);background:var(--azul-tinte)}
.gravedad{display:inline-flex;border:1px solid var(--azul-linea);border-radius:var(--radio);overflow:hidden;min-height:44px}
.gravedad button{min-width:48px;padding:0 12px;font-weight:700;font-size:15px;color:var(--gris);transition:background-color 140ms ease,color 140ms ease}
.gravedad button + button{border-left:1px solid var(--azul-linea)}
.gravedad button[aria-pressed="true"][data-g="R"]{background:var(--r-fondo);color:var(--r-tinta)}
.gravedad button[aria-pressed="true"][data-g="M"]{background:var(--m-fondo);color:var(--m-tinta)}
.ficha-pie{display:flex;justify-content:space-between;align-items:center;padding:0 4px;color:var(--gris);font-size:13px}

/* Ficha de un pendiente de la visita anterior */
.ficha-revision .franja-previa{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--r-fondo);color:var(--r-tinta);font-weight:700;font-size:14px}
.ficha-revision .franja-previa.ok{background:var(--ok-fondo);color:var(--ok-tinta)}
.ficha-revision .franja-previa .ico{width:18px;height:18px}
.antes-despues{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--hundido)}
.antes-despues figure{position:relative;height:clamp(180px,30dvh,300px)}
.antes-despues img{width:100%;height:100%;object-fit:cover}
.antes-despues figcaption{position:absolute;left:8px;bottom:8px;background:rgba(12,17,25,.7);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:4px}
.antes-despues button.falta{width:100%;height:100%}
.antes-despues .falta{display:grid;place-content:center;justify-items:center;gap:6px;color:var(--azul-claro);font-weight:700;font-size:14px;text-align:center;padding:10px}
.decision{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:4px 12px 14px}
.decision .btn{min-height:56px;font-size:16px}
/* sin escoger: borde; escogido: lleno, para que se vea cuál quedó */
.btn-ok{background:var(--papel);color:var(--ok-tinta);border:1.5px solid var(--ok-tinta)}
.btn-pend{background:var(--papel);color:var(--r-tinta);border:1.5px solid var(--r-borde)}
.btn-ok[aria-pressed="true"]{background:var(--ok-tinta);color:#fff}
.btn-pend[aria-pressed="true"]{background:var(--r-fondo);border-color:var(--r-tinta)}

/* Ficha final: terminar */
.ficha-final{justify-content:center}
.ficha-final .ficha-hoja{padding:24px 20px;gap:14px}
.ficha-final h2{font-family:"Libre Baskerville",Georgia,serif;font-weight:400;font-size:22px;color:var(--azul);line-height:1.25}
.ficha-final p{color:var(--gris)}
.cuenta{display:flex;flex-wrap:wrap;gap:8px}

/* Puntos del mazo */
.puntos{display:flex;justify-content:center;align-items:center;gap:6px;height:22px;flex:none;padding:0 16px;overflow:hidden}
.puntos i{width:7px;height:7px;border-radius:50%;background:var(--azul-linea);flex:none;transition:background-color 200ms ease}
.puntos i.prev{background:var(--r-borde)}
.puntos i.fin{background:transparent;border:1.5px solid var(--azul-linea)}
.puntos i.activo{background:var(--azul);width:20px;border-radius:4px}

/* Barra del pulgar */
.pulgar{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:8px 14px calc(10px + var(--abajo));background:var(--papel);border-top:1px solid var(--linea-suave);min-height:var(--pulgar)}
.pulgar .lado{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:64px;justify-content:center;border-radius:var(--radio);color:var(--azul);font-weight:700;font-size:13px;letter-spacing:.04em;transition:transform 140ms var(--salida),background-color 140ms ease}
.pulgar .lado:active{transform:scale(.95);background:var(--azul-tinte)}
.pulgar .lado .ico{width:28px;height:28px}
.pulgar .lado:disabled{opacity:.4}
.obturador{width:76px;height:76px;border-radius:50%;background:var(--naranja);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 4px var(--papel),0 0 0 5.5px var(--azul-linea),0 4px 12px rgba(18,48,90,.22);transition:transform 140ms var(--salida),background-color 140ms ease}
.obturador:active{transform:scale(.93);background:var(--naranja-hondo)}
.obturador .ico{width:34px;height:34px;stroke-width:1.7}

/* Micrófono escuchando: un anillo que late */
.lado.escuchando{color:var(--naranja-texto)}
.lado .mic{position:relative;display:grid;place-items:center}
.lado.escuchando .mic::before{content:"";position:absolute;inset:-9px;border-radius:50%;background:rgba(237,108,62,.18);animation:latido 1.1s var(--salida) infinite}
@keyframes latido{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.35);opacity:0}}

/* ==========================================================================
   Hojas que suben desde abajo
   ========================================================================== */
dialog.hoja{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:640px;margin-inline:auto;max-height:88dvh;border:0;padding:0 0 var(--abajo);background:var(--papel);color:var(--tinta);border-radius:14px 14px 0 0;box-shadow:var(--sombra-alta);display:flex;flex-direction:column;
  transform:translateY(0);transition:transform 260ms var(--cajon),overlay 260ms allow-discrete,display 260ms allow-discrete}
dialog.hoja:not([open]){display:none}
@starting-style{dialog.hoja[open]{transform:translateY(100%)}}
dialog.hoja.cerrando{transform:translateY(100%);transition-duration:180ms;transition-timing-function:ease-in}
dialog.hoja::backdrop{background:rgba(12,17,25,.45);transition:background-color 220ms ease}
@starting-style{dialog.hoja[open]::backdrop{background:rgba(12,17,25,0)}}
.hoja-asa{width:40px;height:5px;border-radius:3px;background:var(--linea-suave);margin:8px auto 0;flex:none}
.hoja-cab{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 18px;flex:none}
.hoja-cab h2{flex:1;font-family:"Libre Baskerville",Georgia,serif;font-weight:400;font-size:19px;color:var(--azul)}
.hoja-cuerpo{overflow-y:auto;overscroll-behavior:contain;padding:0 16px 18px}
.hoja-texto{color:var(--gris);margin:4px 2px 18px}
.hoja-botones{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grupo-el{margin-top:14px}
.grupo-el h3{display:flex;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--azul);padding:0 4px 6px}
.grupo-el h3 i{font-style:normal;color:var(--naranja-texto)}
.el-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:0 12px;text-align:left;border-bottom:1px solid var(--linea-suave);font-size:17px;transition:background-color 120ms ease}
.el-btn:active{background:var(--azul-tinte)}
.el-btn .n{width:26px;text-align:right;font-weight:700;color:var(--gris);font-variant-numeric:tabular-nums;flex:none}
.el-btn[aria-pressed="true"]{color:var(--azul);font-weight:700;background:var(--azul-tinte)}
.el-btn .ico{margin-left:auto;color:var(--azul)}
.sugerencia{display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--radio);background:#FFF4EE;border:1px solid #F6C6B1;margin-top:6px}
.sugerencia span{flex:1;font-size:15px;color:var(--naranja-texto);font-weight:700}
.lista-opciones{display:grid;gap:8px}
.lista-opciones .btn{justify-content:flex-start}

/* Visor de fotos */
dialog.visor{position:fixed;inset:0;margin:0;width:100%;height:100dvh;max-width:none;max-height:none;border:0;background:var(--hundido);color:#fff;display:flex;flex-direction:column;padding:var(--arriba) 0 var(--abajo)}
dialog.visor:not([open]){display:none}
dialog.visor::backdrop{background:var(--hundido)}
.visor-cab{display:flex;align-items:center;justify-content:space-between;padding:4px 6px}
.visor-cab .btn-icono{color:#fff}
.visor-cab span{font-size:14px;color:var(--azul-claro)}
.visor img{flex:1;min-height:0;width:100%;object-fit:contain}

/* Firma */
dialog.firma-pantalla{position:fixed;inset:0;margin:0;width:100%;height:100dvh;max-width:none;max-height:none;border:0;background:var(--fondo);display:flex;flex-direction:column;padding:var(--arriba) 0 var(--abajo);opacity:1;transition:opacity 160ms ease}
dialog.firma-pantalla:not([open]){display:none}
@starting-style{dialog.firma-pantalla[open]{opacity:0}}
dialog.firma-pantalla.cerrando{opacity:0}
.firma-cab{display:flex;align-items:center;gap:8px;padding:8px 10px}
.firma-quien{flex:1;min-width:0}
.firma-quien b{display:block;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--azul)}
.firma-quien span{display:block;font-family:"Libre Baskerville",Georgia,serif;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.firma-lienzo{flex:1;position:relative;margin:4px 12px;background:var(--papel);border:1px solid var(--azul-linea);border-radius:8px;overflow:hidden}
.firma-lienzo canvas{position:absolute;inset:0;touch-action:none;cursor:crosshair}
.firma-linea{position:absolute;left:8%;right:8%;bottom:30%;border-bottom:1.5px solid var(--azul);pointer-events:none}
.firma-linea::before{content:"×";position:absolute;left:-2px;bottom:4px;color:var(--azul);font-size:20px;line-height:1}
.firma-pista{position:absolute;left:0;right:0;bottom:calc(30% - 34px);text-align:center;color:var(--gris);font-size:14px;pointer-events:none;transition:opacity 200ms ease}
.firmando .firma-pista{opacity:0}
.firma-pie{padding:10px 12px 12px}

/* Firmas en el acta */
.firmas{display:grid;gap:12px}
.firma-caja{background:var(--papel);border:1px solid var(--azul-linea);border-radius:var(--radio);overflow:hidden}
.firma-caja .cab{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:var(--azul-tinte)}
.firma-caja .cab b{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--azul)}
.firma-caja .cab span{font-size:14px;color:var(--gris)}
.firma-caja .trazo{display:flex;align-items:center;justify-content:center;min-height:96px;margin:10px 12px 0;border-bottom:1.5px solid var(--azul);position:relative}
.firma-caja .trazo img{max-height:84px;max-width:100%}
.firma-caja .trazo .btn{position:absolute;inset:auto auto 10px 50%;transform:translateX(-50%)}
.firma-caja .trazo .btn:active{transform:translateX(-50%) scale(.97)}
.firma-caja .rejilla{border:0;border-top:1px solid var(--linea-suave);border-radius:0;margin-top:10px}

/* Inventario */
.inv-grupo{background:var(--papel);border:1px solid var(--azul-linea);border-radius:var(--radio);overflow:hidden;margin-bottom:12px}
.inv-grupo > h3{display:flex;gap:8px;align-items:baseline;padding:10px 12px;background:var(--azul);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.inv-grupo > h3 i{font-style:normal;color:var(--naranja)}
.inv-fila{border-top:1px solid var(--linea-suave)}
.inv-fila:first-of-type{border-top:0}
.inv-linea{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 10px;min-height:60px}
.inv-nombre{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;text-align:left;padding:6px 0;font-size:16px;line-height:1.25}
.inv-nombre .n{width:22px;flex:none;text-align:right;color:var(--gris);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.inv-nombre .ref{display:block;font-size:13px;font-weight:700;color:var(--naranja-texto)}
.inv-nombre input{border:0;border-bottom:1px dashed var(--azul-linea);font-size:16px;width:100%;padding:2px 0;background:none;outline:none}
.estados{display:grid;grid-template-columns:repeat(4,44px);border:1px solid var(--azul-linea);border-radius:var(--radio);overflow:hidden;flex:none}
.estados button{height:44px;font-weight:700;font-size:14px;color:var(--gris);transition:background-color 120ms ease,color 120ms ease}
.estados button + button{border-left:1px solid var(--linea-suave)}
.estados button[aria-pressed="true"][data-e="B"]{background:var(--azul);color:#fff}
.estados button[aria-pressed="true"][data-e="R"]{background:var(--r-fondo);color:var(--r-tinta);box-shadow:inset 0 0 0 1.5px var(--r-borde)}
.estados button[aria-pressed="true"][data-e="M"]{background:var(--m-fondo);color:var(--m-tinta);box-shadow:inset 0 0 0 1.5px var(--m-borde)}
.estados button[aria-pressed="true"][data-e="NA"]{background:var(--na-fondo);color:var(--tinta)}
.inv-detalle{display:grid;grid-template-columns:1fr 2fr;gap:0;border-top:1px dashed var(--linea-suave);background:#FAFBFD}
.inv-detalle .casilla{border-bottom:0}
.inv-detalle .casilla + .casilla{border-left:1px solid var(--linea-suave)}
.inv-detalle .casilla.s6{grid-column:span 2;border-left:0;border-top:1px solid var(--linea-suave)}
.inv-mas{color:var(--gris)}
.inv-mas[aria-expanded="true"] .ico{transform:rotate(180deg)}
.inv-mas .ico{transition:transform 200ms var(--salida)}
.inv-acciones{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}

/* Índice de secciones del acta */
.indice{position:sticky;top:calc(var(--franja) + var(--arriba));z-index:10;background:var(--fondo);border-bottom:1px solid var(--linea-suave);display:flex;gap:6px;overflow-x:auto;padding:8px 16px;scrollbar-width:none}
.indice a{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:999px;color:var(--azul);font-weight:700;font-size:14px;text-decoration:none;background:var(--papel);border:1px solid var(--linea-suave)}
.indice a.listo{border-color:var(--azul-claro)}
.indice a.listo::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok-tinta);margin-left:6px}

.resultados{display:grid;gap:10px}
.resultados .opcion[aria-pressed="true"][data-r="recibe"]{border-color:var(--ok-tinta);background:var(--ok-fondo);box-shadow:inset 0 0 0 1px var(--ok-tinta)}
.resultados .opcion[aria-pressed="true"][data-r="recibe"] .marca{border-color:var(--ok-tinta);background:var(--ok-tinta);box-shadow:inset 0 0 0 4px var(--ok-fondo)}
.resultados .opcion[aria-pressed="true"][data-r="pendientes"]{border-color:var(--r-tinta);background:var(--r-fondo);box-shadow:inset 0 0 0 1px var(--r-tinta)}
.resultados .opcion[aria-pressed="true"][data-r="pendientes"] .marca{border-color:var(--r-tinta);background:var(--r-tinta);box-shadow:inset 0 0 0 4px var(--r-fondo)}
.resultados .opcion[aria-pressed="true"][data-r="no"]{border-color:var(--m-tinta);background:var(--m-fondo);box-shadow:inset 0 0 0 1px var(--m-tinta)}
.resultados .opcion[aria-pressed="true"][data-r="no"] .marca{border-color:var(--m-tinta);background:var(--m-tinta);box-shadow:inset 0 0 0 4px var(--m-fondo)}
.franja .espacio{flex:1}
.lista + .lista{margin-top:12px}
.fila .cuerpo b.accion{color:var(--azul)}
.vacio .btn{margin-top:16px}
.ajuste-nota.antes{margin:0 2px 12px}
.borrar-visita{margin-top:28px;text-align:center}
.btn-texto.peligro{color:var(--m-tinta)}
.chips.en-casilla{padding:8px 0 4px}
.rejilla.aparte{margin-top:12px}
.refirmar{text-align:right;padding:4px 8px 0}
.aviso-doc.arriba{margin:0 0 12px}
.bloque{scroll-margin-top:calc(var(--franja) + var(--arriba) + 64px)}
.aviso-doc{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;border-radius:var(--radio);background:var(--azul-tinte);color:var(--azul);font-size:15px}
.aviso-doc .ico{flex:none;margin-top:1px}

.pendientes-lista .fila{min-height:56px}
.pendientes-lista .fila .n{font-weight:700;color:var(--azul);font-variant-numeric:tabular-nums;width:46px;flex:none}

/* Documento listo */
.doc-listo{display:flex;gap:14px;align-items:center;padding:14px;background:var(--papel);border:1px solid var(--azul-linea);border-radius:var(--radio);margin-bottom:12px}
.doc-listo .hojita{width:46px;height:58px;border-radius:3px;background:var(--papel);border:1px solid var(--azul-linea);position:relative;overflow:hidden;flex:none}
.doc-listo .hojita::before{content:"";position:absolute;left:0;right:0;top:0;height:16px;background:var(--azul);border-bottom:2px solid var(--naranja)}
.doc-listo b{display:block;font-size:15px;line-height:1.3;word-break:break-word}
.doc-listo span{font-size:14px;color:var(--gris)}

/* Avisos */
.aviso{position:fixed;left:12px;right:12px;bottom:calc(var(--pulgar) + 14px + var(--abajo));z-index:60;max-width:560px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;border-radius:8px;background:var(--tinta);color:#fff;font-size:15px;box-shadow:var(--sombra-alta);
  transform:translateY(0);opacity:1;transition:transform 240ms var(--salida),opacity 240ms ease}
@starting-style{.aviso{transform:translateY(16px);opacity:0}}
.aviso.sale{transform:translateY(8px);opacity:0;transition-duration:180ms}
.aviso span{flex:1}
.aviso button{color:#FFB08F;font-weight:700;min-height:40px;padding:0 6px}
.aviso.malo{background:var(--m-tinta)}

.cargando{display:inline-block;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:giro .7s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}

/* Ajustes */
.ajuste-nota{font-size:14px;color:var(--gris);margin:8px 2px 0}
.proyecto-fila{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-bottom:1px solid var(--linea-suave)}
.proyecto-fila:last-child{border-bottom:0}
.proyecto-fila .cuerpo{flex:1;min-width:0}
.proyecto-fila b{display:block}
.proyecto-fila span{font-size:14px;color:var(--gris)}
.version{margin-top:28px;font-size:13px;color:var(--gris);text-align:center}

@media (prefers-reduced-motion:reduce){
  .pista{transition:none}
  dialog.hoja{transition:none}
  .lado.escuchando .mic::before{animation:none;transform:scale(1.15);opacity:.6}
  .aviso{transition:opacity 200ms ease}
}
@media (min-width:700px){
  .casilla.s3-md{grid-column:span 3}
}