/* =========================================================
   Documentación de Dijit.app — hoja de estilos común
   Un solo fichero para todas las páginas de /documentacion/

   Diseño editorial: fondo papel, filetes finos, rótulos en
   versalitas, tablas con cabecera en mayúsculas y bloques sin
   sombra. Tipografía Montserrat, acento azul Dijit.
   ========================================================= */

:root{
  /* ---- Superficies ---- */
  --paper:#F2F4F5;
  --surface:#FFFFFF;
  --surface-2:#EAEEEF;

  /* ---- Texto ---- */
  --ink:#111827;
  --ink-2:#374151;
  --muted:#6B7280;

  /* ---- Filetes ---- */
  --rule:#D8DEE1;
  --rule-soft:#E6EAEC;

  /* ---- Azul Dijit ---- */
  --accent:#1D4ED8;
  --accent-ink:#1E40AF;
  --accent-bg:#E8F0FE;

  /* ---- Estados (chips) ---- */
  --ship:#059669;    --ship-bg:#D1FAE5;
  --config:#B45309;  --config-bg:#FEF6E7;
  --gap:#B42318;     --gap-bg:#FDECEA;
  --plan:#4A5560;    --plan-bg:#E7EAEC;

  /* ---- Banda oscura ---- */
  --deep:#111827; --deep-ink:#F2F4F5; --deep-hl:#C5D8FC;

  /* ---- Tipografía ---- */
  --f-display:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-body:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* ---- Métricas ---- */
  --sidebar:260px;
  --content:940px;
  --measure:720px;   /* en píxeles, no en ch: ch se recalcula con el cuerpo de cada
                        elemento y el índice, la ruta y los avisos salían desiguales */
  --pad:clamp(20px,4vw,44px);

  /* Compatibilidad con nombres antiguos */
  --blue:var(--accent); --blue-dk:var(--accent-ink); --blue-lt:var(--accent-bg);
  --green:var(--ship); --amber:var(--config); --amber-lt:var(--config-bg);
  --text-1:var(--ink); --text-2:var(--muted); --text-3:var(--ink-2);
  --border:var(--rule); --border-dk:var(--rule);
  --bg:var(--surface); --bg-soft:var(--surface-2); --bg-code:var(--surface-2);
  --radius:2px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body);
  font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* =========================================================
   Estructura
   ========================================================= */
.docs{display:block; max-width:1320px; margin:0 auto; padding:0 var(--pad)}
@media(min-width:1080px){
  .docs{display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr);
        gap:0; align-items:start; padding-left:0; padding-right:var(--pad)}
}

/* =========================================================
   Menú lateral
   ========================================================= */
.docs-nav{padding:36px 0 48px; border-bottom:1px solid var(--rule)}
@media(min-width:1080px){
  .docs-nav{position:sticky; top:57px;
            min-height:calc(100vh - 57px); max-height:calc(100vh - 57px); overflow-y:auto;
            border-bottom:0; border-right:1px solid var(--rule);
            padding:40px 22px 48px var(--pad)}
}
.docs-nav__home{
  display:block; font-family:var(--f-display); font-weight:700;
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; margin:0 0 16px;
}
.docs-nav__home:hover{color:var(--ink)}
.docs-nav ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px}
.docs-nav > ol > li{margin:0}
.docs-nav a{
  display:block; font-family:var(--f-display);
  font-size:13.5px; line-height:1.35; font-weight:500;
  color:var(--muted); text-decoration:none;
  padding:6px 8px; border-left:2px solid transparent;
}
.docs-nav a:hover{color:var(--ink); background:var(--surface-2)}
.docs-nav a[aria-current="page"]{
  color:var(--accent-ink); border-left-color:var(--accent);
  background:none; font-weight:600;
}
.docs-nav a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.docs-nav .soon{
  display:block; font-family:var(--f-display); font-size:13.5px; line-height:1.35;
  color:#9CA3AF; padding:6px 8px 6px 10px; cursor:default;
}
.docs-nav ol ol{
  margin:2px 0 8px 10px; padding-left:8px;
  border-left:1px solid var(--rule-soft);
}
.docs-nav ol ol a,.docs-nav ol ol .soon{font-size:12.5px; padding:4px 8px}

