/* El Faro — capa visual de la aplicación y del informe PDF (se carga la última; el PDF la incrusta con sus ajustes de papel).
   Dirección: oscura, minimalista y técnica, en la línea de libraries.dev: lienzo #121212 con retícula de puntos,
   tarjetas #181818 con hilo de luz interior, tipografía Inter de peso medio, píldoras y un único azul de acción.
   Los componentes animados (BorderBeam, ThinkingOrb, MetalFx) se montan como islas desde /islas.js. */

:root {
  color-scheme: dark;
  /* Lienzo y superficies */
  --marfil: #121212;
  --lienzo: #121212;
  --papel: #181818;
  --tarjeta: #181818;
  --escenario: #131313;
  --superficie-2: #202020;
  --superficie-3: #2a2a2a;
  --noche: #0d0d0d;
  --noche-2: #161616;
  --fondo-suave: #1f1f1f;
  --linea: #262626;
  --linea-fuerte: #383838;
  --borde: #262626;
  --hilo: rgba(255, 255, 255, .06);

  /* Texto */
  --tinta: #ededed;
  --tinta-fuerte: #fefefe;
  --tinta-suave: #9e9e9e;
  --tinta-tenue: #8f8f8f;

  /* Acción: un solo azul */
  --azul: #0066e6;
  --azul-hover: #005bd0;
  --azul-claro: #7db4ff;
  --azul-fondo: rgba(0, 113, 252, .18);

  /* Ámbar: SOLO observación seleccionada y supuestos */
  --ambar: #f5b33a;
  --ambar-fondo: rgba(245, 179, 58, .16);
  --ambar-borde: #f5b33a;

  /* Estados (siempre con texto + icono) */
  --acreditado: #4ade80;     --acreditado-fondo: rgba(74, 222, 128, .10);
  --declarado: #7db4ff;      --declarado-fondo: rgba(0, 113, 252, .14);
  --contradictorio: #f87171; --contradictorio-fondo: rgba(248, 113, 113, .12);
  --desconocido: #8f8f8f;    --desconocido-fondo: rgba(255, 255, 255, .03);
  --aviso: #fbbf24;          --aviso-fondo: rgba(251, 191, 36, .09);
  --error: #f87171;          --error-fondo: rgba(248, 113, 113, .10);
  --info: #7db4ff;           --info-fondo: rgba(0, 113, 252, .10);

  /* Colores estables por marca, aclarados para fondo oscuro */
  --marca-0: #3b8eff;
  --marca-1: #fb923c;
  --marca-2: #2dd4bf;
  --marca-3: #a78bfa;
  --marca-4: #f472b6;
  --marca-5: #a3e635;
  --marca-6: #facc15;
  --marca-7: #94a3b8;

  --fuente-titulo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radio: 10px;
  --radio-m: 12px;
  --radio-g: 20px;
  --radio-xl: 24px;
  --sombra: none;
  --sombra-1: 0 1px 3px rgba(0, 0, 0, .04), inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 0 0 1px rgba(255, 255, 255, .06);
  --sombra-2: 0 0 0 1px rgba(0, 0, 0, .06), 0 2px 6px rgba(0, 0, 0, .05), 0 4px 42px rgba(0, 0, 0, .24), inset 0 0 0 1px rgba(255, 255, 255, .05);
  --sombra-pildora: 0 1px 3px rgba(0, 0, 0, .04), inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 0 0 1px rgba(255, 255, 255, .1);
  --foco: 0 0 0 2px #121212, 0 0 0 4px var(--azul);
  --ancho-lateral: 232px;
}

