/* =====================================================================
   PANEL DE CONTROL DEL DUEÑO — hoja de estilo
   =====================================================================
   Azul tinta de estilógrafo sobre libro contable. Nada de esto viene del
   sistema de Papios: es una identidad propia para una app propia.

   Dos decisiones que no son de gusto sino de producto:

   1. Los colores de severidad van APAGADOS. Un rojo de alarma convertiría
      cada hallazgo en una acusación, y la regla número uno es que cada
      señal es una pregunta. Ladrillo apagado dice "mirá esto"; rojo
      semáforo diría "ladrón".

   2. La ficha .ciega tiene la regla izquierda RAYADA en vez de sólida.
      Es el detalle más importante de toda la hoja: una señal que da cero
      por falta de dato no se puede ver igual que una que da cero porque
      no pasó nada.
   ===================================================================== */

/* ============================================================
   PALETA — tinta de estilógrafo sobre libro contable.
   Neutros con sesgo azul: nada de gris puro.
   ============================================================ */
:root{
  --tinta:#0B2545; --tinta-2:#123A6B; --azul:#1D6FB8; --azul-claro:#E8F0FA;
  --papel:#F4F7FC; --ficha:#FFFFFF; --linea:#D7E0EE;
  --texto:#12233B; --texto-2:#4C6280; --texto-3:#7E90AA;
  --verde:#0F7B5F; --verde-bg:#E7F4EF;
  --ambar:#B4690E; --ambar-bg:#FBF1E2;
  --ladrillo:#9E2B25; --ladrillo-bg:#FAEBEA;
  --ciego:#5C6F8A; --ciego-bg:#EDF1F7;
  --burbuja-fg:#FFFFFF;
  /* La barra superior NO se invierte con el tema: en oscuro tiene que seguir siendo
     oscura. Invertirla dejaba una franja celeste brillante encima de la página. */
  --barra:#0B2545; --barra-fg:#FFFFFF; --barra-tenue:rgba(255,255,255,.14);
  --btn-fg:#FFFFFF;
  --sombra:0 1px 2px rgba(11,37,69,.07), 0 4px 14px rgba(11,37,69,.05);
  --r:14px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --tinta:#7FB3E8; --tinta-2:#A8CBF0; --azul:#5AA0E0; --azul-claro:#16304F;
    --papel:#08192B; --ficha:#0F2438; --linea:#22405C;
    --texto:#E6EEF8; --texto-2:#A9BDD4; --texto-3:#7B92AE;
    --verde:#57C7A2; --verde-bg:#0E2F27;
    --ambar:#E0A254; --ambar-bg:#33240F;
    --ladrillo:#E58279; --ladrillo-bg:#331715;
    --ciego:#93A8C2; --ciego-bg:#16283C;
    --burbuja-fg:#08192B;
    --barra:#0A1F35; --barra-fg:#DCE8F6; --barra-tenue:rgba(255,255,255,.09);
    --btn-fg:#08192B;
    --sombra:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.28);
  }
}
:root[data-theme="dark"]{
  --tinta:#7FB3E8; --tinta-2:#A8CBF0; --azul:#5AA0E0; --azul-claro:#16304F;
  --papel:#08192B; --ficha:#0F2438; --linea:#22405C;
  --texto:#E6EEF8; --texto-2:#A9BDD4; --texto-3:#7B92AE;
  --verde:#57C7A2; --verde-bg:#0E2F27;
  --ambar:#E0A254; --ambar-bg:#33240F;
  --ladrillo:#E58279; --ladrillo-bg:#331715;
  --ciego:#93A8C2; --ciego-bg:#16283C;
  --burbuja-fg:#08192B;
  --barra:#0A1F35; --barra-fg:#DCE8F6; --barra-tenue:rgba(255,255,255,.09);
  --btn-fg:#08192B;
  --sombra:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--papel); color:var(--texto);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}

/* ---------- Marco del teléfono ---------- */
.app{max-width:640px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column;
     background:var(--papel); position:relative}

