:root{
  --azul:#295c88; --azul-osc:#214c70; --verde:#a6ca46; --gris:#5b6573;
  --linea:#e2e6ee; --fondo:#eef1f6; --rojo:#c0392b;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--fondo);color:#0f1620}
a{color:var(--azul);text-decoration:none}

/* Login / instalar */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{background:#fff;border-radius:16px;box-shadow:0 12px 40px rgba(15,22,32,.12);width:100%;max-width:400px;overflow:hidden}
.auth-card .top{background:var(--azul);color:#fff;padding:24px 28px;text-align:center}
.auth-card .top img{height:64px;margin-bottom:8px}
.auth-card .top h1{margin:0;font-size:1.15rem}
.auth-card .body{padding:24px 28px}

/* ---- Login dividido en dos (2026-08-15, pedido explícito de Jorge):
   antes la tarjeta de login era angosta y centrada, sin ninguna
   identidad de marca visible. Ahora, en pantallas anchas, se divide en
   2 mitades -- izquierda con el logo/color de la institución (los
   mismos configurables de siempre, nunca un logo fijo), derecha con el
   MISMO formulario de siempre, sin tocar su lógica. En pantallas
   angostas, se apila: la franja de marca queda arriba, compacta, y el
   formulario debajo. ---- */
.login-split{min-height:100vh;display:flex}
.login-marca{flex:1;background:var(--azul);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center}
/* 🔴 CORREGIDO (2026-08-15, pedido explícito de Jorge): el logo era muy
   chico y la leyenda apenas se notaba. Logo más grande y responsivo real
   (por ancho, no solo alto -- así crece de verdad en pantallas anchas
   sin quedar diminuto), y la leyenda con tratamiento de LEMA: más grande,
   con un poco de espaciado entre letras, para que se lea como una frase
   institucional y no como una nota al pie. */
.login-marca img{width:min(220px,60%);max-height:180px;height:auto;object-fit:contain;margin-bottom:28px;
  /* 🔴 AGREGADO (2026-08-15, pedido explícito de Jorge, confirmado con 3
     ejemplos reales comparados antes de aplicar) — el logo transparente
     de Totalisys College tiene el texto "Totalisys College" en azul
     oscuro, casi invisible sobre este mismo azul de fondo. En vez de
     ponerle una placa blanca sólida detrás (eso es justo lo que Jorge
     quería evitar con la versión transparente), se apilan varias sombras
     blancas suaves alrededor de cada forma opaca del PNG -- el efecto es
     un halo/contorno claro que separa el logo del fondo, sin ningún
     recuadro. */
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 4px #fff);
}
.login-marca .leyenda{font-size:1.25rem;font-weight:500;letter-spacing:.01em;color:#eaf2fb;max-width:380px;line-height:1.5;margin:0}
.login-form-lado{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--fondo)}
/* 🔴 AGREGADO (2026-08-15): el logo de la institución dentro de la barra
   azul del formulario -- tamaño mediano, visible pero sin competir con el
   logo permanente del software (grande, panel izquierdo). */
.login-top-logo-institucion img{height:40px;max-width:70%;object-fit:contain;margin-bottom:8px}
.login-top-logo-institucion h1{margin:0;font-size:1.05rem}
@media (max-width:760px){
  .login-split{flex-direction:column;min-height:0}
  .login-marca{padding:28px 20px;flex:none}
  .login-marca img{width:min(160px,55%);max-height:110px;margin-bottom:14px;filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff)}
  .login-marca .leyenda{font-size:1.05rem;max-width:280px}
  .login-form-lado{flex:none;padding:24px 16px 40px}
}

/* ===== Layout con barra lateral de dependencias =====
   Sidebar compacto: sizing calculado para caber ~14 modulos en un
   viewport de 800px (12 actuales + 3 futuros con holgura).
   Antes: dep con svg 24px + padding 9px + gap 8px = ~69px por modulo
          → tope ~11 modulos en 800px
   Ahora: dep con svg 20px + padding 7px + gap 6px = ~56px por modulo
          → tope ~14 modulos en 800px
*/
.layout{display:flex;min-height:100vh}
.sidebar{width:72px;background:var(--azul-osc);display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0;position:sticky;top:0;height:100vh;flex:none;overflow-y:auto;scrollbar-width:thin}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}
.sidebar .side-logo{width:34px;height:34px;object-fit:contain;background:#fff;border-radius:8px;padding:3px;margin-bottom:4px;flex:none}
.sidebar .dep{width:54px;padding:7px 0;border-radius:10px;color:#cbd8e6;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.6rem;text-align:center;flex:none;line-height:1.15}
.sidebar .dep svg{width:20px;height:20px}
.sidebar .dep:hover{background:rgba(255,255,255,.12);color:#fff}
.sidebar .dep.on{background:var(--azul);color:#fff}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--azul);color:#fff;display:flex;align-items:center;gap:10px;padding:8px 16px;position:sticky;top:0;z-index:20}
.topbar .tabs{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.topbar .tabs::-webkit-scrollbar{height:0}
.topbar .tabs a{color:#fff;padding:8px 13px;border-radius:8px;font-size:.9rem;white-space:nowrap}
.topbar .tabs a:hover{background:rgba(255,255,255,.14)}
.topbar .tabs a.activo{background:rgba(255,255,255,.24)}

.usermenu{position:relative;flex:none}
.usermenu .ubtn{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:0;color:#fff;border-radius:9px;padding:5px 10px 5px 6px;cursor:pointer;font-size:.86rem}
.usermenu .ubtn svg{width:16px;height:16px;flex-shrink:0}
.usermenu .ubtn:hover{background:rgba(255,255,255,.2)}
.usermenu .uav{width:26px;height:26px;border-radius:50%;background:#fff;color:var(--azul);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.72rem}
.usermenu .umenu{position:absolute;right:0;top:46px;width:216px;background:#fff;border-radius:11px;box-shadow:0 10px 34px rgba(15,22,32,.18);overflow:hidden;z-index:50}
.usermenu .umh{padding:9px 13px;font-size:.72rem;color:#8a94a3;border-bottom:1px solid var(--linea)}
.usermenu .umenu a{display:flex;align-items:center;gap:9px;padding:11px 13px;color:#0f1620;font-size:.9rem}
.usermenu .umenu a svg{width:17px;height:17px;flex-shrink:0}
.usermenu .umenu a:hover{background:#f4f7fb}
.usermenu .umenu a.salir-item{border-top:1px solid var(--linea);color:var(--rojo)}

.bottomnav{display:none}

/* ── Botón hamburguesa de pestañas (solo móvil) ──────────────────────
   En escritorio no existe: display:none fuera de la media query de
   abajo. .tabs sigue con flex:1 igual que siempre — así el botón se
   pinta pegado a la izquierda (primer hijo del flex) SIN mover el
   grupo de chat/campana/perfil, que sigue anclado a la derecha porque
   .tabs sigue ocupando el mismo espacio que ocupaba la lista completa
   de pestañas. Ver la lección sobre .topbar .tabs y flex:1 antes de
   tocar esta regla: envolver .tabs en otro contenedor le quitaría el
   flex y descolocaría la cabecera en escritorio. */
.tabs-toggle{display:none;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);border:0;border-radius:8px;
  color:#fff;width:36px;height:36px;flex:none;cursor:pointer;padding:0}
.tabs-toggle svg{width:20px;height:20px}

/* ── Panel lateral de pestañas (drawer), solo móvil ──────────────────
   Oculto con [hidden] por defecto (atributo HTML, más fuerte que
   cualquier display de aquí). El botón .tabs-toggle le quita el
   atributo por JS; el mismo listener global que ya cierra los menús
   de usuario/notificaciones (ver script en _top.php) lo cierra a él
   también al tocar fuera. */
.tabsdrawer{position:fixed;top:0;left:0;bottom:0;width:78vw;max-width:300px;
  background:#fff;z-index:70;box-shadow:4px 0 24px rgba(15,22,32,.22);
  overflow-y:auto;padding:14px 0}
.tabsdrawer[hidden]{display:none}
.tabsdrawer .tdh{display:flex;align-items:center;justify-content:space-between;
  padding:2px 16px 12px;border-bottom:1px solid var(--linea);margin-bottom:6px}
.tabsdrawer .tdh span{font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;color:#8a94a3}
.tabsdrawer .tdx{background:none;border:0;color:#8a94a3;font-size:1.3rem;
  line-height:1;cursor:pointer;padding:2px 6px}
.tabsdrawer .tdgrupo{padding:12px 16px 4px;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;color:#8a94a3}
.tabsdrawer a{display:block;padding:11px 16px;color:#0f1620;font-size:.92rem;
  border-left:3px solid transparent}
.tabsdrawer a.activo{color:var(--azul);background:#eaf2fb;
  border-left-color:var(--azul);font-weight:600}
/* Fondo oscuro detrás del drawer: cierra al tocarlo, igual que un modal. */
.tabsdrawer-fondo{position:fixed;inset:0;background:rgba(15,22,32,.4);z-index:65}
.tabsdrawer-fondo[hidden]{display:none}

.cont{width:100%;max-width:100%;min-width:0;margin:0;padding:22px 24px;box-sizing:border-box}
.cont .card{max-width:100%;box-sizing:border-box}

@media(max-width:820px){
  .sidebar{display:none}
  .topbar{padding:8px 12px}
  .cont{padding:16px 14px 84px}

  /* ── Barra inferior de módulos: antes cada icono repartía el ancho
     con flex:1, así que con 13 módulos cada uno quedaba en ~4vw:
     letra ilegible (.62rem) y los últimos módulos quedaban fuera de
     la pantalla sin ninguna señal de que había más. Ahora cada icono
     tiene un ancho FIJO y la barra se vuelve scroll horizontal: todos
     los módulos son alcanzables deslizando, y la letra es legible.

     🔴 `align-items:center` en un flex column deja que el hijo tome
     su ancho NATURAL (una sola línea larga) en vez de respetar el
     ancho del padre — por eso nombres como "Recepción y control de
     accesos" salían en una línea larguísima aunque el <a> ya tuviera
     ancho fijo. Con `align-items:stretch` el <span> del texto SÍ
     hereda el ancho de 72px y el texto se parte solo en 2-3 líneas;
     el icono se recentra aparte con `align-self:center` porque él sí
     debe quedar centrado, no estirado. */
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--azul-osc);border-top:1px solid rgba(255,255,255,.1);
    overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;
    scrollbar-width:none}
  .bottomnav::-webkit-scrollbar{height:0}
  .bottomnav a{flex:0 0 72px;width:72px;display:flex;flex-direction:column;
    align-items:stretch;text-align:center;gap:4px;padding:8px 3px 7px;
    color:#cbd8e6;font-size:.66rem;line-height:1.22;letter-spacing:.1px;
    /* Palabras sin espacio ("Comunicaciones", "Configuración") no tenían
       dónde partirse y se desbordaban ENCIMA del icono vecino — eso era
       el texto amontonado de la captura de Jorge. overflow-wrap fuerza el
       corte dentro de la palabra cuando no cabe entera; hyphens agrega el
       guion silábico en los navegadores que lo soportan (usa el lang="es"
       del <html>), para que el corte se vea prolijo y no un tajo crudo. */
    overflow-wrap:break-word;word-break:normal;-webkit-hyphens:auto;hyphens:auto}
  .bottomnav a svg{width:20px;height:20px;flex:none;align-self:center}
  .bottomnav a.on{color:#fff}
  .usermenu .uname{display:none}

  /* ── Pestañas del módulo → botón hamburguesa ────────────────────
     Se oculta la lista completa de pestañas (sigue existiendo en el
     HTML para SEO/accesibilidad de teclado, pero no se ve) y aparece
     el botón. .tabs conserva su flex:1 de siempre — por eso el grupo
     de la derecha (chat/campana/perfil) NO se corre: ocupa exactamente
     el mismo espacio que antes ocupaba la lista de pestañas. */
  .topbar .tabs{gap:0}
  .topbar .tabs > a{display:none}
  .tabs-toggle{display:flex}
}
.card{background:#fff;border-radius:14px;box-shadow:0 6px 24px rgba(15,22,32,.06);padding:22px 24px;margin-bottom:20px}
h2{color:var(--azul);font-size:1.1rem;margin:0 0 16px}
h3{color:var(--azul);font-size:.95rem;margin:22px 0 10px;border-bottom:1px solid var(--linea);padding-bottom:6px}

label{display:block;font-size:.82rem;color:var(--gris);margin:0 0 4px}
input,select{width:100%;padding:10px;border:1px solid var(--linea);border-radius:9px;font-size:.95rem;background:#fff}
input:focus,select:focus{outline:2px solid var(--azul);border-color:var(--azul)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.campo{margin-bottom:12px}
.btn{display:inline-block;border:0;border-radius:10px;padding:11px 20px;font-size:.95rem;font-weight:600;color:#fff;background:var(--azul);cursor:pointer}
.btn:hover{filter:brightness(1.06)}
.btn.verde{background:#2e7d32}
.btn.rojo{background:var(--rojo)}
.btn.gris{background:#6b7280}
.btn.sm{padding:7px 12px;font-size:.82rem}

.aviso{padding:11px 15px;border-radius:9px;margin-bottom:16px;font-size:.9rem}
.aviso.ok{background:#e7f6e7;border:1px solid #a9d6a9;color:#256b29}
.aviso.err{background:#fdebeb;border:1px solid #e0a0a0;color:#922}
.aviso.info{background:#eaf2fb;border:1px solid #b6d2ef;color:#235}

table.tabla{width:100%;border-collapse:collapse;font-size:.84rem}
table.tabla th{background:var(--azul);color:#fff;padding:9px 8px;text-align:left;white-space:nowrap;position:sticky;top:0}
table.tabla td{padding:7px 8px;border-bottom:1px solid var(--linea);white-space:nowrap}
table.tabla tr:nth-child(even){background:#f6f8fb}
.scroll{overflow:auto;max-height:70vh;border:1px solid var(--linea);border-radius:10px}
/* 🔴 AGREGADO (2026-09-02, auditoría real de responsividad — ver el
   script en admin/_top.php que envuelve automáticamente cada
   table.tabla con esta clase). A propósito SIN max-height: a
   diferencia de .scroll (pensada para listas largas con scroll
   vertical propio), esta solo existe para contener el desborde
   HORIZONTAL de una tabla ancha en pantallas angostas — nunca debe
   ocultar filas que antes se veían completas verticalmente. */
.tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px;max-width:100%}
.est{font-weight:700;text-transform:capitalize}
.est.pagado{color:#2e7d32}.est.rechazado{color:var(--rojo)}.est.pendiente{color:#b07a00}.est.no_iniciado{color:#9a6700}.est.monto_no_coincide{color:#c0392b}

.filtros{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:16px}
.filtros .campo{margin:0;min-width:150px}
.tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.75rem;font-weight:700}
.tag.admin{background:#295c88;color:#fff}.tag.contable{background:#a6ca46;color:#234}.tag.soporte{background:#6c757d;color:#fff}

@media(max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}

/* ---- Campanita de notificaciones (módulo Comunicaciones) ---- */
.notifmenu{position:relative;flex:none;margin-right:4px}
.notifmenu .nbtn{position:relative;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);border:0;color:#fff;border-radius:9px;padding:7px;cursor:pointer;line-height:1}
.notifmenu .nbtn:hover{background:rgba(255,255,255,.2)}
.notifmenu .nbadge{position:absolute;top:-3px;right:-3px;background:#d64545;color:#fff;font-size:.64rem;font-weight:700;min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--azul)}
.notifmenu .nmenu{position:absolute;right:0;top:46px;width:330px;max-width:calc(100vw - 24px);background:#fff;border-radius:11px;box-shadow:0 10px 34px rgba(15,22,32,.18);overflow:hidden;z-index:60}
.notifmenu .nmh{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 13px;border-bottom:1px solid #eef1f6;font-size:.84rem;font-weight:700;color:#25303f}
.notifmenu .nml{font-size:.72rem;font-weight:500;color:var(--azul);text-decoration:none}
.notifmenu .nml:hover{text-decoration:underline}
.notifmenu .nit{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:10px 13px;border-bottom:1px solid #f4f6fa;text-decoration:none;color:inherit}
.notifmenu .nit:hover{background:#f7f9fc}
.notifmenu .nit.no{background:#eef5fd}
.notifmenu .nit.no:hover{background:#e4eefb}
.notifmenu .nic{width:29px;height:29px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.notifmenu .ntx{display:flex;flex-direction:column;gap:1px;min-width:0}
.notifmenu .ntt{font-size:.8rem;font-weight:600;color:#25303f;line-height:1.35}
.notifmenu .ntm{font-size:.74rem;color:#5f6b7a;line-height:1.45}
.notifmenu .ntf{font-size:.68rem;color:#98a2b0;margin-top:1px}
.notifmenu .ndot{width:7px;height:7px;border-radius:50%;background:var(--azul);margin-top:6px;flex:none}
.notifmenu .nvacio{padding:26px 13px;text-align:center;font-size:.78rem;color:#98a2b0}
.notifmenu .nver{display:block;padding:10px;text-align:center;font-size:.76rem;color:var(--azul);text-decoration:none;font-weight:500}
.notifmenu .nver:hover{background:#f7f9fc;text-decoration:underline}
@media(max-width:520px){.notifmenu .nmenu{width:290px}}

/* ── Chips de estado del módulo Colegio ──────────────────────────────
   Se usaban en colegio-pei.php y colegio-niveles.php sin estar definidos en
   ninguna parte: la clase existía solo dentro de catalogos.php y perfil.php,
   asi que en las pantallas del modulo salian como texto plano. Se suben aqui
   una sola vez en lugar de repetir el bloque en cada pantalla. */
.chip{display:inline-block;background:#eef2f7;color:var(--azul);border-radius:16px;
      padding:2px 10px;font-size:.78rem;font-weight:600;white-space:nowrap;
      vertical-align:middle;margin:1px 2px}
.chip.ok{background:#e7f6e7;color:#256b29}
.chip.err,.chip.rojo{background:#fdebeb;color:#922}
.chip.esp{background:#fdf3e0;color:#8a6212}
.chip.gris{background:#eef1f4;color:#6b7280}
.chip.azul{background:#eaf2fb;color:#235}

/* Celdas de tabla que llevan dos lineas (nombre + detalle). `table.tabla td`
   trae white-space:nowrap para que las columnas no se partan solas; cuando la
   celda si necesita dos renglones se marca con .dos. */
table.tabla td.dos{white-space:normal;line-height:1.35}
table.tabla td .sub{display:block;font-size:.78rem;color:#6b7280;font-weight:400}
table.tabla td.acc{white-space:nowrap;text-align:right}
table.tabla td.acc form{display:inline}

/* ── Segundo nivel de navegación (grupos de pestañas) ────────────────
   Lo usa el módulo Colegio, que va a superar las treinta pantallas cuando el
   máximo de cualquier otro módulo son diez. La barra azul lista los grupos y
   esta franja las pestañas del grupo activo. Un módulo que no declare 'grupos'
   en dependencias_menu() no pinta esta franja y se ve igual que siempre. */
.subtabs{background:#fff;border-bottom:1px solid var(--linea);display:flex;gap:2px;
  padding:0 16px;overflow-x:auto;position:sticky;top:50px;z-index:19;scrollbar-width:none;
  /* 🔴 La franja SIEMPRE pudo desplazarse, pero le ocultamos la barra de
     scroll para que se viera limpia — y con eso quitamos la unica señal de
     que habia mas a la derecha. En movil eso la volvia inservible: se veian
     tres pestañas y nada decia que hubiera once mas.
     Este degradado aparece solo cuando el contenido se sale, y desaparece al
     llegar al final: es la señal que faltaba, sin ocupar sitio. */
  background-image:linear-gradient(to right,#fff 30%,rgba(255,255,255,0)),
    linear-gradient(to right,rgba(255,255,255,0),#fff 70%),
    linear-gradient(to right,rgba(0,0,0,.10),rgba(0,0,0,0)),
    linear-gradient(to left,rgba(0,0,0,.10),rgba(0,0,0,0));
  background-position:left center,right center,left center,right center;
  background-repeat:no-repeat;
  background-size:26px 100%,26px 100%,12px 100%,12px 100%;
  background-attachment:local,local,scroll,scroll;
  /* En un movil el dedo arrastra; el frenado hace que se sienta natural. */
  -webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.subtabs::-webkit-scrollbar{height:0}
.subtabs a{color:#6b7280;padding:10px 12px;font-size:.85rem;white-space:nowrap;
  border-bottom:2px solid transparent;text-decoration:none}
.subtabs a:hover{color:var(--azul)}
.subtabs a.activo{color:var(--azul);border-bottom-color:var(--azul);font-weight:600}
@media(max-width:640px){
  .subtabs{top:0;position:static;padding:0 10px}
  .subtabs a{padding:10px 9px;font-size:.8rem}
}

/* ── Barra de contexto del módulo Colegio ────────────────────────────
   El administrativo elige institución, modalidad y año UNA VEZ al entrar y
   vale para todas las pantallas del módulo. Sin esto había que cambiar el
   contexto pantalla por pantalla — o peor, escribiendo ?inst= en la URL. */
.ctxbar{background:#f7f9fc;border-bottom:1px solid var(--linea);padding:8px 16px;
  position:sticky;top:92px;z-index:18}
/* El color de la institución activa. No es decoración: en un sistema donde las
   tres comparten las mismas tablas, el riesgo no es el rendimiento sino
   alimentar el colegio equivocado. Que cada marca tenga siempre el mismo color
   hace que el error salte a la vista antes de guardar. */
.ctxbar .ctx-marca{padding-right:16px;border-right:1px solid #dfe6ee;margin-right:2px}
.ctxbar .ctx-marca strong{font-size:.95rem;font-weight:800;letter-spacing:.1px}
.ctxbar .punto{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
/* El aviso de guardado nombra la institución donde cayó el dato. */
.aviso .aviso-inst{display:inline-flex;align-items:center;gap:6px;margin-left:10px;
  padding:2px 10px;border:1px solid;border-radius:12px;font-size:.78rem;font-weight:700;
  background:#fff;color:#25313f;vertical-align:middle}
.aviso .aviso-inst i{width:8px;height:8px;border-radius:50%;display:inline-block}
.ctxbar-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ctxbar .ctx{display:flex;align-items:center;gap:7px;font-size:.84rem}
.ctxbar .ctx b{font-size:.66rem;text-transform:uppercase;letter-spacing:.7px;
  color:#6b7280;font-weight:700}
.ctxbar .ctx select{border:1px solid #cfd7e0;border-radius:7px;padding:4px 8px;
  font-size:.84rem;background:#fff;color:var(--azul);font-weight:600;max-width:230px}
.ctxbar .ctx span{font-weight:600;color:var(--azul)}
.ctxbar .ctx-nota{margin-left:auto;font-size:.72rem;color:#6b7280}
@media(max-width:900px){.ctxbar{position:static}.ctxbar .ctx-nota{display:none}}

/* ── Interruptor de avisos de escritorio, dentro del menú de la campana ──
   Va en el menú y no en una pantalla de ajustes porque es ahí donde el
   usuario está pensando en avisos, y porque el navegador solo concede el
   permiso dentro de un gesto suyo. */
.nmx{padding:8px 14px;border-bottom:1px solid var(--linea);background:#fafbfd;
  display:flex;flex-direction:column;gap:5px}
.nmx .avx{display:flex;align-items:center;gap:7px;font-size:.78rem;color:#5b6573;cursor:pointer}
.nmx .avx input{width:auto;margin:0;cursor:pointer}
.nmx .avx-no{font-size:.74rem;color:#8a94a3;line-height:1.5}

/* Texto solo para lectores de pantalla — visible cero, sigue leyéndose */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}