/* Facturas de la casa v1 (ficha docs/fichas/facturas-v1.md), con los tokens y el acomodo del prototipo 1.1
   (docs/prototipos/facturas-v1.html). Medianoche (voidset-familia §2): la noche es la piel de nacimiento; el día no es
   blanco. Las letras se sirven desde el sitio (letras/), nunca desde Google Fonts. */

@font-face { font-family: "Space Grotesk"; src: url("letras/space-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("letras/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("letras/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root{
  --papel:#090D1C; --pieza:#111731; --roce:#171E3D; --linea:#232B52; --tenue:#8A93BC; --tinta:#EDEFFA;
  --ambar:#FFC069; --jade:#3AD6B5; --coral:#FF8177; --azul:#6FD2FF; --oro:#D9B45B;
  --timbre:#E870CE; --carmen:#B9A6FF; --velo:rgba(5,7,16,.74); --sombra:rgba(0,0,0,.35);
  --f-display:"Space Grotesk",Helvetica,Arial,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,monospace; --f-voz:"Manrope",system-ui,sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --papel:#E3E6F1; --pieza:#ECEEF6; --roce:#DDE1EF; --linea:#CDD2E6; --tenue:#4E5679; --tinta:#1A1F3C;
  --ambar:#8A5A10; --jade:#0F795E; --coral:#B6443B; --azul:#1656C4; --oro:#A8842E;
  --timbre:#A93A8E; --carmen:#6B55C9; --velo:rgba(26,31,60,.38); --sombra:rgba(26,31,60,.14); color-scheme:light}}
:root[data-theme="light"]{
  --papel:#E3E6F1; --pieza:#ECEEF6; --roce:#DDE1EF; --linea:#CDD2E6; --tenue:#4E5679; --tinta:#1A1F3C;
  --ambar:#8A5A10; --jade:#0F795E; --coral:#B6443B; --azul:#1656C4; --oro:#A8842E;
  --timbre:#A93A8E; --carmen:#6B55C9; --velo:rgba(26,31,60,.38); --sombra:rgba(26,31,60,.14); color-scheme:light}

[hidden]{display:none!important}
body{background:var(--papel);color:var(--tinta);font-family:var(--f-voz);font-size:14.5px;margin:0;min-height:100dvh}
.todo{max-width:1320px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
svg{display:block}
.ic{width:20px;height:20px;flex:none}
.tenue{color:var(--tenue)}
.num{font-family:var(--f-mono);color:var(--azul);font-weight:500}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:8px}

/* la barra de la casa */
.casa{display:flex;align-items:center;gap:12px;padding:14px 0 12px}
.vs-logo{height:24px;width:auto;color:var(--tinta)}
.vs-logo .o{stroke:var(--oro)} .vs-logo .c{fill:var(--oro)}
.vs-cursor{animation:parp 1.1s steps(1) infinite}
@keyframes parp{50%{opacity:0}}
.app-n{display:flex;align-items:center;gap:8px;font:600 16px/1 var(--f-display);letter-spacing:-.01em}
.aire{flex:1}
.hora{font:500 12.5px var(--f-mono);color:var(--tenue);white-space:nowrap}
.yo{display:block;border-radius:50%}

/* avatares (voidset-familia §3): personas en círculo, agentes en cuadrado redondeado */
.av{width:26px;height:26px;flex:none}
.av-slot{display:inline-flex}

/* el cuerpo: tres piezas */
.app{display:grid;grid-template-columns:minmax(320px,380px) minmax(0,1fr) minmax(290px,340px);gap:18px;padding-bottom:22px;align-items:start}
.col{min-width:0;display:grid;gap:6px}
.cab{display:flex;align-items:center;gap:8px;padding:0 4px;min-height:30px}
.cab h2{font:600 12px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);margin:0}
.cab .n{font:500 12px var(--f-mono);color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel{background:var(--pieza);border:1px solid var(--linea);border-radius:14px;min-width:0}

/* pestañas del maestro */
.tabs{display:flex;gap:4px;border:1px solid var(--linea);border-radius:999px;padding:3px;margin:10px 12px 8px;background:var(--papel)}
.tabs button{flex:1;border-radius:999px;padding:7px 8px;font:600 13px var(--f-display);color:var(--tenue);min-height:34px}
.tabs button[aria-pressed="true"]{background:var(--roce);color:var(--tinta)}

/* renglones y vacíos: el vacío habla, con Timbre en reposo */
.filas{display:grid;padding:2px 6px 8px}
.fila{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px;border-radius:10px;min-height:50px}
.fila:hover{background:var(--roce)}
.fila[aria-current="true"]{background:var(--roce);box-shadow:inset 3px 0 0 var(--tinta)}
.fila .q{min-width:0;flex:1;display:grid;gap:1px}
.fila .q b{font:600 14px var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila .q small{font:400 11.5px var(--f-mono);color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila .m{font:500 13px var(--f-mono);white-space:nowrap;display:flex;align-items:center;gap:4px}
.fila .fle{width:12px;height:12px;color:var(--tenue);flex:none}
.fila.entra{animation:entra .5s cubic-bezier(.2,0,0,1)}
.ic.chico{width:15px;height:15px}
.chip{font:500 11px var(--f-mono);border:1px solid var(--linea);border-radius:999px;padding:2px 8px;white-space:nowrap}
.chip.ambar{color:var(--ambar);border-color:color-mix(in srgb,var(--ambar) 45%,transparent)}
.chip.coral{color:var(--coral);border-color:color-mix(in srgb,var(--coral) 45%,transparent)}
.chip.jade{color:var(--jade);border-color:color-mix(in srgb,var(--jade) 45%,transparent)}
.chip.azul{color:var(--azul);border-color:color-mix(in srgb,var(--azul) 45%,transparent)}
.ic.ambar,.ambar-t{color:var(--ambar)}.ic.coral,.coral-t{color:var(--coral)}.ic.jade,.jade-t{color:var(--jade)}.ic.azul,.azul-t{color:var(--azul)}
.subidas{display:grid;grid-template-columns:1fr;gap:8px;margin:2px 12px 12px}
.subidas:not(:has(.subir:not([hidden]))){display:none}
.subir{display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px dashed var(--linea);border-radius:12px;padding:12px 8px;font:600 13.5px var(--f-display);color:var(--tenue);min-height:46px}
.subir:hover{color:var(--tinta);border-color:var(--tenue)}

/* empresas */
.cat{display:grid;gap:9px;padding:2px 12px 14px}
.ent{border:1px solid var(--linea);border-radius:12px;padding:11px 13px;display:grid;gap:6px;background:var(--papel);min-width:0}
.ent .r1{display:flex;align-items:center;gap:8px;min-width:0}
.ent b{font:600 14.5px var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ent small{font:400 11.5px var(--f-mono);color:var(--tenue);overflow-wrap:anywhere}
.punto{width:8px;height:8px;border-radius:50%;flex:none}
.punto.jade{background:var(--jade)}.punto.coral{background:var(--coral)}
.cifras{display:flex;gap:14px;flex-wrap:wrap}
.cifra{display:flex;align-items:center;gap:5px;font:500 12.5px var(--f-mono)}
.cifra .ic{width:15px;height:15px}
.vacio{display:grid;justify-items:center;gap:8px;padding:26px 12px 18px;text-align:center}
.vacio b{font:600 15px var(--f-display)}
.vacio span{font:400 12.5px var(--f-mono);color:var(--tenue)}
.vacio .av{width:40px;height:40px;opacity:.75}
.error-linea{margin:0;padding:16px 10px;font:500 12.5px var(--f-mono);color:var(--coral)}

/* el detalle: el camino del recibo, foto → portal → timbre → pago */
.det{padding:16px 18px 18px;display:grid;gap:14px;align-content:start;position:relative;overflow:hidden}
.camino{display:grid;grid-template-columns:repeat(4,1fr);position:relative;padding:4px 0 0}
.camino::before{content:"";position:absolute;left:12.5%;right:12.5%;top:17px;height:2px;background:var(--linea)}
.paso{display:grid;justify-items:center;gap:5px;position:relative;font:500 10.5px var(--f-mono);color:var(--tenue);text-transform:lowercase}
.paso .bola{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--pieza);border:1.5px solid var(--linea);color:var(--tenue)}
.paso .bola svg{width:15px;height:15px}
.paso.hecho .bola{border-color:var(--jade);color:var(--jade)}
.paso.ahora .bola{border-color:var(--ambar);color:var(--ambar)}
.paso.trabado .bola{border-color:var(--coral);color:var(--coral)}
.paso.espera .bola{border-color:var(--azul);color:var(--azul)}
.paso.hecho,.paso.ahora,.paso.trabado,.paso.espera{color:var(--tinta)}
.det .titulo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.det h3{font:700 20px var(--f-display);margin:0;letter-spacing:-.01em;min-width:0;overflow-wrap:anywhere;text-wrap:balance}
.estado{display:inline-flex;align-items:center;gap:6px;font:500 11.5px var(--f-mono)}
.estado .ic{width:16px;height:16px}
.traba{display:flex;gap:8px;align-items:center;font:500 12.5px var(--f-mono);color:var(--coral);margin:0}
.traba .ic{width:16px;height:16px}
.campos{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 16px;border:1px solid var(--linea);border-radius:12px;padding:13px 15px;background:var(--papel);margin:0}
.campos dt{font:400 11px var(--f-mono);color:var(--tenue);text-transform:uppercase;letter-spacing:.08em;align-self:center;margin:0}
.campos dd{font:500 13.5px var(--f-mono);margin:0;overflow-wrap:anywhere;min-width:0}
.campos dd input,.campos dd select{width:100%;box-sizing:border-box;background:var(--roce);border:1px solid var(--linea);border-radius:7px;color:var(--tinta);font:500 13.5px var(--f-mono);padding:6px 8px;min-height:36px}
.campos a{color:var(--azul)}
.cab.sub{padding:0 0 7px;min-height:0}
.ent-chips{display:flex;flex-wrap:wrap;gap:7px}
.ent-chips button{border:1.5px solid var(--linea);border-radius:999px;padding:7px 13px;font:600 13px var(--f-display);color:var(--tenue);min-height:36px;display:inline-flex;align-items:center;gap:6px;max-width:100%}
.ent-chips button[aria-pressed="true"]{border-color:var(--azul);color:var(--tinta);background:color-mix(in srgb,var(--azul) 12%,transparent)}
.ent-chips button:disabled{opacity:.55;cursor:default}
.acciones{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.acciones.chicas{gap:6px}
.acciones.chicas .btn-ic{width:38px;height:38px}
.btn{border:2px solid var(--tinta);border-radius:999px;padding:9px 18px;font:700 14px var(--f-display);min-height:44px;display:inline-flex;align-items:center;gap:8px}
.btn.lleno{background:var(--tinta);color:var(--papel)}
.btn.suave{border-color:var(--linea);color:var(--tenue)}
.btn:disabled{opacity:.5}
.btn-ic{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--linea);display:grid;place-items:center;color:var(--tenue)}
.btn-ic:hover{color:var(--tinta);border-color:var(--tenue)}
/* la reacción: el timbre cae sobre el recibo */
.sello{position:absolute;right:26px;top:150px;pointer-events:none;display:grid;justify-items:center;gap:2px;color:var(--timbre);transform:rotate(-9deg);animation:cae 1.9s cubic-bezier(.2,0,0,1) forwards}
.sello .marco{border:3px solid currentColor;border-radius:10px;padding:6px 12px;font:700 15px var(--f-display);letter-spacing:.16em;text-transform:uppercase;background:color-mix(in srgb,var(--pieza) 70%,transparent)}
.sello small{font:500 10.5px var(--f-mono)}
@keyframes cae{0%{opacity:0;transform:rotate(-9deg) scale(1.6)}18%{opacity:1;transform:rotate(-9deg) scale(.96)}28%{transform:rotate(-9deg) scale(1)}78%{opacity:1}100%{opacity:0;transform:rotate(-9deg) scale(1)}}

/* las hojas: un recibo, una empresa, confirmar, más */
.velo{position:fixed;inset:0;background:var(--velo);display:grid;place-items:center;padding:16px;z-index:50}
.hoja{background:var(--pieza);border:1px solid var(--linea);border-radius:16px;max-width:460px;width:100%;box-sizing:border-box;padding:18px;display:grid;gap:13px;max-height:88dvh;overflow:auto}
.hoja h3{font:700 18px var(--f-display);margin:0}
.pidiendo{display:flex;align-items:center;gap:9px;margin:0}
/* la foto del recibo: escoger, y Lenore la lee */
.foto{border:1.5px dashed var(--linea);border-radius:12px;padding:10px 12px;display:flex;gap:12px;align-items:center}
.lee{display:flex;align-items:center;gap:8px;font:500 12px var(--f-mono);color:var(--azul);min-width:0}
.lee .av{width:20px;height:20px}
.lee.error{color:var(--coral)}
.campos dd.leido{animation:leido .45s cubic-bezier(.2,0,0,1) both}
@keyframes leido{from{opacity:0;transform:translateX(-4px)}}
.mas-lista{display:grid;gap:6px}
.mas-lista button{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--linea);border-radius:12px;font:600 14px var(--f-display);text-align:left;min-height:48px}

/* Lenore: una plática (mvt-escritorio); en v1, solo su saludo y las tres preguntas */
.len{display:grid;grid-template-rows:auto minmax(0,1fr);height:min(680px,calc(100dvh - 110px));min-height:420px}
.len-cab{display:flex;align-items:center;gap:8px;padding:12px 14px 10px;border-bottom:1px solid var(--linea)}
.len-cab b{font:600 14px var(--f-display)}
.msgs{overflow:auto;padding:12px 14px;display:grid;gap:14px;align-content:start}
.msg{display:grid;gap:5px;animation:entra .45s cubic-bezier(.2,0,0,1)}
@keyframes entra{from{opacity:0;transform:translateY(-6px)}}
.msg .quien{display:flex;align-items:center;gap:7px;font:500 11px var(--f-mono);color:var(--tenue)}
.msg .quien .av{width:22px;height:22px}
.msg .quien b{font:600 12.5px var(--f-display);color:var(--tinta)}
.msg .txt{font:400 14px/1.5 var(--f-voz);overflow-wrap:anywhere}
.msg .txt p{margin:0 0 4px}
.msg .fuente{display:flex;align-items:center;gap:6px;font:400 10.5px var(--f-mono);color:var(--tenue);flex-wrap:wrap}
.msg .fuente .pin{width:6px;height:6px;border-radius:50%;background:var(--oro)}
.msg.yo{justify-items:end}
.msg.yo .txt{background:var(--roce);border:1px solid var(--linea);border-radius:14px 14px 4px 14px;padding:8px 12px;max-width:86%}
.msg.error .txt{color:var(--coral)}
.sug{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.sug button{border:1px solid var(--linea);border-radius:999px;padding:6px 11px;font:500 12.5px var(--f-voz);color:var(--tinta);text-align:left;min-height:34px}
.sug button:hover{border-color:var(--tenue);background:var(--roce)}
.escribe{display:inline-flex;gap:4px;padding:6px 0}
.escribe i{width:6px;height:6px;border-radius:50%;background:var(--oro);animation:pt 1s infinite ease-in-out}
.escribe i:nth-child(2){animation-delay:.15s}.escribe i:nth-child(3){animation-delay:.3s}
@keyframes pt{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* celular: una pieza a la vez, pestañas abajo */
.tabs-cel{display:none}
@media (max-width:1199px){
  .app{grid-template-columns:minmax(300px,360px) minmax(0,1fr)}
  .col-len{grid-column:1/-1}
  .len{height:520px}
}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr);padding-bottom:90px}
  .col-det{display:none}
  body:not([data-ver="lista"]) .col-lista{display:none}
  body:not([data-ver="lenore"]) .col-len{display:none}
  .len{height:calc(100dvh - 190px);min-height:380px}
  .det-velo{position:fixed;inset:0;background:var(--papel);z-index:30;overflow:auto;padding:8px max(16px,env(safe-area-inset-right,0px)) 30px max(16px,env(safe-area-inset-left,0px))}
  .det-velo .atras{display:inline-flex;align-items:center;gap:7px;font:600 14px var(--f-display);color:var(--tenue);padding:10px 0;min-height:44px}
  .det-velo .det{padding:6px 0 20px}
  .sello{top:150px;right:8px}
  .fila .fle{display:none}
  .tabs-cel{position:fixed;left:0;right:0;bottom:0;display:flex;z-index:25;background:color-mix(in srgb,var(--papel) 90%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--linea);padding:6px max(16px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .tabs-cel button{flex:1;display:grid;justify-items:center;gap:3px;font:500 11px var(--f-voz);color:var(--tenue);padding:6px 0;min-height:52px}
  .tabs-cel button[aria-pressed="true"]{color:var(--tinta)}
  .tabs-cel .ic,.tabs-cel .av{width:22px;height:22px}
  .hora .larga{display:none}
}
@media (min-width:901px){.det-velo .atras{display:none}}
@media (prefers-reduced-motion:reduce){
  .vs-cursor,.escribe i{animation:none}
  .msg,.fila.entra,.campos dd.leido{animation:none}
  .sello{animation:none;opacity:0}
}