/* ===== Tokens: TERMINAL JURÍDICO ===== */
/* Tema elegido explícitamente por Mateo tras comparar 4 direcciones --
   inspirado en terminales de trading (Bloomberg clásico usaba ámbar
   sobre negro), coherente con que él viene de ese mundo (TizorQuantSystems).
   Verde/rojo para favorable/desfavorable = colores de ganancia/pérdida,
   no decoración -- vocabulario que ya conoce. */
:root{
  --ink:#E8E6E1;
  --paper:#0A0A0B;
  --surface:#121214;
  --surface-2:#18181B;
  --line:rgba(232,230,225,0.12);
  --line-strong:rgba(232,230,225,0.24);
  --muted:#6B6B70;

  /* --brand: ámbar -- color de marca/interfaz, deliberadamente distinto
     del verde/rojo semántico de abajo. */
  --brand:#F0A830;           --brand-soft:rgba(240,168,48,0.12);   --brand-line:rgba(240,168,48,0.4);

  /* Semánticos del informe (rediseñado 03/09: el verde/rojo original leía
     como semáforo de ganancia/pérdida -- demasiado casual para el destino
     legal de alguien. Duotono ámbar/azul-gris, institucional, más cerca
     de un informe de calificadora de riesgo que de un ticker de trading.
     Los nombres de variable (--accent/--garnet/--azure) quedaron del
     esquema viejo por no tocar cada selector .a/.b/.c del CSS -- lo que
     importa es el valor, no el nombre. */
  --accent:#F0A830;          --accent-soft:rgba(240,168,48,0.12);  --accent-line:rgba(240,168,48,0.4);   /* A: favorable a Fiscalía -- mismo ámbar de marca */
  --garnet:#6C93B8;          --garnet-soft:rgba(108,147,184,0.12); --garnet-line:rgba(108,147,184,0.4);  /* B: favorable a Defensa */
  --azure:#A8A29A;           --azure-soft:rgba(168,162,154,0.12);  --azure-line:rgba(168,162,154,0.4);   /* C: alternativa -- gris neutro */

  --font-display: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;

  --radius: 4px;
  --radius-sm: 3px;

  --shadow-ambient: rgba(0,0,0,0.4);
  --shadow-key: rgba(0,0,0,0.6);
  --shadow-lift: inset 0 1px 0 rgba(232,230,225,0.04);
}

/* Deliberadamente SIN override de "prefers-color-scheme: light" -- esto
   causó horas de iterar a ciegas: con el override, cualquier sistema en
   modo claro (como el de Mateo) nunca veía ninguno de los diseños
   oscuros, sin aviso de por qué. Centaurix es oscuro siempre, es un
   compromiso de marca de un solo tema, no un olvido -- ver
   artifact-design skill: "puede quedarse en un solo tema, que sea una
   decisión, no una omisión". */

/* ===== Reset & base ===== */
*{ box-sizing:border-box; }
html{ color-scheme: dark; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--font-display); font-weight:400; text-wrap:balance; margin:0; }
p{ margin:0; }
button{ font-family:inherit; }
a{ color:var(--brand); }
::selection{ background:var(--brand-soft); }

.wrap{ max-width:640px; margin:0 auto; padding:0 1.25rem 5rem; }

/* ===== Header ===== */
.header-wrap{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1120px; margin:0 auto; padding:1.5rem 1.5rem 0;
}
.brand{ display:flex; align-items:center; gap:0.85rem; }
.brand-mark{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; flex-shrink:0; cursor:pointer;
  border:1px solid var(--brand-line); border-radius:var(--radius-sm);
  background:var(--brand-soft); color:var(--brand);
  font-family:var(--font-mono); font-weight:700; font-size:1.1rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.brand-mark:hover{ background:var(--brand); color:var(--paper); }
.cursor-blink{ animation: blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .cursor-blink{ animation:none; } }
.brand-name{
  font-family:var(--font-mono); font-size:1.05rem; letter-spacing:0.04em; font-weight:600;
}
.brand-tag{
  font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--muted);
}
#sesion-chip{
  font-family:var(--font-mono); font-size:0.78rem; color:var(--muted);
  display:flex; align-items:center; gap:0.6rem;
}
#sesion-chip button{
  background:transparent; border:1px solid var(--line); color:var(--ink);
  border-radius:var(--radius-sm); padding:0.3rem 0.6rem; font-size:0.78rem; cursor:pointer;
}

