/* ============================================================
   Novagenic facelift · sistema de tokens unificado
   Un solo set (sustituye a --adn-* y --color-* del legacy).
   Para re-brandear: tocar únicamente este bloque :root.
   ============================================================ */
:root{
  /* superficie */
  --paper:#F6F8F7; --surface:#FFFFFF; --surface-2:#EDF1F0; --surface-3:#E2E8E6;
  --ink:#152220; --ink-2:#33413E; --muted:#5D6B67; --line:#D8DFDD; --line-2:#C2CCC9;

  /* marca Novagenic (novagenic.com: primario #5F2167, acento #6E0096, secundario #538AC6/#8BB8E8) */
  --brand:#6E0096; --brand-ink:#5F2167; --brand-soft:#F3EAF6; --brand-deep:#5F2167;
  --brand-2:#538AC6; --brand-2-soft:#E4EEF8;

  /* semánticos (estado de resultado, independientes del acento) */
  --ok:#25784F; --ok-soft:#E0F0E7;
  --warn:#7E5509; --warn-soft:#F6EDD9;
  /* amarillo para marcas sin texto (puntos del semáforo): --warn es oscuro
     porque se usa como texto y, de relleno, se veía marrón */
  --warn-dot:#F2B807;
  --risk:#B23A2E; --risk-soft:#F8E4E1;

  /* categorías (hues del legacy, ajustados a contraste AA) */
  /* tonos de categoría oscurecidos lo mínimo para llegar a 4.5:1 sobre --paper
     (se usan como texto en los rótulos de sección) */
  --c-origenes:#257D72; --c-nutricion:#8A6B08; --c-deporte:#407C28;
  --c-personalidad:#3774AD; --c-salud:#B44D69; --c-labs:#986312; --c-ai:#6D4BC4;
  --c-origenes-soft:#E1F2EF; --c-nutricion-soft:#F7F0D8; --c-deporte-soft:#E5F1DD;
  --c-personalidad-soft:#E2EEF8; --c-salud-soft:#F8E4EA; --c-labs-soft:#F7EBD8; --c-ai-soft:#ECE6FA;

  /* forma y tipografía */
  /* La píldora completa se reserva para navegación y estado; los controles
     —botones, campos, segmentado— llevan un radio moderado. Antes todo era
     píldora y una fila de filtros parecía cuatro formas distintas peleando. */
  --r-card:14px; --r-chip:99px; --r-control:10px;
  --shadow:0 1px 2px rgba(21,34,32,.05), 0 10px 28px -18px rgba(21,34,32,.25);
  --font:"Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head:"Exo", var(--font);
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root[data-theme="sistema"]{
    --paper:#0A1211; --surface:#182423; --surface-2:#212E2C; --surface-3:#2B3937;
    --ink:#E9F0EE; --ink-2:#C7D2CF; --muted:#93A29E; --line:#2E3C39; --line-2:#3F504B;
    --brand:#C79BE0; --brand-ink:#D4B2E8; --brand-soft:#2C1832; --brand-deep:#E8DCF0;
    --brand-2:#8BB8E8; --brand-2-soft:#16283C;
    --ok:#5FC191; --ok-soft:#12291E;
    --warn:#DBA84E; --warn-soft:#2B2211; --warn-dot:#F2C230;
    --risk:#EE8375; --risk-soft:#321A16;
    --c-origenes:#57C7B9; --c-nutricion:#DEBA45; --c-deporte:#80CB5D;
    --c-personalidad:#74B2E5; --c-salud:#EE8AA3; --c-labs:#E5A94E; --c-ai:#A78FEE;
    --c-origenes-soft:#123430; --c-nutricion-soft:#31290F; --c-deporte-soft:#1B2E13;
    --c-personalidad-soft:#14283A; --c-salud-soft:#361822; --c-labs-soft:#33260E; --c-ai-soft:#221A3D;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -18px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --paper:#0A1211; --surface:#182423; --surface-2:#212E2C; --surface-3:#2B3937;
  --ink:#E9F0EE; --ink-2:#C7D2CF; --muted:#93A29E; --line:#2E3C39; --line-2:#3F504B;
  --brand:#C79BE0; --brand-ink:#D4B2E8; --brand-soft:#2C1832; --brand-deep:#E8DCF0;
  --brand-2:#8BB8E8; --brand-2-soft:#16283C;
  --ok:#5FC191; --ok-soft:#12291E;
  --warn:#DBA84E; --warn-soft:#2B2211; --warn-dot:#F2C230;
  --risk:#EE8375; --risk-soft:#321A16;
  --c-origenes:#57C7B9; --c-nutricion:#DEBA45; --c-deporte:#80CB5D;
  --c-personalidad:#74B2E5; --c-salud:#EE8AA3; --c-labs:#E5A94E; --c-ai:#A78FEE;
  --c-origenes-soft:#123430; --c-nutricion-soft:#31290F; --c-deporte-soft:#1B2E13;
  --c-personalidad-soft:#14283A; --c-salud-soft:#361822; --c-labs-soft:#33260E; --c-ai-soft:#221A3D;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -18px rgba(0,0,0,.85);
}

/* ============ base ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; line-height:1.2; text-wrap:balance; font-family:var(--font-head); font-weight:600}
h1{font-size:clamp(1.7rem,4vw,2.3rem)} h2{font-size:1.45rem} h3{font-size:1.08rem} h4{font-size:.98rem}
p{margin:0}
a{color:var(--brand-ink); text-underline-offset:3px}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}
.skip{position:absolute; left:-9999px; top:0; background:var(--surface); padding:8px 14px; z-index:99}
.skip:focus{left:8px; top:8px}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.eyebrow{font-family:var(--mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:var(--muted)}

/* ============ topbar ============ */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:16px;
  background:var(--brand-deep); color:#F2F7F6; padding:7px 18px;
}
:root[data-theme="dark"] .topbar{background:var(--surface-2); color:var(--ink)}
@media (prefers-color-scheme: dark){ :root[data-theme="sistema"] .topbar{background:var(--surface-2); color:var(--ink)} }
.brand{display:flex; align-items:center; gap:8px; color:inherit; text-decoration:none; font-family:var(--font-head); font-weight:700; letter-spacing:.08em}
.topbar-search{position:relative; flex:1; max-width:560px; margin:0 auto}
.topbar-search input{
  width:100%; border:1px solid transparent; border-radius:var(--r-chip);
  padding:9px 16px; font:inherit; font-size:.92rem;
  background:rgba(255,255,255,.14); color:inherit;
}
.topbar-search input::placeholder{color:currentColor; opacity:.62}
.topbar-search input:focus{background:var(--surface); color:var(--ink); border-color:var(--brand); outline:none}
.search-pop{
  position:absolute; top:calc(100% + 8px); left:0; right:0; max-height:60vh; overflow:auto;
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow); padding:6px;
}
.search-pop .sr-group{padding:8px 10px 2px; font-family:var(--mono); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.search-pop a{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  text-decoration:none; color:var(--ink); font-size:.92rem;
}
.search-pop a:hover, .search-pop a.active{background:var(--surface-2)}
.search-pop .sr-cat{margin-left:auto; font-size:.7rem; color:var(--muted); white-space:nowrap}
/* ============ chip nav ============ */
.chipnav{
  position:sticky; top:46px; z-index:30; display:flex; gap:8px; overflow-x:auto;
  padding:7px 18px; background:var(--paper); border-bottom:1px solid var(--line);
  scrollbar-width:none;
}
.chipnav::-webkit-scrollbar{display:none}
.chip{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  padding:6px 14px; border-radius:var(--r-chip); text-decoration:none;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-2);
  font-size:.88rem; font-weight:700;
}
.chip:hover{border-color:var(--line-2)}
.chip[aria-current="true"]{background:var(--brand-deep); border-color:var(--brand-deep); color:#F2F7F6}
:root[data-theme="dark"] .chip[aria-current="true"]{background:var(--brand); color:#0C1414}
@media (prefers-color-scheme: dark){ :root[data-theme="sistema"] .chip[aria-current="true"]{background:var(--brand); color:#0C1414} }
.chip .dot{width:8px; height:8px; border-radius:50%; background:var(--chip-c, var(--brand))}

/* ============ layout ============ */
.main{max-width:1020px; margin:0 auto; padding:28px 18px 80px; display:flex; flex-direction:column; gap:30px}
.screen-head{
  display:flex; align-items:center; gap:24px; padding:14px 0 4px 16px;
  border-left:4px solid var(--cat-c, var(--brand));
}
.sh-text{display:flex; flex-direction:column; gap:8px; flex:1; min-width:0}
.screen-head .eyebrow{color:var(--cat-c, var(--brand)); display:flex; align-items:center; gap:6px}
.screen-head p.lead{color:var(--muted); max-width:68ch}
/* Marca de sección: la hélice del logo en el color de la categoría. Sustituye a
   las fotos de archivo, que envejecían mal y no decían nada. */
.sh-mark{flex:none; width:104px; height:104px; display:grid; place-items:center;
  color:var(--cat-c, var(--brand)); opacity:.22}
.sh-mark .ico{width:104px; height:104px}
@media (max-width:680px){ .sh-mark{display:none} }
.home-hero{overflow:hidden}
.hero-helix{flex:none; width:96px; color:var(--brand); opacity:.3; margin:-10px 8px}
@media (max-width:680px){ .hero-helix{display:none} }

/* ---- iconos ---- */
.ico{width:1.1em; height:1.1em; flex:none; vertical-align:-.16em; display:inline-block}
h2 .ico, h3 .ico{vertical-align:-.12em; margin-right:2px}
.chip-ico{display:inline-flex}
.chip-ico .ico{width:15px; height:15px}
.chip[aria-current="true"] .chip-ico{color:inherit !important}
.rico{margin-right:6px; display:inline-block}
.gicon{
  flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line);
}
.gicon .ico{width:19px; height:19px}
.section{display:flex; flex-direction:column; gap:14px}
.section > h2{padding-bottom:6px; border-bottom:1px solid var(--line)}
.grid{display:grid; gap:14px}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:18px; box-shadow:var(--shadow);
}
.note{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-card); padding:13px 16px; font-size:.9rem; color:var(--ink-2)}

/* ============ report cards (home) ============ */
.repcard{
  display:flex; flex-direction:column; gap:8px; text-decoration:none; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  border-top:3px solid var(--cat-c, var(--brand)); padding:16px; box-shadow:var(--shadow);
  transition:transform .12s ease, border-color .12s ease;
}
.repcard:hover{transform:translateY(-2px); border-color:var(--line-2)}
.repcard p{font-size:.86rem; color:var(--muted)}
.repimg{
  margin:-16px -16px 6px; aspect-ratio:16/7; overflow:hidden; position:relative;
  border-radius:calc(var(--r-card) - 3px) calc(var(--r-card) - 3px) 0 0;
}
.repimg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.18)); pointer-events:none}
.repimg img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease}
.repcard:hover .repimg img{transform:scale(1.04)}
.repcard .go{margin-top:auto; font-size:.8rem; font-weight:700; color:var(--cat-c, var(--brand-ink))}

