/* Centro de Ayuda RH360 — rediseño 2026-10-23. Tokens en :root, tema claro/oscuro, color por grupo de menú (.g0-.g3). */
/* Layout: encabezado fijo con buscador global; riel izquierdo en árbol (módulo > pantallas);
   lectura central a 76ch; índice "En esta página" a la derecha con scrollspy. En móvil el riel es un cajón. */
:root{
  --bg:#F5F6F9; --surface:#FFFFFF; --sunken:#ECEFF4;
  --ink:#0E1A2F; --muted:#586379;
  --accent:#0B8F7F; --strong:#0A6F63; --wash:#E1F4F0; --line:#E0E4EC;
  --tip:#13734B; --tip-wash:#E2F4EA; --danger:#BE3A2B; --danger-wash:#FCEBE8;
  --hero:#0E1A2F; --hero-fg:#F2F5FA; --hero-muted:#AAB6CB; --hero-accent:#5EDBC8;
  --g0:#0A6F63; --g0w:#E1F4F0; --g1:#2A58C8; --g1w:#E6EDFC; --g2:#A8510A; --g2w:#FBEEDB; --g3:#6246C4; --g3w:#EDE9FB;
  --glow:rgba(11,143,127,.16); --dot:rgba(14,26,47,.09);
  --shadow:0 1px 2px rgba(14,26,47,.05),0 12px 32px -8px rgba(14,26,47,.12);
  --f-display:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif; --f-body:'Instrument Sans',system-ui,sans-serif; --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --r-s:7px; --r-m:10px; --r-l:16px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A111F; --surface:#111A2C; --sunken:#0E1626; --ink:#E7ECF5; --muted:#97A3BA;
  --accent:#34C4AF; --strong:#5EDBC8; --wash:#112E31; --line:#1E2A41;
  --tip:#6FD6A0; --tip-wash:#10281D; --danger:#F0897A; --danger-wash:#331A19;
  --hero:#16223A; --hero-fg:#F2F5FA; --hero-muted:#AAB6CB; --hero-accent:#5EDBC8;
  --g0:#5EDBC8; --g0w:#112E31; --g1:#86A8FF; --g1w:#152142; --g2:#F0B35E; --g2w:#2E2212; --g3:#B3A2F5; --g3w:#221C42;
  --glow:rgba(52,196,175,.14); --dot:rgba(231,236,245,.07);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -8px rgba(0,0,0,.5); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0A111F; --surface:#111A2C; --sunken:#0E1626; --ink:#E7ECF5; --muted:#97A3BA;
  --accent:#34C4AF; --strong:#5EDBC8; --wash:#112E31; --line:#1E2A41;
  --tip:#6FD6A0; --tip-wash:#10281D; --danger:#F0897A; --danger-wash:#331A19;
  --hero:#16223A; --hero-fg:#F2F5FA; --hero-muted:#AAB6CB; --hero-accent:#5EDBC8;
  --g0:#5EDBC8; --g0w:#112E31; --g1:#86A8FF; --g1w:#152142; --g2:#F0B35E; --g2w:#2E2212; --g3:#B3A2F5; --g3w:#221C42;
  --glow:rgba(52,196,175,.14); --dot:rgba(231,236,245,.07);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -8px rgba(0,0,0,.5); color-scheme:dark}

.g0{--gc:var(--g0);--gw:var(--g0w)}.g1{--gc:var(--g1);--gw:var(--g1w)}.g2{--gc:var(--g2);--gw:var(--g2w)}.g3{--gc:var(--g3);--gw:var(--g3w)}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3,h4{font-family:var(--f-display);text-wrap:balance;margin:0;font-weight:600;letter-spacing:-.015em}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.mono{font-family:var(--f-mono)}
svg{flex-shrink:0}