/* ===== Hero terminal ===== */
.hero-terminal{
  max-width:860px; margin:0 auto;
  padding:3.5rem 1.5rem 3rem;
}
.hero-terminal .eyebrow{
  font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase;
  letter-spacing:0.14em; color:var(--muted); display:flex; align-items:center; gap:0.5rem;
  margin-bottom:1.4rem;
}
.hero-terminal .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--brand); }
.hero-terminal h1{
  font-family:var(--font-mono); font-weight:600;
  font-size:2.6rem; line-height:1.15; margin-bottom:1.2rem; letter-spacing:-0.01em;
}
.hero-terminal .lede{ color:var(--muted); font-size:1.05rem; max-width:56ch; margin-bottom:2rem; }

.terminal-panel{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius);
  overflow:hidden; margin-bottom:1.6rem;
  box-shadow: var(--shadow-lift), 0 1px 2px var(--shadow-ambient), 0 16px 32px -18px var(--shadow-key);
}
.terminal-panel-head{
  display:flex; align-items:center; gap:0.4rem;
  padding:0.6rem 0.9rem; border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.terminal-dot{ width:8px; height:8px; border-radius:50%; background:var(--line-strong); }
.terminal-panel-title{
  margin-left:0.6rem; font-family:var(--font-mono); font-size:0.72rem; color:var(--muted);
}
.terminal-panel-body{
  padding:1.1rem 1.2rem; font-family:var(--font-mono); font-size:0.86rem;
  line-height:1.8; min-height:7.5rem; color:var(--ink);
  white-space:pre-wrap;
}
.terminal-panel-body .ok{ color:var(--accent); }
.terminal-panel-scroll{ max-height:26rem; overflow-y:auto; }
.boot-cursor{ display:inline-block; width:0.55em; background:var(--brand); animation: blink 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce){ .boot-cursor{ animation:none; } }

.stat-tiles{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0.9rem;
  margin-bottom:1.8rem;
}
.stat-tile{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:0.9rem 1rem; background:var(--surface);
}
.stat-num{
  font-family:var(--font-mono); font-size:1.5rem; font-weight:700; color:var(--brand);
  font-variant-numeric: tabular-nums;
}
.stat-label{ font-size:0.76rem; color:var(--muted); margin-top:0.2rem; }

/* Login/registro con el mismo lenguaje visual del panel de arranque --
   antes era una tarjeta genérica pegada al final de la página, ahora es
   otra "ventana" del mismo sistema, justo después del hero. */
.auth-terminal{ max-width:860px; margin:0 auto; padding:0 1.5rem 3rem; }
.auth-terminal .terminal-panel{ max-width:420px; margin:0; }
.auth-body{ padding:1.4rem 1.3rem; }
.auth-body label:first-of-type{ margin-top:0; }

.trust-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem;
  font-family:var(--font-mono); font-size:0.76rem; color:var(--muted);
}
.trust-row .sep{ opacity:0.5; }

.disclaimer-note{
  max-width:860px; margin:0 auto; padding:0 1.5rem 0.5rem;
  font-size:0.8rem; color:var(--muted); text-align:left;
}

@media (max-width:640px){
  .hero-terminal h1{ font-size:1.8rem; }
  .stat-tiles{ grid-template-columns:1fr; }
}

/* ===== Cómo funciona ===== */
.como-funciona-wide{
  background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-top:1rem;
}
.como-funciona{ max-width:1120px; margin:0 auto; padding:3rem 1.5rem; }
.cf-eyebrow{
  font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--muted); margin-bottom:1.6rem;
}
.cf-pasos{ display:grid; grid-template-columns:repeat(3, 1fr); gap:2.2rem; }
.cf-num{ font-family:var(--font-mono); font-size:0.85rem; color:var(--brand); margin-bottom:0.6rem; }
.cf-paso h3{ font-family:var(--font-display); font-weight:400; font-size:1.15rem; margin-bottom:0.5rem; }
.cf-paso p{ color:var(--muted); font-size:0.92rem; line-height:1.55; }
@media (max-width:800px){ .cf-pasos{ grid-template-columns:1fr; gap:1.8rem; } }

