:root{
  /* ================================================================ TEMA OSCURO
   *                          «sala de máquinas»
   * Azul marino frío, contraste alto, acento turquesa. Lee como terminal.
   *
   * REGLA DE COLOR DEL PRODUCTO, y es deliberada: en trading el verde y el rojo ya
   * significan GANANCIA y PÉRDIDA. Si el veredicto usara esos mismos colores, una
   * insignia verde se leería como «esto da dinero», que es precisamente lo que esta
   * aplicación NO afirma: dice «esto ha pasado la auditoría». Por eso:
   *
   *     veredicto  ->  turquesa (sólida) · ámbar (moderada) · bronce (débil, con matices) · granate (insuficiente / no hay)
   *     dinero     ->  verde (beneficio)   · rojo (pérdida)
   *
   * El verde no aparece nunca en un veredicto, y el turquesa nunca en una cifra.
   * Evidencia débil NO usa el granate de error: si hay meseta, no debe leerse como “fallo”.
   */
  --bg:#070b14;          --surface:#0d1322;     --surface-2:#131c2f;   --surface-3:#1a2438;
  --line-soft:#1b2740;   --line:#2a3853;        --line-strong:#3b4c6b;
  /* Los tres "muted" pasaban el mínimo de WCAG AA (4.5:1) sobre --surface, pero caían
   * por debajo sobre --surface-3 (donde vive una insignia o una pestaña activa) y se
   * notaba a poco brillo de pantalla. Recalibrados por contraste, no a ojo: 8/7/6:1
   * sobre el fondo más claro que realmente usan, conservando el matiz y el orden
   * muted > muted-2 > muted-3. */
  --muted-3:#96a2b4;     --muted-2:#a0b0c1;     --muted:#adbccf;
  --text-2:#c0cede;      --text:#eaf1f9;        --text-hi:#ffffff;
  --ok-bg:#052220;       --ok-line:#15514e;     --ok:#3ed7d0;     --ok-text:#8ae9e3;     --ok-hi:#c8fffb;
  --warn-bg:#2a2113;     --warn-line:#5a4728;   --warn:#f2c26b;   --warn-text:#f7dba8;   --warn-hi:#ffeccb;
  --danger-bg:#27101b;   --danger-line:#4d2237; --danger:#f07fa8; --danger-text:#f5a6c2; --danger-hi:#ffd0e1;
  --info-bg:#101a2c;     --info-line:#2b405f;   --info:#6fa8ff;   --info-text:#9dc3ff;   --info-hi:#cfe2ff;
  --profit:#4fd97e;      --loss:#ff7b6b;

  /* Tokens semánticos del producto (capa de significado, no solo color) */
  --evidence-strong:var(--ok);     --evidence-strong-bg:var(--ok-bg);     --evidence-strong-line:var(--ok-line);     --evidence-strong-text:var(--ok-text);
  --evidence-moderate:var(--warn); --evidence-moderate-bg:var(--warn-bg); --evidence-moderate-line:var(--warn-line); --evidence-moderate-text:var(--warn-text);
  --evidence-weak:#d4b896; --evidence-weak-bg:#1c1914; --evidence-weak-line:#4a4032; --evidence-weak-text:#ead9c0;
  --evidence-none:var(--danger); --evidence-none-bg:var(--danger-bg); --evidence-none-line:var(--danger-line); --evidence-none-text:var(--danger-text);
  --peak:var(--danger);            --peak-bg:var(--danger-bg);            --peak-text:var(--danger-text);
  --plateau:var(--ok);             --plateau-bg:var(--ok-bg);             --plateau-text:var(--ok-text);

  --accent:var(--ok);    --accent2:var(--info);
  /* Escala de bordes (2 niveles + píldora). Antes había 9 valores de radio distintos
   * entre 6px y 14px, sin que ninguno correspondiera a una decision deliberada: era
   * deriva, no jerarquia. --radius es el nivel "tarjeta/panel" (mayoria ya lo eran, a
   * 11px); --radius-sm es "control pequeño" (chip, input, boton de menu). Lo
   * totalmente redondo sigue en 999px suelto, que ya era consistente. */
  --radius:11px; --radius-sm:8px;
  --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-display:"IBM Plex Sans",system-ui,sans-serif;
  /* Escala tipográfica (7 pasos) */
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-base:15px; --fs-lg:16.5px; --fs-xl:19.5px; --fs-2xl:23px; --fs-display:clamp(34px,4vw,52px);
  --space-section:56px;
  color-scheme:dark;
}

/* Fuentes autoalojadas: la CSP (font-src 'self') no admite Google Fonts. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-400-italic.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-sans-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-sans-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/ibm-plex-sans-700.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-mono-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/ibm-plex-mono-700.woff2") format("woff2")}

/* display:flex/grid en componentes anula el [hidden] del UA: sin esto, status-bar
 * y error-box aparecen siempre al abrir /app/ (“Analyzing…” + “Analysis failed”). */
[hidden]{display:none!important}

/* ================================================================== TEMA CLARO
 *                              «informe»
 * Gris neutro, negro casi puro, acento turquesa profundo. Lee como documento
 * impreso: nada de azules en el texto, para que se distinga del tema oscuro a
 * primera vista y no parezca el mismo producto con la luz cambiada. */
[data-theme="light"]{
  --bg:#f6f7f9;          --surface:#ffffff;     --surface-2:#eef1f5;   --surface-3:#e3e8ee;
  --line-soft:#e8ecf1;   --line:#d5dbe3;        --line-strong:#b4bdc9;
  --muted-3:#51565d;     --muted-2:#464c54;     --muted:#3d444c;
  --text-2:#384049;      --text:#14181d;        --text-hi:#000000;
  --ok-bg:#e4f4f5;       --ok-line:#a8d8db;     --ok:#0b6a73;     --ok-text:#0a5e66;     --ok-hi:#064047;
  --warn-bg:#fbf1dd;     --warn-line:#e6cfa0;   --warn:#8a5b0a;   --warn-text:#7a5009;   --warn-hi:#5c3c06;
  --danger-bg:#fbe9ef;   --danger-line:#efc2d2; --danger:#9b2f52; --danger-text:#8a2948; --danger-hi:#6b1f37;
  --info-bg:#eaf0fc;     --info-line:#c0d2f2;   --info:#1f4fb0;   --info-text:#1c479e;   --info-hi:#133272;
  --profit:#17794a;      --loss:#b3352a;
  --evidence-strong:var(--ok);     --evidence-strong-bg:var(--ok-bg);     --evidence-strong-line:var(--ok-line);     --evidence-strong-text:var(--ok-text);
  --evidence-moderate:var(--warn); --evidence-moderate-bg:var(--warn-bg); --evidence-moderate-line:var(--warn-line); --evidence-moderate-text:var(--warn-text);
  --evidence-weak:#8a6a3c; --evidence-weak-bg:#f7f1e6; --evidence-weak-line:#dcc9a4; --evidence-weak-text:#6e5328;
  --evidence-none:var(--danger); --evidence-none-bg:var(--danger-bg); --evidence-none-line:var(--danger-line); --evidence-none-text:var(--danger-text);
  --peak:var(--danger);            --peak-bg:var(--danger-bg);            --peak-text:var(--danger-text);
  --plateau:var(--ok);             --plateau-bg:var(--ok-bg);             --plateau-text:var(--ok-text);
  color-scheme:light;
}

/* Cifras de dinero. El unico sitio donde el verde y el rojo significan lo que un
   trader espera que signifiquen. */
.money{font-variant-numeric:tabular-nums}
.money.up{color:var(--profit)}
.money.down{color:var(--loss)}



*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  font-feature-settings:"ss01" 0,"kern" 1;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{margin:0;font-family:var(--font-display);letter-spacing:-.02em}
code{font-family:var(--mono);font-size:.92em;background:var(--surface-2);padding:1px 5px;border-radius:4px;color:var(--text)}
::selection{background:var(--ok-bg);color:var(--ok-hi)}
:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;border-radius:6px}

.shell{min-height:100vh;display:grid;grid-template-columns:248px 1fr}

