/* ======================================================================
   SOLVANTIX GLOBAL — GLASS PREMIUM SOLVANTIX
   Diseño global moderno, transparente y profesional.
   Sin degradados. Acento principal #00D1FE.
   ====================================================================== */
:root{
  --brand:#00D1FE;
  --brand-dark:#009FBE;
  --brand-deep:#007E98;
  --brand-soft:rgba(0,209,254,.10);
  --brand-soft-2:rgba(0,209,254,.16);
  --brand-line:rgba(0,209,254,.30);

  --success:#16A34A;
  --success-hover:#15803D;
  --danger:#DC2626;
  --danger-hover:#B91C1C;
  --warning:#F59E0B;

  --ink:#0F172A;
  --text:#334155;
  --muted:#64748B;
  --subtle:#94A3B8;

  --page:#EEF9FC;
  --page-alt:#F7FCFE;
  --glass:rgba(255,255,255,.42);
  --glass-medium:rgba(255,255,255,.56);
  --glass-strong:rgba(255,255,255,.72);
  --glass-solid:#FFFFFF;
  --glass-tint:rgba(231,249,253,.58);

  --line:rgba(148,163,184,.22);
  --line-soft:rgba(255,255,255,.66);
  --shadow-xs:0 4px 14px rgba(15,23,42,.05);
  --shadow-sm:0 10px 28px rgba(15,23,42,.075);
  --shadow:0 18px 48px rgba(15,23,42,.10);
  --shadow-lg:0 26px 70px rgba(15,23,42,.14);
  --focus:0 0 0 4px rgba(0,209,254,.13);

  --radius-xs:9px;
  --radius-sm:12px;
  --radius:18px;
  --radius-lg:24px;
}

/* ----------------------------------------------------------------------
   REGLA GLOBAL: no se permiten degradados visuales.
   ---------------------------------------------------------------------- */
html body *,html body *::before,html body *::after{
  background-image:none!important;
  text-shadow:none!important;
}
[style*="linear-gradient"],[style*="radial-gradient"],[style*="conic-gradient"]{
  background-image:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;
}