/* ---------- encabezado ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px))}
.top-in{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:12px;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:600;font-size:1.05rem;white-space:nowrap;background:none;border:0;padding:0;text-align:left}
.badge{width:34px;height:34px;border-radius:10px;background:var(--hero);color:var(--hero-accent);display:grid;place-items:center;font:700 .74rem var(--f-body);letter-spacing:.02em}
.brand small{display:block;font:500 .66rem var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.search-btn{flex:1;max-width:460px;margin-inline:auto;display:flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:.86rem;text-align:left}
.search-btn:hover{border-color:var(--accent)}
.search-btn span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
kbd{font:500 .7rem var(--f-mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;background:var(--sunken);color:var(--muted)}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--muted);flex-shrink:0}
.icon-btn:hover{color:var(--ink);border-color:var(--accent)}
.sys-link{font-size:.8rem;text-decoration:none;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:8px 13px;white-space:nowrap;background:var(--surface)}
.sys-link:hover{color:var(--ink);border-color:var(--accent)}
#menuBtn{display:none}

/* ---------- estructura ---------- */
.shell{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:268px minmax(0,1fr);gap:36px;padding-block:24px 56px}
.shell.has-toc{grid-template-columns:268px minmax(0,1fr) 208px}
#view{min-width:0}
.rail{position:sticky;top:calc(env(safe-area-inset-top,0px) + 68px);align-self:start;max-height:calc(100vh - 84px);overflow:auto;padding-right:6px;scrollbar-width:thin}
.rail h5{font:700 .66rem var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:18px 0 6px 10px}
.node>button,.pin{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:0;background:none;border-radius:var(--r-s);font-size:.87rem;color:var(--muted);text-align:left}
.node>button svg:first-child{color:var(--gc)}
.node>button:hover,.leaf:hover{background:var(--sunken);color:var(--ink)}
.node>button .chev{margin-left:auto;transition:transform .15s}
.node.open>button .chev{transform:rotate(90deg)}
.node.cur>button{color:var(--ink);font-weight:600}
.node .leaves{display:none;margin:2px 0 6px 21px;border-left:1px solid var(--line);padding-left:6px}
.node.open .leaves{display:block}
.leaf{display:block;padding:5px 9px;border-radius:6px;font-size:.82rem;color:var(--muted);text-decoration:none;line-height:1.35}
.leaf.on{background:var(--gw,var(--wash));color:var(--gc,var(--ink));font-weight:600}
.pin{background:var(--hero);color:var(--hero-fg);font-weight:600}
.pin svg{color:var(--hero-accent)}
.scrim{display:none}

/* ---------- inicio ---------- */
.hero{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(24px,5vw,56px);display:grid;gap:26px;background:radial-gradient(60% 90% at 100% 0,var(--glow),transparent 70%),radial-gradient(var(--dot) 1px,transparent 1.2px) 0 0/22px 22px,var(--surface)}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 .74rem var(--f-body);letter-spacing:.04em;color:var(--strong);background:var(--wash);border-radius:999px;padding:5px 12px;width:fit-content}
.hero .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.hero h1{font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.04;max-width:16ch;margin-top:16px;letter-spacing:-.03em;font-weight:700}
.hero h1 em{font-style:normal;color:var(--strong)}
.hero p{color:var(--muted);max-width:52ch;margin:14px 0 0;font-size:1.02rem}
.hero-search{display:flex;align-items:center;gap:12px;background:var(--bg);color:var(--muted);border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-size:1rem;width:min(100%,580px);text-align:left;box-shadow:var(--shadow)}
.hero-search:hover{border-color:var(--accent)}
.hero-search span{flex:1;min-width:0}
.stats{display:flex;gap:26px;flex-wrap:wrap}
.stats div{font-size:.8rem;color:var(--muted);padding-left:14px;border-left:2px solid var(--line)}
.stats b{display:block;font:700 1.7rem var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.start{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px;margin-top:22px}
.start button{display:flex;gap:14px;align-items:flex-start;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:16px}
.start button:hover,.mod:hover{border-color:var(--gc,var(--accent));box-shadow:var(--shadow)}
.start button:first-child{background:var(--hero);border-color:var(--hero);color:var(--hero-fg)}
.start button:first-child p{color:var(--hero-muted)}
.start button:first-child .ic{background:rgba(255,255,255,.1);color:var(--hero-accent)}
.ic{width:38px;height:38px;border-radius:10px;background:var(--gw,var(--wash));color:var(--gc,var(--strong));display:grid;place-items:center;flex-shrink:0}
.start h3,.mod h3{font-size:1.02rem}
.start p,.mod p{margin:3px 0 0;font-size:.83rem;color:var(--muted)}
.grp{margin-top:34px}
.grp>h2{font:700 .74rem var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:12px;margin-bottom:12px}
.grp>h2::after{content:"";flex:1;height:1px;background:var(--line)}
.mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px}
.mod{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--gc);border-radius:var(--r-m);padding:16px;transition:box-shadow .15s,border-color .15s;display:grid;gap:10px;align-content:start}
.mod-head{display:flex;gap:12px;align-items:flex-start;cursor:pointer;background:none;border:0;padding:0;text-align:left;width:100%}
.mod-head>div{min-width:0}
.mod-head .n{margin-left:auto;font:600 .72rem var(--f-body);color:var(--gc,var(--strong));background:var(--gw,var(--wash));border-radius:999px;padding:3px 9px;white-space:nowrap}
.mod ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.mod li a{display:block;font-size:.76rem;text-decoration:none;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px;background:var(--bg)}
.mod li a:hover{color:var(--gc);border-color:var(--gc)}