/* =========================================================
   Contenido
   ========================================================= */
.docs-main{padding:44px 0 96px; max-width:var(--content); min-width:0}
@media(min-width:1080px){ .docs-main{padding-left:var(--pad)} }

.crumbs{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em;
  color:var(--muted); margin:0 0 18px; max-width:none;
}
.crumbs a{color:var(--accent); text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span{margin:0 .45rem; color:var(--rule)}

/* ---- Cabecera de página ---- */
h1{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(34px,5.4vw,52px); line-height:1.04; letter-spacing:-.018em;
  margin:0 0 14px; text-wrap:balance; color:var(--ink);
}
.lead{
  font-size:19px; line-height:1.55; color:var(--ink-2);
  max-width:none; margin:0 0 8px;
  padding-right:max(0px, calc(100% - 62ch));
  padding-bottom:28px; border-bottom:2px solid var(--ink);
}
.lead em{color:var(--accent-ink); font-style:italic}

/* ---- Encabezados de sección ---- */
h2{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(24px,3.2vw,31px); line-height:1.12; letter-spacing:-.012em;
  margin:52px 0 0; padding-bottom:6px; border-bottom:1px solid var(--rule);
  scroll-margin-top:70px; text-wrap:balance; color:var(--ink);
}
.docs-main > h2 + *{margin-top:22px}
.docs-main > .eyebrow{margin:52px 0 8px}
.docs-main > .eyebrow + h2{margin-top:0}
h3{
  font-family:var(--f-display); font-weight:600;
  font-size:19.5px; letter-spacing:-.005em; line-height:1.3;
  margin:34px 0 8px; color:var(--ink);
}
h4{
  font-family:var(--f-display); font-weight:600;
  font-size:15px; letter-spacing:.02em;
  margin:24px 0 6px; color:var(--ink-2);
}

p{margin:0 0 14px; max-width:var(--measure)}
ul,ol{margin:0 0 16px; padding-left:22px; max-width:var(--measure)}
li{margin:0 0 7px}
li > ul,li > ol{margin-top:7px}
strong{font-weight:600}
a{color:var(--accent-ink); text-decoration-thickness:1px; text-underline-offset:2px}

code,.m{
  font-family:var(--f-mono); font-size:.855em;
  background:var(--surface-2); border-radius:2px;
  padding:.1em .34em; color:var(--ink); word-break:break-word;
}
th code,td code,.step-d .m,.item-d .m{background:var(--surface-2); padding:.05em .3em}
th code,td code{background:none; padding:0}

pre{
  margin:0 0 20px; padding:16px 18px; overflow-x:auto;
  background:var(--surface); border:1px solid var(--rule);
  font-family:var(--f-mono); font-size:12.7px; line-height:1.62;
  color:var(--ink-2); tab-size:2;
}
pre code{background:none; padding:0; font-size:inherit}

/* =========================================================
   Índice de la página
   ========================================================= */
.toc{
  background:var(--surface); border:1px solid var(--rule); border-radius:0;
  padding:14px 18px 16px; margin:28px 0 32px; max-width:var(--measure);
}
.toc p{
  font-family:var(--f-display); font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:0 0 9px; max-width:none;
}
.toc ol{margin:0; padding-left:1.1rem; max-width:none}
.toc li{margin:0 0 4px; font-size:14.5px}

/* =========================================================
   Avisos
   ========================================================= */
.note{
  border-left:3px solid var(--accent); background:var(--accent-bg);
  border-radius:0; padding:14px 18px; margin:20px 0;
  font-size:15.5px; line-height:1.55; color:var(--ink-2);
  max-width:var(--measure);
}
.note p{margin:0 0 10px; max-width:none}
.note p:last-child{margin:0}
.note strong{font-family:var(--f-display); color:var(--accent-ink)}
.note ul,.note ol{max-width:none; margin-bottom:0}
.warn{border-left-color:var(--config); background:var(--config-bg)}
.warn strong{color:var(--config)}

/* =========================================================
   Tablas
   ========================================================= */
.table-wrap{
  overflow-x:auto; margin:22px 0 26px;
  border:1px solid var(--rule); background:var(--surface);
}
table{
  border-collapse:collapse; width:100%;
  font-family:var(--f-display); font-size:14px;
}
thead th{
  text-align:left; font-weight:600; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  padding:10px 14px; border-bottom:1px solid var(--rule);
  white-space:nowrap; background:var(--surface-2);
}
tbody td{
  padding:11px 14px; border-bottom:1px solid var(--rule-soft);
  vertical-align:top; color:var(--ink-2); line-height:1.45;
}
tbody tr:last-child td{border-bottom:none}
td.k{color:var(--ink); font-family:var(--f-mono); font-size:12.5px; white-space:nowrap}
td.num{font-variant-numeric:tabular-nums; white-space:nowrap}
td.t{color:var(--ink); font-family:var(--f-display); font-weight:600}

/* En pantallas anchas la tabla respira más que un párrafo. */
@media(min-width:1240px){
  .table-wrap{margin-right:calc(-1 * var(--pad))}
}

/* =========================================================
   Rótulo de bloque y contenedor con desplazamiento
   ========================================================= */
.block{margin:22px 0 26px}
.block-cap{
  font-family:var(--f-display); font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:0 0 9px; max-width:none;
}
.scroll{overflow-x:auto; border:1px solid var(--rule); background:var(--surface)}
.scroll table{border:0}

/* =========================================================
   Datos de cabecera
   ========================================================= */
.eyebrow{
  font-family:var(--f-mono); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin:0 0 16px; max-width:none;
}
.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule);
  margin:26px 0 30px;
}
.fact{background:var(--surface); padding:13px 15px}
.fact dt{
  font-family:var(--f-display); font-size:10.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); margin:0 0 5px;
}
.fact dd{
  margin:0; font-family:var(--f-mono); font-size:14px; font-weight:500;
  color:var(--ink); font-variant-numeric:tabular-nums;
}