/* ============ escala de resultado ============ */
.scale{display:flex; flex-direction:column; gap:5px; width:100%}
.scale-track{position:relative; height:8px; border-radius:99px; background:var(--surface-3)}
.scale-track i{position:absolute; top:0; bottom:0; width:1px; background:var(--line-2)}
.scale-marker{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:16px; height:16px; border-radius:50%; border:3px solid var(--surface);
  background:var(--mk, var(--brand)); box-shadow:0 0 0 1px var(--line-2);
}
.scale-ends{display:flex; justify-content:space-between; font-size:.72rem; color:var(--muted)}
.verdict{font-weight:800; font-size:1.12rem}
.verdict.v-ok{color:var(--ok)} .verdict.v-warn{color:var(--warn)} .verdict.v-risk{color:var(--risk)} .verdict.v-mid{color:var(--ink)}

/* ============ trait card ============ */
.tcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
}
.tcard-head{
  padding:11px 16px; font-weight:800; display:flex; align-items:center; gap:8px;
  background:var(--cat-soft, var(--surface-2)); border-bottom:1px solid var(--line);
}
.tcard-body{padding:16px; display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center}
.tcard-body .scale{max-width:300px}
.tcard-desc{font-size:.86rem; color:var(--muted); text-align:left}
.tcard-foot{border-top:1px solid var(--line); margin-top:auto}

