/* Guía de GEMfit · estilos sobre los tokens de la marca (brand-tokens.css, modo claro).
   Sin colores a mano: todo sale de las variables de brand-tokens.css. */
:root{
  --font-sans:"Mona Sans",system-ui,-apple-system,"Segoe UI",sans-serif; /* brand-ok: respaldo del sistema detrás de Mona Sans */
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(0.2,0,0,1);
  --fast:150ms;--base:200ms;
  --r:12px;--r-chip:8px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;font-family:var(--font-sans);color:var(--foreground);background:var(--background);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:var(--link);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:2px;transition:text-decoration-color var(--fast) var(--ease),color var(--fast) var(--ease)}
a:hover{text-decoration-color:currentColor}
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:var(--r-chip)}
img{max-width:100%}
svg.i{width:1em;height:1em;flex:none;vertical-align:-0.15em}

/* Títulos grandes: Mona Sans al 110 % de ancho, tracking −3 % (como font-display en la web) */
.display{font-stretch:110%;letter-spacing:-0.03em}

/* Layout */
.layout{display:grid;grid-template-columns:248px minmax(0,860px);gap:56px;max-width:1240px;margin:0 auto;padding:0 24px}
.toc{position:sticky;top:0;align-self:start;height:100vh;overflow:auto;padding:28px 20px 32px 0;border-right:1px solid var(--border);font-size:13.5px}
.toc .brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0 0 6px;text-decoration:none;color:var(--primary)}
.toc .brand img{display:block;width:120px;height:auto}
.toc .brand span{font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap}
.toc .ver{color:var(--muted-foreground);font-size:12px;margin:0 0 16px}
.toc ol{list-style:none;margin:0;padding:0}
.toc li{margin:0}
.toc a{display:block;color:var(--muted-foreground);padding:6px 8px;border-radius:var(--r-chip);line-height:1.35;text-decoration:none;transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.toc a:hover{background:var(--muted);color:var(--foreground)}
.toc a.active{background:var(--accent);color:var(--primary);font-weight:600}
.toc .n{display:inline-block;min-width:22px;color:inherit;opacity:.7}
main{padding:40px 0 80px;min-width:0}

/* Tipografía */
h1{font-size:36px;line-height:1.1;font-weight:700;margin:0 0 8px;font-stretch:110%;letter-spacing:-0.03em;color:var(--foreground)}
h2{font-size:28px;line-height:1.2;font-weight:650;margin:64px 0 16px;padding-top:20px;border-top:1px solid var(--border);font-stretch:110%;letter-spacing:-0.03em;color:var(--foreground)}
h2 .num{color:var(--primary);margin-right:10px}
h3{font-size:20px;font-weight:600;line-height:1.3;margin:36px 0 10px;color:var(--foreground)}
h4{font-size:16.5px;font-weight:600;margin:24px 0 6px;color:var(--foreground)}
p{margin:0 0 14px}
ul,ol{margin:0 0 16px;padding-left:24px}
li{margin:4px 0}
li>ul,li>ol{margin-top:4px}
strong{font-weight:650}
code{font-family:var(--font-mono);font-size:.9em;background:var(--muted);border:1px solid var(--border);border-radius:var(--r-chip);padding:0 5px}
hr{border:0;border-top:1px solid var(--border);margin:32px 0}

/* Portada de cada parte */
.cover{padding:8px 0 24px}
.cover .kicker{color:var(--primary);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:12px;margin-bottom:12px}
.cover .sub{font-size:22px;color:var(--muted-foreground);margin:0 0 18px;font-weight:400;line-height:1.35}
.cover .version{display:inline-block;background:var(--muted);border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-size:13.5px;color:var(--muted-foreground);margin-bottom:22px}
.cover .intro{font-size:18px;line-height:1.55;max-width:760px}
.cover .intro p{margin-bottom:10px}
.lead{font-size:17.5px;color:var(--muted-foreground)}
.part-kicker{display:inline-flex;align-items:center;gap:8px}
.part-kicker .ico{width:26px;height:26px;border-radius:var(--r-chip);background:var(--primary);color:var(--primary-foreground);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;letter-spacing:0}

/* Citas literales de la interfaz: se leen como un botón */
.ui{display:inline-block;font-size:.86em;font-weight:600;line-height:1.35;padding:1px 8px;border:1px solid var(--border);border-radius:var(--r-chip);background:var(--card);color:var(--foreground);white-space:nowrap;vertical-align:baseline}
.new{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--primary-foreground);background:var(--primary);padding:2px 8px;border-radius:999px;vertical-align:middle;margin-left:6px;position:relative;top:-1px}

/* Insignias de estado: píldora, fondo suave + texto fuerte (P8) */
.badge{display:inline-block;font-size:.82em;font-weight:600;padding:1px 9px;border-radius:999px;white-space:nowrap;vertical-align:baseline}
.b-green{background:var(--success-soft);color:var(--success)}
.b-amber{background:var(--warning-soft);color:var(--warning)}
.b-red{background:var(--danger-soft);color:var(--danger)}
.b-gray{background:var(--muted);color:var(--muted-foreground)}
.b-blue{background:var(--info-soft);color:var(--info)}