/* ---------- Cabecera ---------- */
header{
  position:sticky; top:0; z-index:20; background:var(--barra); color:var(--barra-fg);
  padding:.85rem 1.1rem; display:flex; align-items:center; gap:.7rem;
}
header .marca{font-weight:650; font-size:15px; letter-spacing:-.01em}
header .sub{font-size:11.5px; opacity:.72; letter-spacing:.04em; text-transform:uppercase}
header .escudo{
  width:32px;height:32px;border-radius:8px;flex:0 0 auto;
  background:var(--barra-tenue); display:grid; place-items:center;
}
header .escudo svg{width:18px;height:18px;display:block}
header .periodo{
  margin-left:auto; font-size:12px; font-family:var(--mono);
  background:var(--barra-tenue); padding:.25rem .6rem; border-radius:99px;
}

/* ---------- Hilo de conversación ---------- */
.hilo{flex:1; padding:1.1rem 1rem 0; display:flex; flex-direction:column; gap:1.1rem}

/* Pregunta de Alfredo: SÍ es burbuja */
.mia{align-self:flex-end; max-width:82%; background:var(--tinta); color:var(--burbuja-fg);
     padding:.6rem .95rem; border-radius:16px 16px 4px 16px; font-size:15.5px;
     box-shadow:var(--sombra)}

/* Respuesta del sistema: NO es burbuja, es una FICHA de libro contable */
.ficha{
  background:var(--ficha); border:1px solid var(--linea); border-left:3px solid var(--tinta-2);
  border-radius:var(--r); box-shadow:var(--sombra); overflow:hidden;
}
.ficha.verde{border-left-color:var(--verde)}
.ficha.ambar{border-left-color:var(--ambar)}
.ficha.rojo{border-left-color:var(--ladrillo)}
/* La ficha CIEGA: regla rayada, no sólida. Un cero por falta de dato
   NO se puede ver igual que un cero porque no pasó nada. */
.ficha.ciega{
  background:var(--ciego-bg); border-left:3px solid transparent;
  border-image:repeating-linear-gradient(180deg,var(--ciego) 0 5px,transparent 5px 10px) 1;
  border-radius:0 var(--r) var(--r) 0;
}
.ficha-cuerpo{padding:.95rem 1.05rem}
.ficha p{margin:0 0 .6rem}
.ficha p:last-child{margin-bottom:0}
.eyebrow{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; font-weight:650;
  color:var(--texto-3); margin-bottom:.35rem;
}
.ficha.ciega .eyebrow{color:var(--ciego)}

/* Cifras de cabecera dentro de la ficha */
.cifras{display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:.1rem;
        margin:.85rem 0 .2rem; border-top:1px solid var(--linea)}
.cifra{padding:.6rem .1rem .1rem; border-right:1px solid var(--linea)}
.cifra:last-child{border-right:0}
.cifra .v{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:20px;
          font-weight:600; color:var(--tinta); letter-spacing:-.02em; line-height:1.15}
.cifra .v.mal{color:var(--ladrillo)} .cifra .v.bien{color:var(--verde)}
.cifra .v.nulo{color:var(--ciego)}
.cifra .l{font-size:11px; color:var(--texto-2); line-height:1.3; margin-top:.15rem}

/* Franja de acción al pie de cada ficha */
.pie{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:.7rem 1.05rem; background:var(--azul-claro); border-top:1px solid var(--linea);
}
.ficha.ciega .pie{background:transparent; border-top:1px dashed var(--linea)}
.pie span{font-size:13px; color:var(--texto-2)}
.btn{
  margin-left:auto; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  background:var(--azul); color:var(--btn-fg); border:0; border-radius:9px; padding:.5rem .95rem;
}
.btn:hover{background:var(--tinta-2)}
.btn.fantasma{background:transparent; color:var(--azul); border:1px solid var(--linea)}
.btn.fantasma:hover{background:var(--azul-claro)}
button:focus-visible,.chip:focus-visible{outline:2px solid var(--azul); outline-offset:2px}

/* Lista de personas / hallazgos dentro del detalle */
.filas{list-style:none; margin:.2rem 0 0; padding:0}
.filas li{display:flex; gap:.8rem; align-items:flex-start; padding:.75rem 0;
          border-top:1px solid var(--linea)}
.filas li:first-child{border-top:0}
.marca-sev{width:3px; align-self:stretch; border-radius:2px; background:var(--texto-3); flex:0 0 auto}
.marca-sev.verde{background:var(--verde)} .marca-sev.ambar{background:var(--ambar)}
.marca-sev.rojo{background:var(--ladrillo)}
.filas .nom{font-weight:600; font-size:14.5px; letter-spacing:-.01em}
.filas .meta{font-size:12px; color:var(--texto-2); margin-top:.1rem}
.filas .txt{font-size:13.5px; color:var(--texto-2); margin-top:.35rem}
.filas .val{margin-left:auto; text-align:right; font-family:var(--mono);
            font-variant-numeric:tabular-nums; font-weight:600; font-size:14.5px;
            white-space:nowrap; flex:0 0 auto}