/* ============ fila de resultado (salud / farmaco / vitaminas) ============ */
.rowlist{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow); overflow:hidden}
.rowgroup-head{
  display:flex; gap:14px; align-items:center; padding:14px 18px;
  background:var(--cat-soft, var(--surface-2)); border-bottom:1px solid var(--line);
}
.rowgroup-head .cnt{font-family:var(--mono); font-size:.78rem; color:var(--muted)}
.rowgroup-head p{font-size:.84rem; color:var(--muted)}
.rowgroup-legend{display:flex; gap:14px; flex-wrap:wrap; padding:9px 18px; border-bottom:1px solid var(--line); font-size:.78rem; color:var(--muted)}
.rowgroup-legend b{font-variant-numeric:tabular-nums}
.trow{
  display:grid; grid-template-columns:22px minmax(150px,1fr) auto; gap:8px 14px;
  align-items:center; width:100%; text-align:left; padding:9px 18px;
  background:none; border:0; border-bottom:1px solid var(--line); cursor:pointer;
}
/* La fila entera es un enlace, así que heredaba el morado de marca y el nombre
   del paciente —que es el contenido— parecía un vínculo. El acento se reserva
   para lo accionable; aquí basta el fondo al pasar el cursor. */
a.trow, a.trow:visited{color:var(--ink)}
.trow:last-child{border-bottom:none}
.trow:hover{background:var(--surface-2)}
.trow .t-name{font-weight:700; font-size:.94rem}
.trow .t-sub{font-size:.78rem; color:var(--muted)}
.trow .t-state{display:flex; align-items:center; gap:10px}
.trow .minitrack{position:relative; flex:1; height:6px; border-radius:99px; background:var(--surface-3)}
.trow .minitrack b{position:absolute; top:50%; transform:translate(-50%,-50%); width:11px; height:11px; border-radius:50%; background:var(--mk); border:2px solid var(--surface)}
.state-ico{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:.72rem; font-weight:800}
.state-ico.ok{background:var(--ok-soft); color:var(--ok)}
.state-ico.mid{background:var(--surface-3); color:var(--muted)}
.state-ico.risk{background:var(--risk-soft); color:var(--risk)}
@media (max-width:620px){ .trow{grid-template-columns:22px 1fr} .trow .t-state{grid-column:2} }

