/* ═══════════════════════════════════════════════════════════════════
   WitnessBook — hoja de estilos
   Basada en WitnessBook Brand Guide v1.0
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Paleta de marca (Brand Guide §2) ───────────────────────────── */
  --witness-blue:#4A90C2;   /* principal: botones, enlaces, activos    */
  --deep-blue:#3277A8;      /* jerarquía, títulos, estados destacados  */
  --sky:#DCEEF8;            /* fondos secundarios, tarjetas, selección */
  --ice:#F4F9FC;            /* fondo general alternativo               */
  --white:#FFFFFF;          /* superficies principales                 */
  --ink:#17242D;            /* texto principal                         */
  --slate:#60717D;          /* texto secundario y metadatos            */

  /* ── Tokens derivados ───────────────────────────────────────────
     No están en la guía. Se obtienen interpolando Sky y Slate para
     tener bordes y estados que no rompan la paleta.                 */
  --borde:#DDE7ED;
  --borde-fuerte:#C2D7E4;
  --sombra:0 1px 2px rgba(23,36,45,.05), 0 8px 24px rgba(23,36,45,.06);
  --alerta:#B4522F;
  --alerta-fondo:#FCF0EB;
  --exito:var(--deep-blue);

  /* ── Semánticos ─────────────────────────────────────────────────────
     Blanco de base con toques de celeste. La clave es que el celeste se
     VEA al abrir: si solo aparece dentro de las fuentes plegadas, el
     sitio lee como blanco con botones azules y la identidad se pierde.
     Por eso el celeste está en las sugerencias, el lateral, la burbuja
     de la pregunta, las citas y las tarjetas de fuente.                 */
  --fondo:var(--white);        /* lienzo general: BLANCO                */
  --fondo-lateral:var(--ice);  /* #F4F9FC — barra de historial          */
  --superficie:var(--white);   /* paneles y tarjetas de respuesta       */
  --texto:var(--ink);
  --tenue:var(--slate);
  --primario:var(--witness-blue);
  --primario-fuerte:var(--deep-blue);
  --tarjeta:var(--sky);

  --radio:12px;
  --radio-sm:8px;
  --lateral:264px;
  --ancho:47rem;
  --fuente:"Inter","Aptos",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* Sin modo oscuro. La guía v1.0 define una identidad celeste y blanca, y
   un tema oscuro la contradice. Si alguna vez hace falta, se agrega acá un
   bloque @media (prefers-color-scheme:dark) redefiniendo los semánticos. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font:400 16px/1.65 var(--fuente);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:700; letter-spacing:-.02em; line-height:1.25; margin:0}
a{color:var(--primario)}
button{font:inherit}
:focus-visible{outline:2px solid var(--primario); outline-offset:2px; border-radius:4px}
textarea:focus-visible{outline:none}  /* el foco lo muestra .caja:focus-within */

/* ═══ ESTRUCTURA ══════════════════════════════════════════════════ */

.app{display:grid; grid-template-columns:var(--lateral) 1fr; min-height:100dvh}

/* ── Historial lateral (Brand Guide §6: "historial lateral opcional") */
.lateral{
  background:var(--fondo-lateral); border-right:1px solid var(--borde-fuerte);
  display:flex; flex-direction:column; padding:1rem .75rem;
  position:sticky; top:0; height:100dvh;
}
.lateral .logo{display:flex; align-items:center; gap:.6rem; padding:.25rem .5rem 1rem}
.lateral .logo img{width:30px; height:30px; border-radius:8px}
.lateral .logo b{font-size:1.02rem; color:var(--primario-fuerte); letter-spacing:-.02em}

.btn-nueva{
  display:flex; align-items:center; gap:.5rem; width:100%;
  background:var(--primario); color:#fff; border:0; border-radius:var(--radio-sm);
  padding:.6rem .8rem; font-weight:600; font-size:.9rem; cursor:pointer;
  transition:background .15s;
}
.btn-nueva:hover{background:var(--primario-fuerte)}