.preg{
  margin-top:.5rem; font-size:13.5px; color:var(--texto); background:var(--azul-claro);
  border-radius:9px; padding:.5rem .7rem; font-style:italic;
}
.ficha.ciega .preg{background:transparent; border:1px dashed var(--linea)}

/* Aviso — lo que el panel NO ve */
.aviso{
  display:flex; gap:.6rem; font-size:13px; color:var(--texto-2); line-height:1.5;
  background:var(--ciego-bg); border-radius:10px; padding:.7rem .8rem; margin-top:.75rem;
}
.aviso svg{width:16px;height:16px;flex:0 0 auto;margin-top:.15rem;color:var(--ciego)}

/* Sugerencias */
.chips{display:flex; gap:.5rem; flex-wrap:wrap; padding:.2rem 1rem 0}
.chip{
  font:inherit; font-size:13.5px; cursor:pointer; background:var(--ficha);
  color:var(--tinta); border:1px solid var(--linea); border-radius:99px;
  padding:.45rem .85rem; text-align:left;
}
.chip:hover{border-color:var(--azul); background:var(--azul-claro)}

/* Barra de escritura */
.barra{position:sticky; bottom:0; z-index:20; background:var(--papel);
       border-top:1px solid var(--linea); padding:.7rem 1rem 1rem; margin-top:1.1rem}
.campo{display:flex; gap:.55rem; align-items:center; background:var(--ficha);
       border:1px solid var(--linea); border-radius:99px; padding:.3rem .3rem .3rem 1rem}
.campo input{flex:1; border:0; outline:0; background:transparent; font:inherit;
             font-size:15.5px; color:var(--texto); padding:.45rem 0; min-width:0}
.campo input::placeholder{color:var(--texto-3)}
.enviar{width:38px;height:38px;border-radius:99px;border:0;background:var(--azul);
        color:var(--btn-fg);cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
.enviar svg{width:17px;height:17px}
.nota-pie{font-size:11px; color:var(--texto-3); text-align:center; margin:.55rem 0 0}

/* Pantalla de detalle */
.detalle{position:fixed; inset:0; z-index:40; background:var(--papel); overflow-y:auto;
         display:none}
.detalle.abierta{display:block}
.detalle .interno{max-width:640px; margin:0 auto; padding-bottom:2.5rem}
.volver{position:sticky; top:0; z-index:5; background:var(--barra); color:var(--barra-fg);
        padding:.8rem 1rem; display:flex; align-items:center; gap:.6rem; font-weight:600;
        font-size:14.5px; border:0; width:100%; cursor:pointer; font-family:inherit; text-align:left}
.volver svg{width:16px;height:16px}
.det-cuerpo{padding:1.1rem 1rem}
.det-cuerpo h2{font-size:20px; letter-spacing:-.02em; margin:.2rem 0 .3rem; text-wrap:balance}
.det-cuerpo .lede{font-size:14.5px; color:var(--texto-2); margin:0 0 1rem}
.bloque{background:var(--ficha); border:1px solid var(--linea); border-radius:var(--r);
        padding:.95rem 1.05rem; margin-bottom:1rem; box-shadow:var(--sombra)}
.bloque h3{font-size:11px; text-transform:uppercase; letter-spacing:.09em;
           color:var(--texto-3); margin:0 0 .6rem; font-weight:650}
.tabla-envoltura{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:13.5px; min-width:420px}
th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
   color:var(--texto-3); font-weight:650; padding:0 .6rem .45rem 0; white-space:nowrap}
td{padding:.5rem .6rem .5rem 0; border-top:1px solid var(--linea); vertical-align:top}
td.n{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right;
     white-space:nowrap}
.pill{display:inline-block; font-size:11px; font-weight:650; padding:.1rem .45rem;
      border-radius:5px; white-space:nowrap}
.pill.verde{background:var(--verde-bg); color:var(--verde)}
.pill.ambar{background:var(--ambar-bg); color:var(--ambar)}
.pill.rojo{background:var(--ladrillo-bg); color:var(--ladrillo)}
.pill.ciego{background:var(--ciego-bg); color:var(--ciego)}