/* Recuadros: fondo suave del estado, borde izquierdo en el tono sólido */
.callout{position:relative;border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:var(--r);padding:14px 18px 12px;margin:22px 0;background:var(--muted)}
.callout::before{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}
.callout.ok{border-color:var(--success-soft);border-left-color:var(--success-solid);background:var(--success-soft)}
.callout.ok::before{content:"Se puede";color:var(--success)}
.callout.no{border-color:var(--danger-soft);border-left-color:var(--danger-solid);background:var(--danger-soft)}
.callout.no::before{content:"No se puede";color:var(--danger)}
.callout.tip{border-color:var(--info-soft);border-left-color:var(--info-solid);background:var(--info-soft)}
.callout.tip::before{content:"Consejo";color:var(--info)}
.callout.warn{border-color:var(--warning-soft);border-left-color:var(--warning-solid);background:var(--warning-soft)}
.callout.warn::before{content:"Ojo";color:var(--warning)}

/* Tablas (P17): encabezado como etiqueta, filas con borde de 1 px, sin cebra */
.tbl{margin:18px 0 24px;border:1px solid var(--border);border-radius:var(--r);background:var(--card);overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.45}
thead th{position:sticky;top:0;background:var(--muted);text-align:left;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground);padding:10px 12px;border-bottom:1px solid var(--border);z-index:1}
tbody td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--muted)}
table.compact td,table.compact th{padding:7px 10px;font-size:13.5px}
td.msg{font-weight:600;max-width:320px}

/* Figuras: capturas con borde de 1 px y radio 12, sin sombra */
figure{margin:26px 0}
figure img{display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:var(--r);background:var(--card)}
figcaption{font-size:14px;color:var(--muted-foreground);margin-top:8px;line-height:1.45}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.two-col .callout{margin:0}
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0;align-items:start}
.phones figure{margin:0}
.phones.two{grid-template-columns:repeat(2,1fr);max-width:600px}
figure.phone{max-width:340px}
figure.narrow{max-width:720px}

/* Pasos numerados */
.steps{counter-reset:step;list-style:none;padding:0;margin:18px 0 24px}
.steps>li{position:relative;padding:0 0 18px 44px;margin:0}
.steps>li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;background:var(--primary);color:var(--primary-foreground);font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center}
.steps>li>strong{display:block;margin-bottom:2px}

/* Preguntas frecuentes, pares clave-valor, estados */
.faq h4{margin:22px 0 4px;font-size:16px}
.faq h4::before{content:"P. ";color:var(--primary)}
.faq p{color:var(--foreground)}
.kv{display:grid;grid-template-columns:180px 1fr;gap:6px 16px;margin:12px 0 18px;font-size:15px}
.kv dt{font-weight:600;color:var(--muted-foreground)}
.kv dd{margin:0}
.state{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;align-items:start;margin:10px 0}
.pill{display:inline-block;font-size:12px;font-weight:600;color:var(--muted-foreground);background:var(--muted);border:1px solid var(--border);border-radius:999px;padding:2px 10px}
.small{font-size:14px;color:var(--muted-foreground)}
footer{margin-top:72px;padding-top:20px;border-top:1px solid var(--border);color:var(--muted-foreground);font-size:13.5px}

/* Navegación por partes */
.toc .parts{list-style:none;margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid var(--border)}
.toc .parts li{margin:0}
.toc .parts a{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-chip);color:var(--foreground);font-weight:600;line-height:1.3}
.toc .parts a:hover{background:var(--muted)}
.toc .parts a.current{background:var(--accent);color:var(--primary)}
.toc .parts .ico{width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;background:var(--muted);color:var(--muted-foreground);font-size:12px;font-weight:600;flex:none}
.toc .parts a.current .ico{background:var(--primary);color:var(--primary-foreground)}
.toc .chapters-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground);margin:0 0 6px 8px}
.toc .home{display:block;color:var(--muted-foreground);font-size:12.5px;margin:14px 8px 0}

/* Tarjetas de la portada general y roles */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:22px 0 28px}
.card{display:block;border:1px solid var(--border);border-radius:var(--r);padding:20px;color:var(--foreground);background:var(--card);text-decoration:none;transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease)}
.card:hover{text-decoration:none;border-color:var(--ring);background:var(--card)}
.card .t{display:flex;align-items:center;gap:10px;font-weight:650;font-size:17px;margin-bottom:6px}
.card .t .ico{width:28px;height:28px;border-radius:var(--r-chip);background:var(--accent);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:none}
.card p{margin:0;color:var(--muted-foreground);font-size:14.5px;line-height:1.5}
.card .who{display:block;margin-top:10px;font-size:12.5px;color:var(--primary);font-weight:600}
.role-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 24px}
.role{border:1px solid var(--border);border-radius:var(--r);padding:16px;background:var(--card)}
.role b{display:block;font-size:15px;font-weight:650;margin-bottom:4px}
.role span{font-size:13.5px;color:var(--muted-foreground);line-height:1.45;display:block}