/* ===== App shell (navegación entre pantallas, con sesión iniciada) ===== */
.app-nav{
  border-bottom:1px solid var(--line);
  margin-bottom:2rem;
}
.app-nav-wrap{
  max-width:640px; margin:0 auto; padding:0 1.25rem;
  display:flex; gap:1.8rem;
}
.app-nav-tab{
  background:none; border:none; color:var(--muted); cursor:pointer;
  font-family:var(--font-body); font-size:0.92rem; font-weight:600;
  padding:1rem 0; border-bottom:2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.app-nav-tab.active{ color:var(--ink); border-bottom-color:var(--brand); }
.app-nav-tab:hover{ color:var(--ink); }

.mis-casos-header{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:1.2rem;
}
.mis-casos-header h1{ font-size:1.4rem; }
.mis-casos-vacio{
  color:var(--muted); font-size:0.92rem; text-align:center;
  padding:3rem 1rem; border:1px dashed var(--line-strong); border-radius:var(--radius);
}
.caso-item{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:1rem 1.2rem; margin-bottom:0.7rem;
  font-family:inherit; color:inherit;
  transition: border-color 0.15s ease;
}
.caso-item:hover{ border-color:var(--brand-line); }
.caso-item .caso-relato{
  font-size:0.92rem; overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  margin-bottom:0.5rem;
}
.caso-item .caso-meta{
  display:flex; gap:0.8rem; align-items:center;
  font-family:var(--font-mono); font-size:0.72rem; color:var(--muted);
}
.caso-estado{
  padding:0.15rem 0.5rem; border-radius:999px; text-transform:uppercase; letter-spacing:0.04em;
}
.caso-estado.listo{ background:var(--brand-soft); color:var(--brand); }
.caso-estado.procesando{ background:var(--accent-soft); color:var(--accent); }
.caso-estado.error{ background:var(--garnet-soft); color:var(--garnet); }
.caso-estado.borrador{ background:var(--surface-2); color:var(--muted); }

.reporte-volver{
  color:var(--muted); font-size:0.85rem; cursor:pointer; margin-bottom:1rem; display:inline-block;
}
.reporte-volver:hover{ color:var(--ink); }

/* ===== Cards / sections ===== */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem; margin-bottom:1.5rem;
  box-shadow: var(--shadow-lift), 0 1px 2px var(--shadow-ambient), 0 12px 28px -16px var(--shadow-key);
}
.card h2{ font-size:1.15rem; margin-bottom:0.3rem; }
.card .card-sub{ color:var(--muted); font-size:0.86rem; margin-bottom:1.2rem; }

/* ===== Auth tabs ===== */
.tabs{ display:flex; gap:0.3rem; margin-bottom:1.2rem; background:var(--surface-2); padding:0.25rem; border-radius:var(--radius-sm); }
.tab{
  flex:1; text-align:center; padding:0.5rem 0; border-radius:calc(var(--radius-sm) - 2px);
  font-size:0.86rem; font-weight:600; cursor:pointer; color:var(--muted); user-select:none;
}
.tab.active{ background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,0.06); }

/* ===== Form elements ===== */
label{ display:block; font-size:0.82rem; font-weight:600; margin:0.9rem 0 0.35rem; }
label:first-of-type{ margin-top:0; }
label .hint{ font-weight:400; color:var(--muted); font-size:0.78rem; }
input[type="email"], input[type="password"], input[type="text"], input[type="number"], textarea{
  width:100%; padding:0.65rem 0.75rem; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink); font-size:0.95rem; font-family:inherit;
  transition:border-color 0.15s ease;
}
input:focus, textarea:focus{ outline:none; border-color:var(--brand); }
textarea{ min-height:130px; resize:vertical; line-height:1.5; }
.field-row{ display:flex; gap:0.7rem; }
.field-row > div{ flex:1; }

button.primary{
  background:var(--brand); color:#ffffff; border:none; border-radius:var(--radius-sm);
  padding:0.75rem 1.3rem; font-size:0.95rem; font-weight:600; cursor:pointer;
  margin-top:1.3rem; width:100%;
  box-shadow: 0 6px 18px -6px var(--brand-line);
  transition:opacity 0.15s ease, transform 0.15s ease;
}
button.primary:hover{ opacity:0.9; transform:translateY(-1px); }
button.primary:disabled{ opacity:0.5; cursor:default; }
button.ghost{
  background:transparent; color:var(--ink); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:0.5rem 0.9rem; font-size:0.85rem; cursor:pointer;
}

.msg{ font-size:0.86rem; padding:0.65rem 0.85rem; border-radius:var(--radius-sm); margin-top:0.9rem; }
.msg.error{ background:var(--garnet-soft); color:var(--garnet); }
.msg.ok{ background:var(--brand-soft); color:var(--brand); }