/* =========================================================
   Chips de estado
   ========================================================= */
.chip{
  display:inline-block; font-family:var(--f-display);
  font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  padding:2px 7px; border-radius:2px; white-space:nowrap;
}
.chip.ship{background:var(--ship-bg); color:var(--ship)}
.chip.config{background:var(--config-bg); color:var(--config)}
.chip.gap{background:var(--gap-bg); color:var(--gap)}
.chip.plan{background:var(--plan-bg); color:var(--plan)}

/* =========================================================
   Pasos numerados
   ========================================================= */
.flow{
  display:flex; flex-direction:column;
  border:1px solid var(--rule); background:var(--surface); margin:22px 0 26px;
}
.step{display:grid; grid-template-columns:46px minmax(0,1fr); border-bottom:1px solid var(--rule-soft)}
.step:last-child{border-bottom:none}
.step-n{
  font-family:var(--f-mono); font-size:12px; font-weight:600;
  color:var(--accent); padding:14px 0 14px 16px; font-variant-numeric:tabular-nums;
}
.step-b{padding:14px 16px 14px 0}
.step-t{font-family:var(--f-display); font-weight:600; font-size:15px;
        color:var(--ink); margin:0 0 3px; max-width:none}
.step-d{font-size:14.5px; color:var(--muted); margin:0; line-height:1.5; max-width:none}
.step-d .m{font-size:12.4px}
.step-out{
  margin:7px 0 0; font-family:var(--f-display); font-size:13px;
  color:var(--ink-2); border-left:2px solid var(--rule); padding-left:10px; max-width:none;
}
.step-out b{color:var(--gap); font-weight:600}

/* =========================================================
   Bloques por fases
   ========================================================= */