/* ---------------------------------------------------------------- sidebar */
.sidebar{
  border-right:1px solid var(--line);
  background:var(--surface);
  padding:26px 18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
/* La marca es un boton o un enlace a la landing. */
.brand,.brand-link{
  display:block;padding:2px 6px 28px;
  background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;width:100%;
  text-decoration:none;
}
.brand:hover .brand-name,.brand-link:hover .brand-name{color:var(--ok)}
.brand:focus-visible,.brand-link:focus-visible{outline:2px solid var(--ok);outline-offset:3px;border-radius:var(--radius)}
.brand-sub{margin-top:4px}
/* La figura: una meseta de curvas de nivel dibujada en canvas. Al pasar el raton los
   picos aislados se desmoronan y queda la meseta ancha, que es la tesis del producto. */
.brand-row{display:flex;align-items:center;gap:7px}
/* 34 px de lienzo para 21 px de texto: la figura llena ahora casi todo su cuadro
   (ver `brandmark.js`), asi que el tamano del lienzo es el tamano que se ve. */
.brand-mark{width:34px;height:34px;flex:none;display:block}
.brand-name{display:block;font-weight:700;font-size:21px;letter-spacing:-.025em;transition:color .18s;line-height:1}
.brand-sub{display:block;font-size:12.5px;color:var(--muted-2);margin-top:1px}

/* ------------------------------------------------------------- idioma + tema */
.lang-row{display:flex;gap:4px;padding:0 4px 8px}
.lang-btn{
  flex:1;border:1px solid var(--line);background:none;color:var(--muted-2);
  border-radius:9px;padding:7px 4px;font:inherit;font-size:12px;font-weight:700;
  letter-spacing:.06em;cursor:pointer;transition:border-color .15s,color .15s,background .15s;
}
.lang-btn:hover{border-color:var(--line-strong);color:var(--text-2)}
.lang-btn[aria-checked="true"]{border-color:var(--ok-line);color:var(--ok-text);background:var(--ok-bg)}
.lang-btn:focus-visible{outline:2px solid var(--ok);outline-offset:2px}

.theme-row{display:flex;gap:4px;padding:0 4px 0}
.theme-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:5px;
  background:none;border:1px solid var(--line);color:var(--muted-2);
  border-radius:9px;padding:6px 4px;font:inherit;font-size:11.5px;cursor:pointer;
  transition:border-color .15s,color .15s;
}
.theme-btn:hover{border-color:var(--line-strong);color:var(--text-2)}
.theme-btn[aria-checked="true"]{border-color:var(--ok-line);color:var(--ok-text);background:var(--ok-bg)}
.theme-btn:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.swatch{width:11px;height:11px;border-radius:50%;border:1px solid var(--line-strong);flex:none}
.swatch.dark{background:#0b1220}
.swatch.light{background:#f2f5fa}

/* ------------------------------------------------------------ bloque de entrada */
.hero{margin:0 0 30px}
.hero-copy{max-width:900px}
.hero h1{
  font-size:clamp(26px,3.6vw,40px);line-height:1.12;letter-spacing:-.03em;
  margin:0 0 14px;max-width:16ch;color:var(--text-hi);
}
.hero-lead{font-size:16.5px;line-height:1.6;color:var(--text-2);margin:0 0 26px;max-width:62ch}
.hero-lead strong{color:var(--ok-text);font-weight:600}
.hero-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px}
.hero-points h2{
  font-size:13px;margin:0 0 6px;color:var(--text);letter-spacing:-.01em;
  padding-top:12px;border-top:1px solid var(--line);
}
.hero-points p{margin:0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.hero-points em{color:var(--text-2);font-style:normal}
/* En la pantalla inicial manda el bloque de entrada; en cuanto hay un analisis se
   cambian los papeles y la cabecera recupera su titulo. Asi no se dice dos veces lo
   mismo, que es lo que pasaba al juntarlos. */
.hero{display:none}
.skip-link{
  position:absolute;left:-9999px;top:8px;z-index:100;
  background:var(--ok-bg);color:var(--ok-text);border:1px solid var(--ok-line);
  border-radius:9px;padding:10px 16px;font-size:13px;text-decoration:none;
}
.skip-link:focus{left:8px}
.hero-back{display:flex;gap:10px;align-items:center;margin-bottom:22px;flex-wrap:wrap}
.legal-links{padding:10px 8px 0}
.legal-links .text-btn{font-size:12px;color:var(--muted-2)}
.legal-links .text-btn:hover{color:var(--ok-text)}
.legal-panel .limits li{margin-bottom:11px}
.legal-panel .limits strong{color:var(--text)}
.topbar-title{display:block}
.topbar-idle,.topbar-report{min-width:0}
.topbar{align-items:flex-start}
.topbar-report h1{
  font-size:clamp(20px,2.4vw,28px);letter-spacing:-.03em;line-height:1.15;
  max-width:36ch;margin:0;
}
.topbar-report-meta{
  margin:6px 0 0;font-size:12px;color:var(--muted);font-family:var(--mono);
  max-width:56ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Modo informe: tras analizar, la UI deja de vender y pasa a operar */
.has-analysis .intake{
  margin-bottom:14px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);
}
.has-analysis .upload-grid{gap:8px}
.has-analysis .dropzone{
  padding:8px 10px;min-height:0;align-items:center;
}
.has-analysis .file-icon{width:28px;height:28px;font-size:9px}
.has-analysis .drop-copy strong{font-size:12px}
.has-analysis .drop-copy span:last-child{font-size:11px}
.has-analysis .analyze-card{padding:8px 12px;min-height:0}
.has-analysis .analyze-icon,.has-analysis .analyze-arrow{display:none}
.has-analysis .analyze-card strong{font-size:13px}
.has-analysis .analyze-card span{font-size:11px}
.has-analysis .policy-panel{margin-top:10px}
.has-analysis .content{
  border-top:1px solid var(--line);padding-top:8px;
}
.has-analysis .demo-note{margin-top:0}
.intake-summary{display:none}
/* Colapsado: mismo trader que ya audito no necesita ver de nuevo las dropzones y la
   ficha de "Data check" en cada pestana -- solo un resumen de una linea con salida
   para volver a expandir si quiere cambiar de archivo. */
.has-analysis.intake-collapsed .intake .upload-grid,
.has-analysis.intake-collapsed .intake .set-hint,
.has-analysis.intake-collapsed .intake #preflight{display:none}
.has-analysis.intake-collapsed .intake-summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:12.5px;color:var(--muted);
}
.intake-summary strong{color:var(--text-2);font-weight:600}
.sidebar-section{padding:0 4px;display:flex;flex-direction:column}
.sidebar-label{font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--muted-2);text-transform:uppercase;padding:0 8px 8px}
.sidebar-label-gap{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.nav-item{
  display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;
  color:var(--text-2);text-align:left;padding:9px 10px;border-radius:9px;margin:1px 0;font-size:14.5px;
  transition:background .15s,color .15s;
}
/* Solo el numero ("01"): antes esto tambien alcanzaba al span de la etiqueta, y como
   .nav-item es flex, ese `width:20px` SI se aplica a un span (se "blockifica" como hijo
   flex) -- apretaba el texto de la pestana en una caja de 20px que se desbordaba sobre
   la siguiente pestana en la tira horizontal de movil. */
.nav-item span:first-child{font-size:11.5px;color:var(--muted-3);width:20px;font-variant-numeric:tabular-nums}
.nav-item:hover:not(:disabled){background:var(--surface-2);color:var(--text)}
.nav-item.active{background:var(--surface-3);color:var(--text-hi);font-weight:600}
.nav-item.active span{color:var(--accent)}
.nav-item:disabled{opacity:.34;cursor:default}
/* margin-top:auto empuja esto al fondo cuando sobra alto, pero en ventanas bajas el
   sobrante puede llegar a 0 y la pestana activa queda pegada al idioma/tema. padding-top
   + border-top garantizan un hueco minimo pase lo que pase con el alto disponible. */
.sidebar-bottom{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-soft)}
/* Antes usaba --line-strong (un tono para bordes, no para texto): 2,15:1 de contraste,
 * practicamente invisible a poco brillo. --muted-3 es el mismo espiritu de marca de
 * agua pero sigue siendo texto legible. */
.version{font-size:11px;color:var(--muted-3);padding:12px 8px 0}

/* ---------------------------------------------------------------- main */
.main{padding:32px 36px 60px;min-width:0}
.topbar{display:flex;justify-content:space-between;gap:28px;align-items:flex-start;margin-bottom:26px;flex-wrap:wrap}
.eyebrow{font-size:10.5px;letter-spacing:.16em;font-weight:700;color:var(--muted);text-transform:uppercase;margin-bottom:9px}
.topbar h1{font-size:38px;letter-spacing:-.035em;line-height:1.04;margin-bottom:9px;font-weight:700}
.topbar h1 em{font-style:normal;color:var(--accent)}
.subtitle strong{color:var(--text)}
.top-actions{display:flex;gap:8px;flex-wrap:wrap;position:relative}

.ghost-btn,.primary-btn{
  border:1px solid var(--line);background:transparent;color:var(--text-2);
  border-radius:9px;padding:9px 13px;font-size:12.5px;transition:background .15s,border-color .15s,color .15s;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
}
.ghost-btn:hover,.back-btn:hover{background:var(--surface-2);color:var(--text-hi);border-color:var(--line)}
.primary-btn{background:var(--text);color:var(--surface);border-color:var(--text);font-weight:700}
.primary-btn:hover:not(:disabled){background:var(--text-hi)}
.primary-btn:disabled{opacity:.32;cursor:default}
.text-btn{border:0;padding:0;background:none;color:var(--info-text);font-size:13px}
.text-btn:hover{color:var(--text);text-decoration:underline}
.link-btn{border:0;background:none;color:var(--accent);font-weight:700;padding:0;font-size:12.5px}
.link-btn:hover{text-decoration:underline}

.export-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:30;min-width:250px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:6px;
}
.export-menu button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--text-2);padding:9px 11px;border-radius:var(--radius-sm);font-size:12.5px}
.export-menu button:hover{background:var(--surface-3);color:var(--text-hi)}