/* ───── Base ───── */
html { background: var(--lienzo); }
body, body.app, body.publico {
  /* el color de fondo lo pone <html>: si lo pusiera body, taparía la capa de puntos (z-index: -1) */
  background-color: transparent;
  color: var(--tinta);
  font-feature-settings: "cv11", "ss01";
}
/* Rejilla de puntos en una capa fija propia: la GPU la reutiliza al hacer scroll.
   (Con background-attachment: fixed el navegador repinta toda la pantalla en cada fotograma de scroll.) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 22px 22px;
}
@media print { body::before { display: none; } }
::selection { background: rgba(0, 113, 252, .45); color: #fff; }
h1, h2, h3, h4 { font-family: var(--fuente-titulo); font-weight: 500; color: var(--tinta-fuerte); letter-spacing: -0.012em; }
h1 { letter-spacing: -0.02em; }
h3, h4 { font-weight: 550; letter-spacing: -0.005em; }
a { color: var(--tinta); text-decoration-color: rgba(255, 255, 255, .28); }
a:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, .6); }
:is(main p, main li, main dd, main td, main .tarjeta__titulo, main .barra-acciones, main .aviso, main .citas) > a:not(.boton):not(.rep) { color: var(--azul-claro); text-decoration-color: rgba(125, 180, 255, .35); }
:is(main p, main li, main dd, main td, main .tarjeta__titulo, main .barra-acciones, main .aviso, main .citas) > a:not(.boton):not(.rep):hover { color: #a9ceff; }
.tarjeta__titulo > a { text-decoration: none; font-size: .875rem; }
.tarjeta-marca, .tarjeta-marca:hover { color: var(--tinta); text-decoration: none; }
:focus-visible { box-shadow: var(--foco); }
hr { border: 0; border-top: 1px solid var(--linea); }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .88em; background: var(--superficie-2); padding: 1px 6px; border-radius: 6px; }
.suave, .discreto, .entradilla, .campo__ayuda, .aviso-honesto { color: var(--tinta-suave); }
.sobretitulo { font-family: var(--fuente-texto); font-size: .72rem; letter-spacing: .14em; font-weight: 500; color: var(--tinta-tenue); }
.titular { font-weight: 500; letter-spacing: -0.025em; line-height: 1.07; }
.entradilla { font-size: 1.05rem; line-height: 1.6; }
.sec > h2 { font-size: 1.35rem; font-weight: 500; border-bottom: 0; padding-bottom: 0; }
.tarjeta__titulo h2, .tarjeta__titulo h3 { font-size: 1.1rem; font-weight: 550; }
.pregunta-titular, .titular-informe { font-weight: 500; letter-spacing: -0.02em; }

/* ───── Barra lateral y superior ───── */
.lateral { background: #0e0e0e; border-right: 1px solid var(--linea); color: var(--tinta-suave); padding: 20px 12px; }
.lateral::after { display: none; }
.lateral__marca { color: var(--tinta-fuerte); font-family: var(--fuente-texto); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; padding: 4px 10px 26px; }
.lateral__nav a, .lateral__salir button { color: rgba(202, 202, 202, .7); font-size: .875rem; font-weight: 500; padding: 9px 12px; border-radius: 999px; }
.lateral__nav a:hover, .lateral__salir button:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.lateral__nav a[aria-current="page"] { background: rgba(255, 255, 255, .07); color: #fff; box-shadow: var(--sombra-pildora); }
.lateral a:focus-visible, .lateral button:focus-visible { box-shadow: var(--foco); }
.barra { background: rgba(18, 18, 18, .78); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linea); }
.barra__marca-analizada { font-family: var(--fuente-texto); font-weight: 600; font-size: 1rem; color: var(--tinta-fuerte); letter-spacing: -0.01em; }
.barra__detalle { color: var(--tinta-tenue); }
.barra__menu nav { background: var(--superficie-2); border: 0; border-radius: var(--radio-m); box-shadow: var(--sombra-2); }
.barra__menu nav a, .barra__menu nav button { color: var(--tinta); }
.barra__menu nav a:hover, .barra__menu nav button:hover { background: rgba(255, 255, 255, .06); }
.barra__menu summary { color: var(--tinta); }
.pestanas { background: transparent; border-bottom: 1px solid var(--linea); gap: 2px; padding-top: 8px; padding-bottom: 8px; }
.pestanas a { color: rgba(202, 202, 202, .7); font-size: .875rem; font-weight: 500; padding: 8px 14px; border-radius: 999px; border-bottom: 0; }
.pestanas a:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.pestanas a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .08); box-shadow: var(--sombra-pildora); }
.saltar { background: var(--azul); color: #fff; }

/* ───── Superficies ───── */
.tarjeta, .kpi, .tarjeta-marca, .accion-tarjeta, .panel-evidencia, .respuesta, .cuadro, .ficha, .hallazgo, .progreso, .rival, .explorador__pregunta, .marcas-chatgpt__item, .competidor-propuesto, .accion, .accion-grande, .ficha-con-correccion, .avanzadas, .estado, .exploracion {
  background: var(--tarjeta); border: 0; box-shadow: var(--sombra-1); color: var(--tinta);
}
.tarjeta { border-radius: var(--radio-xl); padding: 26px; }
.kpi, .tarjeta-marca, .accion-tarjeta, .panel-evidencia, .respuesta, .cuadro, .ficha, .hallazgo, .ficha-con-correccion { border-radius: var(--radio-g); }
.rival, .explorador__pregunta, .marcas-chatgpt__item, .competidor-propuesto, .accion, .avanzadas, .exploracion { border-radius: 16px; }
.tarjeta .tarjeta, .tarjeta .ficha, .tarjeta .hallazgo, .tarjeta .rival, .tarjeta .explorador__pregunta, .tarjeta .marcas-chatgpt__item, .tarjeta .exploracion, .tarjeta .avanzadas, .tarjeta .ficha-con-correccion { background: var(--escenario); }
.tarjeta-marca:hover { transform: translateY(-2px); box-shadow: var(--sombra-1), 0 10px 40px rgba(0, 0, 0, .35); }
.estado { border: 1px dashed var(--linea-fuerte); box-shadow: none; background: rgba(255, 255, 255, .015); border-radius: var(--radio-g); }
.tarjeta-marca__nombre, .kpi__valor, .cifra__valor, .tarjeta-marca__cifra strong, .serie-tarjeta__cifra strong, .accion-grande strong, .hallazgo__prioridad { font-family: var(--fuente-texto); font-weight: 500; letter-spacing: -0.02em; }
.kpi__valor { font-size: 2.2rem; color: var(--tinta-fuerte); }
/* cifras de ancho fijo: al contar no cambian de ancho ni recolocan lo de alrededor */
.kpi__valor, .tarjeta-marca__cifra strong { font-variant-numeric: tabular-nums; }
.kpi__etiqueta { font-weight: 500; color: var(--tinta-suave); }
.tarjeta-marca__nombre { font-size: 1.1rem; font-weight: 550; }
.tarjeta-marca__pie, .fila-curso { border-color: var(--linea); }

/* ───── Botones: píldoras ───── */
.boton {
  border: 0; border-radius: 999px; background: var(--azul); color: #fff; font-size: .875rem; font-weight: 500;
  min-height: 38px; padding: 8px 18px; box-shadow: var(--sombra-pildora); transition: background .15s, transform .08s, box-shadow .15s;
}
.boton:hover { background: var(--azul-hover); color: #fff; box-shadow: var(--sombra-pildora); }
.boton:active { transform: translateY(1px); }
.boton--grande { min-height: 46px; padding: 11px 26px; font-size: .95rem; }
.boton--pequeno { min-height: 32px; padding: 6px 14px; font-size: .8rem; }
.boton--secundario { background: var(--superficie-3); color: #fff; box-shadow: var(--sombra-pildora); }
.boton--secundario:hover { background: #333; color: #fff; }
.boton--fantasma { background: transparent; color: var(--tinta); box-shadow: none; }
.boton--fantasma:hover { background: rgba(255, 255, 255, .06); box-shadow: none; }
.boton[disabled], .boton[aria-disabled="true"] { opacity: .4; }
.barra-acciones .boton { min-height: 36px; padding: 7px 16px; font-size: .85rem; }
button.enlace, .enlace-boton { color: var(--azul-claro); }

/* ───── Campos ───── */
input[type="text"], input[type="password"], input[type="url"], input[type="search"], input[type="number"], input[type="date"], input:not([type]), select, textarea,
.campo input[type="text"], .campo input[type="url"], .campo input[type="search"], .campo input[type="number"], .campo textarea, .campo select {
  background: var(--escenario); color: var(--tinta-fuerte); border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); min-height: 44px;
}
input::placeholder, textarea::placeholder { color: var(--tinta-tenue); }
input:hover, select:hover, textarea:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
input:focus, select:focus, textarea:focus, .campo input:focus-visible, .campo textarea:focus-visible, .campo select:focus-visible { box-shadow: inset 0 0 0 1px var(--azul), 0 0 0 4px rgba(0, 113, 252, .2); }
select, .campo select { background-color: var(--escenario); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239e9e9e' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; appearance: none; }
input[type="checkbox"] { accent-color: var(--azul); }
input[type="file"] { background: var(--escenario); border: 1px dashed var(--linea-fuerte); color: var(--tinta-suave); border-radius: 12px; }
.campo label, .etiqueta { font-weight: 500; color: var(--tinta); font-size: .875rem; }
.campo--supuesto input { box-shadow: inset 0 0 0 1px rgba(245, 179, 58, .55); background: color-mix(in srgb, var(--ambar) 6%, var(--escenario)); }
.avanzadas > summary { color: var(--tinta); font-weight: 500; }

/* ───── Píldoras, insignias, avisos ───── */
.pildora { background: rgba(255, 255, 255, .06); color: var(--tinta); border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); font-weight: 500; }
.pildora--ok { background: var(--acreditado-fondo); color: var(--acreditado); }
.pildora--aviso { background: var(--aviso-fondo); color: var(--aviso); }
.pildora--error { background: var(--error-fondo); color: var(--error); }
.pildora--info { background: var(--azul-fondo); color: var(--azul-claro); }
.insignia { border: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent); font-weight: 500; }
.insignia--neutra { color: var(--tinta); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.aviso { border: 0; border-radius: 16px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aviso-color) 28%, transparent); background: var(--aviso-bg); }
.aviso__titulo { color: var(--tinta-fuerte); font-weight: 600; }
.aviso-marcas { background: linear-gradient(90deg, rgba(245, 179, 58, .10), rgba(245, 179, 58, .03)); border: 0; box-shadow: inset 0 0 0 1px rgba(245, 179, 58, .22); border-radius: 16px; }

/* ───── Acceso ───── */
.acceso__escena { background: radial-gradient(120% 80% at 20% 0%, #1b2433 0%, #121212 55%); color: var(--tinta-suave); border-right: 1px solid var(--linea); }
.acceso__marca { font-family: var(--fuente-texto); font-weight: 600; font-size: 1.2rem; }
.acceso__lema h1 { font-weight: 500; letter-spacing: -0.03em; }
.acceso__lema p { color: var(--tinta-suave); }
.acceso__puntos { color: var(--tinta-suave); }
.acceso__puntos li::before { background: var(--azul); box-shadow: 0 0 12px var(--azul); }
.acceso__formulario h2 { font-weight: 500; letter-spacing: -0.02em; }
.acceso__formulario { background: var(--tarjeta); box-shadow: var(--sombra-1); border-radius: var(--radio-xl); padding: 32px; }

/* ───── Inicio ───── */
.portada { background: radial-gradient(90% 120% at 50% -20%, rgba(0, 113, 252, .16), transparent 60%), var(--tarjeta); border-radius: var(--radio-xl); box-shadow: var(--sombra-1); color: var(--tinta-suave); text-align: center; padding: 64px 40px 48px; }
.portada .haz { display: none; }
.portada h1 { color: var(--tinta-fuerte); font-weight: 500; letter-spacing: -0.03em; font-size: clamp(2rem, 1.3rem + 2.2vw, 2.9rem); }
.portada p { color: var(--tinta-suave); margin-left: auto; margin-right: auto; }
.portada__form { margin: 0 auto; max-width: 620px; padding: 6px; background: var(--escenario); border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); align-items: center; }
.portada__form input { background: transparent; box-shadow: none; min-height: 46px; padding-left: 18px; font-size: 1rem; }
.portada__form input:focus { box-shadow: inset 0 0 0 1px rgba(0, 113, 252, .7); border-radius: 999px; }
.portada__form .boton { background: var(--azul); color: #fff; min-height: 44px; }
.portada__form .boton:hover { background: var(--azul-hover); }
.portada__form:focus-within { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 4px rgba(0, 113, 252, .18); }
.portada__pie { justify-content: center; color: var(--tinta-tenue); }
.portada__pie a { color: var(--azul-claro); }
.portada .pildora { background: rgba(255, 255, 255, .05); color: var(--tinta); }
.barrita { background: rgba(255, 255, 255, .06); }
.barrita > span { background: var(--azul); }
.tabla-historial th, .comparativa th { color: var(--tinta-tenue); font-weight: 500; border-color: var(--linea); }
.tabla-historial td, .comparativa td { border-color: var(--linea); }
.tabla-historial tr:hover td { background: rgba(255, 255, 255, .025); }
.tabla-historial a { color: var(--tinta-fuerte); }

/* ───── Pasos y progreso ───── */
.pasos-indicador li { background: rgba(255, 255, 255, .08); }
.pasos-indicador li[data-hecho] { background: var(--azul); }
.paso-uno .campo input { min-height: 54px; font-size: 1.1rem; }
.progreso-faro { background: radial-gradient(80% 140% at 0% 0%, rgba(0, 113, 252, .14), transparent 60%), var(--tarjeta); box-shadow: var(--sombra-1); border-radius: var(--radio-xl); color: var(--tinta-suave); display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; align-items: center; }
.progreso-faro > :not(.progreso-faro__orbe) { grid-column: 2; }
.progreso-faro__orbe { grid-row: 1 / span 4; grid-column: 1; width: 64px; height: 64px; display: grid; place-items: center; }
.progreso-faro .haz { display: none; }
.progreso-faro h1 { color: var(--tinta-fuerte); font-weight: 500; }
.progreso-faro p { color: var(--tinta-suave); }
.progreso-faro__barra { background: rgba(255, 255, 255, .07); height: 6px; }
.progreso-faro__barra span { background: linear-gradient(90deg, #3b8eff, var(--azul)); }
.linea-tiempo li { color: var(--tinta-tenue); }
.linea-tiempo li::before { background: var(--escenario); border-color: var(--linea-fuerte); }
.linea-tiempo li[data-estado="hecho"]::before { background: var(--acreditado); border-color: var(--acreditado); }
.linea-tiempo li[data-estado="actual"] { color: var(--tinta-fuerte); font-weight: 500; }
.linea-tiempo li[data-estado="actual"]::before { background: var(--azul); border-color: var(--azul); box-shadow: 0 0 0 5px rgba(0, 113, 252, .22); }
.orbe-en-linea { display: inline-grid; vertical-align: middle; width: 20px; height: 20px; margin-right: 6px; }

/* ───── Confirmación ───── */
.rival { box-shadow: var(--sombra-1); }
.rival:has(input[type="checkbox"]:checked) { box-shadow: inset 0 0 0 1px rgba(0, 113, 252, .55), var(--sombra-1); }
.rival:not(:has(input[type="checkbox"]:checked)) { opacity: .5; }
.rival__dominio, .rival__aviso { color: var(--tinta-tenue); }
.rival__motivo { color: var(--tinta-suave); }
.exploracion { box-shadow: var(--sombra-1); }
.exploracion__item { border-color: var(--linea); }
.exploracion__respuesta { color: var(--tinta-suave); }
.lanzar__linea { font-weight: 500; color: var(--tinta-fuerte); }

/* ───── Hallazgos, citas, barras ───── */
.hallazgo { border-left: 0; box-shadow: var(--sombra-1); }
.hallazgo__prioridad { background: rgba(0, 113, 252, .18); color: var(--azul-claro); }
.hallazgo__ambito, .hallazgo__datos .dato { background: rgba(255, 255, 255, .05); color: var(--tinta); }
.hallazgo__detalle { border-color: var(--linea); }
.hallazgo__cita { background: rgba(74, 222, 128, .06); border-left-color: rgba(74, 222, 128, .6); color: var(--tinta); }
.hallazgo__cita--contra { background: rgba(248, 113, 113, .06); border-left-color: rgba(248, 113, 113, .6); }
.hallazgo--seleccionado { background: var(--ambar-fondo); box-shadow: inset 0 0 0 1px rgba(245, 179, 58, .5); }
.barras__pista, .mini-barra__pista, .marcas-chatgpt__barra { background: rgba(255, 255, 255, .06); }
.barras__intervalo, .barras__intervalo::before, .barras__intervalo::after { background: rgba(255, 255, 255, .55); }
.serie-tarjeta--no { background: var(--escenario); }
.serie-tarjeta__motivo { color: var(--aviso); }
.serie-tarjeta__cifra .sube, .matriz__ventaja--ventaja { color: var(--acreditado); }
.serie-tarjeta__cifra .baja, .matriz__ventaja--desventaja { color: var(--contradictorio); }
.hechos-mercado > span { background: rgba(255, 255, 255, .04); border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.extracto { background: var(--ambar-fondo); border-left-color: var(--ambar); color: var(--tinta); }
.extracto mark, mark.seleccion { background: var(--ambar); color: #121212; }
.no-comparables { background: rgba(255, 255, 255, .03); }
.ficha { box-shadow: var(--sombra-1); border-top: 0; }
.ficha-con-correccion .ficha { box-shadow: none; background: transparent; }
.ficha-con-correccion .correccion-mini { border-color: var(--linea); }
.dimensiones li, .decision, .lista-simple li, .lista-respuestas li, .correccion-fila + .correccion-fila { border-color: var(--linea); }
.correcciones { border: 0; box-shadow: var(--sombra-1); border-radius: 16px; }
.correccion-fila { background: var(--tarjeta); }
.cabecera-informe { border-bottom: 0; }
.versiones a[aria-current="page"] { border-bottom-color: var(--azul); }

/* ───── Tablas ───── */
.tabla-envoltorio { background: var(--tarjeta); border: 0; box-shadow: var(--sombra-1); border-radius: 16px; }
.tabla thead th { background: var(--superficie-2); font-family: var(--fuente-texto); font-weight: 500; font-size: .8rem; color: var(--tinta-suave); }
.tabla th, .tabla td { border-color: var(--linea); }

/* ───── Matriz de atributos: legible con muchas marcas ───── */
.matriz-envoltorio, .mapa-envoltorio {
  border: 0; border-radius: var(--radio-g); box-shadow: var(--sombra-1);
  background:
    linear-gradient(to right, var(--tarjeta) 30%, rgba(24, 24, 24, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--tarjeta) 30%, rgba(24, 24, 24, 0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .55), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .55), transparent) right center / 14px 100% no-repeat scroll,
    var(--tarjeta);
  overflow-x: auto; scrollbar-color: #3a3a3a transparent;
}
table.matriz { table-layout: auto; width: 100%; min-width: max-content; }
.matriz thead th { background: var(--tarjeta); color: var(--tinta); font-size: .8rem; font-weight: 500; min-width: 140px; max-width: 168px; white-space: normal; overflow: visible; text-overflow: clip; vertical-align: bottom; border-bottom: 1px solid var(--linea); padding: 14px 10px 10px; }
.matriz thead th .marca-etiqueta { align-items: flex-start; }
.matriz thead th .marca-etiqueta__punto { margin-top: .3em; width: 8px; height: 8px; border-radius: 50%; }
.matriz thead th .marca-etiqueta__nombre { overflow-wrap: normal; word-break: normal; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.matriz thead th:first-child, .matriz tbody th { position: sticky; left: 0; z-index: 2; width: 200px; min-width: 200px; max-width: 200px; background: var(--tarjeta); box-shadow: 1px 0 0 var(--linea); }
.matriz thead th:first-child { z-index: 3; color: var(--tinta-tenue); }
.matriz tbody th { color: var(--tinta); font-weight: 500; font-size: .84rem; border-color: var(--linea); white-space: normal; }
.matriz td { min-width: 140px; max-width: 168px; border-color: var(--linea); padding: 4px; }
.matriz__celda { color: var(--tinta); border-radius: 10px; border-left: 0; box-shadow: inset 2px 0 0 var(--estado-color, var(--linea-fuerte)); padding: 8px 10px; min-height: 0; }
.matriz__celda:hover { background: rgba(255, 255, 255, .05); }
.matriz__celda.estado-desconocido { background: transparent; box-shadow: inset 2px 0 0 #2e2e2e; }
.matriz__estado { white-space: nowrap; font-weight: 500; font-size: .78rem; }
.matriz__celda.estado-desconocido .matriz__estado { color: var(--tinta-tenue); }
.matriz__resumen { color: var(--tinta-suave); font-size: .76rem; overflow-wrap: normal; word-break: normal; }
.matriz__celda[aria-current="true"] { background: var(--ambar-fondo); outline: 1px solid var(--ambar); }
.matriz tbody tr:hover th { background: var(--superficie-2); }
.leyenda__item, .leyenda { color: var(--tinta); }
.leyenda__muestra { border-left: 0; box-shadow: inset 2px 0 0 var(--estado-color); }
.mapa thead th { background: var(--tarjeta); color: var(--tinta); font-weight: 500; border-color: var(--linea); }
.mapa tbody th { background: var(--tarjeta); color: var(--tinta); border-color: var(--linea); box-shadow: 1px 0 0 var(--linea); }
.mapa td { border-color: var(--linea); }
.mapa__celda { color: var(--tinta); background: color-mix(in srgb, var(--marca-color, var(--azul)) var(--calor, 0%), #181818); }
.mapa__celda:hover { background: color-mix(in srgb, var(--marca-color, var(--azul)) var(--calor, 0%), #222); outline-color: var(--tinta); }
.mapa__celda--intensa, .mapa__celda--intensa .mapa__vacio { color: #0d0d0d; }
.mapa__celda--ausente { border-color: #333; }
.mapa__fila--oportunidad th { border-left-color: var(--ambar); }

/* ───── Explorador y respuesta de ChatGPT ───── */
.rep { background: var(--escenario); border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); color: var(--tinta); border-radius: 999px; }
.rep:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.rep--marca { background: var(--azul); color: #fff; box-shadow: var(--sombra-pildora); }
.rep--fallida, .rep--ausente { box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .4); color: var(--error); }
.explorador__tipo, .pregunta-tipo { color: var(--tinta-tenue); font-weight: 500; }
.respuesta { padding: 28px 32px; }
.respuesta__texto.md { white-space: normal; font-size: 1rem; line-height: 1.7; max-width: 78ch; color: #d6d6d6; overflow-wrap: break-word; }
.md > :first-child { margin-top: 0; }
.md p { margin: 0 0 1em; }
.md strong { color: var(--tinta-fuerte); font-weight: 600; }
.md .md-titulo { font-size: 1.05rem; font-weight: 600; margin: 1.6em 0 .6em; color: var(--tinta-fuerte); }
.md ul, .md ol { margin: 0 0 1em; padding-left: 1.3em; }
.md li { margin: .3em 0; }
.md li::marker { color: var(--tinta-tenue); }
.md blockquote { margin: 0 0 1em; padding: 4px 0 4px 16px; border-left: 2px solid var(--linea-fuerte); color: var(--tinta-suave); }
.md hr { margin: 1.6em 0; }
.md a { color: var(--azul-claro); }
.md-tabla { overflow-x: auto; margin: 0 0 1.2em; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--linea); }
.md-tabla table { border-collapse: collapse; width: 100%; font-size: .9rem; line-height: 1.5; }
.md-tabla th { text-align: left; font-weight: 500; color: var(--tinta-suave); background: var(--superficie-2); padding: 10px 14px; font-size: .8rem; white-space: nowrap; }
.md-tabla td { padding: 10px 14px; border-top: 1px solid var(--linea); vertical-align: top; min-width: 120px; }
.respuesta__texto mark { background: color-mix(in srgb, var(--marca-color, var(--ambar)) 20%, transparent); box-shadow: inset 0 -2px 0 var(--marca-color, var(--ambar)); color: var(--tinta-fuerte); border-radius: 4px; padding: 1px 3px; }
.respuesta__texto mark.seleccion { background: var(--ambar); color: #121212; box-shadow: none; }
.respuesta__texto mark[data-marca]::after { font-family: var(--fuente-texto); font-weight: 600; }
.alternar-original { color: var(--tinta-suave); font-size: .85rem; }
.respuesta-original { background: var(--escenario); border: 0; box-shadow: inset 0 0 0 1px var(--linea); border-radius: 14px; padding: 18px; color: var(--tinta-suave); font-size: .85rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; max-height: 70vh; overflow: auto; }
dl.metadatos dt { color: var(--tinta-tenue); }

/* ───── Marcas que ChatGPT recomienda ───── */
.marcas-chatgpt__barra > span { background: var(--azul); }
.marcas-chatgpt__desc { color: var(--tinta-suave); }

/* ───── Islas (libraries.dev) ───── */
.isla, .isla__contenido { display: contents; }
[data-isla="haz"] > .isla { display: block; }
[data-isla="haz"] .isla__haz, [data-isla="haz"] .isla__contenido { display: block; border-radius: inherit; }
[data-isla="metal"] { display: inline-block; border-radius: 999px; }
[data-isla="metal"] .isla, [data-isla="metal"] .isla__contenido { display: inline-block; border-radius: 999px; line-height: 0; }
[data-isla="metal"] .boton { line-height: 1.2; }
[data-isla="orbe"] { display: inline-grid; place-items: center; }

/* ───── Móvil ───── */
@media (max-width: 960px) {
  .lateral { display: none; }
  .portada { padding: 40px 20px 32px; text-align: left; }
  .portada__form { border-radius: 20px; padding: 8px; }
  .portada__form .boton { width: 100%; }
  .portada__pie { justify-content: flex-start; }
  .progreso-faro { grid-template-columns: 1fr; }
  .progreso-faro > :not(.progreso-faro__orbe) { grid-column: 1; }
  .progreso-faro__orbe { grid-row: auto; }
  .acceso__formulario { padding: 24px 20px; }
}
@media (max-width: 720px) {
  .tarjeta { padding: 20px 16px; border-radius: 20px; }
  .respuesta { padding: 20px 16px; }
  .matriz-envoltorio { box-shadow: none; background: transparent; }
  .matriz td { min-width: 0; max-width: none; }
  .matriz thead th:first-child, .matriz tbody th { position: static; width: auto; min-width: 0; max-width: none; box-shadow: none; }
  .matriz tbody tr { background: var(--tarjeta); border: 0; box-shadow: var(--sombra-1); border-radius: 16px; }
  .matriz tbody th { background: var(--superficie-2); }
}
.lanzar__boton[data-isla="metal"], .lanzar__boton[data-isla="metal"] .isla, .lanzar__boton[data-isla="metal"] .isla__contenido { display: block; width: 100%; }
.lanzar > .isla .tarjeta, .lanzar > .tarjeta { margin: 0; }
.acceso__haz { width: 100%; max-width: 420px; border-radius: 24px; }
.acceso__haz .acceso__formulario { max-width: none; }
.portada__haz { max-width: 620px; margin: 0 auto; border-radius: 999px; }
.barras__fila { grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) 8.5em; }

/* ───── Ajustes: modelos por tarea ───── */
.modelos { display: grid; gap: 12px; margin-top: 8px; }
.modelos__fila { margin: 0; padding: 14px 16px; border: 0; border-radius: 16px; background: var(--escenario); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); min-width: 0; }
.modelos__fila legend { float: left; width: 100%; padding: 0; margin: 0 0 2px; font-weight: 500; color: var(--tinta-fuerte); }
.modelos__texto { clear: both; margin: 0 0 10px; font-size: .85rem; }
.modelos__campos { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px 12px; }
.modelos__campos .campo { margin: 0; }
.modelos__rec { margin: 8px 0 0; }
@media (max-width: 640px) { .modelos__campos { grid-template-columns: 1fr; } }

/* ───── Ajustes: conexión con ChatGPT por enlace ───── */
.conexion-pasos { margin: 4px 0 16px; padding: 16px 18px; border-radius: 16px; background: var(--escenario); box-shadow: inset 0 0 0 1px rgba(0, 113, 252, .35); }
.conexion-pasos ol { margin: 0; padding-left: 20px; display: grid; gap: 14px; }
.conexion-pasos li::marker { color: var(--azul-claro); font-weight: 600; }
.conexion-pasos code { font-size: .82em; background: var(--superficie-2); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.conexion-pasos__pegar label { display: block; font-weight: 500; margin-bottom: 6px; }
.conexion-pasos__fila { display: flex; gap: 8px; }
.conexion-pasos__fila input { flex: 1; min-width: 0; }
@media (max-width: 640px) { .conexion-pasos__fila { flex-direction: column; } }

/* ───── Análisis con partes incompletas ───── */
.completar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 20px; padding: 14px 18px; border-radius: 16px; background: var(--aviso-fondo); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .35); }
.completar form { flex: none; }
@media (max-width: 640px) { .completar { flex-direction: column; align-items: stretch; } }

/* ───── Ajustes: fuentes de datos ───── */
.fuente-clave { padding: 14px 0; border-top: 1px solid var(--linea); }
.fuente-clave__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fuente-clave__fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fuente-clave__fila input, .fuente-clave__fila select { flex: 1 1 180px; min-width: 0; }
.sr-only { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───── Mercado: presencia en buscadores y reputación ───── */
.tabla--presencia th, .tabla--presencia td { white-space: nowrap; }
.tabla--presencia .tabla__consulta { white-space: normal; min-width: 110px; max-width: 160px; font-weight: 500; color: var(--tinta-suave); font-size: .8rem; }
.tabla--presencia .fila--propia th, .tabla--presencia .fila--propia td { background: rgba(0, 113, 252, .08); }
.presencia-consulta h3 { font-size: .95rem; margin: 14px 0 4px; }
.presencia-consulta ol { margin: 0; padding-left: 22px; display: grid; gap: 2px; }
.reputacion { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.reputacion__marca { padding: 14px 16px; border-radius: 16px; background: var(--tarjeta); box-shadow: var(--sombra-1); }
.reputacion__marca--propia { box-shadow: inset 0 0 0 1px rgba(0, 113, 252, .45); }
.reputacion__lista { margin: 8px 0 0; display: grid; gap: 4px; font-size: .9rem; }

/* ───── Historial ───── */
.tarjeta--historial { padding: 6px; }
.tarjeta--historial .tabla-envoltorio { border: 0; background: transparent; box-shadow: none; }
.tabla-historial td.th-version, .tabla-historial td.th-rivales { white-space: nowrap; }
.tabla-historial td.th-fecha { white-space: nowrap; color: var(--tinta-suave); }
/* Móvil: cada análisis es una ficha (marca y versión arriba, mercado, y los datos en una fila) en vez de seis columnas */
@media (max-width: 640px) {
  .tarjeta--historial { padding: 0; background: transparent; border: 0; box-shadow: none; }
  .tabla-historial, .tabla-historial tbody { display: block; }
  .tabla-historial thead { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-historial tr {
    display: grid; grid-template-columns: auto auto 1fr; gap: 6px 22px; align-items: baseline;
    grid-template-areas: "marca marca version" "mercado mercado mercado" "fecha rivales vis";
    background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 18px; padding: 16px 18px; margin-bottom: 10px; position: relative;
  }
  .tabla-historial tr:hover td { background: transparent; }
  .tabla-historial td { display: block; padding: 0; border: 0; }
  .tabla-historial td.th-marca { grid-area: marca; font-size: 1.05rem; }
  /* toda la ficha abre el análisis */
  .tabla-historial td.th-marca a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .tabla-historial td.th-version { grid-area: version; justify-self: end; font-size: .78rem; color: var(--tinta-suave); border: 1px solid var(--linea); border-radius: 999px; padding: 2px 8px; }
  .tabla-historial td.th-mercado { grid-area: mercado; font-size: .9rem; line-height: 1.4; }
  .tabla-historial td.th-fecha, .tabla-historial td.th-rivales, .tabla-historial td.th-vis { font-size: .85rem; color: var(--tinta); margin-top: 6px; }
  .tabla-historial td.th-fecha { grid-area: fecha; }
  .tabla-historial td.th-rivales { grid-area: rivales; }
  .tabla-historial td.th-vis { grid-area: vis; }
  .tabla-historial td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-tenue); margin-bottom: 2px; }
}

/* ───── Tablas en móvil: cada fila es una ficha ─────
   La primera celda (marca, fuente, dominio) hace de título; el resto son datos con su etiqueta (data-etiqueta), que se
   colocan en fila y saltan de línea si no caben. Así no hay columnas de tres letras de ancho. */
@media (max-width: 640px) {
  .tabla--fichas thead { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla--fichas, .tabla--fichas tbody { display: block; width: 100%; }
  .tabla--fichas caption { display: block; text-align: left; }
  .tabla--fichas tbody tr { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 14px 16px; border-bottom: 1px solid var(--linea); }
  .tabla--fichas tbody tr:last-child { border-bottom: 0; }
  .tabla--fichas tbody tr > * { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; background: transparent !important; position: static !important; width: auto !important; min-width: 0 !important; max-width: none !important; box-shadow: none !important; }
  .tabla--fichas tbody tr > :first-child { flex: 1 1 100%; font-weight: 550; overflow-wrap: anywhere; }
  .tabla--fichas tbody tr > .ficha-ancha { flex-basis: 100%; }
  .tabla--fichas td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; font-size: .7rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-tenue); margin-bottom: 3px; }
  .tabla--fichas tbody tr > :first-child .discreto { font-weight: 400; }
  /* presencia: cada búsqueda en una línea, la búsqueda a la izquierda y la posición a la derecha */
  .tabla--presencia.tabla--fichas td.tabla__pos { flex: 1 1 100%; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
  .tabla--presencia.tabla--fichas td.tabla__pos::before { text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--tinta-suave); margin: 0; }
  .tabla--presencia.tabla--fichas td.tabla__pos + td.tabla__pos { margin-top: -4px; }
  .tabla--fichas + *, .tabla-envoltorio:has(> .tabla--fichas) { overflow: visible; }
}

/* ───── Cancelar y eliminar un análisis sin terminar ───── */
.acciones-progreso { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: 16px; }
.eliminar > summary { list-style: none; cursor: pointer; color: var(--tinta-suave); }
.eliminar > summary::-webkit-details-marker { display: none; }
.eliminar[open] > summary { color: var(--tinta); }
.eliminar__confirmar { margin-top: 10px; padding: 14px 16px; border-radius: 14px; background: rgba(229, 72, 77, .08); box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .35); max-width: 340px; }
.eliminar__confirmar p { margin: 0 0 10px; font-size: .88rem; color: var(--tinta); }
.boton--peligro { background: #d9363e; color: #fff; box-shadow: none; }
.boton--peligro:hover { background: #e5484d; }