html{background:var(--page)!important;color-scheme:light}
body{
  margin:0;
  background:var(--page)!important;
  color:var(--ink)!important;
  font-family:'Poppins',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before,body::after{
  content:"";
  position:fixed;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
  filter:blur(64px);
}
body::before{width:390px;height:390px;left:-150px;top:9vh;background:rgba(0,209,254,.12)!important}
body::after{width:330px;height:330px;right:-120px;bottom:5vh;background:rgba(14,165,233,.08)!important}

/* Tipografía */
h1,h2,h3,h4,h5,h6,.title,.page-title,.hero-title,.section-title{
  color:var(--ink)!important;
  background:none!important;
  -webkit-text-fill-color:currentColor!important;
  font-weight:800!important;
  letter-spacing:-.025em;
}
p,.muted,.text-muted,.description,.subtitle{color:var(--muted)!important}
a{color:var(--brand-deep);transition:color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
a:hover{color:var(--brand-dark)}

/* ----------------------------------------------------------------------
   SUPERFICIES GLASS
   ---------------------------------------------------------------------- */
.card,.product-card,.course-card,.stat,.stat-card,.admin-stat-card,.tool-card,.contact-card,.payment-card,
.hosting-card,.benefit-card,.info-box,.reference-card,.ref-card,.ref-stat,.earn-box,.wallet-card,.level-card,
.nivel-card,.course-admin-card,.user-admin-card,.recharge-card,.topic-admin-card,.lesson-admin-card,.editor-card,
.branding-card,.install-card,.page-header,.hero-section:not(.hero-promo),.benefits-section,.course-hero,.pro-page-head,
.topic-preview-hero,.lesson-content,.curriculum-module,.quick-action,.form-card,.settings-card,.popup-card,.banner-card,
.image-card,.content-card,.panel-card,.dashboard-card,.auth-card,.section-card,.profile-card,.summary-card,.modal-content,
.table-wrap,.table-card,.content-box,.course-box,.widget,.box{
  background:var(--glass)!important;
  border:1px solid var(--line-soft)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow-sm)!important;
  backdrop-filter:blur(26px) saturate(128%)!important;
  -webkit-backdrop-filter:blur(26px) saturate(128%)!important;
}
.card:hover,.product-card:hover,.course-card:hover,.tool-card:hover,.benefit-card:hover,.quick-action:hover,
.course-admin-card:hover,.user-admin-card:hover{
  border-color:var(--brand-line)!important;
  box-shadow:var(--shadow)!important;
  transform:translateY(-2px);
}

/* Cabeceras glass */
.navbar-main,.topbar,.main-header,.admin-topbar,.header-main,.site-header,.navbar,.header{
  background:rgba(255,255,255,.58)!important;
  border-bottom:1px solid rgba(255,255,255,.72)!important;
  box-shadow:var(--shadow-xs)!important;
  backdrop-filter:blur(28px) saturate(130%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(130%)!important;
}
.navbar-brand,.brand-name,.site-name,.admin-brand-name{color:var(--ink)!important;font-weight:800!important}

/* Hero: conserva imagen real, usa overlay sólido transparente (sin degradados). */
.hero-promo{
  position:relative!important;
  overflow:hidden!important;
  background-color:#0B1D2A!important;
  background-image:var(--hero-bg-image)!important;
  background-size:cover!important;
  background-position:center!important;
}
.hero-promo::before{content:""!important;position:absolute!important;inset:0!important;display:block!important;background:rgba(5,19,31,.48)!important;pointer-events:none!important}
.hero-overlay-content{position:relative!important;z-index:2!important}
.hero-overlay-content h1,.hero-overlay-content h2,.hero-overlay-content h3,.hero-overlay-content p,.hero-overlay-content span{color:#fff!important;-webkit-text-fill-color:#fff!important}
.hero-devices{background-image:var(--hero-devices-image)!important}

/* ----------------------------------------------------------------------
   BOTONES — consistentes, legibles y sin deformaciones
   ---------------------------------------------------------------------- */
.btn,.btn-primary-small,.btn-panel,.prof-btn,.pro-btn,.course-action,.ref-copy,.install-submit,
button[type="submit"],input[type="submit"],[class*="btn-"],[class*="-btn"]{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:42px!important;
  padding:10px 16px!important;
  box-sizing:border-box!important;
  border-radius:12px!important;
  border:1px solid var(--brand)!important;
  background:var(--brand)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-family:inherit!important;
  font-size:.88rem!important;
  font-weight:750!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  box-shadow:0 8px 20px rgba(0,159,190,.14)!important;
  filter:none!important;
  cursor:pointer!important;
}
.btn *,button *,[class*="btn-"] *,[class*="-btn"] *{color:inherit!important;-webkit-text-fill-color:inherit!important}
.btn:hover,.btn-primary-small:hover,.btn-panel:hover,.prof-btn:hover,.pro-btn:hover,.course-action:hover,
button[type="submit"]:hover,input[type="submit"]:hover,[class*="btn-"]:hover,[class*="-btn"]:hover{
  background:var(--brand-dark)!important;
  border-color:var(--brand-dark)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 10px 24px rgba(0,159,190,.20)!important;
  transform:translateY(-1px)!important;
}

/* CTA verdes */
.hero-cta,.btn-recharge,.recharge-btn,[href*="recargar"].btn,[href*="recharge"].btn,
.cta-green,.btn-success,.success{
  background:var(--success)!important;
  border-color:var(--success)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 8px 20px rgba(22,163,74,.16)!important;
}
.hero-cta:hover,.btn-recharge:hover,.recharge-btn:hover,[href*="recargar"].btn:hover,[href*="recharge"].btn:hover,
.cta-green:hover,.btn-success:hover{
  background:var(--success-hover)!important;
  border-color:var(--success-hover)!important;
}

/* Secundarios glass */
.btn.secondary,.prof-btn-light,.pro-btn-light,.course-action-edit,.btn-outline,.btn-light,.btn-secondary{
  background:rgba(255,255,255,.38)!important;
  color:var(--brand-deep)!important;
  -webkit-text-fill-color:var(--brand-deep)!important;
  border:1px solid rgba(0,209,254,.36)!important;
  box-shadow:none!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
.btn.secondary:hover,.prof-btn-light:hover,.pro-btn-light:hover,.course-action-edit:hover,.btn-outline:hover,.btn-light:hover,.btn-secondary:hover{
  background:rgba(225,248,253,.72)!important;
  color:#006F86!important;
  -webkit-text-fill-color:#006F86!important;
}

/* Cerrar sesión siempre rojo sólido */
a[href*="logout"],.logout-btn,.btn-logout,.logout,.signout-btn,.btn-signout{
  background:var(--danger)!important;
  border-color:var(--danger)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 8px 20px rgba(220,38,38,.16)!important;
  white-space:nowrap!important;
}
a[href*="logout"]:hover,.logout-btn:hover,.btn-logout:hover,.logout:hover,.signout-btn:hover,.btn-signout:hover{
  background:var(--danger-hover)!important;
  border-color:var(--danger-hover)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.danger,.btn.danger,.course-action-delete,.prof-btn-danger,.pro-btn-danger,.btn-danger{
  background:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important;-webkit-text-fill-color:#fff!important
}

/* ----------------------------------------------------------------------
   FORMULARIOS
   ---------------------------------------------------------------------- */
input,select,textarea,.form-control,.input-control{
  width:auto;
  max-width:100%;
  background:rgba(255,255,255,.44)!important;
  color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;
  border:1px solid rgba(148,163,184,.28)!important;
  border-radius:12px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
input::placeholder,textarea::placeholder{color:#8291A5!important;opacity:1!important}
input:focus,select:focus,textarea:focus,.form-control:focus,.input-control:focus{
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(0,209,254,.72)!important;
  box-shadow:var(--focus)!important;
  outline:none!important;
}
label{color:var(--text)!important;font-weight:700!important}

/* ----------------------------------------------------------------------
   MENÚ PÚBLICO Y ADMINISTRATIVO
   ---------------------------------------------------------------------- */
.public-sidebar,.sidebar-header,.admin-area .admin-sidebar,.sidebar,.side-menu{
  background:rgba(255,255,255,.54)!important;
  border-color:rgba(255,255,255,.70)!important;
  box-shadow:var(--shadow-sm)!important;
  backdrop-filter:blur(30px) saturate(128%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(128%)!important;
}
.sidebar-menu a,.admin-area .admin-nav a,.side-menu a{
  background:transparent!important;
  color:var(--text)!important;
  -webkit-text-fill-color:var(--text)!important;
  border:1px solid transparent!important;
  border-radius:11px!important;
  margin:3px 8px!important;
  min-height:39px!important;
  box-shadow:none!important;
}
.sidebar-menu a i,.admin-area .admin-nav a i,.side-menu a i{color:var(--brand)!important;-webkit-text-fill-color:var(--brand)!important}
.sidebar-menu a:hover,.admin-area .admin-nav a:hover,.side-menu a:hover{
  background:rgba(0,209,254,.08)!important;
  color:var(--brand-deep)!important;
  -webkit-text-fill-color:var(--brand-deep)!important;
  border-color:rgba(0,209,254,.12)!important;
}
.sidebar-menu a.active,.admin-area .admin-nav a.active,.side-menu a.active{
  background:rgba(255,255,255,.78)!important;
  color:var(--brand-deep)!important;
  -webkit-text-fill-color:var(--brand-deep)!important;
  border-color:rgba(0,209,254,.25)!important;
  box-shadow:0 7px 18px rgba(15,23,42,.055)!important;
}
.sidebar-overlay{background:rgba(4,18,28,.40)!important;backdrop-filter:blur(3px)!important}

/* Menú admin compacto para mostrar opciones sin amontonarlas */
.admin-area .admin-sidebar{overflow:hidden!important}
.admin-area .admin-nav{padding-top:4px!important;padding-bottom:5px!important}
.admin-area .admin-nav .nav-label,.admin-area .nav-section-title{margin:7px 12px 3px!important;font-size:.67rem!important;line-height:1.1!important}
.admin-area .admin-nav a{padding:7px 10px!important;font-size:.81rem!important;line-height:1.08!important}
@media (max-height:820px) and (min-width:901px){
  .admin-area .admin-brand-block{padding:9px 10px!important}
  .admin-area .admin-nav .nav-label,.admin-area .nav-section-title{display:none!important}
  .admin-area .admin-nav a{min-height:34px!important;padding:5px 9px!important;margin:2px 7px!important;font-size:.77rem!important}
}

/* ----------------------------------------------------------------------
   ADMIN / TABLAS / EDITORES
   ---------------------------------------------------------------------- */
.admin-area,.admin-area .panel-layout,.admin-area .content{background:transparent!important}
.admin-area .admin-brand-block{background:rgba(255,255,255,.26)!important;border-bottom:1px solid rgba(0,209,254,.12)!important}
.admin-area .admin-brand-block strong{color:var(--ink)!important}.admin-area .admin-brand-block small{color:var(--muted)!important}
.admin-area .admin-brand-icon,.admin-area .module-number,.admin-area .topic-number,.admin-area .lesson-order,.admin-area .user-avatar,.editor-icon{
  background:var(--brand)!important;color:#fff!important;-webkit-text-fill-color:#fff!important
}
.admin-area table,.public-table,.data-table{
  width:100%;
  background:rgba(255,255,255,.36)!important;
  border:1px solid rgba(255,255,255,.68)!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  border-radius:16px!important;
  overflow:hidden!important;
  box-shadow:var(--shadow-xs)!important;
  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px)!important;
}
.admin-area table th,.public-table th,.data-table th{
  background:rgba(238,250,253,.70)!important;
  color:var(--text)!important;
  -webkit-text-fill-color:var(--text)!important;
  border-bottom:1px solid rgba(148,163,184,.19)!important;
  font-weight:750!important;
}
.admin-area table td,.public-table td,.data-table td{
  background:rgba(255,255,255,.25)!important;
  color:var(--text)!important;
  -webkit-text-fill-color:var(--text)!important;
  border-bottom:1px solid rgba(148,163,184,.13)!important;
}
.admin-area table tr:hover td,.public-table tr:hover td,.data-table tr:hover td{background:rgba(255,255,255,.48)!important}
.admin-area .pro-kicker,.course-kicker,.badge-info,.pill-info{
  background:rgba(0,209,254,.09)!important;
  color:var(--brand-deep)!important;
  -webkit-text-fill-color:var(--brand-deep)!important;
  border:1px solid rgba(0,209,254,.22)!important;
}

.editor-tabs,.tabs,.content-tabs{
  background:rgba(255,255,255,.34)!important;
  border:1px solid rgba(255,255,255,.68)!important;
  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px)!important;
  border-radius:16px!important;
  box-shadow:var(--shadow-xs)!important;
}
.editor-tabs a,.editor-tabs button,.tabs a,.tabs button,.content-tabs a,.content-tabs button{
  background:rgba(255,255,255,.32)!important;
  color:var(--text)!important;
  -webkit-text-fill-color:var(--text)!important;
  border:1px solid rgba(148,163,184,.18)!important;
  box-shadow:none!important;
}
.editor-tabs .active,.tabs .active,.content-tabs .active{
  background:rgba(0,209,254,.11)!important;
  color:var(--brand-deep)!important;
  -webkit-text-fill-color:var(--brand-deep)!important;
  border-color:rgba(0,209,254,.28)!important;
}

/* ----------------------------------------------------------------------
   LOGIN / REGISTRO / AUTH
   ---------------------------------------------------------------------- */
.auth-page,.login-page,.register-page{background:var(--page)!important}
.auth-card,.login-card,.register-card,.login-box,.register-box{
  background:rgba(255,255,255,.48)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:var(--shadow)!important;
  backdrop-filter:blur(30px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(125%)!important;
}
a.back-btn,a[href*="index.php"].back-btn,.auth-back{
  background:rgba(255,255,255,.42)!important;
  color:var(--brand-deep)!important;
  -webkit-text-fill-color:var(--brand-deep)!important;
  border:1px solid rgba(0,209,254,.32)!important;
}

/* ----------------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------------- */
footer,.footer,.main-footer,.site-footer,.footer-bottom{
  background:rgba(255,255,255,.38)!important;
  color:var(--text)!important;
  -webkit-text-fill-color:var(--text)!important;
  border-top:1px solid rgba(0,209,254,.16)!important;
  box-shadow:0 -8px 26px rgba(15,23,42,.045)!important;
  backdrop-filter:blur(24px)!important;
  -webkit-backdrop-filter:blur(24px)!important;
}
footer a,.footer a,.main-footer a,.site-footer a{color:var(--brand-deep)!important;-webkit-text-fill-color:var(--brand-deep)!important}

/* ----------------------------------------------------------------------
   POPUP — imagen limpia + CTA transparente pegada
   ---------------------------------------------------------------------- */
.solvantix-popup-overlay,.popup-overlay{background:rgba(5,18,28,.62)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important}
.solvantix-popup-shell,.solvantix-popup-visual,.solvantix-popup-media{background:transparent!important;border-color:transparent!important}
.solvantix-popup-media img{filter:none!important;opacity:1!important;background:transparent!important}
.solvantix-popup-actionbar,.popup-admin-actionbar{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:8px 10px 10px!important;
  margin-top:-68px!important;
  position:relative!important;
  z-index:4!important;
}
.solvantix-popup-cta,.popup-admin-actionbar a{
  background:rgba(0,0,0,.05)!important;
  color:var(--brand)!important;
  -webkit-text-fill-color:var(--brand)!important;
  border:1.5px solid var(--brand)!important;
  box-shadow:0 0 18px rgba(0,209,254,.16)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}
.solvantix-popup-cta:hover,.popup-admin-actionbar a:hover{
  background:rgba(0,0,0,.09)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:#fff!important;
}
.solvantix-popup-cta-icon,.popup-admin-cta-icon{
  background:transparent!important;
  color:var(--brand)!important;
  -webkit-text-fill-color:var(--brand)!important;
  border-color:var(--brand)!important;
}
.solvantix-popup-cta:hover .solvantix-popup-cta-icon,.popup-admin-actionbar a:hover .popup-admin-cta-icon{color:#fff!important;-webkit-text-fill-color:#fff!important;border-color:#fff!important}

/* ----------------------------------------------------------------------
   ESTADOS / BADGES
   ---------------------------------------------------------------------- */
.badge,.status,.pill,.chip,.tag{border-radius:999px!important;font-weight:700!important;text-shadow:none!important}
.badge-success,.status-success,.status-approved,.status-paid{background:rgba(22,163,74,.11)!important;color:#10793A!important;-webkit-text-fill-color:#10793A!important;border:1px solid rgba(22,163,74,.20)!important}
.badge-danger,.status-danger,.status-rejected,.status-error{background:rgba(220,38,38,.10)!important;color:#B91C1C!important;-webkit-text-fill-color:#B91C1C!important;border:1px solid rgba(220,38,38,.20)!important}
.badge-warning,.status-warning,.status-pending{background:rgba(245,158,11,.12)!important;color:#A16207!important;-webkit-text-fill-color:#A16207!important;border:1px solid rgba(245,158,11,.22)!important}

/* ----------------------------------------------------------------------
   LEGIBILIDAD / PROTECCIÓN CONTRA ESTILOS HEREDADOS
   ---------------------------------------------------------------------- */
button,a.btn,.btn,[role="button"]{text-overflow:ellipsis;overflow:visible}
button:disabled,.btn:disabled,.disabled{opacity:.55!important;cursor:not-allowed!important}
[style*="color: transparent"],[style*="color:transparent"]{color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important}
[style*="-webkit-text-fill-color: transparent"],[style*="-webkit-text-fill-color:transparent"]{-webkit-text-fill-color:currentColor!important}
img{max-width:100%;height:auto}

/* ----------------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------------- */
@media(max-width:900px){
  .btn,.prof-btn,.pro-btn,.course-action,[class*="btn-"],[class*="-btn"]{font-size:.84rem!important;min-height:40px!important;padding:9px 13px!important}
  .admin-area .admin-sidebar{overflow-y:auto!important}
}
@media(max-width:640px){
  :root{--radius:15px;--radius-lg:19px}
  .card,.product-card,.course-card,.form-card,.auth-card{backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important}
  .btn,.prof-btn,.pro-btn,.course-action,[class*="btn-"],[class*="-btn"]{max-width:100%!important;white-space:normal!important;text-align:center!important;line-height:1.25!important}
  .solvantix-popup-actionbar,.popup-admin-actionbar{margin-top:-58px!important;padding:7px 8px 9px!important}
}

/* Accesibilidad */
:focus-visible{outline:2px solid var(--brand)!important;outline-offset:2px!important}
::selection{background:rgba(0,209,254,.22);color:var(--ink)}


/* ===== LOGO GLOBAL 2026-08: una sola fuente de marca ===== */
img.brand-logo,.brand-logo img,.admin-brand img,.sidebar-brand img,.site-brand img,.header-brand img{
  display:block!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;
  background:transparent!important;filter:none!important;opacity:1!important;visibility:visible!important;
}


/* ==========================================================================
   FIX PRODUCCIÓN 2026-08-08
   HEADER FIJO + CERRAR SESIÓN UNIFICADO + MENÚ ADMIN COMPLETO
   ========================================================================== */

/* ---------- Barra superior fija en toda la plataforma ---------- */
:root{
  --fixed-header-h:70px;
  --admin-sidebar-w:250px;
}

.navbar-main{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  z-index:5000!important;
  min-height:var(--fixed-header-h)!important;
}

/* Reserva el espacio físico que ocupa el header fijo. */
.main-content{
  padding-top:var(--fixed-header-h)!important;
}

/* El botón hamburguesa queda siempre por encima del header. */
.hamburger-btn{
  position:fixed!important;
  z-index:5200!important;
  top:10px!important;
  left:16px!important;
}

/* El panel no debe quedar debajo de la barra superior. */
.admin-area .panel-layout{
  min-height:calc(100vh - var(--fixed-header-h))!important;
}

/* En admin usamos todo el ancho disponible para evitar amontonamiento. */
.admin-area .navbar-inner{
  width:100%!important;
  max-width:none!important;
  padding-left:84px!important;
  padding-right:18px!important;
  gap:16px!important;
}
.admin-area .navbar-brand{
  margin-left:0!important;
  min-width:0!important;
  max-width:38vw!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.admin-area .navbar-actions{
  flex:0 0 auto!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
}

/* ---------- Cerrar sesión: mismo componente en TODAS las páginas ---------- */
a.logout-link,
a.admin-logout-link,
a[href*="logout.php"],
a[href$="/logout"],
.logout-btn,
.btn-logout,
.signout-btn,
.btn-signout{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:40px!important;
  padding:9px 16px!important;
  margin:0!important;
  box-sizing:border-box!important;

  background:#DC2626!important;
  background-image:none!important;
  border:1px solid #DC2626!important;
  border-radius:11px!important;

  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  font-family:inherit!important;
  font-size:.84rem!important;
  font-weight:800!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  text-shadow:none!important;

  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  box-shadow:0 7px 18px rgba(220,38,38,.18)!important;
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease!important;
}
a.logout-link *,
a.admin-logout-link *,
a[href*="logout.php"] *,
a[href$="/logout"] *,
.logout-btn *,
.btn-logout *,
.signout-btn *,
.btn-signout *{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
}
a.logout-link:hover,
a.logout-link:focus,
a.admin-logout-link:hover,
a.admin-logout-link:focus,
a[href*="logout.php"]:hover,
a[href*="logout.php"]:focus,
a[href$="/logout"]:hover,
a[href$="/logout"]:focus,
.logout-btn:hover,.logout-btn:focus,
.btn-logout:hover,.btn-logout:focus,
.signout-btn:hover,.signout-btn:focus,
.btn-signout:hover,.btn-signout:focus{
  background:#B91C1C!important;
  background-image:none!important;
  border-color:#B91C1C!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  box-shadow:0 8px 20px rgba(185,28,28,.23)!important;
  transform:translateY(-1px)!important;
}

/* El logout del sidebar conserva ancho cómodo sin tocar otros enlaces. */
.admin-area .admin-nav a.admin-logout-link,
.public-sidebar .sidebar-menu a[href*="logout.php"]{
  width:auto!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  background:#DC2626!important;
  border-color:#DC2626!important;
}
.admin-area .admin-nav a.admin-logout-link i,
.public-sidebar .sidebar-menu a[href*="logout.php"] i{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
}

/* ---------- Menú administrativo: fijo, completo y compacto ---------- */
@media (min-width:901px){
  .admin-area .admin-sidebar{
    position:fixed!important;
    top:var(--fixed-header-h)!important;
    left:0!important;
    bottom:0!important;
    width:var(--admin-sidebar-w)!important;
    height:calc(100vh - var(--fixed-header-h))!important;
    z-index:4200!important;

    padding:0!important;
    margin:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    scrollbar-width:thin!important;
    scrollbar-color:rgba(0,209,254,.36) transparent!important;
  }
  .admin-area .admin-sidebar::-webkit-scrollbar{width:5px!important}
  .admin-area .admin-sidebar::-webkit-scrollbar-track{background:transparent!important}
  .admin-area .admin-sidebar::-webkit-scrollbar-thumb{
    background:rgba(0,209,254,.30)!important;
    border-radius:999px!important;
  }

  .admin-area .admin-brand-block{
    min-height:58px!important;
    padding:7px 10px!important;
    gap:8px!important;
    position:sticky!important;
    top:0!important;
    z-index:2!important;
    backdrop-filter:blur(26px)!important;
    -webkit-backdrop-filter:blur(26px)!important;
  }
  .admin-area .admin-brand-icon{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    border-radius:10px!important;
  }
  .admin-area .admin-brand-block strong{
    display:block!important;
    max-width:176px!important;
    font-size:.78rem!important;
    line-height:1.05!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:normal!important;
  }
  .admin-area .admin-brand-block small{
    display:block!important;
    margin-top:2px!important;
    font-size:.66rem!important;
    line-height:1.05!important;
  }

  .admin-area .admin-nav{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    padding:4px 5px 8px!important;
    margin:0!important;
  }

  /* La clase real del sistema es admin-nav-label. */
  .admin-area .admin-nav-label{
    display:block!important;
    margin:5px 9px 2px!important;
    padding:0!important;
    font-size:.57rem!important;
    font-weight:800!important;
    line-height:1!important;
    letter-spacing:.075em!important;
    color:#00A6C9!important;
    -webkit-text-fill-color:#00A6C9!important;
  }

  .admin-area .admin-nav a{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:7px!important;
    width:auto!important;
    min-height:29px!important;
    height:auto!important;
    margin:1px 3px!important;
    padding:5px 8px!important;
    border-radius:9px!important;
    font-size:.72rem!important;
    font-weight:650!important;
    line-height:1.05!important;
    white-space:normal!important;
  }
  .admin-area .admin-nav a i{
    flex:0 0 17px!important;
    width:17px!important;
    text-align:center!important;
    font-size:.76rem!important;
  }
  .admin-area .admin-nav a span{
    min-width:0!important;
    line-height:1.08!important;
  }

  .admin-area .admin-nav a.admin-logout-link{
    min-height:32px!important;
    margin-top:4px!important;
    padding:6px 9px!important;
  }
}

/* En alturas normales todo entra; en pantallas especialmente bajas se mantiene
   accesible con un scroll interno muy discreto en vez de ocultar botones. */
@media (min-width:901px) and (max-height:720px){
  .admin-area .admin-brand-block{min-height:48px!important;padding:5px 8px!important}
  .admin-area .admin-brand-icon{width:31px!important;height:31px!important;min-width:31px!important}
  .admin-area .admin-brand-block small{display:none!important}
  .admin-area .admin-nav-label{margin:3px 8px 1px!important;font-size:.53rem!important}
  .admin-area .admin-nav a{
    min-height:26px!important;
    padding:4px 7px!important;
    font-size:.68rem!important;
    margin:0 3px!important;
  }
}

/* ---------- Responsive: header fijo sin textos deformados ---------- */
@media (max-width:1000px){
  .navbar-main{min-height:var(--fixed-header-h)!important}
  .navbar-inner{min-height:var(--fixed-header-h)!important}
}
@media (max-width:900px){
  .admin-area .admin-sidebar{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    bottom:auto!important;
    width:auto!important;
    height:auto!important;
    overflow-y:visible!important;
  }
  .admin-area .navbar-inner{
    padding-left:68px!important;
    padding-right:10px!important;
  }
  .admin-area .navbar-brand{max-width:44vw!important}
}
@media (max-width:640px){
  :root{--fixed-header-h:64px}
  .hamburger-btn{top:9px!important;left:10px!important}
  .navbar-inner{min-height:64px!important}
  .navbar-actions{gap:5px!important}
  a.logout-link,
  a.admin-logout-link,
  a[href*="logout.php"]{
    min-height:36px!important;
    padding:8px 10px!important;
    font-size:.76rem!important;
  }
}


/* ==========================================================================
   FIX DEFINITIVO 2026-08-08
   SIDEBAR ADMIN FIJO SIN TAPAR NINGUNA PÁGINA
   ========================================================================== */

/*
  Estructura real de las páginas admin:
  <div class="panel-layout">
      <aside class="admin-sidebar">...</aside>
      <section class="content">...</section>
  </div>

  Cuando el sidebar pasa a position:fixed sale del flujo. Por eso .content debe
  reservar explícitamente el ancho del menú. Las reglas antiguas sobre
  .panel-main/.admin-main no aplicaban porque esas clases no existen en estas vistas.
*/
@media (min-width:901px){
  .admin-area .panel-layout{
    display:block!important;
    position:relative!important;
    width:100%!important;
    min-height:calc(100vh - var(--fixed-header-h))!important;
    padding:0!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  .admin-area .panel-layout > .admin-sidebar{
    position:fixed!important;
    top:var(--fixed-header-h)!important;
    left:0!important;
    bottom:0!important;
    width:var(--admin-sidebar-w)!important;
    height:calc(100vh - var(--fixed-header-h))!important;
    z-index:4200!important;
    box-sizing:border-box!important;
  }

  /* ESTA es la clase real usada por las 19 vistas administrativas. */
  .admin-area .panel-layout > .content{
    display:block!important;
    position:relative!important;
    margin-left:var(--admin-sidebar-w)!important;
    margin-right:0!important;
    width:calc(100% - var(--admin-sidebar-w))!important;
    max-width:none!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }

  /* El contenido interno nunca puede invadir el ancho del sidebar. */
  .admin-area .panel-layout > .content > *,
  .admin-area .panel-layout > .content .admin-pro-page,
  .admin-area .panel-layout > .content .card,
  .admin-area .panel-layout > .content .form-grid,
  .admin-area .panel-layout > .content table{
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  /* Tablas grandes: scroll horizontal dentro del contenido, no debajo del menú. */
  .admin-area .panel-layout > .content table{
    width:100%!important;
  }

  /* Footer del área admin también respeta visualmente el sidebar fijo. */
  .admin-area .footer-main{
    margin-left:var(--admin-sidebar-w)!important;
    width:calc(100% - var(--admin-sidebar-w))!important;
    box-sizing:border-box!important;
  }
}

/* Tablet y móvil: sidebar vuelve al flujo/overlay y el contenido ocupa todo. */
@media (max-width:900px){
  .admin-area .panel-layout{
    display:block!important;
    width:100%!important;
  }

  .admin-area .panel-layout > .admin-sidebar{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    bottom:auto!important;
    width:100%!important;
    height:auto!important;
  }

  .admin-area .panel-layout > .content{
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  .admin-area .footer-main{
    margin-left:0!important;
    width:100%!important;
  }
}


/* ==========================================================================
   MENÚ ADMIN DESLIZABLE SIN BARRA DE SCROLL VISIBLE
   ========================================================================== */

/*
   Comportamiento:
   - El menú permanece fijo debajo del header.
   - Se puede desplazar arriba/abajo con rueda, touchpad o gesto táctil.
   - NO se muestra la barra visual de scroll.
   - Ningún botón queda inaccesible.
   - El contenido principal permanece separado del sidebar.
*/
@media (min-width:901px){
  .admin-area .panel-layout > .admin-sidebar,
  .admin-area .admin-sidebar{
    position:fixed!important;
    top:var(--fixed-header-h)!important;
    left:0!important;
    bottom:0!important;
    width:var(--admin-sidebar-w)!important;
    height:calc(100vh - var(--fixed-header-h))!important;

    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;

    /* Firefox: permite desplazamiento pero oculta la barra */
    scrollbar-width:none!important;
    /* IE/Edge Legacy */
    -ms-overflow-style:none!important;

    padding-bottom:18px!important;
    box-sizing:border-box!important;
  }

  /* Chromium, Chrome, Edge, Safari: ocultar solo la barra visual */
  .admin-area .panel-layout > .admin-sidebar::-webkit-scrollbar,
  .admin-area .admin-sidebar::-webkit-scrollbar{
    width:0!important;
    height:0!important;
    display:none!important;
    background:transparent!important;
  }

  /* Cabecera interna del sidebar NO queda sticky:
     se mueve junto con el menú, como el diseño anterior que te gustaba. */
  .admin-area .admin-brand-block{
    position:relative!important;
    top:auto!important;
  }

  /* Damos espacio real al último botón para poder llevarlo completamente a vista. */
  .admin-area .admin-nav{
    padding-bottom:20px!important;
  }

  .admin-area .admin-nav a.admin-logout-link{
    margin-bottom:10px!important;
  }
}

/* En móvil/tablet también se puede deslizar el menú sin mostrar barra. */
@media (max-width:900px){
  .admin-area .admin-sidebar{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .admin-area .admin-sidebar::-webkit-scrollbar{
    display:none!important;
    width:0!important;
    height:0!important;
  }
}
\n\n/* ==========================================================================\n   FOOTER SOLVANTIX — color principal sólido en todo el footer\n   ========================================================================== */\nfooter,.footer,.main-footer,.site-footer,.footer-main,.footer-bottom{\n  background:#00D1FE!important;\n  background-color:#00D1FE!important;\n  background-image:none!important;\n  color:#0F172A!important;\n  -webkit-text-fill-color:#0F172A!important;\n  border-color:rgba(15,23,42,.12)!important;\n  backdrop-filter:none!important;\n  -webkit-backdrop-filter:none!important;\n}\nfooter *, .footer *, .main-footer *, .site-footer *, .footer-main *, .footer-bottom *{\n  color:#0F172A!important;\n  -webkit-text-fill-color:#0F172A!important;\n}\nfooter a,.footer a,.main-footer a,.site-footer a,.footer-main a,.footer-bottom a{\n  color:#0F172A!important;\n  -webkit-text-fill-color:#0F172A!important;\n  font-weight:600!important;\n}\n.footer-links a{\n  background:rgba(255,255,255,.28)!important;\n  border:1px solid rgba(255,255,255,.45)!important;\n}\n

/* ==========================================================================
   V21 — LEGIBILIDAD PROFESIONAL DEL MENÚ LATERAL
   Mantiene exactamente la paleta actual. Solo ajusta tamaño, espaciado y toque.
   ========================================================================== */

/* Opciones de ambos menús laterales */
.admin-area .admin-nav a,
.admin-sidebar .admin-nav a,
.sidebar-menu a,
.side-menu a,
.public-sidebar a{
  font-size:15px!important;
  line-height:1.25!important;
  font-weight:600!important;
  min-height:44px!important;
  padding:10px 14px!important;
  gap:11px!important;
  display:flex!important;
  align-items:center!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
  box-sizing:border-box!important;
}

/* Iconos más visibles sin exagerarlos */
.admin-area .admin-nav a i,
.admin-sidebar .admin-nav a i,
.sidebar-menu a i,
.side-menu a i,
.public-sidebar a i{
  font-size:18px!important;
  line-height:1!important;
  min-width:22px!important;
  width:22px!important;
  flex:0 0 22px!important;
  text-align:center!important;
}

/* Encabezados/separadores del menú */
.admin-area .admin-nav .nav-title,
.admin-sidebar .nav-title,
.sidebar-menu .nav-title,
.side-menu .nav-title,
.public-sidebar .nav-title,
.admin-area .admin-nav .menu-title,
.sidebar-menu .menu-title{
  font-size:12px!important;
  line-height:1.3!important;
  font-weight:700!important;
  letter-spacing:.045em!important;
}

/* Cerrar sesión: mismo rojo existente, ahora con tamaño cómodo */
.admin-area .admin-nav .admin-logout-link,
.admin-sidebar .admin-logout-link,
.sidebar-menu a[href*="logout.php"],
.side-menu a[href*="logout.php"],
.public-sidebar a[href*="logout.php"]{
  font-size:15px!important;
  font-weight:700!important;
  min-height:44px!important;
}

/* Tablet */
@media (max-width:1024px){
  .admin-area .admin-nav a,
  .admin-sidebar .admin-nav a,
  .sidebar-menu a,
  .side-menu a,
  .public-sidebar a{
    font-size:15.5px!important;
    min-height:46px!important;
    padding:11px 14px!important;
  }
}

/* Celular: área táctil mayor y texto claramente legible */
@media (max-width:640px){
  .admin-area .admin-nav a,
  .admin-sidebar .admin-nav a,
  .sidebar-menu a,
  .side-menu a,
  .public-sidebar a{
    font-size:16px!important;
    line-height:1.3!important;
    min-height:48px!important;
    padding:12px 14px!important;
    gap:12px!important;
  }

  .admin-area .admin-nav a i,
  .admin-sidebar .admin-nav a i,
  .sidebar-menu a i,
  .side-menu a i,
  .public-sidebar a i{
    font-size:19px!important;
    min-width:23px!important;
    width:23px!important;
    flex-basis:23px!important;
  }
}


/* ==========================================================================
   V22 — HEADER RESPONSIVE COMPLETO Y LEGIBLE
   Mantiene la paleta actual. Corrige distribución, wrapping y visibilidad
   en computadora, tablet y celular.
   ========================================================================== */

/* HEADER base */
.navbar-main{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}

.navbar-main .navbar-inner{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  box-sizing:border-box!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;

  padding:10px 16px!important;
  min-height:72px!important;
}

/* Marca */
.navbar-main .navbar-brand{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
  flex:1 1 auto!important;

  font-size:clamp(18px,1.6vw,25px)!important;
  line-height:1.15!important;
  font-weight:800!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
  margin:0!important;
}

.navbar-main .navbar-brand img{
  flex:0 0 auto!important;
  max-height:42px!important;
  max-width:150px!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
}

/* Usuario */
.navbar-main .navbar-user{
  flex:0 0 auto!important;
  white-space:nowrap!important;
  font-size:14px!important;
  line-height:1.2!important;
}

/* Contenedor de acciones */
.navbar-main .navbar-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  flex:0 1 auto!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
  flex-wrap:wrap!important;
}

/* Todos los botones del header */
.navbar-main .navbar-actions > *,
.navbar-main .nav-action,
.navbar-main .credit-badge,
.navbar-main .btn,
.navbar-main a.btn,
.navbar-main a[href]{
  flex:0 0 auto!important;
  min-height:40px!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  box-sizing:border-box!important;
}

/* Evita deformación de iconos/textos */
.navbar-main .navbar-actions i,
.navbar-main .navbar-actions span,
.navbar-main .navbar-actions strong{
  flex:0 0 auto!important;
}

/* Botones menú superior */
.hamburger-btn,
.admin-menu-toggle{
  flex:0 0 auto!important;
}

/* ------------------ TABLET / LAPTOP PEQUEÑA ------------------ */
@media (max-width:1100px){
  .navbar-main .navbar-inner{
    gap:8px!important;
    padding:9px 12px!important;
  }

  .navbar-main .navbar-brand{
    font-size:20px!important;
    max-width:280px!important;
  }

  .navbar-main .navbar-user{
    font-size:13px!important;
  }

  .navbar-main .navbar-actions{
    gap:6px!important;
  }

  .navbar-main .navbar-actions > *,
  .navbar-main .nav-action,
  .navbar-main .credit-badge,
  .navbar-main .btn,
  .navbar-main a.btn{
    min-height:38px!important;
    padding:8px 10px!important;
    font-size:13px!important;
  }
}

/* ------------------ TABLET ------------------ */
@media (max-width:900px){
  .navbar-main{
    position:sticky!important;
    top:0!important;
    z-index:5000!important;
  }

  .navbar-main .navbar-inner{
    min-height:68px!important;
    padding:8px 10px!important;
    gap:6px!important;
    flex-wrap:wrap!important;
  }

  .navbar-main .navbar-brand{
    order:1!important;
    flex:1 1 calc(100% - 110px)!important;
    max-width:none!important;
    font-size:18px!important;
    line-height:1.1!important;
  }

  .navbar-main .navbar-user{
    order:2!important;
    font-size:12px!important;
  }

  .navbar-main .navbar-actions{
    order:3!important;
    flex:1 1 100%!important;
    width:100%!important;
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
    gap:6px!important;
    padding-top:2px!important;
  }

  .navbar-main .navbar-actions > *,
  .navbar-main .nav-action,
  .navbar-main .credit-badge,
  .navbar-main .btn,
  .navbar-main a.btn{
    min-height:38px!important;
    padding:8px 10px!important;
    font-size:12.5px!important;
  }
}

/* ------------------ CELULAR ------------------ */
@media (max-width:640px){
  .navbar-main .navbar-inner{
    min-height:auto!important;
    padding:8px!important;
    gap:6px!important;
    align-items:center!important;
  }

  .navbar-main .navbar-brand{
    flex:1 1 calc(100% - 100px)!important;
    max-width:none!important;
    font-size:17px!important;
    line-height:1.1!important;
  }

  .navbar-main .navbar-brand img{
    max-height:34px!important;
    max-width:110px!important;
  }

  .navbar-main .navbar-user{
    display:none!important;
  }

  .navbar-main .navbar-actions{
    width:100%!important;
    flex:1 1 100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    overflow:visible!important;
    padding-top:2px!important;
  }

  .navbar-main .navbar-actions > *,
  .navbar-main .nav-action,
  .navbar-main .credit-badge,
  .navbar-main .btn,
  .navbar-main a.btn{
    width:100%!important;
    min-width:0!important;
    min-height:40px!important;
    padding:7px 6px!important;
    font-size:11.5px!important;
    line-height:1.05!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
  }

  .navbar-main .navbar-actions i{
    font-size:13px!important;
  }

  /* Acciones críticas ocupan ancho completo cuando haga falta */
  .navbar-main a[href*="logout.php"],
  .navbar-main .logout-link{
    grid-column:auto!important;
  }

  .hamburger-btn{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
  }

  .admin-menu-toggle{
    min-height:40px!important;
  }
}

/* ------------------ CELULAR MUY ANGOSTO ------------------ */
@media (max-width:430px){
  .navbar-main .navbar-inner{
    padding:7px 6px!important;
  }

  .navbar-main .navbar-brand{
    font-size:16px!important;
    flex:1 1 calc(100% - 92px)!important;
  }

  .navbar-main .navbar-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .navbar-main .navbar-actions > *,
  .navbar-main .nav-action,
  .navbar-main .credit-badge,
  .navbar-main .btn,
  .navbar-main a.btn{
    font-size:11.5px!important;
    min-height:42px!important;
  }
}

/* ------------------ CELULAR EXTRA ANGOSTO ------------------ */
@media (max-width:360px){
  .navbar-main .navbar-brand{
    font-size:15px!important;
  }

  .navbar-main .navbar-actions{
    grid-template-columns:1fr 1fr!important;
  }

  .navbar-main .navbar-actions > *,
  .navbar-main .nav-action,
  .navbar-main .credit-badge,
  .navbar-main .btn,
  .navbar-main a.btn{
    font-size:11px!important;
    padding:7px 5px!important;
  }
}


/* ==========================================================================
   V23 FINAL — HEADER + MENÚ ADMIN RESPONSIVE REAL
   Mantiene paleta actual y evita solapamientos.
   ========================================================================== */
:root{
  --actual-header-height:72px;
  --admin-sidebar-w:250px;
}

/* ---------- ESTRUCTURA DEL HEADER ---------- */
.navbar-main{
  position:sticky!important;
  top:0!important;
  z-index:5000!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

.navbar-main .navbar-inner{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  padding:10px 14px!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:auto minmax(180px,1fr) auto!important;
  grid-template-areas:"controls brand actions"!important;
  align-items:center!important;
  gap:12px!important;
}

.header-menu-controls{
  grid-area:controls!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  flex-wrap:nowrap!important;
  min-width:max-content!important;
}

.hamburger-btn,
.admin-menu-toggle{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  margin:0!important;
  transform:none!important;
  flex:0 0 auto!important;
  z-index:auto!important;
}

.hamburger-btn{
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  padding:0!important;
}

.admin-menu-toggle{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  width:auto!important;
  min-width:112px!important;
  height:44px!important;
  padding:0 12px!important;
  white-space:nowrap!important;
}

.navbar-main .navbar-brand{
  grid-area:brand!important;
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  font-size:clamp(18px,1.55vw,24px)!important;
  line-height:1.12!important;
  font-weight:800!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}

.navbar-main .navbar-brand img{
  max-height:40px!important;
  max-width:130px!important;
  width:auto!important;
  height:auto!important;
  flex:0 0 auto!important;
}

.navbar-main .navbar-actions{
  grid-area:actions!important;
  min-width:0!important;
  max-width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  overflow:visible!important;
}

.navbar-main .user-greeting{
  white-space:nowrap!important;
  font-size:14px!important;
}

.navbar-main .credits-display,
.navbar-main .btn-panel,
.navbar-main .btn-recharge,
.navbar-main .logout-link,
.navbar-main .btn-outline,
.navbar-main .btn-primary-small{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  min-height:40px!important;
  min-width:0!important;
  padding:8px 12px!important;
  box-sizing:border-box!important;
  white-space:nowrap!important;
  line-height:1.1!important;
  font-size:14px!important;
}

/* ---------- PC: sidebar dentro del layout, nunca sobre el contenido ---------- */
@media (min-width:901px){
  .admin-area .panel-layout{
    display:grid!important;
    grid-template-columns:var(--admin-sidebar-w) minmax(0,1fr)!important;
    align-items:start!important;
    width:100%!important;
    min-width:0!important;
  }

  .admin-area .panel-layout > .admin-sidebar{
    grid-column:1!important;
    position:sticky!important;
    top:var(--actual-header-height)!important;
    width:var(--admin-sidebar-w)!important;
    height:calc(100dvh - var(--actual-header-height))!important;
    max-height:calc(100dvh - var(--actual-header-height))!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    box-sizing:border-box!important;
    padding-bottom:18px!important;
  }

  .admin-area .panel-layout > .admin-sidebar::-webkit-scrollbar{
    width:0!important;
    height:0!important;
    display:none!important;
  }

  .admin-area .panel-layout > .content{
    grid-column:2!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  .admin-area.admin-menu-collapsed .panel-layout{
    grid-template-columns:0 minmax(0,1fr)!important;
  }

  .admin-area.admin-menu-collapsed .panel-layout > .admin-sidebar{
    width:0!important;
    max-width:0!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    overflow:hidden!important;
    padding:0!important;
    border:0!important;
  }
}

/* ---------- LAPTOP / TABLET HORIZONTAL ---------- */
@media (max-width:1180px) and (min-width:901px){
  .navbar-main .navbar-inner{
    grid-template-columns:auto minmax(150px,1fr)!important;
    grid-template-areas:
      "controls brand"
      "actions actions"!important;
    row-gap:8px!important;
  }

  .navbar-main .navbar-actions{
    justify-content:flex-end!important;
  }

  .navbar-main .navbar-brand{
    font-size:20px!important;
  }
}

/* ---------- TABLET Y CELULAR ---------- */
@media (max-width:900px){
  .navbar-main .navbar-inner{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    grid-template-areas:
      "controls brand"
      "actions actions"!important;
    align-items:center!important;
    gap:8px!important;
    padding:8px!important;
  }

  .navbar-main .navbar-brand{
    font-size:clamp(16px,4.8vw,20px)!important;
    line-height:1.12!important;
    max-width:100%!important;
  }

  .admin-menu-toggle{
    width:44px!important;
    min-width:44px!important;
    padding:0!important;
  }

  .admin-menu-toggle span{
    display:none!important;
  }

  .navbar-main .navbar-actions{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:100%!important;
    gap:6px!important;
    justify-content:stretch!important;
  }

  .navbar-main .user-greeting{
    grid-column:1/-1!important;
    text-align:left!important;
    font-size:12.5px!important;
    padding:0 2px!important;
  }

  .navbar-main .credits-display,
  .navbar-main .btn-panel,
  .navbar-main .btn-recharge,
  .navbar-main .logout-link,
  .navbar-main .btn-outline,
  .navbar-main .btn-primary-small{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    padding:8px 7px!important;
    font-size:12px!important;
    white-space:normal!important;
    text-align:center!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  /* Drawer admin. Altura calculada según header real. */
  .admin-area .panel-layout{
    display:block!important;
    width:100%!important;
  }

  .admin-area .panel-layout > .content{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
  }

  .admin-area .panel-layout > .admin-sidebar{
    position:fixed!important;
    top:var(--actual-header-height)!important;
    left:0!important;
    bottom:0!important;
    width:min(88vw,320px)!important;
    height:calc(100dvh - var(--actual-header-height))!important;
    max-height:calc(100dvh - var(--actual-header-height))!important;
    z-index:6000!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
    -webkit-overflow-scrolling:touch!important;
    transform:translateX(-105%)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    padding-bottom:24px!important;
    box-sizing:border-box!important;
    transition:transform .22s ease,opacity .18s ease,visibility .18s ease!important;
  }

  .admin-area .panel-layout > .admin-sidebar::-webkit-scrollbar{
    display:none!important;
    width:0!important;
    height:0!important;
  }

  .admin-area.admin-menu-open .panel-layout > .admin-sidebar{
    transform:translateX(0)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* Todo el menú queda alcanzable al deslizar; no hay barra visible. */
  .admin-area .admin-nav{
    padding-bottom:28px!important;
  }

  .admin-area .admin-nav a{
    min-height:48px!important;
    font-size:16px!important;
  }
}

/* ---------- CELULAR ---------- */
@media (max-width:640px){
  .navbar-main .navbar-inner{
    grid-template-columns:auto minmax(0,1fr)!important;
    padding:7px!important;
    gap:7px!important;
  }

  .header-menu-controls{
    gap:5px!important;
  }

  .hamburger-btn,
  .admin-menu-toggle{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
  }

  .navbar-main .navbar-brand{
    font-size:16px!important;
    line-height:1.1!important;
  }

  .navbar-main .navbar-brand img{
    max-height:32px!important;
    max-width:88px!important;
  }

  .navbar-main .user-greeting{
    display:none!important;
  }

  .navbar-main .navbar-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }

  .navbar-main .credits-display,
  .navbar-main .btn-panel,
  .navbar-main .btn-recharge,
  .navbar-main .logout-link,
  .navbar-main .btn-outline,
  .navbar-main .btn-primary-small{
    min-height:42px!important;
    font-size:11.5px!important;
    padding:7px 6px!important;
  }
}

/* ---------- 360px y menores ---------- */
@media (max-width:380px){
  .navbar-main .navbar-brand{
    font-size:15px!important;
  }

  .navbar-main .navbar-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .navbar-main .credits-display,
  .navbar-main .btn-panel,
  .navbar-main .btn-recharge,
  .navbar-main .logout-link{
    font-size:11px!important;
  }
}


/* ==========================================================================
   V24 — FOOTER GLOBAL EN COLOR PRINCIPAL SOLVANTIX
   Aplica a web pública, admin, alumno, login/registro y páginas internas.
   ========================================================================== */

:root{
  --footer-primary:#00D1FE;
  --footer-text:#0F2230;
  --footer-link:#063E4D;
}

/* Todo el bloque footer usa el color principal, de borde a borde. */
footer,
.footer-main,
.public-footer,
.site-footer,
.main-footer,
.footer,
.admin-area .footer-main,
.student-area .footer-main,
.auth-page footer{
  width:100vw!important;
  max-width:100vw!important;
  min-width:100vw!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;

  background:#00D1FE!important;
  background-color:#00D1FE!important;
  background-image:none!important;
  border:0!important;
  border-top:0!important;
  box-shadow:none!important;

  color:#0F2230!important;
  -webkit-text-fill-color:#0F2230!important;
  box-sizing:border-box!important;
}

/* Evita que un contenedor interno vuelva a poner blanco/navy/transparente. */
footer .footer-inner,
.footer-main .footer-inner,
.public-footer .footer-inner,
.site-footer .footer-inner,
.main-footer .footer-inner,
footer > .container,
.footer-main > .container,
.public-footer > .container,
.site-footer > .container,
.main-footer > .container{
  width:100%!important;
  max-width:none!important;
  margin:0!important;

  background:#00D1FE!important;
  background-color:#00D1FE!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Textos del footer: oscuros y legibles sobre cyan. */
footer *,
.footer-main *,
.public-footer *,
.site-footer *,
.main-footer *,
.admin-area .footer-main *,
.student-area .footer-main *{
  color:#0F2230!important;
  -webkit-text-fill-color:#0F2230!important;
  text-shadow:none!important;
  opacity:1!important;
}

/* Enlaces del footer con contraste, sin cambiar el fondo principal. */
footer a,
.footer-main a,
.public-footer a,
.site-footer a,
.main-footer a{
  color:#063E4D!important;
  -webkit-text-fill-color:#063E4D!important;
  font-weight:700!important;
}

/* Botones dentro del footer: glass transparente sobre el cyan principal. */
footer .btn,
.footer-main .btn,
.public-footer .btn,
.site-footer .btn,
.main-footer .btn,
footer a[class*="btn"],
.footer-main a[class*="btn"]{
  background:rgba(255,255,255,.24)!important;
  background-image:none!important;
  border:1px solid rgba(15,34,48,.18)!important;
  color:#0F2230!important;
  -webkit-text-fill-color:#0F2230!important;
  box-shadow:none!important;
}

/* Iconos sociales */
footer .social-icon,
.footer-main .social-icon,
.public-footer .social-icon,
.site-footer .social-icon{
  background:rgba(255,255,255,.24)!important;
  background-image:none!important;
  border:1px solid rgba(15,34,48,.16)!important;
  color:#0F2230!important;
  -webkit-text-fill-color:#0F2230!important;
}

/* Responsive: siempre ancho total en tablet y celular. */
@media(max-width:900px){
  footer,
  .footer-main,
  .public-footer,
  .site-footer,
  .main-footer,
  .footer{
    width:100vw!important;
    min-width:100vw!important;
    max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    background:#00D1FE!important;
  }
}

@media(max-width:640px){
  footer,
  .footer-main,
  .public-footer,
  .site-footer,
  .main-footer,
  .footer{
    padding-left:14px!important;
    padding-right:14px!important;
  }
}


/* ==========================================================================
   V25 — MENÚ ADMIN COMPLETO + BOTÓN IDÉNTICO AL MENÚ PÚBLICO
   ========================================================================== */

/* Ambos botones de menú se ven iguales */
.header-menu-controls .hamburger-btn,
.header-menu-controls .admin-menu-toggle{
  position:relative!important;
  inset:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  padding:0!important;
  margin:0!important;

  background:#00D1FE!important;
  background-image:none!important;
  border:1px solid #00D1FE!important;
  border-radius:12px!important;

  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  box-shadow:0 7px 18px rgba(0,209,254,.16)!important;

  font-size:17px!important;
  line-height:1!important;
  cursor:pointer!important;
  transform:none!important;
}

.header-menu-controls .hamburger-btn i,
.header-menu-controls .admin-menu-toggle i{
  margin:0!important;
  padding:0!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  font-size:17px!important;
  line-height:1!important;
}

.header-menu-controls .hamburger-btn:hover,
.header-menu-controls .admin-menu-toggle:hover,
.header-menu-controls .hamburger-btn:focus,
.header-menu-controls .admin-menu-toggle:focus{
  background:#00BFEA!important;
  border-color:#00BFEA!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  transform:none!important;
}

/* Quita cualquier texto heredado que pudiera volver a aparecer en el botón admin */
.header-menu-controls .admin-menu-toggle span{
  display:none!important;
}

/* --------------------------------------------------------------------------
   MENÚ ADMIN: TODO EL CONTENIDO SIEMPRE ALCANZABLE
   -------------------------------------------------------------------------- */

.admin-area .admin-sidebar{
  min-height:0!important;
  box-sizing:border-box!important;
}

.admin-area .admin-sidebar .admin-nav{
  display:flex!important;
  flex-direction:column!important;
  min-height:max-content!important;
  padding-bottom:34px!important;
  box-sizing:border-box!important;
}

/* PC: el sidebar sigue integrado al layout; NO es overlay.
   Tiene scroll interno invisible para poder llegar a todos los botones. */
@media (min-width:901px){
  .admin-area .panel-layout{
    display:grid!important;
    grid-template-columns:var(--admin-sidebar-w) minmax(0,1fr)!important;
    align-items:start!important;
    min-height:calc(100dvh - var(--actual-header-height))!important;
  }

  .admin-area .panel-layout > .admin-sidebar{
    position:sticky!important;
    top:var(--actual-header-height)!important;
    align-self:start!important;

    width:var(--admin-sidebar-w)!important;
    height:calc(100dvh - var(--actual-header-height))!important;
    min-height:calc(100dvh - var(--actual-header-height))!important;
    max-height:calc(100dvh - var(--actual-header-height))!important;

    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;

    scrollbar-width:none!important;
    -ms-overflow-style:none!important;

    padding-bottom:26px!important;
    box-sizing:border-box!important;
    z-index:20!important;
  }

  .admin-area .panel-layout > .admin-sidebar::-webkit-scrollbar{
    width:0!important;
    height:0!important;
    display:none!important;
  }

  /* Footer no corta ni tapa visualmente el sidebar */
  .admin-area .footer-main{
    position:relative!important;
    z-index:1!important;
  }

  /* Al ocultar el menú en PC, el contenido usa todo el ancho */
  .admin-area.admin-menu-collapsed .panel-layout{
    grid-template-columns:0 minmax(0,1fr)!important;
  }

  .admin-area.admin-menu-collapsed .panel-layout > .admin-sidebar{
    width:0!important;
    min-width:0!important;
    max-width:0!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    overflow:hidden!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    padding:0!important;
    border:0!important;
  }
}

/* Tablet/celular: drawer completo, scroll interno invisible */
@media (max-width:900px){
  .admin-area .panel-layout > .admin-sidebar{
    position:fixed!important;
    top:var(--actual-header-height)!important;
    left:0!important;
    bottom:0!important;

    width:min(88vw,320px)!important;
    height:calc(100dvh - var(--actual-header-height))!important;
    min-height:0!important;
    max-height:calc(100dvh - var(--actual-header-height))!important;

    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;

    scrollbar-width:none!important;
    -ms-overflow-style:none!important;

    padding-bottom:30px!important;
    box-sizing:border-box!important;
  }

  .admin-area .panel-layout > .admin-sidebar::-webkit-scrollbar{
    width:0!important;
    height:0!important;
    display:none!important;
  }

  .admin-area .admin-nav{
    padding-bottom:38px!important;
  }

  /* Mantener ambos botones compactos y simétricos */
  .header-menu-controls .hamburger-btn,
  .header-menu-controls .admin-menu-toggle{
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    border-radius:12px!important;
  }
}

@media (max-width:640px){
  .header-menu-controls .hamburger-btn,
  .header-menu-controls .admin-menu-toggle{
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    height:40px!important;
    min-height:40px!important;
  }

  .admin-area .panel-layout > .admin-sidebar{
    width:min(90vw,310px)!important;
    padding-bottom:34px!important;
  }
}


/* ==========================================================================
   FOOTER UNICOLOR — elimina franjas, líneas y fondos combinados
   ========================================================================== */
:root{
  --footer-solid-color: var(--primary, #00D1FE);
}

.footer-main,
footer.footer-main,
body .footer-main,
.site-wrapper .footer-main,
.admin-area .footer-main{
  background:var(--footer-solid-color)!important;
  background-color:var(--footer-solid-color)!important;
  background-image:none!important;
  border:0!important;
  border-top:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
  outline:0!important;
}

.footer-main::before,
.footer-main::after,
.footer-main .footer-inner::before,
.footer-main .footer-inner::after{
  content:none!important;
  display:none!important;
  background:none!important;
  border:0!important;
}

.footer-main .footer-inner,
.footer-main .footer-container,
.footer-main .footer-content,
.footer-main .container,
.footer-main .copyright,
.footer-main .footer-bottom{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-top:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
  outline:0!important;
}

.footer-main hr,
.footer-main .divider,
.footer-main .separator,
.footer-main [class*="line"]{
  border-color:transparent!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* El footer conserva el ancho total del dispositivo */
.footer-main{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}


/* ==========================================================================
   V27 — FOOTER UNICOLOR RESPONSIVE TOTAL
   Computadora / laptop / tablet / celular
   ========================================================================== */

.footer-main,
footer.footer-main{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:28px 20px 20px!important;
  box-sizing:border-box!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;

  background:var(--footer-solid-color)!important;
  background-color:var(--footer-solid-color)!important;
  background-image:none!important;

  border:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
}

/* Contenedores internos */
.footer-main .footer-inner,
.footer-main .footer-container,
.footer-main .footer-content,
.footer-main .container{
  width:100%!important;
  max-width:1180px!important;
  margin:0 auto!important;
  padding:0!important;
  box-sizing:border-box!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;

  text-align:center!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Título/marca */
.footer-main h1,
.footer-main h2,
.footer-main h3,
.footer-main .footer-brand,
.footer-main .brand-name{
  margin:0!important;
  max-width:100%!important;
  text-align:center!important;
  font-size:clamp(20px,2vw,30px)!important;
  line-height:1.2!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
}

/* Textos */
.footer-main p,
.footer-main .footer-description,
.footer-main .copyright,
.footer-main small{
  max-width:900px!important;
  margin:0 auto!important;
  text-align:center!important;
  font-size:clamp(12px,1.2vw,16px)!important;
  line-height:1.5!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
}

/* Enlaces / navegación */
.footer-main nav,
.footer-main .footer-links,
.footer-main .footer-menu,
.footer-main .social-links{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:8px 12px!important;
  margin:0!important;
  padding:0!important;
}

.footer-main a{
  max-width:100%!important;
  min-height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:7px 12px!important;
  box-sizing:border-box!important;

  white-space:normal!important;
  text-align:center!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
}

/* Copyright siempre centrado y sin línea/fondo distinto */
.footer-main .copyright,
.footer-main .footer-bottom{
  width:100%!important;
  max-width:100%!important;
  padding:8px 0 0!important;
  margin:0!important;

  text-align:center!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* ---------- Tablet ---------- */
@media (max-width:900px){
  .footer-main,
  footer.footer-main{
    padding:24px 16px 18px!important;
  }

  .footer-main .footer-inner,
  .footer-main .footer-container,
  .footer-main .footer-content,
  .footer-main .container{
    gap:12px!important;
  }

  .footer-main nav,
  .footer-main .footer-links,
  .footer-main .footer-menu,
  .footer-main .social-links{
    gap:8px!important;
  }
}

/* ---------- Celular ---------- */
@media (max-width:640px){
  .footer-main,
  footer.footer-main{
    padding:22px 12px 16px!important;
  }

  .footer-main h1,
  .footer-main h2,
  .footer-main h3,
  .footer-main .footer-brand,
  .footer-main .brand-name{
    font-size:20px!important;
    line-height:1.25!important;
  }

  .footer-main p,
  .footer-main .footer-description,
  .footer-main .copyright,
  .footer-main small{
    font-size:13px!important;
    line-height:1.45!important;
    padding-left:2px!important;
    padding-right:2px!important;
  }

  .footer-main nav,
  .footer-main .footer-links,
  .footer-main .footer-menu{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    max-width:360px!important;
  }

  .footer-main nav a,
  .footer-main .footer-links a,
  .footer-main .footer-menu a{
    width:100%!important;
    min-width:0!important;
    min-height:40px!important;
    padding:8px 6px!important;
    font-size:13px!important;
  }

  .footer-main .social-links{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
  }
}

/* ---------- Celular muy angosto ---------- */
@media (max-width:380px){
  .footer-main,
  footer.footer-main{
    padding:20px 10px 14px!important;
  }

  .footer-main nav,
  .footer-main .footer-links,
  .footer-main .footer-menu{
    grid-template-columns:1fr!important;
    max-width:280px!important;
  }

  .footer-main nav a,
  .footer-main .footer-links a,
  .footer-main .footer-menu a{
    min-height:42px!important;
    font-size:13px!important;
  }

  .footer-main h1,
  .footer-main h2,
  .footer-main h3,
  .footer-main .footer-brand,
  .footer-main .brand-name{
    font-size:18px!important;
  }

  .footer-main p,
  .footer-main .footer-description,
  .footer-main .copyright,
  .footer-main small{
    font-size:12.5px!important;
  }
}


/* ==========================================================================
   V28 — BOTONES DE MENÚ DENTRO DEL HEADER
   ========================================================================== */

/* El header es el único contenedor superior */
.navbar-main{
  position:sticky!important;
  top:0!important;
  z-index:5000!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  overflow:visible!important;
}

/* No crear franja separada para los botones */
.header-menu-controls{
  position:static!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  margin:0!important;
  padding:0!important;
  min-width:max-content!important;
  z-index:auto!important;
}

/* Ambos botones viven dentro del header */
.header-menu-controls .hamburger-btn,
.header-menu-controls .admin-menu-toggle{
  position:static!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  margin:0!important;
  flex:0 0 44px!important;

  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  height:44px!important;
  min-height:44px!important;

  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  background:#00D1FE!important;
  background-image:none!important;
  border:1px solid #00D1FE!important;
  border-radius:12px!important;

  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  box-shadow:0 7px 18px rgba(0,209,254,.16)!important;
}

.header-menu-controls .hamburger-btn i,
.header-menu-controls .admin-menu-toggle i{
  margin:0!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  font-size:17px!important;
}

/* Layout desktop */
.navbar-main .navbar-inner{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  padding:10px 16px!important;
  box-sizing:border-box!important;

  display:grid!important;
  grid-template-columns:auto minmax(180px,1fr) auto!important;
  grid-template-areas:"controls brand actions"!important;
  align-items:center!important;
  gap:12px!important;
}

.header-menu-controls{grid-area:controls!important;}
.navbar-main .navbar-brand{grid-area:brand!important;}
.navbar-main .navbar-actions{grid-area:actions!important;}

/* Laptop/tablet: botones siguen dentro del header */
@media (max-width:1180px){
  .navbar-main .navbar-inner{
    grid-template-columns:auto minmax(0,1fr)!important;
    grid-template-areas:
      "controls brand"
      "actions actions"!important;
    row-gap:8px!important;
  }
}

/* Celular: controles + marca arriba, acciones debajo */
@media (max-width:640px){
  .navbar-main .navbar-inner{
    grid-template-columns:auto minmax(0,1fr)!important;
    grid-template-areas:
      "controls brand"
      "actions actions"!important;
    gap:7px!important;
    padding:7px!important;
  }

  .header-menu-controls{
    gap:5px!important;
  }

  .header-menu-controls .hamburger-btn,
  .header-menu-controls .admin-menu-toggle{
    flex-basis:40px!important;
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    height:40px!important;
    min-height:40px!important;
  }
}


/* ==========================================================================
   V29 — FOOTER UNICOLOR + BOTONES DE ALTO CONTRASTE
   ========================================================================== */
:root{
  --footer-primary:#00D1FE;
  --footer-button:#063E4D;
  --footer-button-hover:#0F2230;
  --footer-text:#0F2230;
}

/* TODO el footer, incluyendo copyright, usa UN SOLO fondo */
footer,
.footer-main,
.public-footer,
.site-footer,
.main-footer,
.footer,
.footer-main .footer-inner,
.footer-main .footer-container,
.footer-main .footer-content,
.footer-main .container,
.footer-main .footer-bottom,
.footer-main .copyright,
.public-footer .footer-inner,
.public-footer .footer-bottom,
.public-footer .copyright,
.site-footer .footer-inner,
.site-footer .footer-bottom,
.site-footer .copyright{
  background:#00D1FE!important;
  background-color:#00D1FE!important;
  background-image:none!important;
  border:0!important;
  border-top:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
  outline:0!important;
}

/* Elimina cualquier franja o pseudo-elemento que pueda crear otro tono */
footer::before,
footer::after,
.footer-main::before,
.footer-main::after,
.footer-main .footer-inner::before,
.footer-main .footer-inner::after,
.footer-main .footer-bottom::before,
.footer-main .footer-bottom::after,
.footer-main .copyright::before,
.footer-main .copyright::after{
  content:none!important;
  display:none!important;
  background:none!important;
  border:0!important;
}

/* Textos del footer */
footer,
.footer-main,
.footer-main p,
.footer-main h1,
.footer-main h2,
.footer-main h3,
.footer-main strong,
.footer-main span,
.footer-main small,
.footer-main .copyright,
.footer-main .footer-bottom{
  color:#0F2230!important;
  -webkit-text-fill-color:#0F2230!important;
  text-shadow:none!important;
}

/* Botones/enlaces del footer: sólidos, oscuros y claramente visibles */
.footer-main nav a,
.footer-main .footer-links a,
.footer-main .footer-menu a,
.footer-main a.footer-link,
.public-footer nav a,
.site-footer nav a{
  background:#063E4D!important;
  background-color:#063E4D!important;
  background-image:none!important;
  border:1px solid #063E4D!important;
  border-radius:12px!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  font-weight:700!important;
  box-shadow:0 6px 16px rgba(6,62,77,.18)!important;
  text-decoration:none!important;
}

.footer-main nav a *,
.footer-main .footer-links a *,
.footer-main .footer-menu a *,
.footer-main a.footer-link *,
.public-footer nav a *,
.site-footer nav a *{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
}

/* Hover de botones footer */
.footer-main nav a:hover,
.footer-main .footer-links a:hover,
.footer-main .footer-menu a:hover,
.footer-main a.footer-link:hover,
.public-footer nav a:hover,
.site-footer nav a:hover{
  background:#0F2230!important;
  background-color:#0F2230!important;
  border-color:#0F2230!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
}

/* Redes sociales: mismo contraste, forma circular */
.footer-main .social-links a,
.footer-main a.social-icon,
.public-footer .social-links a,
.site-footer .social-links a{
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  padding:0!important;
  border-radius:50%!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#063E4D!important;
  border:1px solid #063E4D!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
}

.footer-main .social-links a *,
.footer-main a.social-icon *,
.public-footer .social-links a *,
.site-footer .social-links a *{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
}

/* Copyright sin banda diferente */
.footer-main .copyright,
.footer-main .footer-bottom{
  width:100%!important;
  padding-top:10px!important;
  margin-top:0!important;
  background:#00D1FE!important;
  border:0!important;
  box-shadow:none!important;
}

/* Responsive: mantiene un solo color y botones bien distribuidos */
@media(max-width:640px){
  .footer-main nav,
  .footer-main .footer-links,
  .footer-main .footer-menu{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    max-width:360px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .footer-main nav a,
  .footer-main .footer-links a,
  .footer-main .footer-menu a{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    text-align:center!important;
  }
}

@media(max-width:380px){
  .footer-main nav,
  .footer-main .footer-links,
  .footer-main .footer-menu{
    grid-template-columns:1fr!important;
    max-width:280px!important;
  }
}


/* V30 — Colores originales de redes sociales en footer */
.footer-main .social-links a[href*="wa.me"],
.footer-main .social-links a[href*="whatsapp"],
.footer-main a.social-icon[href*="wa.me"],
.footer-main a.social-icon[href*="whatsapp"],
.public-footer .social-links a[href*="wa.me"],
.public-footer .social-links a[href*="whatsapp"],
.site-footer .social-links a[href*="wa.me"],
.site-footer .social-links a[href*="whatsapp"]{
  background:#25D366!important;
  background-color:#25D366!important;
  border-color:#25D366!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  box-shadow:0 6px 16px rgba(37,211,102,.25)!important;
}

.footer-main .social-links a[href*="t.me"],
.footer-main .social-links a[href*="telegram"],
.footer-main a.social-icon[href*="t.me"],
.footer-main a.social-icon[href*="telegram"],
.public-footer .social-links a[href*="t.me"],
.public-footer .social-links a[href*="telegram"],
.site-footer .social-links a[href*="t.me"],
.site-footer .social-links a[href*="telegram"]{
  background:#229ED9!important;
  background-color:#229ED9!important;
  border-color:#229ED9!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  box-shadow:0 6px 16px rgba(34,158,217,.25)!important;
}

.footer-main .social-links a[href*="wa.me"]:hover,
.footer-main .social-links a[href*="whatsapp"]:hover{
  background:#1EBE5D!important;
  border-color:#1EBE5D!important;
}
.footer-main .social-links a[href*="t.me"]:hover,
.footer-main .social-links a[href*="telegram"]:hover{
  background:#168AC1!important;
  border-color:#168AC1!important;
}


/* ==========================================================================
   V31 — FOOTER PREMIUM UNICOLOR + HEADER EN UNA SOLA LÍNEA
   ========================================================================== */
:root{
  --v31-primary:#00D1FE;
  --v31-primary-dark:#008EAA;
  --v31-footer-text:#0F2230;
}

/* HEADER / INDEX: una sola línea, sin franja superior separada */
.navbar-main{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  box-shadow:0 8px 24px rgba(15,34,48,.06)!important;
}
.navbar-main .navbar-inner{
  min-height:72px!important;
  width:100%!important;
  max-width:none!important;
  padding:10px 16px!important;
  display:grid!important;
  grid-template-columns:auto minmax(220px,1fr) auto!important;
  grid-template-areas:"controls brand actions"!important;
  align-items:center!important;
  gap:12px!important;
}
.header-menu-controls{
  grid-area:controls!important;
  position:static!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  margin:0!important;
  padding:0!important;
}
.header-menu-controls .hamburger-btn,
.header-menu-controls .admin-menu-toggle{
  position:static!important;
  inset:auto!important;
  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  padding:0!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:var(--v31-primary)!important;
  border:1px solid var(--v31-primary)!important;
  border-radius:12px!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.navbar-main .navbar-brand{
  grid-area:brand!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  font-size:clamp(18px,1.55vw,24px)!important;
  line-height:1.1!important;
  font-weight:800!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.navbar-main .navbar-brand img{
  width:auto!important;
  height:auto!important;
  max-width:140px!important;
  max-height:42px!important;
  object-fit:contain!important;
  flex:0 0 auto!important;
}
.navbar-main .navbar-brand-name{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.navbar-main .navbar-actions{
  grid-area:actions!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
  flex-wrap:nowrap!important;
}

/* Laptop/tablet: sigue siendo una sola línea; compacta controles */
@media(max-width:1100px) and (min-width:701px){
  .navbar-main .navbar-inner{
    grid-template-columns:auto minmax(160px,1fr) auto!important;
    gap:8px!important;
    padding:8px 10px!important;
  }
  .navbar-main .navbar-brand{
    font-size:18px!important;
  }
  .navbar-main .navbar-actions{
    gap:5px!important;
  }
  .navbar-main .navbar-actions > *{
    padding:7px 8px!important;
    font-size:12px!important;
  }
}

/* Móvil: una sola línea superior y acciones compactas; si no caben, permiten wrap debajo dentro del MISMO header */
@media(max-width:700px){
  .navbar-main .navbar-inner{
    grid-template-columns:auto minmax(0,1fr)!important;
    grid-template-areas:
      "controls brand"
      "actions actions"!important;
    gap:7px!important;
    padding:7px!important;
  }
  .navbar-main .navbar-brand{
    font-size:16px!important;
    white-space:nowrap!important;
  }
  .navbar-main .navbar-brand img{
    max-width:88px!important;
    max-height:32px!important;
  }
  .navbar-main .navbar-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .navbar-main .user-greeting{
    display:none!important;
  }
  .navbar-main .navbar-actions > *{
    width:100%!important;
    min-width:0!important;
    min-height:40px!important;
    padding:7px 6px!important;
    font-size:11.5px!important;
    white-space:normal!important;
    text-align:center!important;
    justify-content:center!important;
  }
}

/* FOOTER: un solo color real, sin segunda franja */
footer,
.footer,
.footer-main,
.public-footer,
.site-footer,
.main-footer,
footer .footer-inner,
.footer-main .footer-inner,
.footer-main .footer-container,
.footer-main .footer-content,
.footer-main .container,
.footer-main .footer-bottom,
.footer-main .copyright{
  background:var(--v31-primary)!important;
  background-color:var(--v31-primary)!important;
  background-image:none!important;
  border:0!important;
  border-top:0!important;
  border-bottom:0!important;
  outline:0!important;
  box-shadow:none!important;
}
footer::before,footer::after,
.footer-main::before,.footer-main::after,
.footer-main .footer-bottom::before,.footer-main .footer-bottom::after,
.footer-main .copyright::before,.footer-main .copyright::after{
  content:none!important;
  display:none!important;
}
.footer-main{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:34px 18px 20px!important;
  box-sizing:border-box!important;
  text-align:center!important;
}
.footer-main .footer-inner,
.footer-main .footer-container,
.footer-main .footer-content,
.footer-main .container{
  width:100%!important;
  max-width:1180px!important;
  margin:0 auto!important;
  padding:0!important;
}
.footer-main h1,.footer-main h2,.footer-main h3,
.footer-main p,.footer-main span,.footer-main strong,
.footer-main small,.footer-main .copyright,.footer-main .footer-bottom{
  color:var(--v31-footer-text)!important;
  -webkit-text-fill-color:var(--v31-footer-text)!important;
  text-shadow:none!important;
}
.footer-main .copyright,
.footer-main .footer-bottom{
  margin-top:18px!important;
  padding:0!important;
  background:var(--v31-primary)!important;
  border:0!important;
}

/* Botones de navegación del footer: sólidos oscuros */
.footer-main nav a,
.footer-main .footer-links a,
.footer-main .footer-menu a{
  background:#063E4D!important;
  border:1px solid #063E4D!important;
  border-radius:12px!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  box-shadow:0 6px 16px rgba(6,62,77,.18)!important;
  text-decoration:none!important;
}
.footer-main nav a *,
.footer-main .footer-links a *,
.footer-main .footer-menu a *{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
}

/* WhatsApp original */
.footer-main a[href*="wa.me"],
.footer-main a[href*="whatsapp"]{
  background:#25D366!important;
  border-color:#25D366!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
}
/* Telegram original */
.footer-main a[href*="t.me"],
.footer-main a[href*="telegram"]{
  background:#229ED9!important;
  border-color:#229ED9!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
}

/* Redes redondas y visibles */
.footer-main .social-links a,
.footer-main a.social-icon{
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  padding:0!important;
  border-radius:50%!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.footer-main .social-links a *,
.footer-main a.social-icon *{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
}

/* Responsive footer */
@media(max-width:640px){
  .footer-main{
    padding:26px 12px 18px!important;
  }
  .footer-main nav,
  .footer-main .footer-links,
  .footer-main .footer-menu{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    max-width:360px!important;
    margin:0 auto!important;
  }
  .footer-main nav a,
  .footer-main .footer-links a,
  .footer-main .footer-menu a{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    justify-content:center!important;
  }
}
@media(max-width:380px){
  .footer-main nav,
  .footer-main .footer-links,
  .footer-main .footer-menu{
    grid-template-columns:1fr!important;
    max-width:280px!important;
  }
}


/* ==========================================================================
   V32 — RESTAURACIÓN SEGURA DE BOTONES DE MENÚ
   Solo botones. No altera footer, logo, auth, cursos ni paleta.
   ========================================================================== */
.header-menu-controls{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  min-width:max-content!important;
}
.header-menu-controls .hamburger-btn,
.header-menu-controls .admin-menu-toggle{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:static!important;
  inset:auto!important;
  margin:0!important;
  padding:0!important;
  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  flex:0 0 44px!important;
  background:#00D1FE!important;
  background-image:none!important;
  border:1px solid #00D1FE!important;
  border-radius:12px!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  box-shadow:0 7px 18px rgba(0,209,254,.16)!important;
  z-index:auto!important;
}
.header-menu-controls .hamburger-btn i,
.header-menu-controls .admin-menu-toggle i{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  font-size:17px!important;
  line-height:1!important;
  margin:0!important;
}
@media(max-width:640px){
  .header-menu-controls .hamburger-btn,
  .header-menu-controls .admin-menu-toggle{
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    flex-basis:40px!important;
  }
}


/* V34 — Footer común unicolor. Solo footer. */
.footer-main,
.footer-main .footer-inner,
.footer-main .footer-container,
.footer-main .footer-content,
.footer-main .container,
.footer-main .footer-bottom,
.footer-main .copyright{
  background:#00D1FE!important;
  background-color:#00D1FE!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}
.footer-main::before,
.footer-main::after{
  content:none!important;
  display:none!important;
}
.footer-main .copyright,
.footer-main .footer-bottom{
  color:#102331!important;
  -webkit-text-fill-color:#102331!important;
}


/* LOGO — COLOCACIÓN RESPONSIVE. No altera paleta ni layout general. */
.admin-area .admin-brand-icon{
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  border-radius:10px!important;
  overflow:hidden!important;
}
.admin-area .admin-brand-logo-img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:10px!important;
}
@media(max-width:640px){
  .admin-area .admin-brand-icon{
    width:38px!important;min-width:38px!important;height:38px!important;flex-basis:38px!important;
    border-radius:9px!important;
  }
  .admin-area .admin-brand-logo-img{border-radius:9px!important}
}


/* ==========================================================================
   V33 — SIDEBAR ADMIN PEGADO A HEADER Y FOOTER
   Corrección exclusiva del área administrativa.
   ========================================================================== */

/*
   El header administrativo actual es sticky y ya ocupa su altura dentro del
   flujo. No se debe reservar una segunda vez --fixed-header-h en main-content.
*/
.admin-area .main-content{
  padding-top:0!important;
  margin-top:0!important;
}

/* El layout comienza inmediatamente al terminar el header. */
.admin-area .panel-layout{
  margin-top:0!important;
  padding-top:0!important;
}

/* Sin bloque de marca duplicado, la navegación empieza desde arriba. */
.admin-area .admin-sidebar{
  margin-top:0!important;
  border-top:0!important;
  border-radius:0!important;
}
.admin-area .admin-sidebar .admin-nav{
  margin-top:0!important;
}

/* PC: el sidebar toca visualmente el header y ocupa toda la franja hasta
   el borde inferior visible; el footer comienza inmediatamente después. */
@media (min-width:901px){
  .admin-area .panel-layout{
    min-height:calc(100dvh - var(--actual-header-height))!important;
    align-items:stretch!important;
  }

  .admin-area .panel-layout > .admin-sidebar{
    top:var(--actual-header-height)!important;
    height:calc(100dvh - var(--actual-header-height))!important;
    min-height:calc(100dvh - var(--actual-header-height))!important;
    max-height:calc(100dvh - var(--actual-header-height))!important;
  }

  .admin-area .footer-main{
    margin-top:0!important;
  }
}

/* Tablet/celular: no crear franja vacía entre header y contenido. */
@media (max-width:900px){
  .admin-area .main-content{
    padding-top:0!important;
  }
  .admin-area .panel-layout{
    margin-top:0!important;
  }
}


/* ==========================================================================
   V34 — CONTINUIDAD VISUAL SIDEBAR ADMIN HASTA FOOTER
   Corrección exclusiva del hueco inferior mostrado en Admin.
   ========================================================================== */

/*
   El sidebar real se mantiene sticky para no alterar navegación.
   La columna visual del sidebar se prolonga durante TODA la altura del
   panel-layout, hasta tocar exactamente el inicio del footer.
   Así no queda la franja de fondo de página debajo del menú.
*/
@media (min-width:901px){
  .admin-area .panel-layout{
    position:relative!important;
    isolation:isolate!important;
  }

  .admin-area .panel-layout::before{
    content:""!important;
    position:absolute!important;
    z-index:0!important;
    top:0!important;
    bottom:0!important;
    left:0!important;
    width:var(--admin-sidebar-w)!important;
    background:rgba(255,255,255,.54)!important;
    border-right:1px solid rgba(255,255,255,.70)!important;
    box-shadow:10px 0 28px rgba(9,55,106,.08)!important;
    pointer-events:none!important;
  }

  .admin-area .panel-layout > .admin-sidebar{
    z-index:20!important;
    background:rgba(255,255,255,.54)!important;
  }

  .admin-area .panel-layout > .content,
  .admin-area .panel-layout > main,
  .admin-area .panel-layout > section{
    position:relative!important;
    z-index:1!important;
  }

  .admin-area .footer-main{
    position:relative!important;
    z-index:30!important;
    margin-top:0!important;
  }
}

/* En móvil/tablet el sidebar es tipo drawer y no debe dibujarse una columna fija. */
@media (max-width:900px){
  .admin-area .panel-layout::before{
    content:none!important;
    display:none!important;
  }
}


/* ==========================================================================
   V35 — MENÚ ADMIN ADAPTABLE ENTRE HEADER Y FOOTER
   Distribuye las secciones del menú en toda la altura útil sin dejar
   un bloque vacío grande antes del footer.
   ========================================================================== */
@media (min-width:901px){
  .admin-area .panel-layout > .admin-sidebar{
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;
    align-self:stretch!important;
    position:relative!important;
    top:auto!important;
    overflow:visible!important;
  }

  .admin-area .admin-sidebar .admin-nav-adaptive{
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    gap:clamp(8px,1.3vh,18px)!important;
    min-height:calc(100dvh - var(--actual-header-height))!important;
    height:100%!important;
    padding:10px 8px 12px!important;
  }

  .admin-area .admin-nav-adaptive .admin-nav-section{
    display:flex!important;
    flex-direction:column!important;
    gap:clamp(2px,.35vh,6px)!important;
    min-width:0!important;
  }

  .admin-area .admin-nav-adaptive .admin-nav-section-tools{
    margin-top:auto!important;
  }

  .admin-area .admin-nav-adaptive .admin-nav-label{
    margin-top:0!important;
    margin-bottom:2px!important;
  }

  .admin-area .admin-nav-adaptive .admin-nav-section > a{
    margin-top:0!important;
    margin-bottom:0!important;
  }
}

/* En pantallas de poca altura se prioriza acceso a todas las opciones:
   el menú vuelve a scroll vertical sin comprimir ni ocultar botones. */


@media (max-width:900px){
  .admin-area .admin-sidebar .admin-nav-adaptive{
    display:block!important;
    min-height:0!important;
    height:auto!important;
    padding:8px!important;
  }

  .admin-area .admin-nav-adaptive .admin-nav-section{
    display:block!important;
  }
}


/* ==========================================================================
   V36 — SIDEBAR ADMIN SIN LÍMITE ARTIFICIAL DE ALTURA
   El menú usa toda la altura real entre header y footer.
   ========================================================================== */
@media (min-width:901px){
  .admin-area .panel-layout{
    align-items:stretch!important;
  }

  .admin-area .panel-layout > .admin-sidebar{
    position:relative!important;
    top:auto!important;
    bottom:auto!important;
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;
    overflow:visible!important;
    align-self:stretch!important;
  }

  .admin-area .admin-sidebar .admin-nav-adaptive{
    height:100%!important;
    min-height:100%!important;
    max-height:none!important;
    overflow:visible!important;
    justify-content:space-between!important;
  }

  /* La última sección puede ocupar la parte inferior real del sidebar
     sin activar scroll por una altura de viewport artificial. */
  .admin-area .admin-nav-adaptive .admin-nav-section-tools{
    margin-top:auto!important;
  }
}

/* Scroll solo cuando el navegador realmente no tiene espacio vertical
   suficiente para mostrar todas las opciones, no por un límite fijo. */
@media (min-width:901px){
  .admin-area .admin-sidebar{
    scrollbar-gutter:stable;
  }
}


/* ==========================================================================
   V37 — OPCIONES DEL MENÚ ADMIN SIEMPRE JUNTAS
   El fondo del sidebar puede extenderse hasta el footer, pero las opciones
   permanecen consecutivas sin huecos artificiales entre secciones.
   ========================================================================== */
@media (min-width:901px){
  .admin-area .admin-sidebar .admin-nav-adaptive{
    justify-content:flex-start!important;
    align-content:flex-start!important;
    gap:0!important;
  }

  .admin-area .admin-nav-adaptive .admin-nav-section{
    margin:0!important;
    padding:0!important;
    gap:0!important;
  }

  .admin-area .admin-nav-adaptive .admin-nav-section + .admin-nav-section{
    margin-top:6px!important;
  }

  .admin-area .admin-nav-adaptive .admin-nav-section-tools{
    margin-top:6px!important;
  }

  .admin-area .admin-nav-adaptive .admin-nav-label{
    margin-top:0!important;
    margin-bottom:2px!important;
  }

  .admin-area .admin-nav-adaptive .admin-nav-section > a{
    margin-top:0!important;
    margin-bottom:0!important;
  }
}

/* En móvil/tablet conservar las opciones también consecutivas. */
@media (max-width:900px){
  .admin-area .admin-nav-adaptive .admin-nav-section-tools{
    margin-top:0!important;
  }
}


/* ==========================================================================
   V39 — BOTONES DE DESCARGA MODERNOS EN LECCIONES
   ========================================================================== */
.lesson-actions .lesson-download-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  min-height:46px!important;
  padding:9px 16px 9px 10px!important;
  border:1px solid rgba(0,196,235,.30)!important;
  border-radius:13px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(237,251,255,.96))!important;
  box-shadow:0 7px 20px rgba(15,23,42,.07),inset 0 1px 0 rgba(255,255,255,.90)!important;
  color:var(--primary-color)!important;
  font-weight:700!important;
  letter-spacing:.01em!important;
  text-decoration:none!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease!important;
}

.lesson-actions .lesson-download-btn .lesson-download-icon{
  width:30px!important;
  height:30px!important;
  flex:0 0 30px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:9px!important;
  background:linear-gradient(135deg,var(--primary-color),#00b6df)!important;
  color:#fff!important;
  box-shadow:0 5px 12px rgba(0,193,232,.22)!important;
}

.lesson-actions .lesson-download-btn .lesson-download-icon i{
  font-size:.88rem!important;
  line-height:1!important;
}

.lesson-actions .lesson-download-btn:hover,
.lesson-actions .lesson-download-btn:focus-visible{
  transform:translateY(-2px)!important;
  border-color:rgba(0,196,235,.55)!important;
  background:#fff!important;
  box-shadow:0 11px 26px rgba(15,23,42,.11),0 0 0 3px rgba(0,209,254,.08)!important;
}

.lesson-actions .lesson-download-btn:active{
  transform:translateY(0)!important;
}

@media (max-width:640px){
  .lesson-actions .lesson-download-btn{
    width:100%!important;
    justify-content:flex-start!important;
    min-height:48px!important;
  }
}

/* V40 — Botón de descarga verde elegante */
.lesson-actions .lesson-download-btn{
  color:#087a45!important;
  border:1px solid rgba(16,185,129,.38)!important;
  background:linear-gradient(135deg,#ffffff 0%,#f0fdf7 100%)!important;
  box-shadow:0 8px 22px rgba(5,120,70,.10),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
.lesson-actions .lesson-download-btn .lesson-download-icon{
  background:linear-gradient(135deg,#16a76a 0%,#078447 100%)!important;
  color:#fff!important;
  box-shadow:0 5px 14px rgba(5,120,70,.24)!important;
}
.lesson-actions .lesson-download-btn:hover,
.lesson-actions .lesson-download-btn:focus-visible{
  color:#05683a!important;
  border-color:rgba(5,150,85,.62)!important;
  background:linear-gradient(135deg,#f8fffb 0%,#e8fbf1 100%)!important;
  box-shadow:0 12px 28px rgba(5,120,70,.16),0 0 0 3px rgba(16,185,129,.10)!important;
}



/* V41 — Botón de descarga completamente verde, texto e icono blancos */
.lesson-actions .lesson-download-btn{
  color:#fff!important;
  border:1px solid rgba(4,120,70,.42)!important;
  background:linear-gradient(135deg,#18a866 0%,#078447 52%,#056b3b 100%)!important;
  box-shadow:0 9px 22px rgba(5,120,70,.22),inset 0 1px 0 rgba(255,255,255,.18)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.08)!important;
}
.lesson-actions .lesson-download-btn span,
.lesson-actions .lesson-download-btn i{
  color:#fff!important;
}
.lesson-actions .lesson-download-btn .lesson-download-icon{
  background:rgba(255,255,255,.14)!important;
  border:1px solid rgba(255,255,255,.20)!important;
  color:#fff!important;
  box-shadow:none!important;
}
.lesson-actions .lesson-download-btn:hover,
.lesson-actions .lesson-download-btn:focus-visible{
  color:#fff!important;
  border-color:rgba(3,105,61,.55)!important;
  background:linear-gradient(135deg,#159b5e 0%,#067b42 52%,#045f35 100%)!important;
  box-shadow:0 13px 28px rgba(5,120,70,.30),0 0 0 3px rgba(16,185,129,.12)!important;
  transform:translateY(-2px)!important;
}
.lesson-actions .lesson-download-btn:hover span,
.lesson-actions .lesson-download-btn:hover i,
.lesson-actions .lesson-download-btn:focus-visible span,
.lesson-actions .lesson-download-btn:focus-visible i{
  color:#fff!important;
}