/* ---------------------------------------------------------------- intake */
.intake{margin-bottom:26px}
.upload-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.dropzone,.analyze-card{
  min-height:82px;border:1px dashed var(--line);background:var(--surface);border-radius:var(--radius);
  padding:14px;display:flex;align-items:center;gap:13px;transition:border-color .15s,background .15s;
}
.dropzone{cursor:pointer}
.dropzone:hover,.dropzone.drag,.dropzone:focus-visible{border-color:var(--muted-3);background:var(--surface-2)}
.dropzone.ready{border-style:solid;border-color:var(--ok-line);background:var(--ok-bg)}
.dropzone.error{border-color:var(--danger);border-style:solid}
.dropzone.locked{opacity:.5;pointer-events:none}
.set-hint{
  margin:8px 2px 0;font-size:12px;color:var(--muted-2);line-height:1.45;
}
.set-hint .set-status{display:block;margin-top:3px;color:var(--muted);font-family:var(--mono);font-size:11.5px}
.set-hint .set-status:empty{display:none}
.file-icon{width:40px;height:40px;border-radius:var(--radius);flex:none;background:var(--ok-bg);color:var(--accent);font-weight:800;font-size:11px;display:grid;place-items:center;letter-spacing:.03em}
.file-icon.oos{background:var(--line-soft);color:var(--info)}
.drop-copy{min-width:0;flex:1}
.drop-copy strong{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;min-width:0}
.drop-copy strong>span{flex:none}
.drop-copy span{display:block;color:var(--muted-2);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.req,.opt{font-size:9px;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:999px;font-weight:700}
.req{background:var(--danger-bg);color:var(--danger-text);border:1px solid var(--danger-line)}
.opt{background:var(--surface-3);color:var(--info);border:1px solid var(--line-strong)}
.drop-action{margin-left:auto;color:var(--muted);font-size:11px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px 9px;flex:none}
.analyze-card{
  border-style:solid;border-color:var(--line);text-align:left;color:var(--text);width:100%;
  background:var(--surface-2);
}
.analyze-card:disabled{opacity:.42;cursor:default}
.analyze-card:not(:disabled):hover{border-color:var(--muted-3);background:var(--surface-3)}
.analyze-card.busy{opacity:.7;cursor:progress}
.analyze-icon{width:40px;height:40px;border-radius:var(--radius);flex:none;background:var(--text);color:var(--ok-bg);display:grid;place-items:center;font-size:20px}
.analyze-card strong{display:block;font-size:13px}
.analyze-card span{display:block;color:var(--muted-2);font-size:11.5px;margin-top:3px}
.analyze-arrow{margin-left:auto;color:var(--muted)}

.policy-panel{margin-top:11px;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);padding:18px}
.policy-head h2{font-size:15px;margin-bottom:5px}
.policy-head p{margin:0 0 15px;color:var(--muted);font-size:13.5px;max-width:760px}
.policy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:14px}
.field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
.field input[type=number]{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 11px;font-variant-numeric:tabular-nums}
.field.checkbox{flex-direction:row;align-items:center;gap:9px}
.field.checkbox input{width:16px;height:16px;accent-color:var(--ok-line)}

.status-bar{margin-top:11px;display:flex;align-items:center;gap:13px;font-size:12.5px;color:var(--muted)}
.progress{flex:1;height:5px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;width:2%;background:var(--accent);transition:width .25s}
.error-box{margin-top:11px;border:1px solid var(--line-strong);background:var(--danger-bg);border-radius:var(--radius);padding:14px 16px;font-size:13px;display:flex;flex-direction:column;gap:4px}
.error-box strong{display:block;color:var(--danger-text);margin-bottom:0}
.error-box span{color:var(--danger)}
.error-box .error-hint{color:var(--muted);font-size:12px;line-height:1.45;margin-top:4px}

.preflight{
  margin-top:12px;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);
  padding:14px 16px;
}
.preflight-head{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.preflight-kicker{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--muted-2);
}
.preflight-head strong{font-size:14px;color:var(--text-hi);letter-spacing:-.015em}
.preflight-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.preflight-card{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);
  padding:11px 12px;display:flex;flex-direction:column;gap:4px;min-width:0;
}
.preflight-role{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--muted-2)}
.preflight-card strong{
  font-size:12.5px;color:var(--text-hi);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.preflight-card em{font-style:normal;font-size:11.5px;color:var(--muted);line-height:1.4}
.preflight-ok{border-color:var(--ok-line);background:var(--ok-bg)}
.preflight-bad{border-color:var(--danger-line);background:var(--danger-bg)}
.preflight-empty{opacity:.72}
.preflight-bad em{color:var(--danger-text)}
.preflight-reading em{color:var(--info-text)}
.preflight-note{margin:10px 0 0;font-size:12px;color:var(--muted);line-height:1.45}
.preflight-note.is-warn{color:var(--warn-text)}
.outcome-banner{
  border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:12px;
}
.outcome-banner strong{display:block;font-size:13px;color:var(--warn-text);margin-bottom:4px}
.outcome-banner p{margin:0;font-size:12.5px;color:var(--text-2);line-height:1.45}
.outcome-no-qualifying{border-color:var(--danger-line);background:var(--danger-bg)}
.outcome-no-qualifying strong{color:var(--danger-text)}
.outcome-insufficient{border-color:var(--warn-line);background:var(--warn-bg)}
.outcome-no-plateau{border-color:var(--info-line);background:var(--info-bg)}
.outcome-no-plateau strong{color:var(--info-text)}
@media (max-width:720px){
  .preflight-grid{grid-template-columns:1fr}
}

.policy-preview{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:14px;padding:13px 15px;border:1px solid var(--ok-line);background:var(--ok-bg);border-radius:var(--radius);
}
.policy-preview strong{display:block;font-size:17px;color:var(--accent);font-variant-numeric:tabular-nums}
.policy-preview span{display:block;font-size:12px;color:var(--ok);margin-top:2px}
.policy-preview button:disabled{opacity:.35;cursor:default}

.run-stamp{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:11.5px;color:var(--muted-2);margin-bottom:11px;padding:0 2px;
}
.run-files{font-family:var(--mono);color:var(--muted)}
.run-files b{color:var(--muted-2);font-weight:400}
.run-sep{color:var(--line)}
.run-holdout{color:var(--muted);font-weight:600}

/* ---------------------------------------------------------------- content */
.content{min-height:420px}
.panel{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);padding:20px;min-width:0;margin-bottom:12px}
/* Paneles plegables de Diagnostico: el resumen ya dice lo esencial en la cabecera,
   el detalle estadistico denso se abre solo si alguien lo pide. */
details.panel{padding:0}
details.panel > summary{padding:20px;margin:0;cursor:pointer;list-style:none;position:relative}
details.panel > summary::-webkit-details-marker{display:none}
details.panel > summary::after{
  content:'+';position:absolute;right:20px;top:18px;color:var(--muted-2);
  font-size:20px;font-weight:400;line-height:1;
}
details.panel[open] > summary::after{content:'\2212'}
details.panel > summary:hover::after{color:var(--text)}
/* Deja hueco al +/- del summary para que no toque una badge situada a la derecha del titulo. */
details.panel > summary.panel-head.compact{padding-right:44px}
details.panel > .panel-body{padding:0 20px 20px}
.panel-evidence{border-color:var(--info-line);background:var(--info-bg)}
.panel-risk{border-color:var(--warn-line);background:var(--warn-bg)}
.panel-recommend{border-color:var(--ok-line);background:var(--surface)}
.panel-recommend > .panel-head .panel-kicker{color:var(--ok-text)}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:15px;flex-wrap:wrap}
.panel-head.compact{align-items:center}
.panel-kicker,.detail-kicker{font-size:10px;letter-spacing:.16em;font-weight:700;color:var(--muted-2);text-transform:uppercase}
.panel h2{font-size:17px;margin-top:4px;letter-spacing:-.02em}
.panel h3{font-size:13px;margin-bottom:9px;color:var(--text)}
.panel-intro{margin:0 0 15px;color:var(--muted);font-size:14px;max-width:820px}
.muted{color:var(--muted);font-size:13px}

.empty-state{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:40px 32px;text-align:center;display:flex;flex-direction:column;align-items:center}
.empty-surface{
  width:min(100%,520px);min-height:200px;max-height:240px;aspect-ratio:16 / 9;
  margin:0 0 22px;cursor:crosshair;
}
.empty-state h2{font-size:22px;margin-bottom:9px}
.empty-state p{max-width:660px;color:var(--muted);font-size:13.5px;margin:0 0 26px}
.empty-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;width:100%;max-width:860px;margin-bottom:24px;text-align:left}
.empty-steps>div{border:1px solid var(--line-soft);background:var(--surface);border-radius:var(--radius);padding:14px}
.empty-steps span{font-size:11px;font-weight:800;color:var(--accent);letter-spacing:.1em}
.empty-steps p{margin:7px 0 0;font-size:12.5px;color:var(--muted);max-width:none}
.empty-steps em{color:var(--text-2);font-style:normal;font-weight:600}

.demo-note{border:1px solid var(--line-strong);background:var(--surface-2);border-radius:var(--radius);padding:12px 15px;font-size:12.5px;color:var(--text-2);margin-bottom:12px}