.rotulo{
  font-size:.7rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--tenue); padding:1.3rem .6rem .4rem;
}
.historial{flex:1; overflow-y:auto; margin:0 -.25rem; padding:0 .25rem}
.historial button{
  display:block; width:100%; text-align:left; background:transparent; border:0;
  border-radius:var(--radio-sm); padding:.45rem .6rem; color:var(--texto);
  font-size:.87rem; cursor:pointer; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
.historial button:hover{background:var(--sky)}
.historial button[aria-current="true"]{
  background:var(--sky); font-weight:600; color:var(--primario-fuerte);
}
.historial .ninguno{padding:.4rem .6rem; font-size:.83rem; color:var(--tenue)}

.pie-lateral{border-top:1px solid var(--borde-fuerte); padding-top:.7rem; margin-top:.7rem}
.enlace-tenue{
  background:none; border:0; color:var(--tenue); font-size:.78rem; cursor:pointer;
  padding:.3rem .6rem; display:block; text-align:left; width:100%; text-decoration:none;
}
.enlace-tenue:hover{color:var(--primario)}

/* ── Zona principal ─────────────────────────────────────────────── */
.principal{display:flex; flex-direction:column; min-width:0; position:relative}

.barra-movil{
  display:none; align-items:center; gap:.7rem; padding:.7rem 1rem;
  border-bottom:1px solid var(--borde); background:var(--white);
  position:sticky; top:0; z-index:10;
}
.barra-movil img{width:26px; height:26px; border-radius:7px}
.barra-movil b{color:var(--primario-fuerte); font-size:.98rem}
.icono-btn{
  background:transparent; border:1px solid var(--borde); border-radius:var(--radio-sm);
  width:34px; height:34px; display:grid; place-items:center; cursor:pointer;
  color:var(--texto);
}

.hilo{flex:1; overflow-y:auto; padding:1.5rem 1rem 1rem}
.centro{max-width:var(--ancho); margin:0 auto}

/* ═══ PANTALLA DE INICIO (Brand Guide §7) ═════════════════════════ */

.inicio{
  min-height:calc(100dvh - 12rem); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:2rem 0;
}
.inicio img.marca{width:56px; height:56px; border-radius:14px; margin-bottom:1.3rem}
.inicio h1{font-size:clamp(1.6rem,4vw,2.1rem); color:var(--texto)}
.inicio .tagline{
  color:var(--primario-fuerte); font-weight:600; font-size:.9rem;
  letter-spacing:.01em; margin:.5rem 0 0;
}
.inicio .bajada{color:var(--tenue); margin:.6rem 0 0; font-size:1rem}

.sugerencias{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
  margin-top:1.8rem; max-width:38rem;
}
.sug{
  background:var(--sky); border:1px solid transparent; color:var(--primario-fuerte);
  border-radius:100px; padding:.42rem .9rem; font-size:.85rem; cursor:pointer;
  font-weight:500; transition:.15s;
}
.sug:hover{border-color:var(--primario); background:var(--white)}

/* ═══ MENSAJES ════════════════════════════════════════════════════ */

.msj{margin-bottom:1.7rem}
.msj.usuario{display:flex; justify-content:flex-end}
.burbuja{
  background:var(--sky); color:var(--ink); border-radius:var(--radio);
  padding:.65rem 1rem; max-width:80%; font-size:.97rem;
}
.respuesta{
  background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--radio); padding:1.15rem 1.3rem; box-shadow:var(--sombra);
}
.respuesta p{margin:0 0 .85rem} .respuesta p:last-of-type{margin-bottom:0}

.sello{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.75rem;
  font-weight:600; color:var(--exito); margin-bottom:.85rem;
}
.sello.mal{color:var(--alerta)}
.punto{width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}