/* Links por sección: ícono al lado de cada título, resaltado al llegar por link compartido */
h2,h3,h4{position:relative;scroll-margin-top:24px}
a.anchor{position:absolute;left:-1.5em;top:.35em;width:1.2em;display:inline-flex;align-items:center;justify-content:center;color:var(--muted-foreground);text-decoration:none;opacity:0;transition:opacity var(--fast) var(--ease),color var(--fast) var(--ease);font-size:.8em;line-height:1}
h2 a.anchor{top:calc(20px + .3em)}
a.anchor svg{width:1em;height:1em}
h2:hover a.anchor,h3:hover a.anchor,h4:hover a.anchor,a.anchor:focus{opacity:1}
a.anchor:hover{color:var(--primary)}
@media (hover:none){a.anchor{opacity:.55}}
.anchor-demo{display:inline-flex;align-items:center;vertical-align:-0.1em;color:var(--primary);padding:0 2px}
.share-hint{font-size:12.5px;color:var(--muted-foreground);margin:16px 8px 0;line-height:1.45}
:target{animation:flash 2.4s var(--ease)}
section:target{animation:none}
section:target > h2{animation:flash 2.4s var(--ease)}
@keyframes flash{0%{background:var(--warning-soft);box-shadow:0 0 0 8px var(--warning-soft);border-radius:var(--r-chip)}70%{background:var(--warning-soft);box-shadow:0 0 0 8px var(--warning-soft)}100%{background:transparent;box-shadow:none}}

/* Aviso "Link copiado" (P10: arriba al centro, fondo suave + texto fuerte, ícono Lucide) */
.copied{position:fixed;left:50%;top:20px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;background:var(--success-soft);color:var(--success);border:1px solid var(--success-solid);padding:10px 16px;border-radius:var(--r);font-size:14px;font-weight:600;z-index:50;opacity:0;transition:opacity var(--base) var(--ease);pointer-events:none}
.copied svg{width:16px;height:16px}
.copied.show{opacity:1}

/* Subcapítulos en el índice */
.toc .chapters li ol{list-style:none;margin:0 0 4px;padding:0 0 0 22px;display:none}
.toc .chapters li.active ol{display:block}
.toc .chapters li ol a{font-size:12.5px;padding:3px 8px;color:var(--muted-foreground)}
.toc .chapters li ol a.active{background:transparent;color:var(--primary);font-weight:600}
.toc .share-hint a{display:inline;padding:0;color:var(--link);text-decoration:underline}

/* Página de todos los links */
table.links td{word-break:break-all;font-size:13px}
table.links tr.l3 td:first-child{padding-left:26px}
table.links tr.l4 td:first-child{padding-left:44px;color:var(--muted-foreground)}
table.links tr.l2 td:first-child{font-weight:650}
button.copy{font:inherit;font-size:12px;font-weight:600;color:var(--secondary-foreground);background:var(--secondary);border:1px solid var(--border);border-radius:var(--r-chip);height:28px;padding:0 10px;cursor:pointer;margin-left:6px;white-space:nowrap;transition:background var(--fast) var(--ease)}
button.copy:hover{background:var(--accent)}

@media (max-width:1000px){
  .layout{display:block;padding:0 16px}
  .toc{position:static;height:auto;border-right:0;border-bottom:1px solid var(--border);padding:20px 0}
  .toc .chapters{columns:2;column-gap:16px}
  .toc .chapters li{break-inside:avoid}
  .toc .parts{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}
  .two-col{grid-template-columns:1fr}
  .tbl{overflow-x:auto}
  .tbl table:has(th:nth-child(3)){min-width:600px}
  thead th{position:static}
  h1{font-size:30px}
  h2{font-size:24px}
  .kv{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .phones{grid-template-columns:repeat(2,1fr)}
  .role-grid{grid-template-columns:repeat(2,1fr)}
  a.anchor{position:static;margin-left:8px;top:auto}
}
@media (max-width:560px){
  .phones,.phones.two{grid-template-columns:1fr;max-width:340px}
  .role-grid{grid-template-columns:1fr}
  .toc .chapters{columns:1}
  .cover .sub{font-size:19px}
  .cover .intro{font-size:17px}
}
@media print{
  .toc,.cards,a.anchor,.share-hint,.copied{display:none}
  .layout{display:block;max-width:none;padding:0}
  main{padding:0}
  h2{page-break-before:always;border-top:0;margin-top:0}
  h2:first-of-type{page-break-before:avoid}
  figure,table,.callout{page-break-inside:avoid}
  .phones{grid-template-columns:repeat(3,1fr)}
  a{color:inherit}
  body{font-size:12.5px}
  thead th{position:static}
}