/* ---------------------------------------------------------------- veredicto */
.verdict-banner{
  display:grid;grid-template-columns:auto minmax(0,1.2fr) minmax(220px,0.9fr);
  gap:20px 24px;align-items:stretch;border-radius:var(--radius);padding:22px 24px;margin-bottom:12px;border:1px solid;
}
.verdict-banner.v-no{background:var(--evidence-none-bg);border-color:var(--evidence-none-line)}
.verdict-banner.v-weak{background:var(--evidence-weak-bg);border-color:var(--evidence-weak-line)}
.verdict-banner.v-warn{background:var(--evidence-moderate-bg);border-color:var(--evidence-moderate-line)}
.verdict-banner.v-go{background:var(--evidence-strong-bg);border-color:var(--evidence-strong-line)}
.verdict-stamp-col{display:flex;align-items:flex-start}
.verdict-stamp{
  font-size:12px;font-weight:800;letter-spacing:.14em;padding:14px 16px;border-radius:var(--radius);
  white-space:pre-line;border:2px solid;line-height:1.25;text-align:center;max-width:12ch;
}
.v-no .verdict-stamp{background:var(--evidence-none-bg);color:var(--evidence-none-text);border-color:var(--evidence-none-line)}
.v-weak .verdict-stamp{background:var(--evidence-weak-bg);color:var(--evidence-weak-text);border-color:var(--evidence-weak-line)}
.v-warn .verdict-stamp{background:var(--evidence-moderate-bg);color:var(--evidence-moderate-text);border-color:var(--evidence-moderate-line)}
.v-go .verdict-stamp{background:var(--evidence-strong-bg);color:var(--evidence-strong);border-color:var(--evidence-strong-line)}
.verdict-body{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:6px}
.verdict-body h2{font-size:22px;letter-spacing:-.025em;margin:0;line-height:1.2}
.verdict-body p{margin:0;color:var(--text-2);font-size:13.5px;line-height:1.5}
.verdict-aside{
  display:flex;flex-direction:column;gap:10px;min-width:0;
  padding-left:20px;border-left:1px solid var(--line);
}
.verdict-fact{display:flex;flex-direction:column;gap:3px;min-width:0}
.verdict-fact-label{
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--muted-2);
}
.verdict-fact-value{font-size:13.5px;color:var(--text-hi);font-weight:700;line-height:1.35}
.verdict-fact-value.mono{font-family:var(--mono);font-size:15px;letter-spacing:-.02em}
.verdict-fact-note{
  font-size:11.5px;color:var(--muted);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.verdict-fact-risk .verdict-fact-value{color:var(--warn-text)}
.v-no .verdict-fact-risk .verdict-fact-value{color:var(--danger-text)}
.v-weak .verdict-fact-risk .verdict-fact-value{color:var(--evidence-weak-text)}
.verdict-fact-next .verdict-fact-value{font-weight:600;color:var(--text)}
.verdict-fact-cta{align-self:flex-start;margin-top:2px;font-weight:600}

.kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:12px}
.kpi{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);padding:15px}
.kpi-label{font-size:10px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.kpi-value{font-size:26px;font-weight:700;letter-spacing:-.035em;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi-note{color:var(--muted-2);font-size:11px;margin-top:4px}
.kpi[title]{cursor:help}
.kpi-help{display:inline-grid;place-items:center;width:13px;height:13px;margin-left:5px;border-radius:50%;border:1px solid var(--line-strong);color:var(--muted);font-size:9px;font-weight:700;vertical-align:1px}

.grid-secondary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}

.findings{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
/* Hallazgos pegados a la tabla que narran (Diagnostico), no en una lista aparte. */
.findings-inline{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
.finding{display:flex;gap:12px;padding:13px 0;border-top:1px solid var(--line-soft)}
.finding:first-child{border-top:0;padding-top:0}
.finding-mark{width:8px;height:8px;border-radius:50%;margin-top:7px;flex:none}
.f-block .finding-mark{background:var(--danger)}
.f-warn .finding-mark{background:var(--warn)}
.f-ok .finding-mark{background:var(--accent)}
.f-info .finding-mark{background:var(--muted-2)}
.finding strong{font-size:13.5px;display:block;margin-bottom:3px}
.f-block strong{color:var(--danger-text)}
.f-warn strong{color:var(--warn-text)}
.f-ok strong{color:var(--ok-text)}
.finding p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.55}

/* ---------------------------------------------------------------- hoja de evidencia (Result) */
.panel-evidence-sheet,.panel-why,.panel-ranges{margin-bottom:12px}
.evidence-sheet{display:flex;flex-direction:column}
.evidence-sheet-row{
  display:grid;grid-template-columns:minmax(140px,0.9fr) minmax(120px,0.7fr) minmax(0,1.4fr);
  gap:12px 18px;align-items:baseline;padding:11px 0;border-top:1px solid var(--line-soft);
  font-size:var(--fs-sm);
}
.evidence-sheet-row:first-child{border-top:0;padding-top:2px}
.evidence-sheet-row span{color:var(--muted);font-weight:600}
.evidence-sheet-row strong{color:var(--text-hi);font-family:var(--mono);font-size:var(--fs-base);font-weight:700}
.evidence-sheet-row em{font-style:normal;color:var(--muted-2);font-size:var(--fs-xs);line-height:1.4}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.why-col h3{
  margin:0 0 10px;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;
  font-weight:800;color:var(--muted-2);
}
.why-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.why-col li{display:flex;flex-direction:column;gap:3px;padding-top:10px;border-top:1px solid var(--line-soft)}
.why-col li:first-child{padding-top:0;border-top:0}
.why-col strong{font-size:var(--fs-sm);color:var(--text-hi);font-weight:700}
.why-col span{font-size:var(--fs-xs);color:var(--muted);line-height:1.45}
.why-pros strong{color:var(--ok-text)}
.why-cons strong{color:var(--warn-text)}
.why-empty{color:var(--muted-2) !important;font-size:var(--fs-sm)}
.range-table-wrap{overflow:auto;margin-top:8px}
.range-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.range-table th{
  text-align:left;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);font-weight:700;padding:0 12px 8px 0;border-bottom:1px solid var(--line);
}
.range-table td{padding:9px 12px 9px 0;border-top:1px solid var(--line-soft);color:var(--text-2)}
.range-table td.mono{font-family:var(--mono);color:var(--text-hi);font-weight:600}
.panel-ranges .panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
@media (max-width:720px){
  .evidence-sheet-row{grid-template-columns:1fr;gap:4px;padding:12px 0}
  .evidence-sheet-row em{order:3}
  .why-grid{grid-template-columns:1fr}
}

.rep-card{display:flex;flex-direction:column;gap:14px}
.rep-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.rep-pass{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--text)}
.rep-sub{font-size:11.5px;color:var(--muted-2);margin-top:3px}
.rep-score{font-size:30px;font-weight:700;color:var(--accent);line-height:1;text-align:right;font-variant-numeric:tabular-nums}
.rep-score small{display:block;color:var(--muted-3);font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-top:4px}
.rep-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.inline-warn{border:1px solid var(--line-strong);background:var(--warn-bg);border-radius:9px;padding:10px 12px;font-size:12px;color:var(--warn)}
.inline-warn code{background:var(--warn-bg);color:var(--warn-text)}

.param-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden}
.param{background:var(--surface);padding:10px 12px}
.param span{display:block;color:var(--muted-2);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.param strong{display:block;color:var(--text);font-family:var(--mono);font-size:13px;margin-top:4px}

.evidence-list{display:grid}
.evidence-list>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--line-soft);font-size:13.5px}
.evidence-list>div:first-child{border-top:0}
.evidence-list span{color:var(--muted)}
.evidence-list strong{color:var(--text-hi);font-family:var(--mono);font-size:13.5px;text-align:right}
.evidence-list em{font-style:normal;color:var(--muted-2);font-family:var(--font);font-size:11px}

/* ---------------------------------------------------------------- top 3 */
.t3-panel{padding-bottom:14px}
.t3-consensus{text-align:right;border:1px solid var(--ok-line);background:var(--ok-bg);border-radius:var(--radius);padding:9px 14px}
.t3-consensus strong{display:block;font-size:19px;color:var(--accent);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.t3-consensus span{display:block;font-size:10.5px;color:var(--ok);max-width:190px;line-height:1.35;margin-top:2px}
.t3-podium{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(200px,0.85fr);
  gap:12px;margin:4px 0 16px;align-items:stretch;
}
.t3-featured{
  border:1px solid var(--ok-line);background:var(--ok-bg);border-radius:var(--radius);
  padding:16px 16px 14px;display:flex;flex-direction:column;gap:12px;
}
.t3-featured-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.t3-featured-metrics{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;
}
.t3-featured-metrics > div{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 9px;
  display:flex;flex-direction:column;gap:2px;
}
.t3-featured-metrics span{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted-2)}
.t3-featured-metrics strong{font-family:var(--mono);font-size:13px;color:var(--text-hi)}
.t3-param-chips{display:flex;flex-wrap:wrap;gap:6px}
.t3-param-chips span{
  font-size:11px;font-family:var(--mono);color:var(--text-2);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:4px 7px;
}
.t3-param-chips b{color:var(--text-hi);font-weight:700}
.t3-featured-actions,.t3-alt-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.t3-btn-inline{width:auto;margin:0;display:inline-flex}
.t3-alts{display:flex;flex-direction:column;gap:10px;min-width:0}
.t3-alt{
  border:1px solid var(--line);background:var(--surface-2);border-radius:var(--radius);
  padding:12px 13px;display:flex;flex-direction:column;gap:6px;flex:1;
}
.t3-alt .t3-rank{color:var(--muted-2)}
.t3-score-sm{font-size:20px;margin-top:2px}
.t3-alt-meta{margin:0;font-size:11.5px;color:var(--muted)}
.t3-compare-wrap{margin-top:4px}
.t3-table{min-width:560px}
.t3-table th,.t3-table td{border-bottom:1px solid var(--line-soft);vertical-align:middle}
.t3-label{width:230px;color:var(--muted);font-size:11.5px;font-weight:500;text-transform:none;letter-spacing:0;white-space:nowrap;position:sticky;left:0;background:var(--surface);z-index:1}
th.t3-label{padding-left:2px}
.t3-col{text-align:center;padding:9px 12px;min-width:150px}
.t3-best{background:var(--ok-bg)}
.t3-table thead th{padding:12px 12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.t3-rank{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted-2)}
.t3-featured .t3-rank,.t3-best .t3-rank{color:var(--accent)}
.t3-pass{font-family:var(--mono);font-size:14px;color:var(--text);margin-top:5px;font-weight:600}
.t3-score{font-size:28px;font-weight:700;color:var(--accent);line-height:1.1;margin-top:0;font-variant-numeric:tabular-nums;text-align:right}
.t3-score small{display:block;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-3);font-weight:700;margin-top:1px}
.t3-flags{margin-top:6px;display:flex;gap:4px;flex-wrap:wrap}
.t3-alt .t3-flags{justify-content:flex-start}
.t3-tag{font-style:normal;color:var(--muted-2);font-size:10px;display:block;margin-top:1px}
.t3-value{font-family:var(--mono);font-size:13px;color:var(--text)}
.t3-agree .t3-label{color:var(--ok)}
.t3-agree .t3-value{color:var(--ok-text);font-weight:600}
.t3-agree{background:var(--ok-bg)}
.t3-agree .t3-label{background:var(--ok-bg)}
.t3-tick{color:var(--accent);margin-left:7px;font-weight:700}
.t3-sep td,.t3-sep th{border-bottom:1px solid var(--line)}
.t3-params-head th{padding-top:16px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:700;background:var(--surface)}
.t3-table tfoot td{padding-top:14px;border-bottom:0}
.t3-table tfoot th{border-bottom:0;background:var(--surface)}
.t3-btn{display:block;width:100%;margin:0 auto 7px;text-align:center}

