:root{--cobalto:#312783;--celeste:#0d7ffa;--oscuro:#1a1f2e;--medianoche:#1f0547;--lavanda:#e7e8f6;--gris:#5b6472;--linea:#e3e6ee}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#20242c;background:#f4f6fb;display:flex;min-height:100vh}
/* ---- sidebar ---- */
nav.side{width:270px;flex:0 0 270px;background:var(--oscuro);color:#cdd3df;position:sticky;top:0;height:100vh;overflow-y:auto;padding-bottom:2rem}
nav.side .brand{display:flex;align-items:center;gap:.6rem;padding:1.1rem 1.2rem;border-bottom:1px solid #2a3142;color:#fff;text-decoration:none;font-weight:700;font-size:1.15rem}
nav.side .brand img{height:30px}
nav.side ul{list-style:none;margin:.5rem 0;padding:0}
nav.side li a{display:block;padding:.55rem 1.2rem;color:#c3cad8;text-decoration:none;font-size:.94rem;border-left:3px solid transparent}
nav.side li a:hover{background:#232a3a;color:#fff}
nav.side li.active>a{background:#232a3a;color:#fff;border-left-color:var(--celeste);font-weight:600}
nav.side li.lvl1 a{padding-left:2.1rem;font-size:.9rem;color:#aab2c4}
nav.side li.lvl2 a{padding-left:3rem;font-size:.86rem;color:#95a0b6}
/* ---- main ---- */
main{flex:1;min-width:0;display:flex;flex-direction:column}
header.hero{background:linear-gradient(120deg,var(--cobalto),var(--celeste));color:#fff;padding:2.2rem 2.5rem}
header.hero h1{margin:0;font-size:1.9rem;font-weight:700}
header.hero.home{padding:0;background:linear-gradient(160deg,#c9d2e8 0%,#e9edf6 40%,#f4f6fb 100%)}
.hero-home{text-align:center;padding:2.5rem 1rem 2rem}
.hero-home .hero-sub{font-size:2.4rem;font-weight:800;color:var(--cobalto);letter-spacing:.5px}
.hero-home .hero-logo{max-width:360px;width:70%;margin:.6rem auto;display:block}
.hero-home .hero-title{font-size:2rem;font-weight:700;color:var(--medianoche);margin-top:.4rem}
/* ---- content ---- */
article.content{background:#fff;margin:1.6rem auto;max-width:900px;width:calc(100% - 3rem);padding:2rem 2.4rem;border:1px solid var(--linea);border-radius:12px;box-shadow:0 2px 10px rgba(30,40,80,.05);line-height:1.6}
article.content h1,article.content h2{color:var(--cobalto)}
article.content h1{font-size:1.6rem;border-bottom:2px solid var(--lavanda);padding-bottom:.3rem}
article.content h2{font-size:1.25rem;margin-top:1.8rem}
article.content h3{font-size:1.05rem;color:var(--medianoche)}
article.content img{max-width:100%;height:auto;border:1px solid var(--linea);border-radius:6px;margin:.4rem 0}
article.content figure{margin:1rem 0;text-align:center}
article.content table{border-collapse:collapse;width:100%;display:block;overflow-x:auto;margin:1rem 0}
article.content td,article.content th{border:1px solid var(--linea);padding:.4rem .6rem;text-align:left}
article.content th{background:var(--lavanda)}
footer{color:var(--gris);font-size:.82rem;text-align:center;padding:1.5rem;margin-top:auto}
/* ---- responsive ---- */
#navtoggle,.burger{display:none}
@media(max-width:820px){
 nav.side{position:fixed;left:-270px;z-index:20;transition:left .2s}
 #navtoggle:checked~nav.side{left:0}
 .burger{display:block;position:fixed;top:.6rem;left:.6rem;z-index:30;background:var(--oscuro);color:#fff;padding:.35rem .6rem;border-radius:6px;cursor:pointer;font-size:1.2rem}
 article.content{width:calc(100% - 1.5rem);padding:1.2rem}
 .hero-home .hero-sub,.hero-home .hero-title{font-size:1.6rem}
}
nav.side li.ext a{color:#8993a8;font-size:.86rem}
nav.side li.ext a:hover{color:#fff}
footer{border-top:1px solid var(--linea);padding:1.6rem;text-align:center;margin-top:1rem;background:#fff}
footer .soporte{display:block;font-size:1.15rem;font-weight:700;color:var(--cobalto);text-decoration:none;margin-bottom:.6rem}
footer .soporte:hover{text-decoration:underline}
footer .foot-links{margin-bottom:.5rem}
footer .foot-links a{color:var(--gris);text-decoration:underline;margin:0 .6rem;font-size:.9rem}
footer .foot-links a:hover{color:var(--cobalto)}
footer .foot-copy{color:#9aa3b2;font-size:.78rem}