/* ============================================================================
   HRO · Sistema de diseño — FUENTE ÚNICA de color y tokens
   ----------------------------------------------------------------------------
   Esta es la fuente de verdad del diseño de HRO. La landing, la documentación
   (docs.css) y el portal beben de aquí. Para cambiar la paleta de TODO el sitio
   se edita SOLO este archivo.

   Los valores nacen de la landing (hro.cl): la landing manda, el resto obedece.
   No dupliques estos tokens en ningún otro archivo.
   ============================================================================ */

:root {
    --bg:#0a0812; --surface:#151021; --surface-2:#1e1733; --border:#2c2542;
    --text:#ececf4; --muted:#9b90b0; --accent:#a855f7; --accent-soft:#2a1a48;
    --gold:#ec4899; --gold-soft:#3a1630;
    --ansi-green:#4ec9a5; --ansi-cyan:#56b6e0; --ansi-amber:#e0b64c; --ansi-red:#f06a6a;
    /* Semánticos (mismos en claro y oscuro). Los usa el portal. */
    --danger:#f06a6a; --ok:#4ec9a5;
    --term-bg:#0b0817; --term-border:#241d3a;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;
    --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
    --wrap:1200px;
    --shadow:0 24px 60px -20px rgba(0,0,0,.6);

    /* Degradados firma (identidad HRO). Antes hardcodeados en cada archivo. */
    --grad-text:linear-gradient(120deg,#c084fc,#a855f7 45%,#ec4899);
    --grad-btn:linear-gradient(135deg,#a855f7,#7c3aed);
    --grad-btn-glow:0 8px 24px -8px rgba(168,85,247,.55);
}

@media (prefers-color-scheme: light) {
    :root {
        --bg:#faf8fe; --surface:#ffffff; --surface-2:#f5f1fb; --border:#eae3f6;
        --text:#1a1030; --muted:#6b6280; --accent:#8b34df; --accent-soft:#f0e6fd;
        --gold:#d6297f; --gold-soft:#fbe6f1;
        --shadow:0 20px 50px -24px rgba(28,45,90,.28);
    }
}

[data-theme="dark"] {
    --bg:#0a0812; --surface:#151021; --surface-2:#1e1733; --border:#2c2542;
    --text:#ececf4; --muted:#9b90b0; --accent:#a855f7; --accent-soft:#2a1a48;
    --gold:#ec4899; --gold-soft:#3a1630; --shadow:0 24px 60px -20px rgba(0,0,0,.6);
}

[data-theme="light"] {
    --bg:#faf8fe; --surface:#ffffff; --surface-2:#f5f1fb; --border:#eae3f6;
    --text:#1a1030; --muted:#6b6280; --accent:#8b34df; --accent-soft:#f0e6fd;
    --gold:#d6297f; --gold-soft:#fbe6f1; --shadow:0 20px 50px -24px rgba(28,45,90,.28);
}

/* ============================================================================
   Navegación HRO — componente <hro-nav> (docs/hro/assets/hro.js)
   ----------------------------------------------------------------------------
   Estilos SCOPEADOS bajo hro-nav: solo aplican dentro del componente, que usan
   la landing y la documentación. El portal tiene su propia barra y NO se toca.
   El HTML del menú se define UNA vez en hro.js; el look, UNA vez acá.
   ============================================================================ */

hro-nav { display:block; min-height:65px; }
hro-nav .nav {
    position:sticky; top:0; z-index:50;
    backdrop-filter:blur(12px);
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    border-bottom:1px solid var(--border);
}
hro-nav .nav-in { display:flex; align-items:center; gap:18px; height:64px; flex-wrap:nowrap; }

/* Marca = solo el logo, sin caja, más grande. Se resetea fondo/borde/radio/
   padding explícitamente para ganarle a la caja vieja que quedó inline en la
   landing (cruft overrideado). */
hro-nav .brand {
    display:flex; align-items:center; flex-shrink:0;
    background:none; border:0; border-radius:0; padding:0;
    transition:opacity .18s;
}
hro-nav .brand:hover { opacity:.85; }
hro-nav .brand img { height:44px; width:auto; display:block; }

/* Enlaces: texto plano, activo en violeta negrita. Se resetea explícitamente
   todo (fondo/borde/radio/padding) para ganarle a cualquier CSS viejo de píldora
   que pudiera quedar en la landing. */
hro-nav .nav-links { display:none; gap:32px; margin-inline:auto; font-size:.94rem; font-weight:500; color:var(--muted); white-space:nowrap; background:none; border:0; border-radius:0; padding:0; backdrop-filter:none; }
hro-nav .nav-links a { padding:6px 0; color:var(--muted); background:none; border-radius:0; transition:color .15s; white-space:nowrap; }
hro-nav .nav-links a:hover { color:var(--text); background:none; }
hro-nav .nav-links a.active, hro-nav .nav-links a[aria-current] { color:var(--accent); font-weight:700; }

/* Acciones a la derecha */
hro-nav .nav-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
hro-nav .nav-login { white-space:nowrap; color:var(--muted); font-size:.92rem; font-weight:500; padding:8px 12px; border-radius:9px; transition:color .15s; }
hro-nav .nav-login:hover { color:var(--text); }
hro-nav .nav-cta {
    font-family:var(--mono); font-size:.82rem; font-weight:600; white-space:nowrap;
    padding:9px 16px; border-radius:9px; border:1px solid transparent;
    background:var(--grad-btn); color:#fff; box-shadow:var(--grad-btn-glow);
    transition:filter .18s, transform .18s;
}
hro-nav .nav-cta:hover { filter:brightness(1.08); transform:translateY(-1px); }

@media (min-width:820px) {
    hro-nav .brand small { display:block; }
    hro-nav .nav-links { display:flex; }
}
@media (max-width:1040px) { hro-nav .nav-links { gap:22px; font-size:.9rem; } hro-nav .nav-in { gap:14px; } }
@media (max-width:640px)  { hro-nav .brand small { display:none; } hro-nav .nav-login { padding:8px 10px; } hro-nav .nav-cta { padding:9px 14px; } }

/* ============================================================================
   Hamburguesa móvil (nav compartido: landing + docs)
   ----------------------------------------------------------------------------
   Bajo 820px los enlaces + acciones se esconden tras un botón ☰ y se despliegan
   en un panel bajo el header. En ≥820px el botón se oculta y el .nav-menu pasa a
   display:contents → todo vuelve a la barra inline de siempre (desktop intacto).
   El panel se posiciona sobre .nav (sticky = bloque contenedor), a ancho completo.
   ============================================================================ */
hro-nav .nav-burger {
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:42px; padding:0 10px; margin-left:auto; flex-shrink:0;
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    cursor:pointer; transition:border-color .18s;
}
hro-nav .nav-burger:hover { border-color:color-mix(in srgb, var(--accent) 40%, var(--border)); }
hro-nav .nav-burger span { display:block; height:2px; width:100%; border-radius:2px; background:var(--text); transition:transform .2s, opacity .2s; }
hro-nav .nav.open .nav-burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
hro-nav .nav.open .nav-burger span:nth-child(2) { opacity:0; }
hro-nav .nav.open .nav-burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

hro-nav .nav-menu { display:none; }
hro-nav .nav.open .nav-menu {
    display:flex; flex-direction:column; gap:4px;
    position:absolute; top:100%; left:0; right:0; z-index:49;
    background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow);
    padding:12px clamp(20px,5vw,40px) 18px;
}
hro-nav .nav.open .nav-menu .nav-links {
    display:flex; flex-direction:column; gap:0; margin:0; font-size:1rem; white-space:normal;
}
hro-nav .nav.open .nav-menu .nav-links a { padding:13px 4px; border-bottom:1px solid var(--border); }
hro-nav .nav.open .nav-menu .nav-links a:last-child { border-bottom:0; }
hro-nav .nav.open .nav-menu .nav-actions { display:flex; flex-direction:column; align-items:stretch; gap:10px; margin-top:14px; }
hro-nav .nav.open .nav-menu .nav-login,
hro-nav .nav.open .nav-menu .nav-cta { display:block; text-align:center; padding:13px; font-size:.96rem; border-radius:10px; }
hro-nav .nav.open .nav-menu .nav-login { border:1px solid var(--border); color:var(--text); }

@media (min-width:820px) {
    hro-nav .nav-burger { display:none; }
    hro-nav .nav-menu { display:contents; }
}