/* ============ pills / chips ============ */
/* Antes toda etiqueta era una píldora en mayúsculas: en la pantalla de un
   reporte llegaban a 914, y cuando todo destaca no destaca nada. La píldora sin
   estado pasa a ser texto callado; el distintivo con fondo se reserva para el
   estado clínico, que es lo que el médico busca primero. */
.pill{
  display:inline-block; align-self:flex-start; font-size:.74rem;
  font-weight:700; color:var(--muted);
}
.pill.ok, .pill.warn, .pill.risk, .pill.brand{
  padding:3px 10px; border-radius:99px; font-size:.72rem;
}
.pill.ok{background:var(--ok-soft); color:var(--ok)}
.pill.warn{background:var(--warn-soft); color:var(--warn)}
.pill.risk{background:var(--risk-soft); color:var(--risk)}
.pill.brand{background:var(--brand-soft); color:var(--brand-ink)}
.gene{
  display:inline-block; font-family:var(--mono); font-size:.72rem; font-weight:600;
  background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:2px 7px;
}

/* ============ accordion ============ */
.acc{border-top:1px solid var(--line)}
.acc summary{
  list-style:none; cursor:pointer; padding:11px 16px; font-size:.88rem; font-weight:700;
  display:flex; align-items:center; color:var(--ink-2);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+"; margin-left:auto; color:var(--muted); font-weight:400; font-size:1.1rem}
.acc[open] summary::after{content:"–"}
.acc .acc-body{padding:0 16px 14px; font-size:.88rem; color:var(--ink-2); display:flex; flex-direction:column; gap:8px}

/* ============ modal ficha ============ */
.modal-back{
  position:fixed; inset:0; z-index:60; background:rgba(10,18,17,.55);
  display:grid; place-items:center; padding:20px;
}
.modal{
  width:min(600px, 100%); max-height:88vh; overflow:auto;
  background:var(--surface); border-radius:16px; box-shadow:var(--shadow);
}
.modal-head{
  position:sticky; top:0; display:flex; align-items:center; gap:12px;
  padding:16px 20px; background:var(--cat-soft, var(--surface-2));
  border-bottom:1px solid var(--line);
}
.modal-head > div:first-child{flex:1}
.modal-head .sub{font-size:.8rem; color:var(--muted)}
.modal-close{
  background:var(--surface); border:1px solid var(--line); width:34px; height:34px;
  border-radius:50%; cursor:pointer; font-size:1.05rem; line-height:1; display:grid; place-items:center;
}
.modal-body{padding:20px; display:flex; flex-direction:column; gap:16px}
.modal-result{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center}
.modal-result .scale{max-width:340px}
.stars{color:var(--warn); letter-spacing:2px; font-size:.95rem}
.modal .genes{display:flex; flex-wrap:wrap; gap:6px}

/* ============ skeleton loader ============ */
.skel-wrap{display:flex; flex-direction:column; gap:10px; padding:16px 18px}
.skel-note{display:flex; align-items:center; gap:10px; font-size:.86rem; color:var(--muted)}
.spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid var(--line-2); border-top-color:var(--brand);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.skel{height:14px; border-radius:6px; background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size:200% 100%; animation:shimmer 1.2s ease-in-out infinite}
@keyframes shimmer{from{background-position:200% 0} to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
}

/* ============ filtros ============ */
.filterbar{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.filterbar input[type="search"]{
  flex:1; min-width:220px; padding:9px 14px; border-radius:var(--r-control);
  border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:.9rem;
}
.switch{display:inline-flex; align-items:center; gap:8px; font-size:.86rem; cursor:pointer; color:var(--ink-2)}
.switch input{accent-color:var(--brand); width:16px; height:16px}

/* ============ tabla ============ */
.tscroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); box-shadow:var(--shadow)}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:.88rem}
th,td{text-align:left; padding:10px 16px; border-bottom:1px solid var(--line); vertical-align:middle}
thead th{font-family:var(--mono); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); background:var(--surface-2)}
tbody tr:last-child td{border-bottom:none}