/* ---------------------------------------------------------------- soltar archivos */
.drop-overlay{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:var(--bg);
}
.drop-overlay-card{
  border:2px dashed var(--accent);background:var(--ok-bg);border-radius:var(--radius);
  padding:38px 46px;text-align:center;max-width:460px;
}
.drop-overlay-icon{
  width:52px;height:52px;margin:0 auto 16px;border-radius:50%;
  background:var(--surface);color:var(--accent);border:1px solid var(--ok-line);
  display:grid;place-items:center;font-size:26px;font-weight:700;
}
.drop-overlay-card strong{display:block;font-size:19px;margin-bottom:7px}
.drop-overlay-card span{display:block;color:var(--muted);font-size:13px;line-height:1.5}

/* ---------------------------------------------------------------- periodo no visto */
.req-mark{font-style:normal;color:var(--danger);font-weight:700}
.u-table td{vertical-align:middle}
.u-label{color:var(--text-2);white-space:nowrap}
.u-scaled{display:inline-block;margin-left:6px;color:var(--accent2);font-weight:700;cursor:help}
.u-band{width:240px;padding:6px 10px}
.u-range{font-size:11px;color:var(--muted);line-height:1.3}
.u-range small{display:block;color:var(--muted-2);font-size:10px;margin-top:2px}
.u-ok .u-label{color:var(--ok)}
.u-warn .u-label{color:var(--warn)}
.u-bad .u-label{color:var(--danger-text)}
.u-bad{background:var(--danger-bg)}
.u-warn{background:var(--warn-bg)}
.badge.bad{border-color:var(--line);background:var(--danger-bg);color:var(--danger-text)}
.ub{width:230px;height:30px;display:block;overflow:visible}
.ub-range{stroke:var(--line-strong);stroke-width:1.5}
.ub-box{fill:var(--ok-bg);stroke:var(--ok-line);stroke-width:1}
.ub-median{stroke:var(--accent);stroke-width:1.5;opacity:.7}
.ub-obs{stroke:var(--surface);stroke-width:1.5}
.ub-obs.ub-ok{fill:var(--accent)}
.ub-obs.ub-warn{fill:var(--warn)}
.ub-obs.ub-bad{fill:var(--danger)}

.report-drop{border-style:dashed;border-color:var(--line)}
.report-ok{
  margin-top:12px;border:1px solid var(--ok-line);background:var(--ok-bg);border-radius:9px;
  padding:10px 12px;font-size:12.5px;color:var(--ok);
}
.report-mismatch{margin-top:12px}
.report-mismatch strong{display:block;margin-bottom:5px}
.report-mismatch b{color:var(--warn-text)}

/* ---------------------------------------------------------------- tablas */
.detail-head{margin-bottom:16px}
.detail-head h2{font-size:26px;margin:8px 0;letter-spacing:-.025em}
.detail-head p{color:var(--muted);font-size:13.5px;margin:0;max-width:880px}
.detail-head strong{color:var(--text)}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:10px 10px;border-bottom:1px solid var(--line-soft);text-align:left;white-space:nowrap;vertical-align:top}
th{color:var(--muted-2);font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:700}
td{color:var(--text-2);font-variant-numeric:tabular-nums}
tr.sel{background:var(--ok-bg)}
tr.sel td{color:var(--text-2)}
.strong{color:var(--text-hi);font-weight:700}
.mono{font-family:var(--mono);color:var(--text-2)}
.rank-mini{color:var(--accent);font-weight:700;font-family:var(--mono)}
.values{white-space:normal;font-family:var(--mono);font-size:11px;color:var(--muted);max-width:320px}
.reasons{white-space:normal;max-width:380px;display:flex;flex-wrap:wrap;gap:4px}
.reason{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger-text);border-radius:999px;padding:3px 9px;font-size:10.5px}

/* tabla de influencia por parametro */
.grid-table td{white-space:nowrap}
.grid-table tr.rescued{background:var(--ok-bg)}
.grid-table tr.rescued td{color:var(--text-2)}
.role{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:999px;border:1px solid;display:inline-block}
.role.dist{border-color:var(--line-strong);background:var(--surface-3);color:var(--info)}
.role.block{border-color:var(--line-strong);background:var(--warn-bg);color:var(--warn)}
.role.flat{border-color:var(--line);background:var(--surface-3);color:var(--muted-2)}

.stability-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:6px}
.stability-cols h3{font-size:13px;margin:0 0 3px;color:var(--text);letter-spacing:-.01em}
.stability-sub{font-size:11.5px;color:var(--muted);margin:0 0 10px}
.evidence-list strong.big{font-size:15px;font-family:var(--mono)}
.evidence-list strong.big.ok{color:var(--ok)}
.evidence-list strong.big.warn{color:var(--warn)}
.evidence-list strong.big.bad{color:var(--danger-text)}

/* sello de estabilidad del veredicto */
.stability-badge{font-family:var(--mono);font-size:20px;font-weight:700;padding:6px 14px;border-radius:var(--radius);border:1px solid;white-space:nowrap}
.stability-badge.ok{border-color:var(--ok-line);background:var(--ok-bg);color:var(--ok)}
.stability-badge.warn{border-color:var(--line-strong);background:var(--warn-bg);color:var(--warn)}
.stability-badge.bad{border-color:var(--danger-line);background:var(--danger-bg);color:var(--danger-text)}

.badge,.status-pill{font-size:9.5px;font-weight:700;letter-spacing:.05em;border-radius:999px;padding:4px 9px;border:1px solid;text-transform:uppercase;display:inline-block}
.badge{border-color:var(--line);background:var(--surface-3);color:var(--muted)}
.badge.ok{border-color:var(--ok-line);background:var(--ok-bg);color:var(--ok)}
.badge.warn{border-color:var(--line-strong);background:var(--warn-bg);color:var(--warn)}
.status-pill{border-color:var(--ok-line);background:var(--ok-bg);color:var(--ok)}
.status-pill.warn-pill{border-color:var(--line-strong);background:var(--warn-bg);color:var(--warn)}
.warn-panel{border-color:var(--warn-line);background:var(--warn-bg)}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--surface-3);border:1px solid var(--line);color:var(--muted);border-radius:var(--radius-sm);padding:5px 9px;font-size:11.5px;font-family:var(--mono)}
.chip.param-chip{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.columns-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}

.inline-select{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.inline-select select{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 10px;font-size:12px;max-width:260px}

/* --------------------------------------------------- superficie 3D de la meseta */
.surface-axes{display:flex;flex-wrap:wrap;gap:10px 16px}
.surface-wrap{display:flex;gap:16px;align-items:stretch;margin-top:4px}
#plateauSurfaceCanvas{
  flex:1.6;min-width:0;aspect-ratio:16/11;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);display:block;
}
.surface-detail{
  flex:1;min-width:200px;max-width:260px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface-2);padding:14px 16px;display:flex;flex-direction:column;justify-content:center;
}
.surface-detail .evidence-list>div{padding:6px 0}
@media (max-width:760px){
  .surface-wrap{flex-direction:column}
  .surface-detail{max-width:none}
  #plateauSurfaceCanvas{aspect-ratio:16/12}
}

.limits{margin:0;padding-left:18px;color:var(--muted);font-size:14px}
.limits li{margin-bottom:9px}

.method-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.method-grid>div{border:1px solid var(--line-soft);background:var(--surface);border-radius:var(--radius);padding:16px}
.method-grid span{font-size:11px;color:var(--accent);font-weight:800;letter-spacing:.1em}
.method-grid h3{font-size:14px;margin:8px 0 6px}
.method-grid p{font-size:12.5px;color:var(--muted);line-height:1.55;margin:0}