.tier{border:1px solid var(--rule); background:var(--surface); margin:0 0 18px}
.tier-h{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
  padding:13px 16px; border-bottom:1px solid var(--rule); background:var(--surface-2);
}
.tier-h h3{margin:0; font-size:17px}
.tier-h .meta{font-family:var(--f-mono); font-size:11.5px; color:var(--muted); margin-left:auto}
.tier-b{padding:4px 16px 14px}
.item{padding:12px 0; border-bottom:1px solid var(--rule-soft)}
.item:last-child{border-bottom:none}
.item-t{
  font-family:var(--f-display); font-weight:600; font-size:15px; color:var(--ink);
  margin:0 0 3px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; max-width:none;
}
.item-d{font-size:14.5px; color:var(--muted); margin:0; line-height:1.5; max-width:none}
.item-d .m{font-size:12.4px}
.size{
  font-family:var(--f-mono); font-size:11px; font-weight:400; color:var(--muted);
  border:1px solid var(--rule); padding:1px 5px; border-radius:2px;
}

/* =========================================================
   Rejillas de apoyo: pilares y funciones
   ========================================================= */
.pillars,.features{
  display:grid; gap:1px; background:var(--rule);
  border:1px solid var(--rule); margin:22px 0 26px;
}
.pillars{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
@media(min-width:700px){ .features{grid-template-columns:1fr 1fr} }
.pillar,.feature{background:var(--surface)}
.pillar{padding:16px 18px}
.feature{padding:20px 22px}
.pillar h3,.feature h3{
  font-family:var(--f-display); font-weight:600;
  margin:0 0 5px; letter-spacing:.01em; line-height:1.3;
}
.pillar h3{font-size:14px; color:var(--accent-ink)}
.feature h3{font-size:16.5px; color:var(--ink)}
.pillar p,.feature p{margin:0; max-width:none; color:var(--muted)}
.pillar p{font-size:14.5px; line-height:1.45}
.feature p{font-size:15px; line-height:1.5}

/* =========================================================
   Banda de afirmación
   ========================================================= */
.statement{
  background:var(--deep); color:var(--deep-ink);
  padding:clamp(26px,5vw,40px); margin:34px 0 26px;
}
.statement p{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(20px,2.9vw,27px); line-height:1.34; letter-spacing:-.008em;
  margin:0; max-width:32ch; text-wrap:balance;
}
.statement .hl{color:var(--deep-hl)}

/* =========================================================
   Lista de comprobación numerada
   ========================================================= */
.check{
  list-style:none; margin:22px 0 26px; padding:0; max-width:none;
  border:1px solid var(--rule); background:var(--surface);
}
.check li{
  display:grid; grid-template-columns:34px minmax(0,1fr);
  margin:0; padding:13px 16px;
  border-bottom:1px solid var(--rule-soft);
  font-size:15.5px; line-height:1.48; color:var(--ink-2);
}
.check li:last-child{border-bottom:none}
.check .mk{
  font-family:var(--f-mono); font-size:13px; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.check b{font-family:var(--f-display); font-weight:600; color:var(--ink)}

/* =========================================================
   Diagramas
   ========================================================= */
.diagram{border:1px solid var(--rule); background:var(--surface); padding:8px; overflow-x:auto}
.diagram svg{display:block; min-width:660px}

/* =========================================================
   Tarjetas de acceso
   ========================================================= */
.cards{display:grid; gap:1px; background:var(--rule);
       border:1px solid var(--rule); margin:22px 0 26px}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}}
.card{
  position:relative; display:block; padding:16px 44px 18px 18px;
  background:var(--surface); border:0; border-radius:0;
  text-decoration:none; color:inherit;
}
.card h2,.card h3{
  margin:0 0 4px; padding:0; border:0;
  font-family:var(--f-display); font-weight:600; font-size:16px;
  letter-spacing:0; line-height:1.3; color:var(--accent-ink);
}
.card p{margin:0; max-width:none; font-size:14.5px; line-height:1.5; color:var(--muted)}
.card .count{
  display:block; margin-top:10px; font-family:var(--f-mono);
  font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums;
}
a.card::after{
  content:"→"; position:absolute; right:18px; top:16px;
  font-size:16px; line-height:1.3; color:var(--accent);
  transition:transform .15s ease;
}
a.card:hover{background:var(--accent-bg)}
a.card:hover h2,a.card:hover h3{color:var(--accent-ink)}
a.card:hover::after{transform:translateX(3px)}
a.card:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
/* Las secciones aún no publicadas no deben parecer pulsables */
div.card{background:var(--surface-2)}
div.card h2,div.card h3{color:var(--muted)}