/* ============ ancestry ============ */
.comp-row{display:grid; grid-template-columns:minmax(120px,180px) 1fr 56px; gap:12px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line)}
.comp-row:last-child{border-bottom:none}
.comp-bar{height:10px; border-radius:99px; background:var(--surface-3); overflow:hidden}
.comp-bar b{display:block; height:100%; border-radius:99px; background:var(--bc, var(--brand))}
.comp-num{font-family:var(--mono); font-size:.84rem; text-align:right; font-variant-numeric:tabular-nums}
.bigstat{display:flex; flex-direction:column; gap:4px; align-items:center; text-align:center}
.bigstat b{font-size:2.4rem; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; color:var(--cat-c, var(--brand))}
.bigstat span{font-size:.84rem; color:var(--muted)}

/* ============ bipolar (personalidad) ============ */
.bipolar{display:flex; flex-direction:column; gap:6px; padding:12px 0; border-bottom:1px solid var(--line)}
.bipolar:last-child{border-bottom:none}
.bipolar .bp-top{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.bipolar .bp-desc{font-size:.8rem; color:var(--muted)}
.bipolar .bp-ends{display:flex; justify-content:space-between; font-size:.74rem; color:var(--muted)}

/* ============ imc ============ */
.imc-form{display:flex; gap:12px; flex-wrap:wrap; align-items:end}
.imc-form label{display:flex; flex-direction:column; gap:4px; font-size:.82rem; color:var(--muted); font-weight:700}
.imc-form input{width:110px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font:inherit}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:var(--r-control);
  border:0; background:var(--brand); color:#fff; font-weight:800; font-size:.88rem; cursor:pointer;
}
/* texto oscuro solo en el botón sólido activo: el fantasma y el deshabilitado
   conservan su propio color (si no, quedan casi negros sobre fondo oscuro) */