.cita{
  background:var(--tarjeta); color:var(--primario-fuerte); font-size:.74rem;
  font-weight:600; padding:.05rem .3rem; border-radius:5px; cursor:pointer;
  white-space:nowrap; margin:0 .04em; vertical-align:baseline;
}
.cita:hover{background:var(--primario); color:#fff}
.cita.mala{background:var(--alerta-fondo); color:var(--alerta); cursor:default}

/* ── Fuentes expandibles (Brand Guide §6) ───────────────────────── */
.fuentes{margin-top:1.1rem; border-top:1px solid var(--borde); padding-top:.8rem}
.fuentes summary{
  cursor:pointer; font-size:.83rem; font-weight:600; color:var(--tenue);
  list-style:none; display:flex; align-items:center; gap:.4rem;
}
.fuentes summary::-webkit-details-marker{display:none}
.fuentes summary::before{content:"▸"; transition:transform .15s; display:inline-block}
.fuentes[open] summary::before{transform:rotate(90deg)}
.fuentes summary:hover{color:var(--primario)}
.fuente{
  background:var(--tarjeta); border-radius:var(--radio-sm);
  padding:.7rem .85rem; margin-top:.7rem; font-size:.87rem;
}
.fuente .ref{font-weight:600; font-size:.8rem; color:var(--primario-fuerte)}
.fuente .txt{color:var(--texto); margin-top:.3rem; opacity:.9}
.fuente a{
  display:inline-block; margin-top:.45rem; font-size:.78rem; font-weight:600;
  text-decoration:none;
}
.fuente a:hover{text-decoration:underline}
.etiqueta{
  font-size:.66rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  border:1px solid var(--borde-fuerte); color:var(--tenue);
  border-radius:4px; padding:0 .3rem; margin-left:.4rem; white-space:nowrap;
}

.aviso-caja{
  background:var(--alerta-fondo); color:var(--alerta); border-radius:var(--radio-sm);
  padding:.6rem .8rem; font-size:.82rem; margin-top:.9rem;
}
.pie-msj{
  margin-top:.9rem; font-size:.72rem; color:var(--tenue);
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
}
.pie-msj .sep{opacity:.4}

/* ═══ CAJA DE CONSULTA ════════════════════════════════════════════ */

.zona-entrada{
  padding:.9rem 1rem 1.1rem;
  background:var(--ice); border-top:1px solid var(--borde-fuerte);
}
.zona-entrada.centrada{position:static; background:none; padding-top:0}
.caja{
  max-width:var(--ancho); margin:0 auto; background:var(--superficie);
  border:1px solid var(--borde-fuerte); border-radius:var(--radio);
  padding:.55rem .55rem .5rem; box-shadow:var(--sombra);
  transition:border-color .15s;
}
.caja:focus-within{border-color:var(--primario)}
.fila-entrada{display:flex; gap:.5rem; align-items:flex-end}
textarea{
  flex:1; border:0; background:transparent; color:var(--texto); font:inherit;
  resize:none; outline:none; max-height:10rem; padding:.4rem .5rem; line-height:1.55;
}
textarea::placeholder{color:var(--tenue)}
.btn-enviar{
  background:var(--primario); color:#fff; border:0; border-radius:var(--radio-sm);
  width:38px; height:38px; display:grid; place-items:center; cursor:pointer;
  flex:none; transition:background .15s;
}
.btn-enviar:hover:not(:disabled){background:var(--primario-fuerte)}
.btn-enviar:disabled{opacity:.4; cursor:default}

.opciones{
  display:flex; align-items:center; gap:.6rem; padding:.15rem .5rem 0;
  border-top:1px solid var(--borde); margin-top:.5rem; padding-top:.5rem;
}
.interruptor{
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  font-size:.79rem; color:var(--tenue); user-select:none;
}
.interruptor input{position:absolute; opacity:0; width:0; height:0}
.riel{
  width:30px; height:17px; border-radius:100px; background:var(--borde-fuerte);
  position:relative; transition:background .18s; flex:none;
}
.riel::after{
  content:""; position:absolute; top:2px; left:2px; width:13px; height:13px;
  border-radius:50%; background:#fff; transition:transform .18s;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.interruptor input:checked + .riel{background:var(--primario)}
.interruptor input:checked + .riel::after{transform:translateX(13px)}
.interruptor input:checked ~ .etq{color:var(--primario-fuerte); font-weight:600}
.interruptor input:focus-visible + .riel{outline:2px solid var(--primario); outline-offset:2px}
.pista{margin-left:auto; font-size:.72rem; color:var(--tenue)}

.legal{
  max-width:var(--ancho); margin:.7rem auto 0; font-size:.71rem; color:var(--tenue);
  text-align:center; line-height:1.5;
}
.legal a{color:var(--tenue); text-decoration:underline}
.legal a:hover{color:var(--primario)}

/* ═══ MODAL ═══════════════════════════════════════════════════════ */

.modal{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center;
  justify-content:center; padding:1rem; background:rgba(23,36,45,.5);
}
.modal[hidden]{display:none}
.modal-caja{
  background:var(--superficie); border-radius:var(--radio); padding:1.6rem;
  max-width:36rem; max-height:86dvh; overflow:auto; box-shadow:var(--sombra);
}
.modal-caja h2{font-size:1.15rem; margin-bottom:.9rem; color:var(--primario-fuerte)}
.modal-caja p{margin:0 0 .9rem; font-size:.9rem}
.modal-caja .cerrar{
  background:var(--primario); color:#fff; border:0; border-radius:var(--radio-sm);
  padding:.5rem 1.1rem; font-weight:600; cursor:pointer; margin-top:.3rem;
}
.modal-caja .cerrar:hover{background:var(--primario-fuerte)}

/* ═══ CARGANDO ════════════════════════════════════════════════════ */

.cargando{display:flex; align-items:center; gap:.6rem; color:var(--tenue); font-size:.9rem}
.pulso{display:inline-flex; gap:3px}
.pulso i{
  width:6px; height:6px; border-radius:50%; background:var(--primario);
  animation:pulso 1.1s infinite ease-in-out;
}
.pulso i:nth-child(2){animation-delay:.15s}
.pulso i:nth-child(3){animation-delay:.3s}
@keyframes pulso{0%,60%,100%{opacity:.25; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════ */

.velo{display:none}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .barra-movil{display:flex}
  .lateral{
    position:fixed; z-index:40; left:0; top:0; width:min(84vw,var(--lateral));
    transform:translateX(-100%); transition:transform .2s ease;
    box-shadow:var(--sombra);
  }
  .app.abierto .lateral{transform:none}
  .app.abierto .velo{
    display:block; position:fixed; inset:0; z-index:30; background:rgba(23,36,45,.45);
  }
  .hilo{padding:1rem .85rem}
  .inicio{min-height:calc(100dvh - 16rem)}
  .burbuja{max-width:92%}
  .respuesta{padding:1rem}
  .pista{display:none}
  .opciones{padding-top:.45rem}
  .legal{font-size:.68rem; margin-top:.5rem}
  .legal .largo{display:none}
  .zona-entrada{padding-bottom:.8rem}
}