/* =========================================================
   Ruta de acceso dentro de la aplicación
   ========================================================= */
.path{
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
  margin:22px 0 26px; padding:12px 16px;
  background:var(--accent-bg); border:1px solid var(--rule);
  border-left:3px solid var(--accent); border-radius:0;
  font-family:var(--f-display); font-size:14px; color:var(--ink-2);
  max-width:var(--measure);
}
.path::before{
  content:"Dónde está"; display:block; width:100%;
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:2px;
}
.path b{
  background:var(--surface); border:1px solid var(--rule);
  padding:2px 7px; border-radius:2px;
  font-family:var(--f-mono); font-size:12.5px; font-weight:500;
  color:var(--ink); white-space:nowrap;
}
/* La flecha es lo único que separa un paso del siguiente: tiene que verse. */
.path span{color:var(--accent); font-weight:700; font-size:17px; line-height:1}
/* El rótulo de la caja, en las páginas en inglés. */
html[lang="en-GB"] .path::before{content:"Where to find it"}

/* =========================================================
   Relacionadas, ficha de página y navegación
   ========================================================= */
.related{border-top:1px solid var(--rule); margin-top:56px; padding-top:24px}
.related h2{
  margin:0 0 10px; padding:0; border:0;
  font-family:var(--f-display); font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.related ul{list-style:none; padding:0; max-width:var(--measure)}
.related li{margin:0 0 6px; font-size:15px}

.page-meta{
  border-top:1px solid var(--rule); margin-top:32px; padding-top:16px;
  font-family:var(--f-mono); font-size:11.5px; color:var(--muted); max-width:none;
}

.pagenav{
  display:grid; gap:1px; background:var(--rule);
  border:1px solid var(--rule); margin:44px 0 20px;
}
@media(min-width:640px){ .pagenav{grid-template-columns:1fr 1fr} }
.pagenav__link{
  display:block; padding:14px 18px; background:var(--surface);
  border:0; border-radius:0; text-decoration:none; color:inherit;
}
.pagenav__link:hover{background:var(--accent-bg)}
.pagenav__link:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.pagenav__link span{
  display:block; font-family:var(--f-display); font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:4px;
}
.pagenav__link b{
  display:block; font-family:var(--f-display); font-size:15px; font-weight:600;
  color:var(--accent-ink); line-height:1.35;
}
.pagenav__link--prev span::before{content:"← "}
.pagenav__link--next{text-align:right}
.pagenav__link--next span::after{content:" →"}
.pagenav__gap{display:none}
@media(min-width:640px){ .pagenav__gap{display:block; background:var(--surface)} }

.totop{margin:0 0 8px; text-align:center}
.totop a{
  display:inline-block; padding:7px 16px;
  font-family:var(--f-display); font-size:12.5px; font-weight:600;
  letter-spacing:.04em; color:var(--muted); text-decoration:none;
  border:1px solid var(--rule); border-radius:2px; background:var(--surface);
}
.totop a:hover{color:var(--accent-ink); border-color:var(--accent)}
.totop a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* =========================================================
   Barra superior
   ========================================================= */
.site-bar{position:sticky; top:0; z-index:50;
          background:var(--surface); border-bottom:1px solid var(--rule)}
.site-bar__in{
  max-width:1320px; margin:0 auto; padding:11px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.site-bar__brand{
  display:flex; align-items:center; gap:.6rem; text-decoration:none;
  font-family:var(--f-display); color:var(--ink); font-weight:700; font-size:15px;
}
.site-bar__brand img{display:block; height:30px; width:auto}
.site-bar__tag{
  font-family:var(--f-display); font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  border-left:1px solid var(--rule); padding-left:.7rem;
}
.site-bar__nav{display:flex; align-items:center; gap:.25rem}
.site-bar__nav a{
  font-family:var(--f-display); font-size:13.5px; font-weight:500;
  color:var(--ink-2); text-decoration:none; padding:7px 11px; border-radius:2px;
}
.site-bar__nav a:hover{background:var(--surface-2); color:var(--ink)}
.site-bar__nav a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.site-bar__cta{background:var(--accent); color:#fff !important; font-weight:600 !important}
.site-bar__cta:hover{background:var(--accent-ink) !important; color:#fff !important}
@media(max-width:560px){
  .site-bar__tag{display:none}
  .site-bar__nav a{padding:6px 8px; font-size:12.5px}
}

/* =========================================================
   Pie
   ========================================================= */
.site-foot{border-top:1px solid var(--rule); background:var(--surface); margin-top:0}
.site-foot__in{
  max-width:1320px; margin:0 auto; padding:20px var(--pad);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem;
}
.site-foot p{margin:0; max-width:none;
             font-family:var(--f-display); font-size:12.5px; color:var(--muted)}
.site-foot nav{display:flex; flex-wrap:wrap; gap:1.1rem}
.site-foot a{font-family:var(--f-display); font-size:12.5px;
             color:var(--muted); text-decoration:none}
.site-foot a:hover{color:var(--accent-ink); text-decoration:underline}

/* =========================================================
   Menú plegable en móvil
   En pantallas estrechas el índice iba antes que el texto y obligaba a
   recorrerlo entero. Ahora se pliega tras una barra y el contenido queda
   arriba. En escritorio no cambia nada. Sin JavaScript.
   ========================================================= */
.docs-nav-toggle{display:none}
.docs-nav-label{
  display:flex; align-items:center; gap:.6rem;
  margin:20px 0 0; padding:11px 14px;
  border:1px solid var(--rule); border-radius:2px;
  background:var(--surface); color:var(--ink);
  font-family:var(--f-display); font-size:13px; font-weight:600;
  letter-spacing:.04em; cursor:pointer; user-select:none;
}
.docs-nav-label:hover{border-color:var(--accent); color:var(--accent-ink)}
.docs-nav-label__icon{width:16px; height:2px; background:currentColor;
                      position:relative; flex:0 0 auto}
.docs-nav-label__icon::before,
.docs-nav-label__icon::after{
  content:""; position:absolute; left:0; width:16px; height:2px; background:currentColor;
}
.docs-nav-label__icon::before{top:-5px}
.docs-nav-label__icon::after{top:5px}

@media(max-width:1079px){
  .docs-nav{display:none; padding:16px 0 24px}
  .docs-nav-toggle:checked ~ .docs-nav{display:block}
  .docs-nav-toggle:checked ~ .docs-nav-label{border-color:var(--accent); color:var(--accent-ink)}
  .docs-nav-toggle:checked ~ .docs-nav-label .docs-nav-label__icon{background:transparent}
  .docs-nav-toggle:checked ~ .docs-nav-label .docs-nav-label__icon::before{top:0; transform:rotate(45deg)}
  .docs-nav-toggle:checked ~ .docs-nav-label .docs-nav-label__icon::after{top:0; transform:rotate(-45deg)}
  .docs-main{padding-top:26px}
}
@media(min-width:1080px){
  .docs-nav-label{display:none}
}

/* =========================================================
   Móvil
   ========================================================= */
@media(max-width:1079px){
  body{font-size:15.5px}
  .lead{font-size:17px; padding-bottom:22px}
  h2{margin-top:40px}
  h3{font-size:18px}
  .toc li{font-size:13.5px}
  .step{grid-template-columns:38px minmax(0,1fr)}
  .step-n{padding-left:12px}
  .card{padding:14px 38px 16px 15px}

  /* Tablas: en lugar de comprimir las columnas hasta hacerlas ilegibles,
     la tabla mantiene un ancho mínimo y el bloque se desplaza en horizontal. */
  .table-wrap{-webkit-overflow-scrolling:touch}
  .table-wrap table{min-width:640px; font-size:13px}
  thead th,tbody td{padding:9px 11px}
  .table-wrap::after{
    content:"Desliza la tabla para ver el resto →";
    display:block; padding:8px 11px 9px;
    border-top:1px solid var(--rule-soft);
    font-family:var(--f-display); font-size:11.5px; color:var(--muted);
  }
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  html{scroll-behavior:auto}
}