/* ============================================================
   PG-PIAR PRO 2.0 - IDENTIDAD VISUAL
   AQUI SE MODIFICAN LOS COLORES, ESPACIADOS Y COMPONENTES.
   ============================================================ */
:root{--navy:#071936;--navy-deep:#030A1C;--blue:#147DEB;--cyan:#10B9E8;--indigo:#5146E5;--green:#18C36E;--lime:#8BEA13;--violet:#8B4DEB;--orange:#FF6A2A;--teal:#08AFC1;--text:#14213D;--muted:#60708D;--surface:#fff;--background:#F7FAFF;--border:#DCE7F5;--shadow:0 18px 50px rgba(7,25,54,.10);--container:1400px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--background);line-height:1.55}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.container{width:min(calc(100% - 48px),var(--container));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:1000;background:rgba(3,10,28,.97);box-shadow:0 8px 30px rgba(0,0,0,.1)}.nav-wrap{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand img{width:330px;height:76px;object-fit:contain}.main-nav{display:flex;align-items:center;gap:40px;font-weight:700;color:#fff}.main-nav a:not(.btn){transition:.2s}.main-nav a:not(.btn):hover{color:#5fd9ff}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:12px;padding:13px 25px;font-weight:800;cursor:pointer;transition:.2s}.btn-primary,.btn-nav{background:linear-gradient(135deg,var(--blue),#0876dc);color:#fff;box-shadow:0 10px 25px rgba(20,125,235,.25)}.btn:hover{transform:translateY(-2px)}.btn-nav{padding:14px 24px}.nav-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:10px}.nav-toggle span{display:block;width:22px;height:2px;background:#fff;margin:4px}
.hero{position:relative;overflow:hidden;background:linear-gradient(110deg,#fff 0%,#fff 52%,#f1f8ff 100%);padding:42px 0 18px}.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;min-height:450px;gap:30px}.hero-copy{padding-left:12px;position:relative;z-index:2}.eyebrow,.section-kicker{font-size:13px;letter-spacing:.13em;font-weight:900;color:#087be7}.eyebrow span{color:var(--indigo)}.hero h1{font-size:clamp(44px,4.7vw,69px);line-height:1.02;letter-spacing:-.055em;margin:12px 0 16px;max-width:700px}.hero h1 span{color:var(--blue)}.hero-text{font-size:18px;color:#405472;max-width:640px}.hero-actions{display:flex;align-items:center;gap:28px;margin-top:22px}.btn-video{color:var(--blue);font-weight:800;display:flex;gap:10px;align-items:center}.play{width:22px;height:22px;border:2px solid var(--blue);border-radius:50%;display:grid;place-items:center;font-size:9px}
.hero-visual{position:relative;min-height:430px}.hero-illustration{position:absolute;inset:5% 0 0 0;border-radius:34px;background:radial-gradient(circle at 70% 25%,rgba(16,185,232,.22),transparent 33%),linear-gradient(145deg,#eef8ff,#dfeaff);overflow:hidden}.teacher,.student{position:absolute;border-radius:50%;background:#f7c9ad;box-shadow:inset -8px -8px 0 rgba(0,0,0,.05)}.teacher{width:105px;height:105px;right:39%;top:12%}.student{width:86px;height:86px;right:17%;top:27%}.body-shape{position:absolute;border-radius:50% 50% 15% 15%;background:#5aa5dc}.teacher-body{width:190px;height:240px;right:30%;top:34%;border-radius:45% 45% 8% 8%}.student-body{width:150px;height:205px;right:9%;top:48%;background:#6c8da9;border-radius:45% 45% 8% 8%}.desk{position:absolute;left:7%;right:7%;bottom:10%;height:22px;background:#c7965a;border-radius:12px;box-shadow:0 15px 0 #b68049}.paper{position:absolute;width:160px;height:95px;background:#fff;left:27%;bottom:17%;transform:rotate(-7deg);border-radius:8px;box-shadow:0 10px 25px rgba(7,25,54,.12)}
.piar-card{position:absolute;right:2%;top:4px;width:340px;background:rgba(255,255,255,.97);border:1px solid rgba(220,231,245,.8);border-radius:15px;padding:18px;box-shadow:var(--shadow);backdrop-filter:blur(8px)}.piar-card-head,.progress-head{display:flex;justify-content:space-between;align-items:center}.status{font-size:12px;color:#0baa5a;font-weight:800}.status i{display:inline-block;width:7px;height:7px;background:#16c784;border-radius:50%;margin-right:5px}.student-row{display:flex;gap:12px;align-items:center;margin:18px 0}.avatar{width:44px;height:44px;border-radius:12px;background:#eef0ff;color:var(--indigo);display:grid;place-items:center;font-weight:900}.student-row small{display:block;color:var(--muted)}.progress-head{font-size:12px;margin-bottom:6px}.progress{height:7px;background:#e6ecf5;border-radius:10px;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--indigo));border-radius:10px}.progress-list{list-style:none;padding:0;margin:15px 0 0}.progress-list li{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:5px;border-top:1px solid #edf1f7;padding:9px 0;font-size:12px}.progress-list li span{color:var(--blue)}.progress-list b{font-size:11px;color:#0ba45a}.progress-list .warning{color:#f39b0a}.progress-list .pending{color:#7a879b}
.feature-strip{padding:0 0 15px;background:#fff}.feature-grid{border:1px solid var(--border);border-radius:16px;display:grid;grid-template-columns:repeat(5,1fr);overflow:hidden;background:#fff}.feature{display:flex;gap:12px;align-items:center;padding:16px 22px;border-right:1px solid #edf2f8}.feature:last-child{border-right:0}.feature-icon{font-size:27px;color:var(--blue);width:32px;text-align:center}.feature strong{font-size:13px;display:block}.feature small{font-size:12px;color:var(--muted)}
.cards-section{background:#fff;padding:0 0 8px}.cards-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.info-card{min-height:260px;border:1px solid var(--border);border-radius:13px;padding:18px 20px;display:flex;flex-direction:column;text-align:center;background:#fff}.info-card.blue{background:linear-gradient(180deg,#fff,#f7fbff)}.info-card.green{background:linear-gradient(180deg,#fff,#f5fcf8)}.info-card.violet{background:linear-gradient(180deg,#fff,#faf7ff)}.info-card.orange{background:linear-gradient(180deg,#fff,#fff8f4)}.info-card.cyan{background:linear-gradient(180deg,#fff,#f4fcfd)}.card-icon{width:54px;height:54px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;font-size:25px;font-weight:900;background:#edf5ff;color:var(--blue)}.green .card-icon{background:#eaf9f1;color:var(--green)}.violet .card-icon{background:#f2eaff;color:var(--violet)}.orange .card-icon{background:#fff0e9;color:var(--orange)}.cyan .card-icon{background:#e4f8fa;color:var(--teal)}.info-card h2{font-size:17px;margin:0 0 8px;color:var(--blue)}.green h2{color:#0ca65d}.violet h2{color:var(--violet)}.orange h2{color:var(--orange)}.cyan h2{color:var(--teal)}.info-card p{font-size:14px;color:#334563;margin:0 auto 15px;max-width:240px}.info-card a{margin-top:auto;border:1px solid currentColor;border-radius:8px;padding:7px 14px;font-size:13px;font-weight:800;color:var(--blue)}.green a{color:var(--green)}.violet a{color:var(--violet)}.orange a{color:var(--orange)}.cyan a{color:var(--teal)}
.detail-section{padding:80px 0;background:#fff}.detail-section.alt{background:#f2f7ff}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}.detail-section h2{font-size:42px;line-height:1.1;letter-spacing:-.035em;margin:10px 0}.detail-section p{font-size:18px;color:#52627b}.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:35px}.timeline>div{background:#fff;border:1px solid var(--border);padding:20px;border-radius:14px;min-height:160px}.timeline b{display:block;color:var(--green);font-size:28px}.timeline strong{display:block;margin:10px 0 6px}.timeline span{font-size:13px;color:var(--muted)}
.site-footer{background:linear-gradient(145deg,var(--navy),#061e48);color:#fff;padding:48px 0 20px;border-radius:0 0 14px 14px}.footer-grid{display:grid;grid-template-columns:1.5fr .8fr .9fr 1.1fr;gap:50px}.footer-brand img{width:340px;max-width:100%;margin-bottom:10px}.footer-grid h3{font-size:16px;margin:0 0 14px}.footer-grid a,.footer-grid p{display:block;color:#d6e3f6;font-size:14px;margin:7px 0}.footer-brand p{max-width:350px;line-height:1.6}.footer-login{font-weight:800;color:#fff!important}.socials{display:flex;gap:10px;margin-top:15px}.socials a{width:34px;height:34px;border-radius:50%;background:#e9eef6;color:var(--navy);display:grid;place-items:center;font-weight:900}.footer-bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:25px;padding-top:14px;text-align:center}.footer-bottom p{margin:0;color:#e5edf9;font-size:13px}.footer-bottom span{margin:0 7px;color:#8ea8c9}.whatsapp-float{position:fixed;right:20px;bottom:20px;width:54px;height:54px;border-radius:50%;background:#18c36e;color:#fff;display:grid;place-items:center;font-size:30px;box-shadow:0 12px 30px rgba(0,0,0,.2);z-index:999}
.auth-page{min-height:100vh;background:radial-gradient(circle at top right,#dff5ff,#f7faff 50%,#eef2ff)}.login-shell{min-height:100vh;display:grid;place-items:center;padding:25px}.login-panel{width:min(100%,470px);background:#fff;border:1px solid var(--border);border-radius:24px;padding:35px;box-shadow:var(--shadow)}.login-logo img{width:300px;max-width:100%;margin:0 auto 22px}.login-panel h1{font-size:35px;line-height:1.1;margin:7px 0}.login-panel p{color:var(--muted)}.login-form{display:grid;gap:8px;margin-top:22px}.login-form label{font-weight:800;font-size:13px}.login-form input{border:1px solid #cad8ea;border-radius:10px;padding:13px 14px;font:inherit;margin-bottom:8px}.btn-block{width:100%}.alert{padding:12px;border-radius:10px;font-size:14px}.alert.error{background:#fff0f0;color:#a32020;border:1px solid #ffcaca}.back-home{display:block;text-align:center;margin-top:18px;color:var(--blue);font-weight:700}
.app-page{background:#f4f7fb}.app-topbar{height:74px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 30px}.brand-mini img{width:230px}.app-user{display:flex;gap:20px;align-items:center}.app-user a{color:#fff;font-weight:800}.app-shell{width:min(calc(100% - 50px),1300px);margin:40px auto}.dashboard-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.dashboard-head h1{font-size:42px;margin:4px 0}.dashboard-head p{color:var(--muted);margin:0}.dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.dash-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:25px;min-height:200px;box-shadow:0 10px 30px rgba(7,25,54,.05)}.dash-card span{color:var(--blue);font-weight:900}.dash-card h2{font-size:21px}.dash-card p{color:var(--muted)}.error-page{text-align:center;padding:120px 20px}.error-page h1{font-size:80px;margin:0;color:var(--blue)}
@media(max-width:1100px){.main-nav{gap:20px}.brand img{width:270px}.cards-grid{grid-template-columns:repeat(2,1fr)}.feature-grid{grid-template-columns:repeat(2,1fr)}.feature{border-bottom:1px solid #edf2f8}.timeline{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.container{width:min(calc(100% - 28px),var(--container))}.nav-toggle{display:block}.main-nav{display:none;position:absolute;top:84px;left:0;right:0;background:var(--navy);padding:18px;flex-direction:column;align-items:stretch;gap:4px}.main-nav.open{display:flex}.main-nav a{padding:12px 10px}.hero{padding-top:20px}.hero-grid{grid-template-columns:1fr;min-height:auto}.hero-copy{padding:30px 0 0}.hero h1{font-size:45px}.hero-visual{min-height:450px}.piar-card{right:0;top:10px;width:min(340px,85%)}.feature-grid,.cards-grid{grid-template-columns:1fr}.feature{border-right:0}.footer-grid,.detail-grid{grid-template-columns:1fr;gap:30px}.timeline{grid-template-columns:1fr}}
@media(max-width:520px){.brand img{width:225px}.hero h1{font-size:38px}.hero-text{font-size:16px}.hero-actions{gap:15px;flex-wrap:wrap}.piar-card{position:relative;top:auto;right:auto;margin:25px auto 0}.hero-visual{min-height:520px}.dashboard-grid{grid-template-columns:1fr}.dashboard-head{display:block}.dashboard-head .btn{margin-top:15px}}
@media print{.site-header,.site-footer,.whatsapp-float,.nav-toggle{display:none!important}body{background:#fff;color:#000}.container{width:100%}.hero,.feature-strip,.cards-section{display:none}.detail-section{padding:15mm 10mm;background:#fff!important}a{color:#000;text-decoration:none}}

/* ============================================================
   LOGO ORIGINAL PG-PIAR PRO 2.0
   IMPORTANTE: el archivo PNG es cuadrado y contiene transparencia.
   NO se redibuja ni se recorta el archivo fuente; estos contenedores
   solamente controlan cómo se presenta visualmente en la interfaz.
   ============================================================ */
.brand-logo{display:block;width:235px;height:76px;overflow:hidden;position:relative}
.brand-logo img{position:absolute;width:235px;height:235px;max-width:none;left:0;top:-69px;object-fit:contain}
.footer-logo{display:block;width:330px;height:128px;overflow:hidden;position:relative}
.footer-logo img{position:absolute;width:330px;height:330px;max-width:none;left:0;top:-98px;object-fit:contain}
@media(max-width:1100px){.brand-logo{width:215px}.brand-logo img{width:215px;height:215px;top:-63px}}
@media(max-width:520px){.brand-logo{width:200px;height:68px}.brand-logo img{width:200px;height:200px;top:-59px}.footer-logo{width:280px;height:110px}.footer-logo img{width:280px;height:280px;top:-83px}}

/* ============================================================
   LANDING V2: HERO REAL, PAGINAS PUBLICAS Y ADMINISTRACION
   ============================================================ */
.brand-logo{width:250px;height:76px}.brand-logo img{width:250px;height:auto;max-width:none;position:static;object-fit:contain}.footer-logo{width:340px;height:auto;overflow:visible}.footer-logo img{width:340px;height:auto;max-width:100%;position:static;object-fit:contain}.brand img{width:auto;height:auto}.main-nav a.active{color:#65dcff}
.hero-visual{min-height:460px}.hero-source-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:28px;opacity:.98}.piar-card{z-index:2}.home-closing{background:linear-gradient(110deg,#071936,#0b2d62);color:#fff;padding:52px 0}.closing-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.closing-inner h2{font-size:38px;margin:8px 0}.btn-light{background:#fff;color:var(--indigo);box-shadow:0 10px 25px rgba(0,0,0,.15)}
.page-hero{padding:90px 0 75px;background:linear-gradient(115deg,#071936 0%,#0c2d61 58%,#147deb 100%);color:#fff}.page-hero .section-kicker{color:#6cddff}.page-hero h1{font-size:clamp(44px,6vw,74px);line-height:1;margin:12px 0 18px;letter-spacing:-.05em}.page-hero p{font-size:20px;color:#dce9fb;max-width:780px}.role-grid,.dua-grid,.resource-grid,.norm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.role-grid article,.dua-grid article,.resource-grid article,.norm-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:25px;box-shadow:0 10px 30px rgba(7,25,54,.05)}.dua-grid article>span,.resource-grid article>span,.norm-tag{display:inline-flex;font-size:12px;font-weight:900;letter-spacing:.08em;color:var(--blue);background:#edf5ff;padding:7px 10px;border-radius:20px}.dua-grid h2,.resource-grid h2,.norm-card h2{margin:14px 0 8px}.dua-grid p,.resource-grid p,.norm-card p{font-size:15px;color:var(--muted)}.norm-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.norm-links a{color:var(--blue);font-weight:800;border:1px solid #bcd8fb;border-radius:9px;padding:9px 12px;font-size:13px}.timeline-large{grid-template-columns:repeat(5,1fr)}
.admin-layout{min-height:calc(100vh - 74px);display:grid;grid-template-columns:250px 1fr}.admin-sidebar{background:#071936;color:#fff;padding:22px 15px}.admin-brand{padding:0 8px 20px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:18px}.admin-brand img{width:220px;height:auto}.admin-label{font-size:10px;letter-spacing:.13em;color:#8ea8c9;font-weight:900;padding:0 12px}.admin-menu{display:grid;gap:5px;margin-top:12px}.admin-menu a{display:flex;gap:12px;align-items:center;padding:12px;border-radius:10px;color:#dce8f8;font-weight:700}.admin-menu a:hover,.admin-menu a.active{background:rgba(20,125,235,.2);color:#fff}.admin-main{padding:35px;max-width:1500px;width:100%}.admin-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:25px}.admin-top h1{font-size:40px;margin:4px 0}.admin-top p{margin:0;color:var(--muted)}.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:20px}.stat-grid article{background:#fff;border:1px solid var(--border);border-radius:15px;padding:20px}.stat-grid span{display:block;color:var(--muted);font-size:13px}.stat-grid strong{display:block;font-size:32px;margin-top:5px;color:var(--navy)}.admin-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:18px;box-shadow:0 8px 25px rgba(7,25,54,.04)}.admin-card h2{margin:5px 0 12px}.section-head{display:flex;justify-content:space-between}.table-wrap{overflow:auto}.table-wrap table{width:100%;border-collapse:collapse;min-width:700px}.table-wrap th,.table-wrap td{text-align:left;padding:12px;border-bottom:1px solid #edf1f7;font-size:13px}.table-wrap th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.table-wrap td small{display:block;color:#8795a9}.status-pill{display:inline-block;padding:5px 8px;border-radius:20px;background:#eaf9f1;color:#078a4b;font-weight:800;font-size:11px}
@media(max-width:1100px){.role-grid,.dua-grid,.resource-grid,.norm-grid{grid-template-columns:repeat(2,1fr)}.timeline-large{grid-template-columns:repeat(2,1fr)}.stat-grid{grid-template-columns:repeat(3,1fr)}.admin-layout{grid-template-columns:210px 1fr}}
@media(max-width:800px){.brand-logo{width:215px}.brand-logo img{width:215px}.hero-source-image{position:relative;height:300px}.hero-visual{min-height:500px}.closing-inner{display:block}.closing-inner .btn{margin-top:15px}.role-grid,.dua-grid,.resource-grid,.norm-grid{grid-template-columns:1fr}.admin-layout{grid-template-columns:1fr}.admin-sidebar{position:relative}.admin-menu{grid-template-columns:repeat(2,1fr)}.admin-main{padding:22px 14px}.stat-grid{grid-template-columns:repeat(2,1fr)}.admin-top{display:block}.admin-top .btn{margin-top:15px}}
@media(max-width:520px){.brand-logo{width:195px}.brand-logo img{width:195px}.stat-grid{grid-template-columns:1fr}.admin-menu{grid-template-columns:1fr}.page-hero{padding:65px 0 55px}}


/* ============================================================
   CORRECCION DEFINITIVA DEL LOGO ORIGINAL
   El archivo fuente es cuadrado (2000x2000) y tiene transparencia.
   NO se modifica el PNG: el contenedor solo muestra su zona visible.
   ============================================================ */
.site-header .brand-logo{display:block;width:224px;height:82px;overflow:hidden;position:relative;flex:0 0 224px}
.site-header .brand-logo img{position:absolute;display:block;width:224px;height:224px;max-width:none;left:0;top:-66px;object-fit:contain}
.site-footer .footer-logo{display:block;width:320px;height:118px;overflow:hidden;position:relative}
.site-footer .footer-logo img{position:absolute;display:block;width:320px;height:320px;max-width:none;left:0;top:-94px;object-fit:contain}
.site-header .brand{display:flex;align-items:center;height:82px}
@media(max-width:1100px){.site-header .brand-logo{width:205px;height:76px;flex-basis:205px}.site-header .brand-logo img{width:205px;height:205px;top:-60px}.site-footer .footer-logo{width:280px;height:104px}.site-footer .footer-logo img{width:280px;height:280px;top:-82px}}
@media(max-width:800px){.site-header .brand-logo{width:190px;height:70px;flex-basis:190px}.site-header .brand-logo img{width:190px;height:190px;top:-56px}}

/* ============================================================
   V3 - NAVEGACION SPA + DASHBOARDS CON NAVBAR SUPERIOR
   AQUI SE AJUSTA LA PRESENTACION DE LOS NAVBARS Y DEL CRUD ADMIN.
   ============================================================ */
.spa-nav-link.active{color:#65dcff!important;position:relative}.spa-nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;border-radius:2px;background:#10B9E8}.app-page{background:#f7faff}.app-topbar{position:sticky;top:0;z-index:1000;background:rgba(3,10,28,.98);box-shadow:0 8px 30px rgba(0,0,0,.12);color:#fff}.app-nav-wrap{min-height:78px;display:flex;align-items:center;gap:22px}.app-brand{flex:0 0 auto}.app-brand-logo{display:block;width:210px;height:70px;overflow:hidden;position:relative}.app-brand-logo img{position:absolute;width:210px;height:210px;max-width:none;left:0;top:-62px;object-fit:contain}.app-main-nav{display:flex;align-items:center;justify-content:center;gap:24px;flex:1;font-weight:800}.app-main-nav a{color:#dfeaff;padding:8px 4px}.app-main-nav a:hover,.app-main-nav a.active{color:#65dcff}.app-user{display:flex;align-items:center;gap:14px}.app-user>span{display:grid;gap:0;text-align:right}.app-user small{font-size:11px;color:#9eb1ce}.app-logout{padding:9px 16px}.admin-page{padding:34px 0 60px}.admin-main{max-width:1500px}.admin-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}.admin-top h1{font-size:42px;line-height:1.05;margin:5px 0}.admin-top p{margin:0;color:var(--muted)}.alert{padding:14px 16px;border-radius:12px;margin-bottom:18px;font-weight:700}.alert.success{background:#eaf9f1;color:#087d47;border:1px solid #bce9d1}.alert.error{background:#fff0f0;color:#b42318;border:1px solid #ffd0cd}.admin-form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end;margin-bottom:22px}.admin-form-grid label,.inline-edit label{font-size:12px;font-weight:800;color:#52627d}.admin-form-grid input,.admin-form-grid select,.inline-edit input,.inline-edit select,.role-editor input{display:block;width:100%;margin-top:5px;border:1px solid #d6e2f0;border-radius:9px;padding:10px;background:#fff;font:inherit;color:var(--text)}.admin-form-wide{grid-template-columns:repeat(4,1fr)}.admin-note{font-size:13px;color:var(--muted)}.btn-small{padding:8px 13px;border-radius:9px;font-size:12px}.btn-danger{background:#fff0f0;color:#b42318;border:1px solid #ffc7c2}.inline-edit{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:8px;margin:10px 0}.role-editor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.role-editor{border:1px solid var(--border);border-radius:14px;padding:17px;background:#fbfdff}.role-editor h3{margin:0 0 12px}.role-editor h3 small{display:block;font-size:10px;color:#8291a7;margin-top:3px}.role-editor p{font-size:13px;color:var(--muted)}.permission-checks{display:grid;gap:6px;max-height:320px;overflow:auto;margin:12px 0}.permission-checks label{display:flex;gap:7px;align-items:flex-start;padding:8px;border-radius:8px;background:#fff;border:1px solid #edf2f8;font-size:12px;font-weight:700}.permission-checks input{width:auto;margin:2px 0 0}.permission-checks small{display:block;color:#8795a9;font-weight:500;margin-top:2px}.detail-section{scroll-margin-top:95px}.spa-section .page-hero{border-radius:24px;margin-bottom:25px}.spa-section{padding:70px 0}.alt-section{background:#f1f6fd}.section-lead{font-size:18px;color:var(--muted);max-width:760px}.app-shell{min-height:calc(100vh - 78px)}
@media(max-width:1050px){.app-main-nav{gap:12px}.app-brand-logo{width:185px}.app-brand-logo img{width:185px;height:185px;top:-55px}.app-user>span{display:none}.admin-form-grid,.admin-form-wide{grid-template-columns:repeat(2,1fr)}.role-editor-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.app-nav-wrap{flex-wrap:wrap;padding:8px 0}.app-main-nav{order:3;width:100%;overflow:auto;justify-content:flex-start}.admin-top{display:block}.admin-top .btn{margin-top:14px}.role-editor-grid{grid-template-columns:1fr}.admin-form-grid,.admin-form-wide{grid-template-columns:1fr}.site-header .nav-wrap{min-height:76px}.site-header .brand-logo{width:190px;height:70px}.site-header .brand-logo img{width:190px;height:190px;top:-56px}}

/* ============================================================
   V3.1 - PRESENTACION DEL LOGO ORIGINAL SIN REDIBUJARLO
   El PNG original mide 2000x2000, pero su contenido visible ocupa
   aproximadamente x=49..1944 / y=589..1321. El contenedor muestra
   esa zona mediante posicionamiento; el archivo fuente permanece intacto.
   ============================================================ */
.site-header .brand-logo{width:220px;height:82px;display:block;overflow:hidden;position:relative;flex:0 0 220px}.site-header .brand-logo img{position:absolute;width:232px;height:232px;max-width:none;left:-6px;top:-68px;object-fit:contain}.site-footer .footer-logo{width:300px;height:116px;display:block;overflow:hidden;position:relative}.site-footer .footer-logo img{position:absolute;width:317px;height:317px;max-width:none;left:-8px;top:-93px;object-fit:contain}.app-brand-logo{width:210px;height:82px;display:block;overflow:hidden;position:relative}.app-brand-logo img{position:absolute;width:222px;height:222px;max-width:none;left:-6px;top:-65px;object-fit:contain}
@media(max-width:1100px){.site-header .brand-logo{width:205px;height:76px;flex-basis:205px}.site-header .brand-logo img{width:216px;height:216px;left:-6px;top:-63px}.app-brand-logo{width:190px;height:74px}.app-brand-logo img{width:201px;height:201px;left:-5px;top:-59px}.site-footer .footer-logo{width:280px;height:108px}.site-footer .footer-logo img{width:296px;height:296px;left:-7px;top:-87px}}
@media(max-width:800px){.site-header .brand-logo{width:190px;height:70px;flex-basis:190px}.site-header .brand-logo img{width:200px;height:200px;left:-5px;top:-58px}.app-brand-logo{width:175px;height:68px}.app-brand-logo img{width:185px;height:185px;left:-5px;top:-54px}}
/* La administracion NO usa sidebar. Regla final de seguridad visual. */
.admin-layout{display:block;min-height:auto}.admin-sidebar{display:none}.admin-main{width:100%;max-width:1500px;margin:0 auto}

/* ============================================================
   V4 - AJUSTE VISUAL SOLICITADO
   AQUI SE CONTROLA EL SPACING GENERAL, LA RUTA VISUAL Y EL SHELL PRIVADO.
   ============================================================ */
html{scroll-behavior:smooth}
body{overflow-x:hidden}
.container{width:min(100% - 48px,1360px);margin-inline:auto}
.site-header{height:86px}
.site-header .nav-wrap{min-height:86px;padding:0 8px}
.site-header .brand-logo{width:265px;height:78px;flex-basis:265px}
.site-header .brand-logo img{width:280px;height:280px;left:-7px;top:-82px}
.main-nav{gap:34px}
.main-nav a{font-size:15px}
.hero{padding:54px 0 30px;min-height:520px}
.hero-grid{gap:40px;align-items:center}
.hero-copy{padding-left:12px}
.hero-copy h1{max-width:620px;font-size:clamp(48px,5.1vw,78px);line-height:.98;letter-spacing:-.045em;margin:16px 0 18px}
.hero-text{max-width:640px;font-size:18px;line-height:1.65}
.hero-visual{min-height:480px}
.hero-source-image{width:100%;height:100%;min-height:430px;object-fit:cover;border-radius:28px;box-shadow:0 24px 55px rgba(9,38,86,.12)}
.piar-card{right:24px;top:22px;width:315px}
.feature-strip{margin:0 auto;padding:16px 0 8px}
.feature-grid{border-radius:18px;padding:18px 26px}
.spa-section{padding:96px 0}
.detail-section .container{max-width:1360px}
.page-hero{padding:56px 62px}
.page-hero h2,.detail-section h2{font-size:clamp(36px,4vw,56px);line-height:1.06;letter-spacing:-.035em}
.cards-section{padding:22px 0 72px}
.cards-grid{gap:16px}

/* RUTA: se reemplaza el bloque de texto plano por una experiencia visual. */
.route-section{background:linear-gradient(180deg,#f2f7ff 0%,#edf4fd 100%)}
.section-heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:42px}
.section-heading-row h2{max-width:850px;margin:10px 0 12px}
.route-badge{white-space:nowrap;background:#fff;border:1px solid #dce8f7;border-radius:999px;padding:11px 17px;color:#12305e;font-size:13px;font-weight:800;box-shadow:0 8px 22px rgba(17,56,105,.06)}
.route-badge::first-letter{color:#16bd70}
.route-flow{display:grid;grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr 34px 1fr;align-items:stretch}
.route-step{position:relative;background:#fff;border:1px solid #dce6f3;border-radius:22px;padding:22px;box-shadow:0 14px 34px rgba(13,45,86,.07);min-height:355px;transition:transform .2s ease,box-shadow .2s ease}
.route-step:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(13,45,86,.12)}
.route-step-top{display:flex;justify-content:space-between;align-items:center}
.route-number{font-size:12px;font-weight:900;letter-spacing:.1em;color:#7a8ba5}
.route-status{font-size:11px;font-weight:900;padding:6px 9px;border-radius:999px;background:#f1f5fa;color:#53647d}
.route-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:17px;margin:20px 0 15px;font-size:25px;font-weight:900}
.route-badge-small{display:inline-block;padding:5px 9px;border-radius:999px;background:#f2f6fb;color:#5c6f89;font-size:9px;font-weight:900;letter-spacing:.08em}
.route-step h3{font-size:21px;margin:12px 0 9px;color:#10234a}
.route-step p{font-size:13px;line-height:1.55;color:#66758d;margin:0}
.route-result{position:absolute;left:22px;right:22px;bottom:20px;padding-top:13px;border-top:1px solid #edf1f6;display:grid;gap:3px}
.route-result strong{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#8290a4}.route-result span{font-size:11px;font-weight:700;color:#23395e}
.route-connector{display:grid;place-items:center;color:#9aacbf;font-size:25px;font-weight:900}
.route-blue .route-icon{background:#e8f4ff;color:#147deb}.route-green .route-icon{background:#e9faf2;color:#18b96a}.route-violet .route-icon{background:#f2ebff;color:#8051e8}.route-orange .route-icon{background:#fff0e8;color:#f0642d}.route-cyan .route-icon{background:#e7faff;color:#079fb5}
.route-blue{border-top:3px solid #147deb}.route-green{border-top:3px solid #18b96a}.route-violet{border-top:3px solid #8051e8}.route-orange{border-top:3px solid #f0642d}.route-cyan{border-top:3px solid #079fb5}
.route-legend{margin-top:28px;display:flex;justify-content:center;gap:24px;flex-wrap:wrap;color:#718198;font-size:11px;font-weight:700}
.route-legend span{display:flex;align-items:center;gap:7px}.route-legend i{width:8px;height:8px;border-radius:50%;background:#147deb}.route-legend span:nth-child(2) i{background:#18b96a}.route-legend span:nth-child(3) i{background:#8051e8}.route-legend span:nth-child(4) i{background:#f0642d}.route-legend span:nth-child(5) i{background:#079fb5}
.spa-home-float{position:fixed;right:26px;bottom:28px;z-index:1200;width:48px;height:48px;border-radius:50%;background:#0c2550;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(6,28,64,.25);font-size:20px;transition:all .2s ease}
.spa-home-float span{position:absolute;right:58px;white-space:nowrap;background:#fff;color:#16305c;border:1px solid #dce6f3;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:800;opacity:0;pointer-events:none;transform:translateX(6px);transition:.2s}
.spa-home-float:hover{transform:translateY(-3px);background:#147deb}.spa-home-float:hover span{opacity:1;transform:none}

/* ============================================================
   SHELL PRIVADO: SOLO MENU LATERAL
   ============================================================ */
.app-page{background:#f5f8fc;min-height:100vh}
.app-sidebar{position:fixed;z-index:1100;inset:0 auto 0 0;width:274px;background:linear-gradient(180deg,#071a3c 0%,#06142d 100%);color:#dce9fb;display:flex;flex-direction:column;box-shadow:12px 0 40px rgba(2,18,43,.12)}
.sidebar-brand{height:96px;display:flex;align-items:center;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-brand>a{display:block;width:100%;height:82px}
.sidebar-logo{display:block;width:232px;height:80px;overflow:hidden;position:relative}.sidebar-logo img{position:absolute;width:245px;height:245px;max-width:none;left:-6px;top:-72px}
.sidebar-user{margin:18px 15px 12px;padding:13px 12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);border-radius:15px;display:flex;align-items:center;gap:10px}.sidebar-avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#1687ef,#5146e5);color:#fff;font-size:12px;font-weight:900}.sidebar-user div:last-child{min-width:0}.sidebar-user strong{display:block;color:#fff;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user span{display:block;color:#8fa8ca;font-size:10px;margin-top:3px}
.sidebar-nav{padding:8px 13px;overflow:auto}.sidebar-label{padding:10px 12px 7px;color:#718db5;font-size:9px;font-weight:900;letter-spacing:.13em}.sidebar-label-sub{margin-top:14px}.sidebar-link{position:relative;display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;color:#aec2de;font-size:12px;font-weight:800;margin:3px 0;transition:.18s}.sidebar-link:hover{color:#fff;background:rgba(255,255,255,.06)}.sidebar-link.active{color:#fff;background:linear-gradient(90deg,rgba(20,125,235,.25),rgba(20,125,235,.08));box-shadow:inset 3px 0 #1aa9f0}.sidebar-link.active-sub{color:#d8e7fb;background:rgba(255,255,255,.035)}.sidebar-icon{width:24px;height:24px;display:grid;place-items:center;border-radius:7px;background:rgba(255,255,255,.06);font-size:13px}.sidebar-link.active .sidebar-icon{background:#147deb;color:#fff}.active-mark{margin-left:auto;width:6px;height:6px;border-radius:50%;background:#28c777}.sidebar-bottom{margin-top:auto;padding:15px;border-top:1px solid rgba(255,255,255,.08);display:grid;gap:5px}.sidebar-secondary,.sidebar-logout{padding:10px 12px;border-radius:10px;color:#91a8c7;font-size:11px;font-weight:800}.sidebar-secondary:hover,.sidebar-logout:hover{background:rgba(255,255,255,.05);color:#fff}
.app-workspace{margin-left:274px;min-height:100vh}.app-shell{min-height:100vh}.sidebar-mobile-toggle,.sidebar-overlay{display:none}
.dashboard-page,.admin-page{padding:34px 38px 70px}.dashboard-page{max-width:1600px;margin:0 auto}.dashboard-topbar,.admin-top{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:25px}.dashboard-topbar h1,.admin-top h1{font-size:38px;line-height:1.05;margin:5px 0 7px;color:#10234a;letter-spacing:-.03em}.dashboard-topbar p,.admin-top p{margin:0;color:#718096}.dashboard-actions{display:flex;align-items:center;gap:10px}.role-badge{padding:8px 12px;border-radius:999px;background:#e8f2ff;color:#126ed0;font-size:10px;font-weight:900}.dashboard-welcome{background:linear-gradient(115deg,#0b2b5f,#126fc9);color:#fff;border-radius:18px;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:20px;box-shadow:0 15px 35px rgba(10,62,122,.16);margin-bottom:20px}.dashboard-welcome>div{display:flex;align-items:center;gap:14px}.welcome-icon{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.12);display:grid;place-items:center;font-weight:900}.dashboard-welcome p{margin:3px 0 0;color:#cfe2fb;font-size:12px}.secure-chip{font-size:10px;font-weight:800;color:#bcefd7}.dashboard-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.dashboard-metrics article{background:#fff;border:1px solid #e0e8f2;border-radius:16px;padding:17px;display:flex;gap:13px;box-shadow:0 8px 24px rgba(11,39,75,.04)}.metric-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:900;font-size:18px}.metric-icon.blue{background:#e8f3ff;color:#147deb}.metric-icon.green{background:#eafaf2;color:#17ad66}.metric-icon.violet{background:#f2edff;color:#8051e8}.metric-icon.orange{background:#fff0e8;color:#f0642d}.dashboard-metrics small{display:block;color:#718096;font-size:10px;font-weight:800}.dashboard-metrics strong{display:block;font-size:27px;color:#10234a;margin:2px 0}.metric-note{font-size:9px;color:#94a2b5}.dashboard-content-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:18px}.dashboard-panel,.admin-card{background:#fff;border:1px solid #e0e8f2;border-radius:18px;box-shadow:0 10px 30px rgba(12,41,78,.05)}.dashboard-panel{padding:23px}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:17px}.panel-head h2{margin:4px 0 0;color:#10234a;font-size:21px}.panel-status{background:#f0f5fb;color:#61738c;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:900}.mini-route{display:grid;gap:8px}.mini-route-step{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid #edf1f6;border-radius:12px}.mini-route-step b{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:#f0f5fb;color:#4f6685;font-size:11px}.mini-route-step.done b{background:#e8f8ef;color:#16a45f}.mini-route-step strong{display:block;color:#253b5f;font-size:12px}.mini-route-step span{display:block;color:#7d8ca0;font-size:10px;margin-top:2px}.empty-state{text-align:center;padding:58px 20px;color:#7a899d}.empty-state>span{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:#f1f5fa;margin:0 auto 13px;font-size:22px}.empty-state h3{color:#263c60;margin:0 0 6px}.empty-state p{font-size:11px;line-height:1.6;max-width:300px;margin:auto}

/* ADMIN GLOBAL */
.admin-page{max-width:1700px;margin:auto}.admin-layout{display:block!important}.admin-main{max-width:none!important;width:100%}.admin-top{align-items:center}.admin-top .section-kicker{display:block}.admin-top h1{margin-top:7px}.admin-card{padding:24px;margin-bottom:18px}.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin-bottom:20px}.stat-grid article{background:#fff;border:1px solid #e0e8f2;border-radius:15px;padding:17px;box-shadow:0 8px 22px rgba(12,41,78,.04)}.stat-grid span{display:block;color:#75859b;font-size:10px;font-weight:800}.stat-grid strong{display:block;color:#10234a;font-size:29px;margin-top:3px}.admin-card h2{color:#10234a;font-size:22px}.section-head{display:flex;justify-content:space-between;align-items:flex-start}.admin-note{color:#7a899d;font-size:11px}.table-wrap{border:1px solid #e7edf4;border-radius:12px;overflow:auto}.table-wrap th{background:#f8fafc}.table-wrap th,.table-wrap td{padding:11px 12px}.role-editor-grid{grid-template-columns:repeat(3,1fr)}

@media(max-width:1250px){.route-flow{grid-template-columns:1fr 24px 1fr 24px 1fr}.route-flow .route-step:nth-of-type(4){grid-column:1}.route-flow .route-step:nth-of-type(5){grid-column:3}.route-flow .route-step:nth-of-type(6){grid-column:5}.route-flow .route-connector:nth-of-type(2){display:none}.route-flow .route-connector:nth-of-type(4){display:none}.route-flow .route-connector:nth-of-type(6){display:none}.route-flow .route-connector:nth-of-type(8){display:none}.route-step{min-height:330px}.dashboard-content-grid{grid-template-columns:1fr}.stat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.site-header .brand-logo{width:210px;height:76px;flex-basis:210px}.site-header .brand-logo img{width:222px;height:222px;top:-65px}.main-nav{gap:16px}.container{width:min(100% - 30px,1360px)}.hero{padding-top:32px}.hero-grid{grid-template-columns:1fr}.hero-visual{min-height:430px}.section-heading-row{display:block}.route-badge{display:inline-block;margin-top:8px}.app-sidebar{transform:translateX(-100%);transition:transform .22s ease}.app-sidebar.open{transform:none}.app-workspace{margin-left:0}.sidebar-mobile-toggle{display:block;position:fixed;left:15px;top:15px;z-index:1300;border:0;border-radius:10px;background:#0b2a5c;color:#fff;width:42px;height:42px;box-shadow:0 10px 25px rgba(3,24,54,.25)}.sidebar-overlay{position:fixed;inset:0;background:rgba(2,13,31,.42);z-index:1050}.sidebar-overlay.open{display:block}.dashboard-page,.admin-page{padding:30px 18px 55px}.dashboard-metrics{grid-template-columns:repeat(2,1fr)}.role-editor-grid{grid-template-columns:1fr}.stat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.site-header{height:74px}.site-header .nav-wrap{min-height:74px}.site-header .brand-logo{width:185px;height:68px;flex-basis:185px}.site-header .brand-logo img{width:196px;height:196px;top:-57px}.nav-toggle{display:block}.main-nav{position:absolute;left:12px;right:12px;top:78px;display:none;flex-direction:column;align-items:stretch;background:#071936;border-radius:0 0 16px 16px;padding:15px;gap:4px}.main-nav.open{display:flex}.main-nav a{padding:11px 12px}.hero-copy{padding-left:0}.hero-copy h1{font-size:45px}.hero-visual{min-height:370px}.hero-source-image{min-height:370px}.piar-card{width:275px;right:12px;top:12px}.feature-grid{grid-template-columns:1fr 1fr;padding:14px}.spa-section{padding:70px 0}.page-hero{padding:38px 25px}.route-flow{display:grid;grid-template-columns:1fr}.route-flow .route-step,.route-flow .route-step:nth-of-type(4),.route-flow .route-step:nth-of-type(5),.route-flow .route-step:nth-of-type(6){grid-column:auto}.route-connector{display:none}.route-step{min-height:310px}.dashboard-topbar,.admin-top{display:block}.dashboard-actions{margin-top:14px}.dashboard-metrics{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr}.dashboard-welcome{align-items:flex-start;flex-direction:column}.spa-home-float{right:15px;bottom:15px}}


/* ============================================================
   V5 - APP PRIVADA NO-SPA + SIDEBAR SIN BARRA VISIBLE
   IMPORTANTE: NO MODIFICAR LAS REGLAS DE LA LANDING.
   ============================================================ */

/* Sidebar: la barra de desplazamiento no se muestra visualmente. */
.app-sidebar{width:280px}
.sidebar-nav{
    flex:1;
    min-height:0;
    overflow-y:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
}
.sidebar-nav::-webkit-scrollbar{width:0;height:0}
.sidebar-brand{height:108px;padding:8px 18px}
.sidebar-brand>a{height:92px;display:flex;align-items:center;justify-content:center}
.sidebar-logo-img{
    width:220px;
    height:220px;
    max-width:none;
    object-fit:contain;
    transform:translateY(-69px);
    margin-bottom:-138px;
}
.sidebar-user{margin:16px 15px 10px}
.app-workspace{margin-left:280px;background:#f5f8fc;min-height:100vh}

/* Estado del menú: SOLO UNO puede estar activo. */
.sidebar-link.active{
    background:linear-gradient(90deg,rgba(20,125,235,.30),rgba(20,125,235,.10));
    box-shadow:inset 3px 0 #18b9ee;
}
.sidebar-link:not(.active) .active-mark{display:none}

/* El dashboard y los módulos se cargan como páginas independientes. */
.dashboard-page,.admin-page,.module-page{
    width:min(100%,1500px);
    margin:0 auto;
    padding:38px 40px 70px;
}

/* Dashboard por permisos. */
.dashboard-module-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}
.dashboard-module-card{
    background:#fff;
    border:1px solid #dfe8f3;
    border-radius:18px;
    padding:20px;
    min-height:205px;
    display:flex;
    flex-direction:column;
    box-shadow:0 10px 30px rgba(12,41,78,.05);
    transition:transform .18s,box-shadow .18s,border-color .18s;
}
.dashboard-module-card:hover{
    transform:translateY(-3px);
    border-color:#b9d8f6;
    box-shadow:0 18px 38px rgba(12,41,78,.09);
}
.dashboard-module-card header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}
.module-icon{
    width:44px;height:44px;border-radius:13px;
    display:grid;place-items:center;
    background:#e9f4ff;color:#147deb;font-size:20px;font-weight:900;
}
.module-tag{
    font-size:9px;font-weight:900;letter-spacing:.08em;
    color:#55708f;background:#f2f6fa;border-radius:999px;padding:7px 9px;
}
.dashboard-module-card>strong{font-size:18px;color:#10234a}
.dashboard-module-card>p{font-size:13px;color:#718096;margin:7px 0 18px}
.module-action{margin-top:auto;color:#147deb;font-size:12px;font-weight:900}

/* Módulos: encabezado profesional y contenido reutilizable. */
.module-page{max-width:1500px}
.module-header{
    display:flex;justify-content:space-between;align-items:flex-start;gap:25px;
    margin-bottom:22px;
}
.module-header h1{
    display:flex;align-items:center;gap:13px;
    font-size:40px;line-height:1.05;color:#10234a;margin:7px 0;
}
.module-header p{max-width:780px;color:#718096;margin:0;font-size:15px}
.module-header-icon{
    width:52px;height:52px;border-radius:15px;
    display:grid;place-items:center;background:#e9f4ff;color:#147deb;font-size:23px;
}
.module-summary{
    display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:18px;
}
.module-summary>div{
    background:#fff;border:1px solid #e0e8f2;border-radius:15px;padding:16px;
}
.module-summary span{display:block;color:#8392a7;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.module-summary strong{display:block;color:#10234a;margin-top:5px;font-size:14px}
.module-status{color:#0ca65d!important}
.module-content-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:18px}
.module-panel{
    background:#fff;border:1px solid #e0e8f2;border-radius:18px;padding:25px;
    box-shadow:0 10px 30px rgba(12,41,78,.04);
}
.module-panel h2{color:#10234a;margin:6px 0 18px;font-size:23px}
.module-action-list{display:grid;gap:9px}
.module-action-list>div{
    display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;
    padding:13px;border:1px solid #e9eef5;border-radius:12px;
}
.module-action-list b{
    width:32px;height:32px;border-radius:9px;background:#eef5fc;color:#147deb;
    display:grid;place-items:center;font-size:10px;
}
.module-action-list span{font-size:13px;font-weight:800;color:#304866}
.module-action-list em{font-size:9px;color:#8b99aa;font-style:normal}
.module-help p{color:#718096;font-size:13px;line-height:1.7}
.module-tip{margin-top:20px;padding:13px;border-radius:12px;background:#edf8f2;color:#11824d;font-size:11px;font-weight:800}

/* ADMIN: páginas independientes dentro del mismo workspace. */
.admin-page{max-width:1700px}
.admin-top{align-items:flex-start}
.btn-secondary{
    background:#fff;color:#214064;border:1px solid #d7e3ef;
    box-shadow:0 5px 15px rgba(12,41,78,.04);
}
.admin-hero{
    display:flex;justify-content:space-between;align-items:center;gap:25px;
    padding:25px 28px;margin-bottom:18px;border-radius:18px;
    background:linear-gradient(120deg,#0a2856,#116fc9);color:#fff;
    box-shadow:0 16px 34px rgba(10,62,122,.13);
}
.admin-hero-badge{font-size:9px;font-weight:900;letter-spacing:.13em;color:#75dcff}
.admin-hero h2{font-size:28px;margin:6px 0}
.admin-hero p{max-width:760px;color:#d4e5f8;font-size:13px;margin:0}
.admin-hero-mark{
    width:70px;height:70px;border-radius:20px;background:rgba(255,255,255,.12);
    display:grid;place-items:center;font-size:22px;font-weight:900;
}
.admin-module-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.admin-module-grid a{
    display:flex;flex-direction:column;gap:5px;padding:18px;
    background:#fbfdff;border:1px solid #e1e9f2;border-radius:15px;
    transition:.18s;
}
.admin-module-grid a:hover{transform:translateY(-2px);border-color:#bcdaf6}
.admin-module-grid b{font-size:10px;color:#147deb}
.admin-module-grid strong{color:#10234a;font-size:15px}
.admin-module-grid span{color:#7a899d;font-size:11px;line-height:1.5}

/* Formularios CRUD: separación clara y botón Guardar visible. */
.admin-form-6{grid-template-columns:repeat(4,minmax(0,1fr))}
.admin-form-6 label{display:block}
.form-action{display:flex;align-items:flex-end}
.form-action .btn{width:100%}
.form-help{font-size:11px;color:#8391a5;margin:0}
.count-chip{
    display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;
    background:#edf5ff;color:#147deb;font-size:10px;font-weight:900;
}
.edit-details summary{
    cursor:pointer;display:inline-flex;align-items:center;gap:5px;
    color:#147deb;font-weight:900;font-size:11px;padding:7px 9px;
    border:1px solid #cfe2f7;border-radius:8px;list-style:none;
}
.edit-details summary::-webkit-details-marker{display:none}
.edit-details[open] summary{background:#edf6ff}
.inline-edit{
    display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));
    gap:10px;margin:12px 0;padding:14px;background:#f8fbfe;
    border:1px solid #e4ecf5;border-radius:12px;
}
.inline-edit .form-action{grid-column:1/-1}
.status-off{background:#fff2f2!important;color:#b42318!important}
.audit-action{
    display:inline-flex;padding:5px 8px;border-radius:999px;
    background:#eef5fc;color:#3e6087;font-size:9px;font-weight:900;
}

/* RBAC: tarjetas separadas, cada una con su propio Guardar. */
.role-admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.role-admin-card{
    background:#fff;border:1px solid #dfe8f2;border-radius:18px;padding:20px;
    box-shadow:0 10px 30px rgba(12,41,78,.04);
}
.role-admin-card>header{display:grid;grid-template-columns:44px 1fr auto;gap:11px;align-items:center;margin-bottom:16px}
.role-admin-icon{
    width:44px;height:44px;border-radius:13px;background:#e9f4ff;color:#147deb;
    display:grid;place-items:center;font-weight:900;
}
.role-admin-card h2{font-size:17px;margin:0;color:#10234a}
.role-admin-card header span{display:block;color:#8493a7;font-size:9px;font-weight:900;margin-top:3px}
.role-admin-card header>b{font-size:9px;color:#718096;background:#f2f6fa;padding:7px;border-radius:999px}
.role-admin-card.protected{border-color:#d8e7fb;background:linear-gradient(180deg,#fff,#f5f9ff)}
.protected-box{padding:15px;border-radius:12px;background:#edf5ff;color:#214064}
.protected-box strong{font-size:12px}.protected-box p{font-size:11px;line-height:1.6;color:#627793}
.role-name-label{font-size:11px;font-weight:900;color:#5b6f89}
.role-name-label input{display:block;width:100%;margin-top:5px;border:1px solid #d6e2f0;border-radius:9px;padding:10px;font:inherit}
.permission-checks{max-height:440px;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}
.permission-checks::-webkit-scrollbar{width:0}
.permission-group-title{
    padding:10px 2px 5px;color:#147deb;font-size:9px;font-weight:900;letter-spacing:.1em;
}
.permission-checks label{min-height:44px}

/* ============================================================
   RESPONSIVE APP
   ============================================================ */
@media(max-width:1200px){
    .dashboard-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .admin-module-grid{grid-template-columns:repeat(2,1fr)}
    .role-admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .admin-form-6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
    .app-sidebar{width:280px}
    .app-workspace{margin-left:0}
    .dashboard-page,.admin-page,.module-page{padding:30px 18px 55px}
    .dashboard-module-grid,.role-admin-grid{grid-template-columns:1fr}
    .module-summary,.module-content-grid{grid-template-columns:1fr}
    .module-header{display:block}
    .module-header .btn{margin-top:15px}
    .admin-form-6{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
    .dashboard-module-grid,.admin-module-grid{grid-template-columns:1fr}
    .admin-form-6{grid-template-columns:1fr}
    .inline-edit{grid-template-columns:1fr}
    .admin-hero{display:block}
    .admin-hero-mark{display:none}
    .module-header h1{font-size:31px}
}

/* ============================================================
   PATCH 2026-08-30 — RESPONSIVE LANDING + LOGO ORIGINAL
   ------------------------------------------------------------
   OBJETIVO:
   1) Mantener la landing SPA exactamente como está en contenido.
   2) Usar el logo PNG original entregado por Luis, sin redibujarlo.
   3) En móvil vertical/horizontal conservar UNA MISMA COMPOSICIÓN:
      texto -> hero visual -> tarjeta PIAR superpuesta a la imagen.
   4) Aplicar un velo blanco sutil sobre la fotografía hero.

   NOTA PARA DEPURACIÓN MANUAL:
   Este bloque se deja al final del CSS para que sus reglas tengan
   prioridad y puedan identificarse/retirarse fácilmente sin tocar
   las reglas anteriores.
   ============================================================ */

/* Logo original: su proporción real es horizontal 1225x473. */
.brand-logo,
.footer-logo{
    overflow:visible;
}
.brand-logo img,
.footer-logo img{
    position:static;
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:contain;
    transform:none;
    margin:0;
}
.brand-logo{width:250px;height:auto;display:flex;align-items:center}
.footer-logo{width:340px;height:auto;display:block}

/* Hero visual: imagen + velo + tarjeta pertenecen a la misma composición. */
.hero-visual{
    position:relative;
    isolation:isolate;
    overflow:visible;
}
.hero-source-image{
    z-index:0;
}
.hero-visual::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    border-radius:28px;
    background:rgba(255,255,255,.20);
    pointer-events:none;
}
.piar-card{
    z-index:3;
}

/* ============================================================
   MÓVIL: MISMA COMPOSICIÓN EN VERTICAL Y HORIZONTAL
   ============================================================ */
@media (max-width:900px){
    .container{width:min(calc(100% - 32px),var(--container))}

    .site-header{position:sticky;top:0}
    .nav-wrap{min-height:78px;padding:6px 0}
    .brand-logo{width:min(250px,68vw)}
    .nav-toggle{flex:0 0 auto}
    .main-nav{top:78px}

    /* Una sola columna para evitar que el hero cambie de composición
       cuando el teléfono pasa de vertical a horizontal. */
    .hero{padding:18px 0 24px}
    .hero-grid{
        grid-template-columns:1fr;
        gap:18px;
        min-height:auto;
    }
    .hero-copy{
        padding:20px 0 0;
        order:1;
    }
    .hero-visual{
        order:2;
        width:100%;
        min-height:0;
        aspect-ratio:16 / 10;
        border-radius:28px;
        overflow:hidden;
    }
    .hero-source-image{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        min-height:0;
        object-fit:cover;
        border-radius:28px;
    }
    .hero-visual::after{border-radius:28px;background:rgba(255,255,255,.24)}

    /* La tarjeta NO baja debajo de la imagen: queda físicamente sobre ella. */
    .piar-card{
        position:absolute;
        right:14px;
        bottom:14px;
        top:auto;
        width:min(330px,calc(100% - 28px));
        max-height:calc(100% - 28px);
        overflow:auto;
        padding:15px;
        border-radius:16px;
        box-shadow:0 18px 42px rgba(7,25,54,.18);
        background:rgba(255,255,255,.94);
        backdrop-filter:blur(12px);
    }

    .feature-grid{grid-template-columns:1fr 1fr}
    .footer-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:560px){
    .container{width:min(calc(100% - 24px),var(--container))}
    .nav-wrap{min-height:72px}
    .brand-logo{width:min(210px,62vw)}
    .main-nav{top:72px}

    .hero-copy{padding-top:18px}
    .hero h1{font-size:clamp(36px,10vw,44px)}
    .hero-text{font-size:16px;line-height:1.55}
    .hero-actions{gap:14px}

    /* En teléfonos pequeños ampliamos la escena para que la tarjeta
       siga integrada con la fotografía y no se convierta en un bloque
       independiente debajo de ella. */
    .hero-visual{
        aspect-ratio:4 / 5;
        min-height:430px;
    }
    .piar-card{
        right:12px;
        bottom:12px;
        width:calc(100% - 24px);
        max-height:calc(100% - 24px);
        padding:14px;
    }
    .piar-card-head strong{font-size:15px}
    .student-row{margin:12px 0}
    .progress-list li{font-size:11px;padding:8px 0}
    .progress-list b{font-size:10px}

    .feature-grid,.footer-grid{grid-template-columns:1fr}
}

/* ============================================================
   CORRECCIÓN DEFINITIVA — LOGO ORIGINAL PG-PIAR PRO 2.0
   ------------------------------------------------------------
   IMPORTANTE:
   - NO se redibuja ni se modifica el archivo PNG.
   - El logo original tiene proporción horizontal 1225x473.
   - El problema anterior era que varias reglas intentaban tratarlo
     como una imagen cuadrada y lo recortaban mediante top/height.
   - Estas reglas finales tienen prioridad sobre las anteriores.

   PARA MODIFICAR MANUALMENTE:
   • Tamaño del logo del encabezado: cambiar --logo-header-width.
   • Tamaño del logo del pie: cambiar --logo-footer-width.
   • En móvil se controla en los media queries inferiores.
   ============================================================ */

:root{
    --logo-header-width:250px;
    --logo-footer-width:340px;
}

/* ---------- LOGO PRINCIPAL DE LA LANDING ---------- */
.site-header .brand-logo{
    width:var(--logo-header-width) !important;
    height:auto !important;
    min-height:0 !important;
    flex:0 0 var(--logo-header-width) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    overflow:visible !important;
    position:relative !important;
}

.site-header .brand-logo img{
    position:static !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
    left:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    margin:0 !important;
    transform:none !important;
    object-fit:contain !important;
    object-position:center !important;
}

.site-header .brand{
    height:auto !important;
    min-height:84px;
    display:flex !important;
    align-items:center !important;
    overflow:visible !important;
}

/* ---------- LOGO DEL FOOTER ---------- */
.site-footer .footer-logo{
    width:var(--logo-footer-width) !important;
    height:auto !important;
    min-height:0 !important;
    display:block !important;
    overflow:visible !important;
    position:relative !important;
}

.site-footer .footer-logo img{
    position:static !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
    left:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    margin:0 !important;
    transform:none !important;
    object-fit:contain !important;
    object-position:center !important;
}

/* ---------- LOGO DEL ÁREA PRIVADA / APP ---------- */
.app-brand-logo{
    width:230px !important;
    height:auto !important;
    min-height:0 !important;
    display:block !important;
    overflow:visible !important;
    position:relative !important;
    flex:0 0 230px !important;
}

.app-brand-logo img{
    position:static !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
    left:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    margin:0 !important;
    transform:none !important;
    object-fit:contain !important;
    object-position:center !important;
}

/* ============================================================
   RESPONSIVE — LOGO
   ------------------------------------------------------------
   Se mantiene la misma proporción en escritorio, tablet y móvil.
   No se usa height fija ni desplazamiento negativo.
   ============================================================ */

@media (max-width:1100px){
    .site-header .brand-logo{
        width:225px !important;
        flex-basis:225px !important;
    }

    .app-brand-logo{
        width:210px !important;
        flex-basis:210px !important;
    }
}

@media (max-width:800px){
    .site-header .brand-logo{
        width:205px !important;
        flex-basis:205px !important;
    }

    .site-header .brand{
        min-height:76px;
    }

    .app-brand-logo{
        width:195px !important;
        flex-basis:195px !important;
    }
}

@media (max-width:620px){
    .site-header .brand-logo{
        width:min(205px,62vw) !important;
        flex-basis:min(205px,62vw) !important;
    }

    .site-header .brand{
        min-height:74px;
    }

    .site-header .brand-logo img{
        width:100% !important;
        height:auto !important;
    }

    .site-footer .footer-logo{
        width:min(var(--logo-footer-width),100%) !important;
    }

    .app-brand-logo{
        width:min(195px,60vw) !important;
        flex-basis:min(195px,60vw) !important;
    }
}

/* ============================================================
   FIN DE LA CORRECCIÓN DEL LOGO
   ============================================================ */

/* ============================================================
   PATCH 2026-08-31 — CORRECCIÓN VISUAL RUTA / BADGES
   ------------------------------------------------------------
   PROBLEMA CORREGIDO:
   Los bloques .route-result estaban posicionados con
   position:absolute, por lo que podían quedar encima del texto
   descriptivo cuando el contenido de una etapa ocupaba más altura.

   SOLUCIÓN:
   - Las tarjetas de la ruta pasan a ser contenedores flex verticales.
   - El bloque RESULTADO vuelve al flujo normal del documento.
   - margin-top:auto lo mantiene alineado al fondo sin superponerse.
   - Los badges quedan dentro del flujo y no interfieren con el texto.

   IMPORTANTE:
   Este parche NO modifica el HTML, el contenido, el logo, el hero,
   la navegación SPA ni el resto de componentes de la plataforma.
   Se deja al final para facilitar depuración manual.
   ============================================================ */

.route-step{
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.route-badge-small{
    align-self:flex-start;
    white-space:nowrap;
    flex:0 0 auto;
}

.route-step h3{
    flex:0 0 auto;
}

.route-step p{
    flex:0 0 auto;
    padding-bottom:8px;
}

.route-result{
    position:static;
    left:auto;
    right:auto;
    bottom:auto;
    width:100%;
    margin-top:auto;
    padding-top:13px;
    padding-bottom:0;
    border-top:1px solid #edf1f6;
    display:grid;
    gap:3px;
    flex:0 0 auto;
}

/* En pantallas pequeñas el resultado continúa dentro de la tarjeta,
   pero nunca se superpone al contenido descriptivo. */
@media (max-width:620px){
    .route-step{
        min-height:310px;
        padding:20px;
    }

    .route-result{
        margin-top:auto;
        padding-top:12px;
    }
}

/* ============================================================
   FIN PATCH 2026-08-31 — RUTA / BADGES
   ============================================================ */


/* ============================================================
   PATCH FINAL 2026-08-31 — RUTA / TEXTO SIN SUPERPOSICIÓN
   ------------------------------------------------------------
   Este bloque se agrega al FINAL para que tenga prioridad sobre
   cualquier regla anterior del archivo.

   PROBLEMA:
   .route-result podía quedar posicionado de forma absoluta y
   superponerse con el texto descriptivo de la etapa.

   SOLUCIÓN:
   - La tarjeta es un contenedor flex vertical.
   - El resultado permanece en el flujo normal.
   - El resultado se empuja al fondo mediante margin-top:auto.
   - El badge permanece dentro del flujo y no afecta el texto.
   ============================================================ */

.route-step{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:355px;
    overflow:hidden;
}

.route-step-top,
.route-badge-small,
.route-icon,
.route-number,
.route-step h3,
.route-step p{
    position:relative;
    flex:0 0 auto;
}

.route-badge-small{
    align-self:flex-start;
    display:inline-flex;
    width:max-content;
    max-width:100%;
    white-space:nowrap;
}

.route-step p{
    margin:0;
    padding-bottom:10px;
}

.route-result{
    position:static !important;
    inset:auto !important;
    width:100%;
    margin-top:auto;
    padding:13px 0 0;
    border-top:1px solid #edf1f6;
    display:grid;
    gap:3px;
    flex:0 0 auto;
}

.route-result strong,
.route-result span{
    position:static;
    display:block;
}

@media (max-width:620px){
    .route-step{
        min-height:310px;
        padding:20px;
    }

    .route-result{
        margin-top:auto;
        padding-top:12px;
    }
}

/* ============================================================
   FIN PATCH FINAL 2026-08-31
   ============================================================ */