/* ---------- módulo ---------- */
.crumb{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:.8rem;color:var(--muted);margin-bottom:14px}
.crumb button{background:none;border:0;padding:0;color:var(--muted);display:inline-flex}
.crumb button:hover{color:var(--strong);text-decoration:underline}
.crumb .cur{color:var(--ink);font-weight:600}
.page-head h1{font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.15}
.eyebrow2{font:700 .7rem var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--gc,var(--strong));margin-bottom:6px}
.lede{color:var(--muted);max-width:68ch;margin:10px 0 0}
.rows{display:grid;margin-top:22px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);overflow:hidden}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:14px 18px;border-top:1px solid var(--line);align-items:center;text-decoration:none}
.row:first-child{border-top:0}
.row:hover{background:var(--sunken)}
.row h3{font:600 1rem var(--f-display)}
.row p{margin:0;font-size:.83rem;color:var(--muted);grid-column:1}
.row .go{grid-row:1/3;grid-column:2;color:var(--gc,var(--strong));display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600}
.row code{font-size:.7rem;color:var(--muted)}

/* ---------- pantalla ---------- */
.meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;color:var(--muted);background:var(--sunken);border-radius:999px;padding:5px 11px;max-width:100%}
.chip code{font-size:.72rem;color:var(--ink)}
.sec{margin-top:44px;scroll-margin-top:84px;max-width:76ch}
.sec.wide{max-width:none}
.sec>h2{font-size:1.32rem;line-height:1.25}
.sec>.sub{color:var(--muted);font-size:.86rem;margin:4px 0 16px}
.frame{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--surface);box-shadow:var(--shadow);margin-bottom:14px}
.frame-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--sunken);border-bottom:1px solid var(--line);font:500 .7rem var(--f-mono);color:var(--muted)}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.frame-bar em{margin-left:8px;font-style:normal}
.frame button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.frame img{width:100%;height:auto;display:block}
.pending{padding:30px 20px;text-align:center;color:var(--muted);font-size:.84rem;display:grid;gap:6px;justify-items:center}
.map{display:grid;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--surface)}
.map-row{display:grid;grid-template-columns:30px minmax(140px,.9fr) minmax(0,2.2fr);gap:4px 14px;padding:13px 16px;border-top:1px solid var(--line);font-size:.86rem}
.map-row:first-child{border-top:0}
.num{width:24px;height:24px;border-radius:50%;background:var(--danger);color:#fff;font:700 .72rem var(--f-body);display:grid;place-items:center}
.map-row b{display:block}
.map-row .what{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
.map-row .why{min-width:0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:14px;min-width:0}
.card-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.card-h .ic{width:32px;height:32px;border-radius:8px}
.card h4{font:700 .9rem var(--f-body)}
.card p{margin:0;font-size:.83rem;color:var(--muted)}
.fn{display:inline-block;margin-top:8px;font:500 .7rem var(--f-mono);background:var(--sunken);color:var(--muted);border-radius:6px;padding:2px 7px;max-width:100%;overflow-wrap:anywhere}
.acts{display:grid;gap:8px}
.act{display:flex;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.act>div{min-width:0}
.act.danger{border-color:var(--danger);background:var(--danger-wash)}
.act h4{font:700 .88rem var(--f-body);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.act p{margin:2px 0 0;font-size:.83rem;color:var(--muted)}
.act .ic{width:32px;height:32px;border-radius:8px}
.act.danger .ic{background:transparent;color:var(--danger)}
.act.danger p{color:var(--ink)}
.pill{font:600 .66rem var(--f-body);border-radius:999px;padding:2px 8px;background:var(--sunken);color:var(--muted);letter-spacing:.02em}
.pill.d{background:var(--danger);color:#fff}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.spec>div{min-width:0}
.spec h4{font:700 .7rem var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.spec dl{margin:0;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);overflow:hidden}
.spec dl>div{padding:10px 14px;border-top:1px solid var(--line);font-size:.83rem}
.spec dl>div:first-child{border-top:0}
.spec dt{font-weight:700}
.spec dd{margin:2px 0 0;color:var(--muted)}
.btn-chip dt{display:inline-block;background:var(--sunken);border-radius:6px;padding:1px 8px}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:30px 1fr;gap:14px;padding-bottom:20px;position:relative}
.timeline li:not(:last-child)::before{content:"";position:absolute;left:14px;top:30px;bottom:2px;width:2px;background:var(--line)}
.timeline .n{width:30px;height:30px;border-radius:50%;background:var(--hero);color:var(--hero-accent);display:grid;place-items:center;font:700 .8rem var(--f-body)}
.timeline h4{font:700 .92rem var(--f-body)}
.timeline p{margin:3px 0 0;font-size:.86rem;color:var(--muted)}
details.faq{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);margin-bottom:8px}
details.faq summary{padding:13px 16px;font-weight:600;font-size:.9rem;cursor:pointer;list-style:none;display:flex;gap:10px;align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";margin-left:auto;font-size:1.2rem;color:var(--strong)}
details.faq[open] summary::after{content:"–"}
details.faq p{margin:0;padding:0 16px 14px;color:var(--muted);font-size:.86rem}
.rel{display:flex;gap:8px;flex-wrap:wrap}
.rel a,.rel span{font-size:.82rem;border:1px solid var(--line);border-radius:999px;padding:7px 13px;text-decoration:none;background:var(--surface)}
.rel a:hover{border-color:var(--accent);color:var(--strong)}
.rel span{color:var(--muted)}
.note{display:flex;gap:10px;background:var(--tip-wash);color:var(--tip);border-radius:var(--r-m);padding:13px 15px;font-size:.85rem;margin-top:26px;max-width:76ch}
.note.warn{background:var(--danger-wash);color:var(--danger)}
.stub{margin-top:30px;border:1px dashed var(--accent);border-radius:var(--r-m);padding:22px;color:var(--muted);font-size:.88rem;max-width:76ch}
.stub code{color:var(--ink)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:56px;max-width:76ch}
.pager button{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-m);padding:12px 16px;text-align:left;display:grid;gap:2px}
.pager button:hover{border-color:var(--accent)}
.pager button:last-child{text-align:right}
.pager small{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.pager b{font:600 .95rem var(--f-display)}
.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px);align-self:start;font-size:.8rem;max-height:calc(100vh - 100px);overflow:auto}
.toc h5{font:700 .66rem var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.toc a{display:block;padding:5px 0 5px 12px;color:var(--muted);text-decoration:none;border-left:2px solid var(--line);line-height:1.35}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);border-left-color:var(--accent);font-weight:600}

/* ---------- buscador ---------- */
.pal{position:fixed;inset:0;z-index:50;display:none;align-items:flex-start;justify-content:center;padding:max(8vh,env(safe-area-inset-top,0px)) 16px 16px;background:rgba(20,12,6,.55)}
.pal.show{display:flex}
.pal-box{width:min(640px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow);overflow:hidden;display:grid;max-height:78vh;grid-template-rows:auto minmax(0,1fr) auto}
.pal-in{display:flex;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);color:var(--muted)}
.pal-in input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:1.02rem;color:var(--ink);outline:0}
.pal-res{overflow:auto;padding:8px}
.hit{display:grid;gap:1px;width:100%;text-align:left;padding:10px 12px;border:0;background:none;border-radius:var(--r-s)}
.hit.on{background:var(--wash)}
.hit b{font-size:.92rem}
.hit b span{font-weight:400}
.hit>span{font-size:.78rem;color:var(--muted)}
.hit mark{background:none;color:var(--strong);font-weight:700;text-decoration:underline;text-decoration-color:var(--accent)}
.pal-empty{padding:30px 16px;text-align:center;color:var(--muted);font-size:.88rem}
.pal-foot{display:flex;gap:14px;padding:9px 16px;border-top:1px solid var(--line);font-size:.72rem;color:var(--muted);background:var(--sunken)}
.zoom{position:fixed;inset:0;z-index:60;background:rgba(20,12,6,.82);display:none;overflow:auto;padding:16px;cursor:zoom-out}
.zoom.show{display:block}
.zoom img{max-width:none;width:min(1500px,220%);margin:0 auto;border-radius:8px;display:block}

/* ---------- responsive ---------- */
@media (max-width:1180px){.shell.has-toc{grid-template-columns:268px minmax(0,1fr)}.toc{display:none}}
@media (max-width:860px){
  .shell,.shell.has-toc{grid-template-columns:minmax(0,1fr);gap:0}
  #menuBtn{display:grid}
  .sys-link,.search-btn kbd{display:none}
  .brand small{display:none}
  .rail{position:fixed;z-index:45;top:0;bottom:0;left:0;width:min(86vw,320px);max-height:none;background:var(--bg);padding:calc(env(safe-area-inset-top,0px) + 16px) 12px 20px max(12px,env(safe-area-inset-left,0px));border-right:1px solid var(--line);transform:translateX(-102%);transition:transform .2s ease;visibility:hidden}
  .rail.show{transform:none;visibility:visible}
  .scrim.show{display:block;position:fixed;inset:0;z-index:40;background:rgba(20,12,6,.5)}
  .map-row{grid-template-columns:30px 1fr}
  .map-row .why{grid-column:2}
  .pager{grid-template-columns:1fr}
}
@media (max-width:480px){.brand>span:last-child{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}