/* ===== Upload dropzone ===== */
.dropzone{
  border:1.5px dashed var(--line-strong); border-radius:var(--radius-sm);
  padding:1.4rem 1rem; text-align:center; cursor:pointer;
  background:var(--surface-2); transition:border-color 0.15s ease, background 0.15s ease;
}
.dropzone.dragover{ border-color:var(--brand); background:var(--brand-soft); }
.dropzone .dz-icon{ font-family:var(--font-mono); font-size:1.1rem; color:var(--muted); margin-bottom:0.4rem; }
.dropzone .dz-text{ font-size:0.86rem; color:var(--muted); }
.dropzone .dz-text b{ color:var(--ink); }
#archivo-input{ display:none; }
.archivo-lista{ margin-top:0.8rem; display:flex; flex-direction:column; gap:0.4rem; }
.archivo-item{
  display:flex; align-items:center; justify-content:space-between; gap:0.6rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:0.5rem 0.7rem; font-size:0.82rem;
}
.archivo-item .nombre{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.archivo-item button{
  background:none; border:none; color:var(--garnet); cursor:pointer; font-size:0.8rem; flex-shrink:0;
}

/* ===== Report ===== */
.bar-total{
  display:flex; height:10px; border-radius:999px; overflow:hidden;
  border:1px solid var(--line); margin:1rem 0 1.1rem;
}
.bar-seg.a{ background:var(--accent); }
.bar-seg.b{ background:var(--garnet); }
.bar-seg.c{ background:var(--azure); }

.escenarios{ display:flex; gap:0.7rem; margin-bottom:1.2rem; }
.escenario{ flex:1; text-align:center; padding:0.9rem 0.5rem; border-radius:var(--radius-sm); border:1px solid var(--line); }
.escenario .pct{ font-family:var(--font-mono); font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums; }
.escenario .label{ font-size:0.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-top:0.2rem; }
.escenario.a .pct{ color:var(--accent); }
.escenario.b .pct{ color:var(--garnet); }
.escenario.c .pct{ color:var(--azure); }

/* ===== Informe enriquecido: resumen, comparación de motores, matriz FD, recomendaciones ===== */
.informe-bloque{ margin-bottom:1.4rem; }
.informe-bloque h3{
  font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--brand); margin-bottom:0.6rem;
}
.informe-bloque p{ font-size:0.92rem; color:var(--ink); line-height:1.6; }

.motor-fila{
  /* Anchos fijos (no auto) a propósito: cada fila es su propio grid
     independiente -- con "auto" el ancho de cada columna se ajusta al
     contenido de ESA fila ("20%" vs "31.2%" vs el nombre largo de
     BATNA/WATNA), así que columnas de filas distintas no alineaban
     entre sí ni con el encabezado. */
  display:grid; grid-template-columns:1fr 4.8rem 4.8rem 4.8rem; gap:0.8rem; align-items:center;
  padding:0.6rem 0; border-top:1px solid var(--line); font-size:0.85rem;
}
.motor-fila:first-child{ border-top:none; }
.motor-nombre{ font-family:var(--font-mono); color:var(--muted); }
.motor-pct{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; min-width:3.2rem; text-align:right; }
.motor-pct.a{ color:var(--accent); } .motor-pct.b{ color:var(--garnet); } .motor-pct.c{ color:var(--azure); }
.motor-fila-header{ padding-bottom:0.4rem; }
.motor-pct-label{
  font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--muted); min-width:3.2rem; text-align:right;
}

.informe-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-bottom:1.4rem;
}
.informe-grid h3{
  font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em;
  margin-bottom:0.6rem;
}
.informe-grid .fortalezas h3{ color:var(--accent); }
.informe-grid .debilidades h3{ color:var(--garnet); }
.informe-grid ul{ margin:0; padding-left:1.1rem; }
.informe-grid li{ font-size:0.86rem; margin-bottom:0.5rem; line-height:1.5; }
@media (max-width:520px){ .informe-grid{ grid-template-columns:1fr; } }

#recomendaciones-bloque ul{ margin:0; padding-left:1.1rem; }
#recomendaciones-bloque li{ font-size:0.9rem; margin-bottom:0.5rem; line-height:1.55; }

.corridas-toggle{
  font-size:0.82rem; color:var(--muted); cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:0.4rem; margin-top:0.4rem;
}
.corridas{ display:none; margin-top:0.8rem; }
.corridas.open{ display:block; }

.agregar-pruebas{ margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.agregar-pruebas input[type="file"]{ margin:0.6rem 0; color:var(--muted); font-size:0.85rem; }
.corrida{ border-top:1px solid var(--line); padding:0.85rem 0; font-size:0.88rem; }
.corrida:first-child{ border-top:none; }
.corrida-meta{ font-family:var(--font-mono); font-size:0.73rem; color:var(--muted); margin-bottom:0.35rem; }

.hidden{ display:none !important; }

footer{
  max-width:640px; margin:0 auto; padding:1rem 1.25rem 3rem;
  font-size:0.78rem; color:var(--muted); text-align:center;
}

@media (max-width:480px){
  .hero h1{ font-size:1.55rem; }
  .field-row{ flex-direction:column; gap:0; }
  .escenarios{ flex-direction:column; }
}