@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(fuentes/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:700;font-display:swap;src:url(fuentes/barlow-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(fuentes/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(fuentes/barlow-condensed-latin-700-normal.woff2) format("woff2")}

:root{
  --noche:#070D1A; --fondo:#0B162C; --capa:#132344; --linea:#1D3557;
  --celeste:#0081CF; --celeste-claro:#5CBDF5; --turquesa:#00C9A7;
  --papel:#F4F8FC; --tinta:#E8EFF7; --tinta-2:#A9BBD0; --tinta-papel:#0B2A5B;
  --error:#FF8A80; --menu:68px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--fondo);color:var(--tinta);font:500 16px/1.45 Barlow,system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
h1,h2,h3{font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;line-height:1.1;margin:0}
h1{font-size:30px}h2{font-size:23px}
p{margin:0}
a{color:var(--celeste-claro)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--turquesa);outline-offset:2px}
[hidden]{display:none!important}

#vista{max-width:980px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px calc(var(--menu) + 32px + env(safe-area-inset-bottom));min-height:100%}

/* ── menú ─────────────────────────────────────── */
#menu{position:fixed;inset:auto 0 0;height:calc(var(--menu) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  display:grid;grid-template-columns:1fr 92px 1fr;background:var(--noche);border-top:1px solid var(--linea);z-index:20}
#menu button{background:none;border:0;color:var(--tinta-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:13px;cursor:pointer}
#menu svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
#menu button.activo{color:var(--tinta)}
#menu .disparador{color:var(--noche);font-weight:700}
#menu .disparador svg{width:56px;height:56px;padding:13px;margin-top:-26px;background:var(--turquesa);border-radius:50%;border:4px solid var(--noche);stroke:var(--noche);stroke-width:2.2;box-sizing:border-box}
#menu .disparador{color:var(--tinta)}
body.pantalla-completa #menu{display:none}
body.pantalla-completa #vista{max-width:none;padding:0}

/* ── piezas ───────────────────────────────────── */
.cabecera{display:flex;align-items:center;gap:12px;margin-bottom:16px;min-height:44px}
.cabecera h1{flex:1;min-width:0;overflow-wrap:anywhere}
.cabecera img{height:30px;max-width:110px;object-fit:contain;background:#fff;border-radius:4px;padding:2px 4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:10px;border:1px solid var(--linea);background:var(--capa);color:var(--tinta);cursor:pointer;font-weight:700;text-decoration:none}
.btn:disabled{opacity:.5;cursor:default}
.btn.fuerte{background:var(--turquesa);border-color:var(--turquesa);color:var(--noche)}
.btn.peligro{color:var(--error)}
.btn.ancho{width:100%}
.btn.chico{min-height:38px;padding:0 12px;font-size:14px}
.icono{background:none;border:0;width:44px;height:44px;border-radius:10px;cursor:pointer;display:grid;place-items:center;color:var(--tinta);flex:none}
.icono svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
input[type=text],input[type=search],input[type=password],input[type=date],textarea,select{width:100%;min-height:46px;padding:10px 12px;border-radius:10px;border:1px solid var(--linea);background:var(--noche)}
textarea{min-height:220px;line-height:1.5;resize:vertical}
label{display:block;font-size:14px;color:var(--tinta-2);margin:14px 0 5px}
.nota{color:var(--tinta-2);font-size:14.5px}
.error{color:var(--error)}
.fila{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fila>.crece{flex:1;min-width:150px}
.separa{margin-top:18px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none}
.chip{flex:none;min-height:38px;padding:0 14px;border-radius:19px;border:1px solid var(--linea);background:none;color:var(--tinta-2);cursor:pointer}
.chip[aria-pressed=true]{background:var(--papel);color:var(--tinta-papel);border-color:var(--papel);font-weight:700}

/* ── el talonario: las hojas se ven como papel ────────── */
.estante{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:22px 16px;margin-top:10px}
.tarjeta{position:relative;min-width:0}
.mas{position:absolute;top:5px;right:5px;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--tinta-papel);color:var(--papel);display:grid;place-items:center;cursor:pointer}
.mas svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-linecap:round}
.hoja{all:unset;display:block;width:100%;cursor:pointer;min-width:0;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hoja img{pointer-events:none;-webkit-touch-callout:none}
.hoja:focus-visible{outline:3px solid var(--turquesa);outline-offset:4px;border-radius:4px}
.hoja .papel{position:relative;aspect-ratio:.72;background:var(--papel);border-radius:2px;box-shadow:0 1px 0 #fff3 inset,4px 5px 0 -1px #c9d6e4,4px 5px 0 0 var(--noche);overflow:hidden;display:grid;place-items:center;color:var(--tinta-papel)}
.hoja .papel.solo{box-shadow:0 1px 0 #fff3 inset}
.hoja .papel img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.hoja .papel svg{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hoja b{display:block;margin-top:10px;font-family:"Barlow Condensed";font-size:18px;line-height:1.15;overflow-wrap:anywhere}
.hoja small{color:var(--tinta-2);font-size:13.5px}
.numero{position:absolute;right:0;bottom:0;background:var(--tinta-papel);color:var(--papel);font:700 15px "Barlow Condensed";padding:2px 9px;border-top-left-radius:6px;font-variant-numeric:tabular-nums}
.vacio{padding:38px 8px;text-align:center;display:grid;gap:14px;justify-items:center}
.vacio .papel{width:112px;aspect-ratio:.72;background:var(--papel);transform:rotate(-3deg);box-shadow:5px 6px 0 -1px #c9d6e4}
.revisar{position:absolute;left:0;top:0;background:var(--turquesa);color:var(--noche);font:700 14px "Barlow Condensed";padding:2px 8px;border-bottom-right-radius:6px}
.franja{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-left:4px solid var(--turquesa);background:var(--capa);margin-bottom:14px}
.franja>span{flex:1;min-width:160px}

/* ── cámara ───────────────────────────────────── */
.visor{position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;background:#000;display:flex;flex-direction:column;z-index:30}
.visor-marco{position:relative;flex:1;min-height:0;overflow:hidden}
.visor video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.visor svg.trazo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.trazo polygon{fill:var(--turquesa);fill-opacity:.14;stroke:var(--turquesa);stroke-width:3;vector-effect:non-scaling-stroke;transition:all .14s linear}
.trazo[data-estado=aviso] polygon{fill:#FFB547;stroke:#FFB547}
.visor-arriba{position:absolute;top:env(safe-area-inset-top);left:0;right:0;padding:8px;display:flex;align-items:center;gap:6px;background:linear-gradient(#000a,#0000);z-index:2}
.visor-arriba .chips{flex:1;padding:0}
.visor-arriba .chip{background:#0009;color:#fff;border-color:#fff5}
.visor-arriba .chip[aria-pressed=true]{background:var(--papel);color:var(--tinta-papel)}
.visor-mensaje{position:absolute;left:16px;right:16px;bottom:14px;text-align:center;color:#fff;text-shadow:0 1px 3px #000;display:grid;gap:8px;justify-items:center}
.visor-mensaje p:empty{display:none}
.destello{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .14s ease-out}
.destello.activo{opacity:.65;transition:none}
.visor-abajo{display:grid;grid-template-columns:1fr 86px 1fr;align-items:center;gap:8px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:var(--noche)}
.obturador{width:76px;height:76px;border-radius:50%;background:#fff;border:6px solid var(--noche);box-shadow:0 0 0 3px #fff;cursor:pointer;justify-self:center}
.obturador:active{transform:scale(.94)}
.obturador:disabled{opacity:.4}
.bandeja-fotos{position:relative;justify-self:start;width:62px;height:72px;background:none;border:0;padding:0;cursor:pointer}
.bandeja-fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--papel);border:2px solid var(--papel)}
.bandeja-fotos img:nth-child(1){transform:rotate(-7deg)}
.bandeja-fotos img:nth-child(2){transform:rotate(4deg)}
.bandeja-fotos img:nth-child(3){transform:rotate(-1deg)}
.bandeja-fotos .numero{z-index:2;border-radius:6px 0 0 0}
.visor-abajo .btn{justify-self:end}

/* ── esquinas ─────────────────────────────────── */
.ajuste{position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;background:var(--noche);display:flex;flex-direction:column;z-index:30}
.ajuste-marco{flex:1;min-height:0;overflow:hidden;position:relative;display:grid;place-items:center;padding:26px;touch-action:none}
.ajuste-lienzo{position:relative;line-height:0}
.ajuste-lienzo img{display:block;user-select:none;-webkit-user-drag:none}
.ajuste-lienzo svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ajuste-lienzo polygon{fill:#00c9a726;stroke:var(--turquesa);stroke-width:2.5;vector-effect:non-scaling-stroke}
.tirador{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#00c9a733;border:3px solid var(--turquesa);touch-action:none;cursor:grab;padding:0}
.ajuste-pie{display:flex;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--fondo)}
.ajuste-pie .btn{flex:1}

/* ── un documento ─────────────────────────────── */
.acciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:16px}
.acciones .fuerte{grid-column:1/-1}
.paginas{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px}
.pagina-grande{display:block;max-width:100%;max-height:60vh;margin:0 auto;background:var(--papel)}
.visor-pagina{position:relative;touch-action:pan-y}
.flecha{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:72px;padding:0;border:0;border-radius:10px;background:#0B162Ce6;color:var(--tinta);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px #0006}
.flecha.ant{left:0}
.flecha.sig{right:0}
.flecha svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lista{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.lista li{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--capa);border-radius:10px}
.lista .crece{flex:1;min-width:0;overflow-wrap:anywhere}
.ficha{padding:14px;background:var(--papel);color:var(--tinta-papel);border-radius:3px;margin-top:12px}
.ficha h2{margin-bottom:4px}
.ficha .nota{color:#37557f}
.ficha.elegible{all:unset;display:block;padding:12px 14px;background:var(--papel);color:var(--tinta-papel);border-radius:3px;cursor:pointer}
.firma-lienzo{width:100%;height:220px;background:#fff;border-radius:6px;touch-action:none;display:block;cursor:crosshair}
.firma-lugar{position:relative;line-height:0;touch-action:none;width:fit-content;margin:auto;max-width:100%}
.firma-lugar>img{max-width:100%;max-height:55vh;display:block}
.firma-lugar .sello{position:absolute;cursor:move;outline:2px dashed var(--celeste);max-width:none}
progress{width:100%;height:10px;accent-color:var(--turquesa)}
.pie{margin-top:34px;text-align:center;color:var(--tinta-2);font-size:13.5px}
.qr-pc{background:#fff;padding:10px;border-radius:6px;width:fit-content;line-height:0}

/* ── el panel ─────────────────────────────────── */
body.panel #vista{padding:max(20px,env(safe-area-inset-top)) 16px 40px}
.tarjeta-panel{padding:16px;background:var(--capa);border-radius:10px}
.tarjeta-panel input,.tarjeta-panel select{background:var(--noche)}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 12px}
.fila-panel{flex-wrap:wrap}
.fila-panel .crece{flex:1 1 220px}
.fila-panel select{width:auto;min-height:38px;padding:4px 8px;max-width:190px}
.fila-panel.apagada{opacity:.55}

/* ── avisos y ventanas ────────────────────────── */
#aviso{position:fixed;left:16px;right:16px;bottom:calc(var(--menu) + 18px + env(safe-area-inset-bottom));max-width:520px;margin:auto;z-index:60;pointer-events:none}
#aviso div{background:var(--papel);color:var(--tinta-papel);padding:12px 14px;border-radius:8px;font-weight:700;box-shadow:0 6px 18px #0008}
#aviso div.mal{background:#5c1712;color:#fff}
dialog{background:var(--capa);color:var(--tinta);border:1px solid var(--linea);border-radius:14px;width:min(440px,calc(100vw - 32px));padding:20px}
dialog::backdrop{background:#000b}
dialog .fila{margin-top:18px;justify-content:flex-end}

#impresion{display:none}
@media print{
  body{background:#fff}
  #vista,#menu,#aviso{display:none!important}
  #impresion{display:block}
  #impresion img{display:block;width:100%;max-height:100vh;object-fit:contain;break-after:page}
}
@media (min-width:760px){
  #menu{inset:0 auto auto 0;width:100%;height:60px;grid-template-columns:auto auto auto;justify-content:center;gap:12px;border-top:0;border-bottom:1px solid var(--linea);padding:0}
  #menu button{flex-direction:row;gap:8px;padding:0 18px;font-size:16px}
  #menu .disparador svg{width:30px;height:30px;padding:5px;margin:0;border:0}
  #vista{padding-top:82px;padding-bottom:40px}
  #aviso{bottom:24px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}