:root[data-theme="dark"] .btn:not(.ghost):not([disabled]){color:#0C1414}
@media (prefers-color-scheme: dark){ :root[data-theme="sistema"] .btn:not(.ghost):not([disabled]){color:#0C1414} }
.btn.ghost{background:var(--surface); color:var(--brand-ink); border:1px solid var(--line-2)}
.btn.ghost:hover{background:var(--surface-2)}
/* deshabilitado: legible, sin transparencia que borre el texto */
.btn[disabled]{background:var(--surface-2); color:var(--muted); border:1px dashed var(--line-2); cursor:not-allowed}
.btn[disabled] svg{opacity:.6}
.imc-out{font-size:1.05rem}

/* ============ next / continúa ============ */
.nextcard{
  display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--cat-c, var(--brand));
  border-radius:var(--r-card); padding:14px 18px; box-shadow:var(--shadow);
}
.nextcard:hover{background:var(--surface-2)}
.nextcard .arrow{margin-left:auto; font-size:1.3rem; color:var(--muted)}

/* ============ footer ============ */
.foot{max-width:1020px; margin:0 auto; padding:0 18px 48px; color:var(--muted); font-size:.82rem; display:flex; flex-direction:column; gap:6px}
.foot-mini{font-size:.74rem}

/* ============ login y sesión ============ */
body.no-auth .topbar-search, body.no-auth .chipnav{display:none}
.login-wrap{min-height:calc(100vh - 220px); display:grid; place-items:center; padding:24px 0}
.login-card{
  width:min(430px, 100%); background:var(--surface); border:1px solid var(--line);
  border-top:4px solid var(--brand); border-radius:var(--r-card); box-shadow:var(--shadow);
  padding:28px; display:flex; flex-direction:column; gap:14px;
}
.login-brand{
  display:flex; align-items:center; gap:8px; font-family:var(--font-head);
  font-weight:700; letter-spacing:.08em; color:var(--brand-ink);
}
.login-brand .ico{width:22px; height:22px}
.field{display:flex; flex-direction:column; gap:5px; font-size:.82rem; font-weight:700; color:var(--ink-2)}
.field input{
  padding:10px 14px; border:1px solid var(--line); border-radius:9px;
  background:var(--paper); color:var(--ink); font:inherit; font-size:.95rem;
}
.field input:focus{border-color:var(--brand); outline:none; box-shadow:0 0 0 3px var(--brand-soft)}
.login-err{background:var(--risk-soft); color:var(--risk); border-radius:9px; padding:9px 13px; font-size:.85rem}
.user-box{display:flex; align-items:center; gap:9px}
.user-chip{
  display:inline-flex; align-items:center; gap:7px; font-size:.84rem; font-weight:700;
  background:rgba(255,255,255,.14); border-radius:99px; padding:5px 13px;
}
.user-chip .ico{width:15px; height:15px}
.user-kit{font-size:.68rem; opacity:.75; font-weight:600}
.user-out{
  background:none; border:1px solid currentColor; border-radius:99px; padding:4px 13px;
  font-size:.78rem; font-weight:700; cursor:pointer; opacity:.9;
}
.user-out:hover{opacity:1; background:rgba(255,255,255,.1)}
@media (max-width:760px){ .user-chip .user-kit{display:none} }

/* ============ chat demo (GeneAI) ============ */
.chat{display:flex; flex-direction:column; gap:10px; min-height:260px}
.chat .msg{max-width:78%; padding:10px 14px; border-radius:14px; font-size:.92rem}
.chat .msg.bot{background:var(--c-ai-soft); color:var(--ink); align-self:flex-start; border-bottom-left-radius:4px}
.chat .msg.me{background:var(--brand-soft); align-self:flex-end; border-bottom-right-radius:4px}
.chat-form{display:flex; gap:8px}
.chat-form input{flex:1; padding:10px 14px; border:1px solid var(--line); border-radius:var(--r-chip); background:var(--surface); color:var(--ink); font:inherit}

/* aviso de privacidad: texto legal largo, copiado de novagenic.com */
.aviso-privacidad{line-height:1.6}
.aviso-privacidad p{margin:0 0 10px}
.aviso-privacidad h3{margin:26px 0 10px; font-size:1.05rem}
.aviso-privacidad h3:first-of-type{margin-top:18px}
.aviso-privacidad h4{margin:16px 0 6px; font-size:.95rem; color:var(--ink-2, var(--ink))}
.aviso-privacidad ul{margin:4px 0 12px 20px; display:flex; flex-direction:column; gap:4px}
.aviso-privacidad a{overflow-wrap:anywhere}
.aviso-privacidad .aviso-firma{font-family:var(--mono, monospace); font-size:.82rem; overflow-wrap:anywhere; color:var(--ink-2, var(--ink))}