/* ---------------------------------------------------------------- graficos */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart-note{margin:12px 0 0;font-size:12.5px;color:var(--muted-2);line-height:1.5}
.chart-block{display:flex;flex-direction:column;gap:10px}
.chart-legend{
  display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;
  font-size:11px;color:var(--muted);padding:2px 0 0;
}
.chart-legend-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.chart-swatch{
  width:10px;height:10px;border-radius:50%;flex:none;border:1px solid transparent;
}
.chart-swatch-pass{background:var(--info);opacity:.7}
.chart-swatch-fail{background:var(--muted-3);opacity:.45}
.chart-swatch-plateau{background:var(--ok)}
.chart-swatch-rep{background:var(--ok-hi);border:2px solid var(--ok);width:8px;height:8px}
.chart-swatch-bar{width:14px;height:8px;border-radius:2px;background:var(--info)}
.chart-swatch-bar-top{width:14px;height:8px;border-radius:2px;background:var(--ok)}
.chart-swatch-q25{width:14px;height:0;border-top:2px dashed var(--warn);border-radius:0}
.ch-grid{stroke:var(--surface-3);stroke-width:1}
.ch-axis{stroke:var(--line);stroke-width:1}
.ch-tick{fill:var(--muted-2);font-size:10px;font-family:var(--font)}
.ch-count{fill:var(--muted-3);font-size:9px;font-family:var(--font)}
.ch-axis-label{fill:var(--muted-2);font-size:10.5px;font-family:var(--font)}
.ch-row-label{fill:var(--muted);font-size:11px;font-family:var(--mono)}
.ch-point-label{fill:var(--text-2);font-size:10px;font-weight:700;font-family:var(--font)}
.ch-diagonal{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:4 4}
.pt-fail{fill:var(--muted-3);opacity:.4}
.pt-pass{fill:var(--info);opacity:.55}
.pt-plateau{fill:var(--plateau);opacity:.7}
.pt-rep{fill:var(--text-hi);stroke:var(--plateau);stroke-width:2.5}
.chart-swatch-plateau{background:var(--plateau)}
.chart-swatch-rep{background:var(--text-hi);border:2px solid var(--plateau);width:8px;height:8px}
.ch-iqr{fill:var(--ok-bg);stroke:var(--ok-line);stroke-width:1}
.ch-median{stroke:var(--accent);stroke-width:2}
.ch-bar{fill:var(--info-line)}
.ch-bar-top{fill:var(--accent2)}
.ch-line-q25{fill:none;stroke:var(--warn);stroke-width:1.6;stroke-dasharray:3 3}
.ch-sens-active{fill:var(--accent)}
.ch-sens-block{fill:var(--accent2)}
.ch-sens-flat{fill:var(--line-strong)}
/* Marca donde cae la sensibilidad AISLADA dentro de la barra del EFECTIVO: solo se
 * dibuja cuando la combinada rescata al parametro (ver sensitivityBars en charts.js). */