@media (prefers-reduced-motion:no-preference){
  .ficha,.mia{animation:sube .32s cubic-bezier(.2,.7,.3,1) both}
  @keyframes sube{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
}

/* =====================================================================
   MENÚ LATERAL
   ===================================================================== */

/* El atributo hidden GANA siempre.
   Sin esta regla, cualquier clase que declare `display` le gana al
   `[hidden]{display:none}` del navegador, porque un selector de clase tiene más
   especificidad que la hoja de estilos por defecto. Pasó exactamente eso: el
   menú declaraba `display:flex` y quedaba clavado abierto ocupando 310 px de
   una pantalla de 375, aunque en JavaScript la propiedad `hidden` dijera true.
   Es un error que no se ve revisando el código ni consultando `elemento.hidden`:
   solo aparece mirando la pantalla o el `display` calculado. */
[hidden]{display:none !important}

.menu-abrir{
  margin-left:.5rem; width:36px; height:36px; flex:0 0 auto; cursor:pointer;
  background:var(--barra-tenue); border:0; border-radius:9px; color:inherit;
  display:grid; place-items:center;
}
.menu-abrir svg{width:19px;height:19px}
.menu-fondo{position:fixed; inset:0; z-index:45; background:rgba(6,18,32,.55)}
.menu{
  position:fixed; top:0; right:0; bottom:0; z-index:46; width:min(310px,86vw);
  background:var(--ficha); border-left:1px solid var(--linea);
  display:flex; flex-direction:column; gap:.2rem; overflow-y:auto;
  box-shadow:-8px 0 28px rgba(11,37,69,.16);
}
.menu-cab{
  display:flex; align-items:center; gap:.6rem; padding:1rem 1.1rem;
  background:var(--barra); color:var(--barra-fg);
}
.menu-quien{font-weight:650; font-size:15px}
.menu-rol{font-size:11px; opacity:.72; text-transform:uppercase; letter-spacing:.06em}
.menu-cerrar{
  margin-left:auto; width:32px; height:32px; border:0; border-radius:8px; cursor:pointer;
  background:var(--barra-tenue); color:inherit; display:grid; place-items:center;
}
.menu-cerrar svg{width:17px;height:17px}
.menu-grupo{padding:.6rem 0; border-bottom:1px solid var(--linea)}
.menu-grupo:last-child{border-bottom:0}
.menu-rotulo{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; font-weight:650;
  color:var(--texto-3); padding:.25rem 1.1rem .35rem;
}
.menu-item{
  display:block; padding:.62rem 1.1rem; font-size:14.5px; color:var(--texto);
  text-decoration:none; border-left:3px solid transparent;
}
.menu-item:hover{background:var(--azul-claro)}
.menu-item[aria-current]{border-left-color:var(--azul); font-weight:600; background:var(--azul-claro)}
.menu-item.mes{font-family:var(--mono); font-size:13.5px}
.menu-salir{color:var(--ladrillo)}
.menu-abrir:focus-visible,.menu-cerrar:focus-visible,.menu-item:focus-visible{
  outline:2px solid var(--azul); outline-offset:-2px;
}

/* =====================================================================
   "BUSCANDO" — el aviso mientras el asistente piensa.
   El modelo tarda unos 6 segundos. Sin este aviso la pantalla queda muerta
   y el dueño toca de nuevo, que dispara una segunda consulta que se cobra.
   ===================================================================== */
.buscando{
  display:flex; align-items:center; gap:.7rem;
  background:var(--ficha); border:1px solid var(--linea);
  border-left:3px solid var(--azul); border-radius:var(--r);
  padding:.95rem 1.05rem; box-shadow:var(--sombra); color:var(--texto-2);
  font-size:14.5px;
}
.buscando .puntos{display:inline-flex; gap:4px; flex:0 0 auto}
.buscando .puntos i{
  width:7px; height:7px; border-radius:50%; background:var(--azul); display:block;
  animation:latir 1.1s ease-in-out infinite;
}
.buscando .puntos i:nth-child(2){animation-delay:.16s}
.buscando .puntos i:nth-child(3){animation-delay:.32s}
@keyframes latir{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){
  .buscando .puntos i{animation:none; opacity:.65}
}
.campo input:disabled,.enviar:disabled{opacity:.55; cursor:not-allowed}