.ch-sens-marginal{stroke:var(--warn);stroke-width:2}
.ch-sens-marginal-swatch{display:inline-block;width:2px;height:12px;background:var(--warn);vertical-align:middle;margin:0 1px}
.hm-cell{fill:var(--accent)}
.hm-empty{fill:var(--surface-2)}
.hm-text{fill:var(--ok-bg);font-size:9.5px;font-weight:700;font-family:var(--font);pointer-events:none}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1180px){
  .grid-secondary,.columns-grid{grid-template-columns:1fr}
  .kpi-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .shell{grid-template-columns:200px 1fr}
  .main{padding:26px 20px 50px}
  .upload-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .analyze-card{grid-column:1/-1}
  .topbar h1{font-size:31px}
}
@media (max-width:880px){
  /* Con la barra lateral puesta ya no caben dos cajas sin desbordar. */
  .upload-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .shell{display:block}
  /*
   * La barra lateral no se oculta: se convierte en una cabecera compacta y fija arriba,
   * con la marca en su propia fila y la navegacion como tira horizontal de pestanas
   * debajo. Antes toda `.brand` y `.sidebar-bottom` desaparecian con `display:none`, y
   * con ellas el boton de volver a la portada, el selector de tema y el enlace legal
   * quedaban completamente inaccesibles en movil, no solo feos.
   */
  .sidebar{
    position:sticky;top:0;height:auto;flex-direction:column;align-items:stretch;
    padding:0;border-right:0;border-bottom:1px solid var(--line);
    z-index:30;gap:0;
  }
  .brand{
    flex-direction:row;align-items:center;gap:10px;padding:10px 12px;
    border-bottom:1px solid var(--line-soft);
  }
  .brand-row{gap:8px}
  .brand-mark{width:28px;height:28px}
  .brand-name{font-size:16px}
  /* El subtitulo sobra en una cabecera de 44px de alto: ya lo dice el titulo de la pagina. */
  .brand-sub{display:none}
  .sidebar-scroll{
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .sidebar-scroll::-webkit-scrollbar{display:none}
  .sidebar-label{display:none}
  .sidebar-label-gap{display:none;margin:0;padding:0;border:0}
  .sidebar-section{flex-direction:row;padding:6px 10px;gap:6px}
  /* flex-shrink:0 es el arreglo real: sin el, flexbox encogia las 7 pestanas para que
     cupieran todas en el ancho visible (¡46px cada una!) antes de recurrir al scroll
     horizontal que .sidebar-scroll ya ofrece, y "Diagnostics"/"Unseen period"/
     "Methodology" con white-space:nowrap se desbordaban unas sobre otras. */
  .nav-item{width:auto;flex-shrink:0;white-space:nowrap;margin:0;padding:8px 13px;font-size:14px;border-radius:999px;background:var(--surface-2)}
  /* Solo se oculta el numero ("01"): el nombre de la pestana es lo unico que la
     identifica en la tira horizontal, y ocultar los dos span dejaba pildoras sin texto. */
  .nav-item span:first-child{display:none}
  /* `.sidebar-section` de mas en el selector (no solo `.nav-item.active`): con la misma
     especificidad que la regla de escritorio (linea ~262), cual gana dependia de en que
     pestana se entraba primero -- en la carga inicial ganaba esta, pero tras un click
     real (con su scrollIntoView) volvia a ganar la de escritorio y la pestana activa se
     quedaba con el fondo oscuro de siempre en vez del relleno solido que se ve aqui. Con
     mas especificidad no hay ambiguedad posible. */
  .sidebar-section .nav-item.active{background:var(--accent);color:var(--surface)}
  /* La regla de base pinta el span de accent para que el "01" resalte sobre el fondo
     oscuro del escritorio; aqui el fondo YA es accent, asi que ese mismo color deja el
     texto invisible (accent sobre accent). El span visible hereda el color del boton. */
  .sidebar-section .nav-item.active span{color:inherit}
  /* El pie ya no necesita quedarse abajo del todo: en movil es otra fila compacta,
     con el mismo scroll horizontal por si el espacio aprieta. */
  .sidebar-bottom{
    /* Sin `display:flex` aqui, `flex-direction:row` no hacia nada: idioma, tema y aviso
       legal caian cada uno como bloque de ancho completo, apilados en tres filas altas
       en vez de una sola tira compacta. */
    display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;
    padding:6px 10px;border-top:1px solid var(--line-soft);gap:10px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .sidebar-bottom::-webkit-scrollbar{display:none}
  .theme-row{padding:0;flex:none}
  .lang-row{padding:0;flex:none;margin-right:6px}
  .lang-btn{padding:11px 10px;min-height:44px}
  .theme-btn{padding:11px 8px;font-size:0;min-height:44px;display:flex;align-items:center;justify-content:center}
  .theme-btn .swatch{margin:0}
  .legal-links{padding:0;flex:none;margin-left:8px}
  .version{display:none}
  .main{padding:20px 16px 44px}
  .t3-consensus{text-align:left;margin-top:10px}
  .t3-consensus span{max-width:none}
  .t3-label{width:150px;white-space:normal}
  .t3-col{min-width:110px;padding:8px}
  .u-band{width:150px}
  .ub{width:150px}
  /* minmax(0,...) y no 1fr a secas: el minimo de `1fr` es el min-content, asi que el
     texto de la caja la empujaba a 412 px dentro de una pantalla de 343 y aparecia
     scroll horizontal en toda la pagina. */
  .upload-grid{grid-template-columns:minmax(0,1fr)}
  .drop-copy{min-width:0}
  .drop-copy span{white-space:normal;overflow-wrap:anywhere}
  .kpi-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  /* Objetivos tactiles: 20 px de alto es imposible de acertar con el dedo. */
  .text-btn{min-height:44px;display:inline-flex;align-items:center}
  .hero-back{gap:6px}
  .topbar h1{font-size:27px}
  .verdict-banner{grid-template-columns:1fr;gap:14px}
  .verdict-aside{padding-left:0;border-left:0;padding-top:12px;border-top:1px solid var(--line)}
  .t3-podium{grid-template-columns:1fr}
  .empty-state{padding:38px 20px}
}

@media print{
  /* El informe impreso tiene que ser legible en papel, no una captura en negativo. */
  @page{margin:10mm}
  html,body{background:var(--text-hi) !important;color:var(--surface) !important;font-size:10pt}
  .shell{display:block}
  .sidebar,.intake,.top-actions,.export-menu,.drop-overlay,.text-btn,.ghost-btn,.primary-btn,.link-btn{display:none !important}
  .main{padding:0}
  .topbar{margin-bottom:5mm;border-bottom:1px solid var(--text-2);padding-bottom:3mm}
  .topbar h1{font-size:17pt;color:var(--surface)}
  .topbar h1 em{color:var(--surface)}
  .eyebrow{color:var(--muted-3)}
  .panel,.kpi{border:1px solid var(--text-2);background:var(--text-hi);box-shadow:none;break-inside:avoid;page-break-inside:avoid;margin-bottom:3mm;padding:12px 14px !important}
  .panel h2,.detail-head h2,.kpi-value,.rep-pass,.strong,.t3-pass{color:var(--surface)}
  .panel-kicker,.detail-kicker,.kpi-label,.kpi-note,.chart-note,.panel-intro,.muted,.t3-rank{color:var(--muted-3)}
  /* Las tarjetas de Top3 (recomendada/alternativas) mantienen su propio fondo oscuro en
     la impresion (no son .panel), asi que su "Pass NNNN" necesita seguir en claro; la
     regla generica de arriba lo oscurecia pensando en fondo blanco. */
  .t3-featured .t3-pass,.t3-alt .t3-pass{color:var(--text-hi)}
  /* Mismo problema que verdict-fact-value: --text-2/--text-hi puestos para fondo oscuro
     quedaban ilegibles sobre el papel blanco en estas dos tablas. */
  .range-table td,.range-table td.mono{color:var(--surface)}
  .evidence-sheet-row strong{color:var(--surface)}
  /* El informe impreso es un resumen, no una copia de toda la pestana: la hoja de
     evidencia, los rangos estables, los graficos y "mas hallazgos" ya se pueden
     consultar en la app. En papel sobran paginas sin anadir nada que el veredicto,
     el porque y el Top 3 no digan ya. */
  .panel-evidence-sheet,.panel-ranges,.grid-secondary,.panel-evidence{display:none !important}
  .grid-secondary,.columns-grid{grid-template-columns:1fr}
  table{font-size:9pt}
  th{color:var(--line)}
  td{color:var(--surface)}
  th,td{border-bottom:1px solid var(--text)}
  .verdict-banner{border:2px solid var(--surface);background:var(--text-hi) !important;break-inside:avoid;padding:14px 16px;margin-bottom:3mm}
  .panel-head{margin-bottom:8px}
  .panel-intro{margin-bottom:8px}
  .run-stamp{margin-bottom:3mm}
  .verdict-banner h2,.verdict-stamp{color:var(--surface) !important;background:var(--text-hi) !important;border-color:var(--surface) !important}
  /* .verdict-fact-value usaba --text-hi (blanco en tema oscuro): sobre el fondo blanco
     forzado del papel quedaba texto blanco sobre blanco, ilegible. */
  .verdict-aside{border-color:var(--text-2)}
  .verdict-fact-label{color:var(--muted-3)}
  .verdict-fact-value,.verdict-fact-next .verdict-fact-value{color:var(--surface)}
  .verdict-fact-note{color:var(--line-strong);-webkit-line-clamp:unset;overflow:visible}
  .finding p,.limits li{color:var(--line)}
  .finding strong{color:var(--surface)}
  .badge,.status-pill,.chip,.reason{border-color:var(--muted);background:var(--text-hi);color:var(--surface)}
  .param{background:var(--text-hi);border-bottom:1px solid var(--text)}
  .param span{color:var(--muted-3)}
  .param strong{color:var(--surface)}
  .t3-best,.t3-agree,.u-bad,.u-warn{background:var(--text-hi) !important}
  .t3-label,.u-label{background:var(--text-hi)}
  .chart{max-width:100%}
  .ch-tick,.ch-axis-label,.ch-count,.ch-row-label{fill:var(--line-strong)}
  .ch-grid{stroke:var(--text)}
  .ch-axis{stroke:var(--muted)}
  .pt-fail{fill:var(--text-2)}
  .pt-pass{fill:var(--muted)}
  .pt-plateau{fill:var(--line)}
  .hm-cell{fill:var(--line)}
  .table-wrap{overflow:visible}
  /* Cada seccion del informe empieza en su pagina. */
  .detail-head{page-break-before:always}
  .content>.detail-head:first-child{page-break-before:avoid}
}

/* ---------------------------------------------------------------- landing */
.landing-page{
  min-height:100vh;display:flex;flex-direction:column;
  background:var(--bg);color:var(--text);
}
.lp-shell{
  width:100%;max-width:1320px;margin:0 auto;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.lp-top{
  border-bottom:1px solid var(--line);background:var(--surface);
  padding:16px 0;
}
.lp-brand{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
}
.lp-brand .brand-mark{width:34px;height:34px}
.lp-brand .brand-name{font-weight:700;font-size:21px;letter-spacing:-.025em;line-height:1}
.brand-name,.lp-brand .brand-name{color:var(--text-hi)}
.lp-top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lp-top-actions .lang-row,.lp-top-actions .theme-row{padding:0}
.lp-top-actions .lang-btn{padding:7px 9px;min-height:36px}
.lp-top-actions .theme-btn{
  min-width:36px;min-height:36px;padding:8px;flex:none;
}
.landing-page .lp-top-actions .theme-btn > span:not(.swatch){
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0
}
.lp-cta-top{padding:7px 12px;font-size:var(--fs-sm)}
.lp-main{flex:1;max-width:1320px;width:100%;margin:0 auto;padding:28px 32px 64px}

/* Hero: copy + product visual as one first-viewport composition */
.lp-hero{
  display:grid;
  grid-template-columns:minmax(280px,0.95fr) minmax(0,1.25fr);
  gap:28px 40px;
  align-items:start;
  margin-bottom:var(--space-section);
}
.lp-hero-copy{padding-top:0;min-width:0}
.lp-eyebrow{
  font-size:var(--fs-sm);letter-spacing:.16em;font-weight:700;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;
}
.lp-hero h1{
  font-size:var(--fs-display);line-height:1.04;letter-spacing:-.04em;
  margin:0 0 16px;max-width:14ch;color:var(--text-hi);
}
.lp-hero h1 em{font-style:normal;color:var(--accent)}
.lp-lead{
  font-size:16px;line-height:1.58;color:var(--text-2);margin:0 0 22px;max-width:44ch;
}
.lp-lead strong{color:var(--text-hi);font-weight:600}
.lp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.lp-cta-demo{box-shadow:0 0 0 1px color-mix(in srgb, var(--ok) 28%, transparent)}
.lp-privacy{margin:0 0 16px;font-size:var(--fs-base);color:var(--text-2);max-width:42ch;line-height:1.5}
.lp-proof{
  margin:0;padding:10px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;
  background:transparent;font-size:var(--fs-base);color:var(--text-2);max-width:44ch;line-height:1.5;
}
.lp-proof strong{color:var(--text-hi);font-weight:600}

.lp-hero-visual{min-width:0}
.lp-compare-heading{
  font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--muted-2);margin:0 0 10px;
}
@keyframes lp-rise{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.lp-surface{
  position:relative;isolation:isolate;
  border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);
  overflow:hidden;margin-bottom:10px;outline:none;
  min-height:280px;aspect-ratio:16 / 9;max-height:360px;
  cursor:crosshair;
  animation:lp-rise .75s ease both;
}
[data-theme="dark"] .lp-surface{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.lp-surface:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.lp-surface-canvas{display:block;width:100%;height:100%}
.lp-surface-caption{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:14px 16px;
  background:linear-gradient(to top, var(--surface), transparent);
  pointer-events:none;
  font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em;
}
.lp-surface-peak{color:var(--peak-text)}
.lp-surface-ok{color:var(--plateau-text);text-align:right}
.lp-surface-hint{
  flex:1;text-align:center;font-weight:600;letter-spacing:.02em;
  color:var(--muted);opacity:.95;font-size:var(--fs-sm);
}
.lp-surface[data-surface-state="plateau"] .lp-surface-peak{opacity:.45}
.lp-surface[data-surface-state="peaks"] .lp-surface-ok{opacity:.45}
.lp-sr-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.lp-compare-strip{
  display:grid;grid-template-columns:1fr 1fr;gap:0 28px;
  margin-top:6px;padding-top:14px;border-top:1px solid var(--line);
}
.lp-strip{border:0;background:transparent;border-radius:0;padding:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.lp-strip-before,.lp-strip-after{min-width:0}
.lp-strip-kicker{
  font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--muted-2);
}
.lp-strip-after .lp-strip-kicker{color:var(--text-2)}
.lp-strip strong{font-size:var(--fs-base);color:var(--text-hi);letter-spacing:-.02em}
.lp-strip p{margin:0;font-size:var(--fs-md);line-height:1.45;color:var(--text-2)}
.lp-strip-badges{display:flex;flex-wrap:wrap;gap:10px 14px}
.lp-mt5-table{
  width:100%;border-collapse:collapse;font-family:var(--mono);font-size:var(--fs-xs);
  color:var(--text-2);
}
.lp-mt5-table th{
  text-align:left;font-weight:700;color:var(--muted-2);padding:0 6px 6px 0;
  border-bottom:1px solid var(--line);letter-spacing:.04em;text-transform:uppercase;font-size:10px;
}
.lp-mt5-table td{padding:6px 8px 0 0;white-space:nowrap}
.lp-mt5-table tr.is-best td{color:var(--danger-text)}
.lp-mt5-table tr.is-best td:first-child{text-decoration:line-through;opacity:.75}
.lp-mt5-meta{margin:0;font-size:var(--fs-xs);color:var(--muted-2)}
.lp-strip-meta{
  margin-top:2px;font-size:var(--fs-sm);font-family:var(--mono);color:var(--text-2);
  display:flex;flex-direction:column;gap:2px;
}
.lp-strip-meta span{font-family:var(--font);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--muted-2)}
.lp-strip-meta b{font-weight:700;color:var(--text-hi)}
.lp-strip-meta-ok b{color:var(--text-hi)}
.lp-stamp,.lp-reject-pill{
  display:inline;font-family:var(--mono);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;
  padding:0;border:0;border-radius:0;background:transparent;
}
.lp-stamp{color:var(--warn-text)}
.lp-reject-pill{color:var(--danger-text)}
.lp-compare-caption{margin:12px 0 0;font-size:var(--fs-md);color:var(--text-2);max-width:70ch;line-height:1.5}

.lp-doc h1{
  font-size:clamp(28px,4vw,40px);line-height:1.12;letter-spacing:-.03em;
  margin:0 0 16px;max-width:18ch;color:var(--text-hi);
}
.lp-doc .lp-lead{margin-bottom:28px}
.lp-pipeline{
  list-style:none;margin:0 0 36px;padding:0;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;
}
.lp-pipeline li{
  border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);
  padding:12px 10px;display:flex;flex-direction:column;gap:4px;min-width:0;
  position:relative;
}
.lp-pipeline li + li::before{
  content:"→";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  color:var(--muted-2);font-size:var(--fs-sm);font-weight:700;z-index:1;
  background:var(--bg);padding:0 2px;
}
.lp-pipe-num{
  font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;
  color:var(--ok-text);
}
.lp-pipeline strong{font-size:var(--fs-md);color:var(--text-hi);letter-spacing:-.02em}
.lp-pipeline span{font-size:var(--fs-sm);color:var(--muted);line-height:1.35}

.lp-claims{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  margin:0 0 36px;
}
.lp-claim{
  border:1px solid var(--ok-line);background:var(--ok-bg);border-radius:var(--radius);
  padding:18px 16px;display:flex;flex-direction:column;gap:8px;min-width:0;
}
.lp-claim-kicker{
  font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ok-text);
}
.lp-claim h2{
  font-size:var(--fs-xl);letter-spacing:-.025em;margin:0;color:var(--text-hi);text-transform:none;font-weight:700;
}
.lp-claim p{margin:0;font-size:var(--fs-md);line-height:1.5;color:var(--text-2)}

.lp-doc-block{margin:0 0 28px;padding-top:20px;border-top:1px solid var(--line)}
.lp-doc-block h2{
  font-size:var(--fs-xl);letter-spacing:-.02em;text-transform:none;font-weight:700;
  color:var(--text);margin:0 0 10px;
}
.lp-doc-block p{margin:0;font-size:var(--fs-base);line-height:1.6;color:var(--text-2);max-width:62ch}
.lp-doc-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}

.lp-section{margin-bottom:var(--space-section);padding-top:32px;border-top:1px solid var(--line)}
.lp-section-features,.lp-section-risk{min-width:0}
.lp-section h2{
  font-size:var(--fs-xl);letter-spacing:-.02em;text-transform:none;font-weight:700;
  color:var(--text-hi);margin:0 0 20px;
}
.lp-section-kicker{
  display:block;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--muted-2);margin:0 0 6px;
}
.lp-features{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:22px;max-width:64ch;
}
.lp-features li{display:grid;grid-template-columns:auto 1fr;gap:14px 16px;align-items:start}
.lp-feat-num{
  font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;letter-spacing:.08em;
  color:var(--ok-text);padding-top:3px;
}
.lp-features h3{
  font-size:var(--fs-lg);margin:0 0 6px;color:var(--text-hi);letter-spacing:-.02em;font-weight:700;
}
.lp-features p{margin:0;font-size:var(--fs-base);line-height:1.58;color:var(--text-2)}
.lp-risks{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);
}
.lp-risks li{
  padding:18px 20px 4px 0;border-right:1px solid var(--line);
  min-width:0;
}
.lp-risks li:last-child{border-right:0;padding-right:0}
.lp-risks h3{
  font-size:var(--fs-base);margin:0 0 8px;color:var(--text);letter-spacing:-.015em;font-weight:600;
}
.lp-risks p{margin:0;font-size:var(--fs-md);line-height:1.55;color:var(--text-2)}
.lp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.lp-grid h3{font-size:var(--fs-base);margin:0 0 6px;color:var(--text);letter-spacing:-.015em;font-weight:600}
.lp-grid p{margin:0;font-size:var(--fs-md);line-height:1.5;color:var(--muted)}
.lp-flow-tagline{
  margin:6px 0 18px;font-size:var(--fs-lg);font-weight:700;color:var(--ok-text);letter-spacing:-.01em;
}
.lp-steps{
  margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  color:var(--text-2);font-size:var(--fs-md);line-height:1.5;
}
.lp-steps li{
  display:flex;gap:10px;align-items:flex-start;
  padding:14px 0 0;border-top:1px solid var(--line);
}
.lp-step-num{
  flex:none;width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:var(--fs-xs);font-weight:800;
  color:var(--muted-2);border:1px solid var(--line);
}
.lp-steps strong{color:var(--text)}
.lp-method-bridge{
  margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:var(--fs-md);line-height:1.55;color:var(--text-2);max-width:62ch;
}
.lp-method-bridge a{color:var(--ok-text);text-decoration:underline;text-underline-offset:2px}
.lp-method-bridge a:hover{color:var(--text-hi)}
.lp-list{margin:0;padding-left:20px;color:var(--text-2);font-size:var(--fs-base);line-height:1.55}
.lp-list li+li{margin-top:8px}
.lp-final{
  margin-bottom:24px;padding:36px 0 8px;
  border-top:1px solid var(--line);
}
.lp-final h2{
  font-size:var(--fs-2xl);letter-spacing:-.025em;text-transform:none;color:var(--text-hi);
  margin:0 0 10px;max-width:22ch;
}
.lp-final p{margin:0 0 18px;color:var(--text-2);font-size:var(--fs-lg);max-width:48ch}
.lp-cta-final{animation:lp-rise .8s ease .15s both}
.lp-foot{
  margin-top:auto;border-top:1px solid var(--line);
  padding:28px 0;font-size:var(--fs-md);color:var(--muted);
}
.lp-foot-inner{
  align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.lp-foot-brand{display:flex;flex-direction:column;gap:6px;max-width:42ch}
.lp-foot-brand strong{color:var(--text-hi);font-size:var(--fs-lg);letter-spacing:-.02em}
.lp-foot-brand span{line-height:1.5;color:var(--text-2)}
.lp-foot-nav{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.lp-foot-nav a{
  min-height:44px;display:inline-flex;align-items:center;padding:8px 2px;
  color:var(--muted);text-decoration:none;font-size:var(--fs-md);
}
.lp-foot-nav a:hover{color:var(--ok-text);text-decoration:underline}

@media (prefers-reduced-motion: reduce){
  .lp-surface,.lp-cta-final,.lp-surface *{animation:none !important;scroll-behavior:auto}
}

@media (max-width:980px){
  .lp-hero{grid-template-columns:1fr;gap:18px;align-items:start}
  .lp-hero-copy{padding-top:0;max-width:42rem}
  .lp-hero h1{max-width:16ch}
  .lp-lead{max-width:52ch}
  .lp-risks,.lp-grid,.lp-steps{grid-template-columns:1fr}
  .lp-risks li{border-right:0;border-bottom:1px solid var(--line);padding:16px 0}
  .lp-risks li:last-child{border-bottom:0}
  .lp-pipeline{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lp-pipeline li + li::before{display:none}
  .lp-claims{grid-template-columns:1fr}
}
@media (max-width:720px){
  .lp-shell{padding:0 16px}
  /* Mismo tamano que .brand-mark/.brand-name en movil dentro de la app (linea ~873):
     sin esto el logo de la portada se queda fijo a tamano de escritorio y "salta" de
     tamano justo al entrar en la app, dando sensacion de cabeceras sin cuidar. */
  .lp-brand .brand-mark{width:28px;height:28px}
  .lp-brand .brand-name{font-size:16px}
  .lp-main{padding:18px 16px 40px}
  .lp-cta-top{display:none}
  .lp-compare-strip{grid-template-columns:1fr;gap:18px}
  .lp-surface{min-height:200px;max-height:260px}
  .lp-surface-caption{flex-wrap:wrap;row-gap:6px;padding:12px 12px 10px}
  .lp-surface-hint{
    order:3;flex:1 1 100%;text-align:left;display:block;
    opacity:1;font-weight:600;
  }
  .lp-pipeline{grid-template-columns:1fr 1fr}
  .lp-foot-inner{flex-direction:column;gap:16px}
}
@media (max-height:700px) and (min-width:981px){
  .lp-surface{min-height:200px;max-height:240px}
  .lp-hero{margin-bottom:32px}
}
@media (hover: none){
  .lp-surface{cursor:pointer}
}