/* =====================================================================
   Sistema de Control Escolar — estilos generales
   Rediseño moderno tipo dashboard con sidebar (inspirado en plantillas
   de administración educativa), manteniendo todas las clases que ya
   usan las vistas para que el cambio aplique en todo el sistema.
   ===================================================================== */

:root {
    --color-primario: #1F4E79;
    --color-secundario: #F2A900;

    /* Neutros fríos (gris pizarra): el color de marca queda solo para acciones y selección */
    --bg-app: #F5F6F8;
    --bg-card: #FFFFFF;
    --text-principal: #101828;
    --text-muted: #475467;        /* 7.3:1 sobre blanco y 6.8:1 sobre el fondo de la app */
    --borde: #E3E6EB;

    /* Tokens de superficie/estado (mismos valores que antes en claro; permiten el tema oscuro) */
    --superficie-2: #F9FAFB;      /* encabezados de tabla */
    --superficie-hover: #F2F4F7;  /* fila al pasar el mouse */
    --btn-icono-bg: #EEF0F4;
    --foto-bg: #E3E6EB;
    --badge-bg: #EEF0F4;
    --exito-bg: #ECFDF3;
    --exito-texto: #067647;
    --exito-borde: #D6F3E2;
    --peligro-bg: #FEF2F2;
    --peligro-texto: #B42318;
    --peligro-borde: #FCDCDC;
    --peligro-solido: #B42318;
    --borde-campo: #8A93A3;       /* bordes de campos 3.1:1 (WCAG 1.4.11) */
    --foco: color-mix(in srgb, var(--color-primario) 85%, #000);
    --color-primario-texto: var(--color-primario); /* marca usada como texto/ícono sobre tarjetas */
    --sobre-primario: #FFFFFF;

    --radio: 10px;
    --radio-sm: 6px;
    --sombra-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --sombra-md: 0 4px 12px rgba(16, 24, 40, 0.08);

    --sidebar-ancho: 260px;
    --topbar-alto: 64px;

    /* Interfaz de trabajo: la tipografía del sistema operativo (rápida, nítida y familiar). Una sola familia. */
    --fuente-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fuente-titulos: var(--fuente-base);
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--fuente-base);
    background: var(--bg-app);
    color: var(--text-principal);
    font-size: 16px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1;
}

h1, h2, h3 {
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--text-principal);
}

h1 {
    font-family: var(--fuente-titulos);
    font-weight: 650;
    font-style: normal;
    letter-spacing: -0.015em;
}

p {
    line-height: 1.6;
}

a { color: inherit; }

/* ---------------------------------------------------------------------
   Estructura general: menú lateral + contenido
   ---------------------------------------------------------------------
   Rediseño del menú (leyes de UX):
     · Hick / Miller ... 4 secciones por tarea, máx. 3 páginas cada una.
     · Von Restorff .... un solo botón relleno: la acción principal "Nuevo".
     · Fitts ........... cada opción mide ≥ 44 px de alto y todo el renglón es clic.
     · Jakob ........... mismos nombres, íconos e insignias que en el celular.
     · Accesibilidad ... texto ≥ 4.5:1 sobre el color de marca, foco visible,
                         aria-current en la página actual, "Saltar al contenido".
   --------------------------------------------------------------------- */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    /* Menú sobrio: misma superficie que las tarjetas, con una línea de separación.
       El color de marca solo aparece en la acción principal y en la página actual. */
    --sb-texto: var(--text-principal);
    --sb-texto-suave: var(--text-muted);
    --sb-titulo: var(--text-muted);
    --sb-hover: var(--superficie-hover);
    --sb-linea: var(--borde);

    width: var(--sidebar-ancho);
    flex-shrink: 0;
    background: var(--bg-card);
    border-right: 1px solid var(--borde);
    color: var(--sb-texto);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    z-index: 40;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 20px 16px;
    font-family: var(--fuente-titulos);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: inherit;
    text-decoration: none;
    flex-shrink: 0;
}

.sidebar-brand i {
    font-size: 1.4rem;
    color: var(--color-primario-texto);
}

.sidebar-logo {
    width: 50%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--radio-sm);
    object-fit: contain;
}

/* Acción principal: el ÚNICO botón relleno del menú (Von Restorff) */
.sidebar-accion-caja {
    padding: 4px 16px 14px;
    border-bottom: 1px solid var(--sb-linea);
    flex-shrink: 0;
}

.sidebar-accion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    border: none;
    border-radius: var(--radio-sm);
    background: var(--color-primario);
    color: var(--sobre-primario);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--sombra-sm);
    transition: transform 0.08s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.sidebar-accion i {
    font-size: 1.05rem;
}

.sidebar-accion:hover {
    filter: brightness(1.08);
    box-shadow: var(--sombra-md);
}

.sidebar-accion:active {
    transform: scale(0.97);
}

.sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 12px 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--sb-linea) transparent;
}

.nav-lista,
.nav-sublista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-section-title {
    margin: 0;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--sb-titulo);
    padding: 16px 12px 4px;
}

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--radio-sm);
    color: var(--sb-texto-suave);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-link i {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.nav-texto {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
    overflow-wrap: anywhere;   /* nombres largos se parten en 2 líneas, nunca se cortan con "…" */
}

.nav-link:hover {
    background: var(--sb-hover);
    color: var(--sb-texto);
}

/* Página actual: tinte de la marca + texto de marca + ícono relleno (no depende solo del color) */
.nav-link.active {
    background: var(--tinte-marca);
    color: var(--color-primario-texto);
    font-weight: 650;
}

/* Insignia de pendientes (misma que en la barra inferior del celular) */
.nav-insignia {
    flex-shrink: 0;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--insignia-bg, #D92D20);
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Sub-elementos (hijos en el portal de padres) */
.nav-sublista {
    margin: 2px 0 6px 22px;
    padding-left: 10px;
    border-left: 1px solid var(--sb-linea);
}

.nav-sublink {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 10px;
    border-radius: 10px;
    color: var(--sb-texto-suave);
    font-size: 0.86rem;
    text-decoration: none;
}

.nav-sublink:hover {
    background: var(--sb-hover);
    color: var(--sb-texto);
}

.nav-sublink.active {
    background: var(--sb-hover);
    color: var(--sb-texto);
    font-weight: 700;
}

.nav-inicial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--sb-hover);
    font-size: 0.75rem;
    font-weight: 800;
}

.nav-punto {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-secundario);
}

.sidebar-footer {
    flex-shrink: 0;
    padding: 10px 12px 14px;
    border-top: 1px solid var(--sb-linea);
}

.nav-link-salir {
    color: var(--sb-texto-suave);
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------------
   Barra superior (escritorio): migas · búsqueda · instalar · tema · usuario
   --------------------------------------------------------------------- */
.topbar {
    height: var(--topbar-alto);
    background: var(--bg-card);
    border-bottom: 1px solid var(--borde);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 30;
}

.topbar-spacer {
    flex: 1;
}

/* Migas de pan: siempre se sabe dónde se está y cómo regresar */
.migas {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 0.86rem;
}

.migas ol {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    overflow: hidden;
}

.migas li {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    color: var(--text-muted);
}

/* Solo la página actual se acorta con "…" si no cabe; los pasos anteriores nunca se enciman */
.migas li:last-child {
    flex-shrink: 1;
    min-width: 0;
}

.migas li + li::before {
    content: "\F285";              /* bi-chevron-right */
    font-family: "bootstrap-icons";
    font-size: 0.7rem;
    color: var(--text-muted);
}

.migas a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 4px;
}

.migas a:hover {
    color: var(--text-principal);
    text-decoration: underline;
}

.migas [aria-current="page"] {
    color: var(--text-principal);
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Búsqueda global (Tesler: encontrar a un alumno desde cualquier pantalla) */
.buscador-global {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 280px;
    min-width: 170px;
}

.buscador-global > i {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    font-size: 0.9rem;
    pointer-events: none;
}

.buscador-global input {
    width: 100%;
    height: 38px;
    padding: 0 34px 0 34px;
    border: 1px solid var(--borde-campo);
    border-radius: 10px;
    background: var(--superficie-2);
    color: var(--text-principal);
    font-family: inherit;
    font-size: 0.88rem;
}

.buscador-global input:focus {
    outline: none;
    background: var(--bg-card);
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 18%, transparent);
}

.buscador-global kbd {
    position: absolute;
    right: 9px;
    padding: 1px 7px;
    border: 1px solid var(--borde-campo);
    border-radius: 5px;
    background: var(--bg-card);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    pointer-events: none;
}

.buscador-global input:focus + kbd,
.buscador-global input:not(:placeholder-shown) + kbd {
    display: none;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 12px;
    border-left: 1px solid var(--borde);
}

.avatar-inicial {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primario);
    color: var(--sobre-primario);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.topbar-user-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.topbar-user-nombre {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-principal);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-user-rol {
    font-size: 0.74rem;
    color: var(--text-muted);
}

/* Botón secundario (contorno): filtros como "Ver todos" junto a la acción principal */
.btn.btn-secundario {
    background: var(--bg-card);
    color: var(--color-primario-texto);
    box-shadow: inset 0 0 0 1.5px var(--color-primario-texto);
}

.btn.btn-secundario:hover {
    background: var(--tinte-marca, #E4EAEF);
    opacity: 1;
}

/* Celular: las filas de botones que no son solo de escritorio se apilan */
@media (max-width: 991.98px) {
    .barra-botones {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 12px 0;
    }

    .barra-botones .btn,
    .barra-botones button[type="submit"] {
        width: 100%;
        justify-content: center;
    }
}

/* Los botones de texto destructivos (Desactivar, Dar de baja…) se ven como enlace
   rojo y no como botón relleno: no compiten con "Guardar" (Von Restorff) y se
   distinguen como acción de riesgo. (Antes la regla general de button[type=submit]
   los pintaba de azul por especificidad.) */
.content button.link-button {
    padding: 0;
    background: none;
    color: var(--peligro-texto);
    font-weight: 600;
}

/* Objetivos de clic de al menos 36 px en escritorio para enlaces de acción sueltos
   (Fitts / WCAG 2.5.8); en el celular ya miden 44 px */
.btn-cancelar,
.content button.link-button,
.enlace-volver {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
}

input[type="file"] {
    min-height: 34px;
    font-family: inherit;
}

input[type="file"]::file-selector-button {
    min-height: 34px;
    margin-right: 10px;
    padding: 0 14px;
    border: 1px solid var(--borde-campo);
    border-radius: var(--radio-sm);
    background: var(--superficie-2);
    color: var(--text-principal);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* ---------------------------------------------------------------------
   Protección contra doble envío: botón ocupado + aviso
   --------------------------------------------------------------------- */
button:disabled,
.btn[aria-disabled="true"] {
    cursor: progress;
    opacity: 0.72;
}

.spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -0.15em;
    animation: girar 0.7s linear infinite;
}

@keyframes girar {
    to { transform: rotate(360deg); }
}

.alert-aviso,
.aviso-duplicado {
    background: color-mix(in srgb, #F59E0B 14%, var(--bg-card));
    color: var(--text-principal);
    border: 1px solid color-mix(in srgb, #F59E0B 45%, transparent);
    padding: 12px 16px;
    border-radius: var(--radio-sm);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 16px;
}

.aviso-flash i {
    margin-right: 4px;
}

.content-publico > .aviso-flash {
    max-width: 380px;
    margin: 16px auto -6vh;
}

/* Cerrar sesión ahora es un formulario POST: el botón se ve igual que antes */
.form-salir {
    margin: 0;
}

button.nav-link {
    width: 100%;
    border: none;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.form-salir .mv-boton-fila {
    width: 100%;
}

/* Ganan a la regla general de button[type="submit"] (botón azul relleno) */
.form-salir button.mv-boton-salir {
    background: var(--peligro-bg);
    color: var(--peligro-texto);
    border: 1px solid var(--peligro-borde);
    border-radius: 14px;
    padding: 0 16px;
    font-size: 0.95rem;
    justify-content: center;
}

.sidebar .form-salir button.nav-link {
    background: none;
    color: var(--sb-texto-suave);
    border-radius: var(--radio-sm);
    padding: 10px 12px;
    font-size: 0.92rem;
    font-weight: 500;
}

.sidebar .form-salir button.nav-link:hover {
    background: var(--sb-hover);
    color: var(--sb-texto);
    opacity: 1;
}

/* Aviso de posible pago o cargo repetido (comparte base con .alert-aviso) */
.aviso-duplicado {
    border-left: 4px solid #D97706;
}

.aviso-duplicado p {
    margin: 0 0 6px;
}

.aviso-duplicado ul {
    margin: 6px 0 10px;
    padding-left: 20px;
}

.barra-confirmar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
}

button.btn-peligro,
button[type="submit"].btn-peligro {
    background: var(--peligro-solido);
    color: #fff;
    border-color: var(--peligro-solido);
}

/* ---------------------------------------------------------------------
   Accesibilidad general
   --------------------------------------------------------------------- */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* "Saltar al contenido": primer elemento al presionar Tab (WCAG 2.4.1) */
.saltar-contenido {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 200;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--text-principal);
    color: var(--bg-card);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform 0.15s ease;
}

.saltar-contenido:focus {
    transform: translateY(0);
}

#contenido:focus {
    outline: none;
}

/* Foco visible y consistente para teclado (WCAG 2.4.7 / 2.4.11) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--foco, var(--color-primario));
    outline-offset: 2px;
}

.sidebar :focus-visible {
    outline-color: var(--color-secundario);
}

.nav-link.active:focus-visible {
    outline-offset: 3px;
}

/* ---------------------------------------------------------------------
   Contenido
   --------------------------------------------------------------------- */
.content {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 28px 24px 60px;
}

.content-publico {
    display: block;
}

h1 {
    font-size: 1.5rem;
    margin: 0 0 6px 0;
}

/* ---------------------------------------------------------------------
   Login
   --------------------------------------------------------------------- */
body:has(.login-box) {
    background: var(--bg-app);
    min-height: 100vh;
}

.login-box {
    max-width: 380px;
    margin: 10vh auto;
    background: var(--bg-card);
    padding: 36px 32px;
    border-radius: var(--radio);
    border: 1px solid var(--borde);
    box-shadow: var(--sombra-md);
}

.login-box h1 {
    font-family: var(--fuente-titulos);
    font-size: 1.4rem;
    font-weight: 650;
    margin-bottom: 4px;
    text-align: center;
    letter-spacing: -0.015em;
    color: var(--text-principal);
}

.login-subtitulo {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.87rem;
    letter-spacing: 0.01em;
    margin: 0 0 22px 0;
}

.login-icono {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primario);
    color: var(--sobre-primario);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto 14px;
}

.login-logo {
    width: 75%;
    height: auto;
    max-width: 75%;
    object-fit: contain;
    display: block;
    margin: 0 auto 14px;
}

.login-soporte {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--borde);
    text-align: center;
}

.login-soporte-titulo {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-principal);
    margin-bottom: 6px;
}

.login-soporte p {
    margin: 3px 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.login-soporte i {
    color: var(--color-primario-texto);
    margin-right: 4px;
}

.login-box label {
    display: block;
    margin-top: 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.login-box input {
    width: 100%;
    padding: 10px 12px;
    margin-top: 5px;
    border: 1px solid var(--borde-campo);
    border-radius: var(--radio-sm);
    font-size: 0.95rem;
    font-family: inherit;
}

.login-box input:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 18%, transparent);
}

.login-box button {
    width: 100%;
    margin-top: 22px;
    padding: 11px;
    background: var(--color-primario);
    color: var(--sobre-primario);
    border: none;
    border-radius: var(--radio-sm);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: opacity 0.15s ease;
}

.login-box button:hover {
    opacity: 0.9;
}

/* ---------------------------------------------------------------------
   Alertas
   --------------------------------------------------------------------- */
.alert-error {
    background: var(--peligro-bg);
    color: var(--peligro-texto);
    padding: 12px 16px;
    border-radius: var(--radio-sm);
    font-size: 0.9rem;
    line-height: 1.5;
    border: 1px solid var(--peligro-borde);
    margin-bottom: 16px;
}

.alert-ok {
    background: var(--exito-bg);
    color: var(--exito-texto);
    padding: 12px 16px;
    border-radius: var(--radio-sm);
    font-size: 0.9rem;
    line-height: 1.5;
    border: 1px solid var(--exito-borde);
    margin-bottom: 16px;
}

/* ---------------------------------------------------------------------
   Tarjetas / dashboard
   --------------------------------------------------------------------- */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.card {
    background: var(--bg-card);
    padding: 20px 22px;
    border-radius: var(--radio);
    box-shadow: var(--sombra-sm);
    border: 1px solid var(--borde);
}

.card strong {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    display: block;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}

.stat-icon {
    font-size: 1.3rem;
    float: right;
}

/* Tarjetas de indicadores que llevan a su detalle (Fitts: todo el bloque es clic) */
.card-enlace {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.card-enlace:hover {
    box-shadow: var(--sombra-md);
    transform: translateY(-1px);
}

/* ---------------------------------------------------------------------
   Inicio (administración)
   Un solo panel de datos con tres columnas separadas por líneas finas; cada
   columna lleva a su detalle. Sin íconos decorativos ni tarjetas de colores.
   --------------------------------------------------------------------- */
.inicio-cabecera {
    margin-bottom: 20px;
}

.resumen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sm);
    overflow: hidden;
}

.resumen-dato {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 24px 22px;
    color: inherit;
    text-decoration: none;
    transition: background 0.15s ease;
}

.resumen-dato + .resumen-dato {
    border-left: 1px solid var(--borde);
}

.resumen-dato:hover {
    background: var(--superficie-hover);
}

.resumen-etiqueta {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-muted);
}

.resumen-cifra {
    font-size: 1.85rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.resumen-cifra.es-alerta {
    color: var(--peligro-texto);
}

.resumen-detalle {
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.resumen-detalle.es-sube {
    color: var(--exito-texto);
}

.resumen-detalle i {
    font-size: 0.9em;
    margin-right: 2px;
}

/* Acciones frecuentes: una lista sobria (las mismas del botón "Nuevo") */
.accesos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sm);
    overflow: hidden;
}

.accesos-grid > li {
    border-bottom: 1px solid var(--borde);
}

.accesos-grid > li:nth-child(odd) {
    border-right: 1px solid var(--borde);
}

/* La última fila (una o dos celdas) no lleva línea inferior */
.accesos-grid > li:last-child,
.accesos-grid > li:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
}

.acceso-card {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    min-height: 68px;
    padding: 12px 18px;
    text-decoration: none;
    color: var(--text-principal);
    transition: background 0.15s ease;
}

.acceso-card > i:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: var(--radio-sm);
    font-size: 1.1rem;
    background: var(--tinte-marca);
    color: var(--color-primario-texto);
}

.acceso-texto {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.acceso-texto strong {
    font-size: 0.93rem;
    font-weight: 600;
}

.acceso-texto span {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.acceso-flecha {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.acceso-card:hover {
    background: var(--superficie-hover);
}

.subtitulo {
    color: var(--text-muted);
    margin-top: -4px;
    margin-bottom: 4px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.grado-titulo {
    margin-top: 30px;
    margin-bottom: 12px;
    font-size: 1.05rem;
    color: var(--text-principal);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------
   Tablas
   --------------------------------------------------------------------- */
.tabla-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radio);
}

.tabla {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra-sm);
    border: 1px solid var(--borde);
    font-variant-numeric: tabular-nums;
}

.tabla th, .tabla td {
    text-align: left;
    padding: 13px 16px;
    border-bottom: 1px solid var(--borde);
    font-size: 0.92rem;
    line-height: 1.45;
}

.tabla th {
    background: var(--superficie-2);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.tabla tbody tr:hover {
    background: var(--superficie-hover);
}

.tabla tbody tr:last-child td {
    border-bottom: none;
}

/* ---------------------------------------------------------------------
   Badges
   --------------------------------------------------------------------- */
.badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--badge-bg);
    color: var(--text-muted);
}

.badge-activo {
    background: var(--exito-bg);
    color: var(--exito-texto);
}

.badge-inactivo {
    background: var(--peligro-bg);
    color: var(--peligro-texto);
}

/* ---------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------- */
.btn, button[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primario);
    color: var(--sobre-primario);
    padding: 9px 18px;
    border: none;
    border-radius: var(--radio-sm);
    text-decoration: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    font-family: inherit;
    transition: opacity 0.15s ease, transform 0.05s ease;
}

.btn:hover, button[type="submit"]:hover {
    opacity: 0.92;
}

.btn:active, button[type="submit"]:active {
    transform: scale(0.98);
}

.btn-cancelar {
    margin-left: 12px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
}

.btn-cancelar:hover {
    color: var(--text-principal);
}

.form-inline {
    display: inline;
}

.link-button {
    background: none;
    border: none;
    color: var(--peligro-texto);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-size: 0.85rem;
}

.link-button:hover {
    text-decoration: underline;
}

.acciones-iconos {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.buscador {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0;
}

.buscador input[type="search"] {
    flex: 1;
    min-width: 200px;
    max-width: 360px;
    padding: 9px 12px;
    border: 1px solid var(--borde-campo);
    border-radius: var(--radio-sm);
    font-size: 0.92rem;
    font-family: inherit;
    background: var(--bg-card);
}

.buscador input[type="search"]:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 15%, transparent);
}

.btn-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--btn-icono-bg);
    color: var(--color-primario-texto);
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.btn-icono:hover {
    background: var(--color-primario);
    color: var(--sobre-primario);
}

.btn-icono-peligro {
    color: var(--peligro-texto);
}

.btn-icono-peligro:hover {
    background: var(--peligro-solido);
    color: #fff;
}

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */
.formulario {
    max-width: 440px;
    background: var(--bg-card);
    padding: 26px;
    border-radius: var(--radio);
    box-shadow: var(--sombra-sm);
    border: 1px solid var(--borde);
}

.formulario label {
    display: block;
    margin-top: 10px;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-muted);
}

.formulario input, .formulario select {
    width: 100%;
    padding: 9px 11px;
    margin-top: 4px;
    border: 1px solid var(--borde-campo);
    border-radius: var(--radio-sm);
    font-size: 0.95rem;
    line-height: 1.5;
    font-family: inherit;
    background: var(--bg-card);
}

.formulario input:focus, .formulario select:focus, .formulario textarea:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 15%, transparent);
}

.formulario textarea {
    width: 100%;
    padding: 9px 11px;
    margin-top: 4px;
    border: 1px solid var(--borde-campo);
    border-radius: var(--radio-sm);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
}

.formulario-ancho {
    max-width: 660px;
}

.ayuda {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.5;
}

.ayuda-bloque {
    margin-top: -4px;
    margin-bottom: 8px;
}

.formulario button {
    margin-top: 20px;
}

.formulario-salir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

.formulario.formulario-salir button {
    margin-top: 0;
}

.formulario > p {
    margin: 6px 0;
    font-size: 0.9rem;
    color: var(--text-principal);
}

.formulario > p i {
    color: var(--color-primario-texto);
    margin-right: 4px;
}

.input-monto {
    width: 130px !important;
    padding: 6px 8px !important;
}

.formulario input[type="color"] {
    width: 64px !important;
    height: 40px;
    padding: 3px !important;
    cursor: pointer;
}

.campo-con-icono {
    display: flex;
    align-items: center;
    gap: 8px;
}

.campo-con-icono input {
    flex: 1;
}

.icono-whatsapp {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    margin-top: 4px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.icono-whatsapp:hover {
    opacity: 0.85;
}

/* ---------------------------------------------------------------------
   Bloques colapsables (details/summary nativo, sin JS)
   --------------------------------------------------------------------- */
.bloque {
    background: var(--bg-card);
    border-radius: var(--radio-sm);
    box-shadow: var(--sombra-sm);
    border: 1px solid var(--borde);
    margin-bottom: 12px;
    padding: 0 16px;
}

.bloque summary {
    cursor: pointer;
    padding: 13px 0;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: -0.005em;
    color: var(--color-primario-texto);
    list-style: none;
}

.bloque summary::-webkit-details-marker {
    display: none;
}

.bloque summary::before {
    content: "\f285";
    font-family: 'bootstrap-icons', sans-serif;
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.15s ease;
    font-size: 0.8rem;
}

.bloque[open] summary::before {
    transform: rotate(90deg);
}

.bloque-contenido {
    padding-bottom: 16px;
}

/* ---------------------------------------------------------------------
   Grillas compactas
   --------------------------------------------------------------------- */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 12px;
}

.grid-full {
    grid-column: 1 / -1;
}

.checkboxes-inline {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

.check {
    display: flex !important;
    align-items: center;
    gap: 7px;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    margin-top: 0 !important;
    color: var(--text-principal) !important;
}

.check input[type="checkbox"] {
    width: auto !important;
    accent-color: var(--color-primario);
}

.celda-check {
    text-align: center;
}

.celda-check input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--color-primario);
}

.btn-guardar-vinculos {
    margin-top: 16px;
}

/* ---------------------------------------------------------------------
   Fotos / avatares
   --------------------------------------------------------------------- */
.foto-miniatura {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: var(--foto-bg);
    border: 1px solid var(--borde);
}

.foto-generica {
    background: var(--foto-bg);
}

.foto-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin-bottom: 10px;
    border: 3px solid var(--bg-card);
    box-shadow: var(--sombra-sm);
}

.aviso-subida-foto {
    font-weight: 600;
}

.aviso-subida-foto.aviso-ok {
    color: var(--exito-texto);
}

.aviso-subida-foto.aviso-error {
    color: var(--peligro-texto);
}

.vista-previa-logo {
    background: repeating-conic-gradient(#EEF0F4 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
    display: inline-block;
    padding: 10px;
    border-radius: var(--radio-sm);
    margin: 8px 0;
    border: 1px solid var(--borde);
}

.vista-previa-logo img {
    max-height: 60px;
    max-width: 200px;
    display: block;
}

/* ---------------------------------------------------------------------
   Soporte y ayuda (login, portal)
   --------------------------------------------------------------------- */
.soporte-nombre {
    font-weight: 700;
    color: var(--text-principal);
    font-size: 0.95rem;
}

/* ---------------------------------------------------------------------
   Tarjetas de alumnos (portal de padres)
   --------------------------------------------------------------------- */
.tarjetas-alumnos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.tarjeta-alumno {
    display: flex;
    gap: 14px;
    align-items: center;
    background: var(--bg-card);
    padding: 16px;
    border-radius: var(--radio);
    box-shadow: var(--sombra-sm);
    border: 1px solid var(--borde);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.tarjeta-alumno:hover {
    box-shadow: var(--sombra-md);
    transform: translateY(-1px);
}

.tarjeta-alumno-foto {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--foto-bg);
    flex-shrink: 0;
}

.tarjeta-alumno-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ficha-alumno-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.ficha-alumno-header h1 {
    margin: 0 0 4px 0;
}

/* ---------------------------------------------------------------------
   Responsivo — en < 992 px el sidebar y el botón ☰ se reemplazan por la
   barra inferior (ver sección "Experiencia móvil" al final del archivo).
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .content {
        padding: 20px 16px 48px;
    }
}

@media (max-width: 560px) {
    .grid-2, .grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------
   Tablas en móvil: se convierten en tarjetas apiladas (etiqueta + valor)
   en vez de obligar a hacer scroll horizontal — cada <td> ya trae un
   atributo data-label="..." en el HTML que aquí se usa como etiqueta (o, si
   falta, el JS lo copia del <thead> — utilidad genérica .tabla-apilable).
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .tabla-wrap {
        overflow-x: visible;
    }

    :is(.tabla, .tabla-apilable) {
        border: none;
        box-shadow: none;
        background: transparent;
        border-radius: 0;
    }

    :is(.tabla, .tabla-apilable) thead {
        display: none;
    }

    :is(.tabla, .tabla-apilable), :is(.tabla, .tabla-apilable) tbody, :is(.tabla, .tabla-apilable) tr, :is(.tabla, .tabla-apilable) td {
        display: block;
        width: 100%;
    }

    :is(.tabla, .tabla-apilable) tr {
        position: relative;
        background: var(--bg-card);
        border: 1px solid var(--borde);
        border-radius: var(--radio);
        box-shadow: var(--sombra-sm);
        margin-bottom: 12px;
        overflow: hidden;
    }

    :is(.tabla, .tabla-apilable) td {
        text-align: right;
        padding: 10px 14px 10px 48%;
        min-height: 20px;
        border-bottom: 1px solid var(--borde);
        font-size: 0.92rem;
        word-break: break-word;
    }

    :is(.tabla, .tabla-apilable) td:last-child {
        border-bottom: none;
    }

    :is(.tabla, .tabla-apilable) td:empty {
        display: none;
    }

    :is(.tabla, .tabla-apilable) td::before {
        content: attr(data-label);
        position: absolute;
        left: 14px;
        width: 42%;
        text-align: left;
        font-weight: 600;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
    }

    /* La foto ya no "flota" encima del texto (eso causaba que se encimara con el
       folio en algunos navegadores) — ahora es una fila más, alineada a la derecha,
       sin ningún riesgo de superposición. */
    :is(.tabla, .tabla-apilable) td.td-foto {
        display: block;
        text-align: right;
        padding: 12px 14px;
        border-bottom: 1px solid var(--borde);
    }

    :is(.tabla, .tabla-apilable) td.td-foto::before {
        content: none;
    }

    :is(.tabla, .tabla-apilable) td.td-foto .foto-miniatura {
        display: inline-block;
        vertical-align: middle;
    }

    /* Inputs/selects dentro de una celda ocupan todo el ancho disponible de la tarjeta */
    :is(.tabla, .tabla-apilable) td input, :is(.tabla, .tabla-apilable) td select {
        width: 100%;
        max-width: 220px;
    }

    :is(.tabla, .tabla-apilable) td input.input-monto {
        width: 100% !important;
        max-width: 220px;
    }

    :is(.tabla, .tabla-apilable) td .celda-check,
    :is(.tabla, .tabla-apilable) td.celda-check {
        text-align: right;
    }
}


/* ---------------------------------------------------------------------
   Importar desde CSV
   --------------------------------------------------------------------- */
.badge-info {
    background: var(--tinte-marca, #E4EAEF);
    color: var(--color-primario-texto);
}

#tabla-importacion .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.badge i {
    font-size: 0.8em;
}

.alert-info {
    background: var(--tinte-marca, #E4EAEF);
    color: var(--text-principal);
    padding: 12px 16px;
    border-radius: var(--radio-sm);
    border: 1px solid color-mix(in srgb, var(--color-primario) 22%, transparent);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 16px 0;
}

.alert-info ul,
.importar-lista {
    margin: 6px 0 0;
    padding-left: 20px;
}

.importar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.importar-tarjeta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sm);
    padding: 20px;
}

.importar-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
}

.importar-cabecera h2 {
    margin: 0;
    font-size: 1.1rem;
}

.importar-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--tinte-marca, #E4EAEF);
    color: var(--color-primario-texto);
    font-size: 1.25rem;
}

.importar-tarjeta > .ayuda {
    margin: 0;
}

.importar-columnas summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-primario-texto);
}

.importar-columnas ul {
    margin: 8px 0 4px;
    padding-left: 18px;
    font-size: 0.86rem;
}

.importar-columnas li {
    margin-bottom: 6px;
}

.importar-columnas li .ayuda {
    display: block;
    margin-top: 0;
}

.importar-columnas .badge {
    padding: 1px 8px;
    font-size: 0.68rem;
}

.importar-plantilla {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-primario-texto);
    text-decoration: none;
}

.importar-plantilla:hover {
    text-decoration: underline;
}

.importar-form {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--borde);
}

.importar-form label {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-muted);
}

.importar-form input[type="file"] {
    display: block;
    width: 100%;
    margin: 6px 0 12px;
    font-family: inherit;
    font-size: 0.88rem;
}

.importar-consejos ul {
    margin: 0;
    padding-left: 20px;
    font-size: 0.9rem;
}

.importar-consejos li {
    margin-bottom: 6px;
}

.importar-resumen .card strong {
    font-size: 1.4rem;
}

.importar-confirmar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 4px;
    margin: 18px 0 6px;
}

.importar-confirmar .alert-error {
    width: 100%;
    margin: 0;
}

.importar-descarga-errores {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--peligro-texto);
    text-decoration: none;
}

.importar-descarga-errores:hover {
    text-decoration: underline;
}

.importar-filtros {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 16px 0 12px;
}

.importar-filtros .chip {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--borde-campo);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-principal);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.importar-filtros .chip[aria-pressed="true"] {
    border-color: transparent;
    background: var(--tinte-marca, #E4EAEF);
    color: var(--color-primario-texto);
}

.importar-observaciones span {
    display: block;
    font-size: 0.84rem;
    line-height: 1.4;
}

.importar-msg-error {
    color: var(--peligro-texto);
    font-weight: 600;
}

.importar-msg-aviso {
    color: var(--text-muted);
}

.tabla tbody tr.importar-fila-error {
    background: color-mix(in srgb, var(--peligro-bg) 55%, var(--bg-card));
}

.importar-siguientes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 18px 0;
}

@media (max-width: 991.98px) {
    #tabla-cargos .pagado-compacto {
        display: none;
    }

    .importar-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 14px 0;
    }

    .importar-tarjeta {
        padding: 16px;
    }

    .importar-form button[type="submit"] {
        width: 100%;
    }

    /* Filtros de la vista previa: una sola línea deslizable */
    .importar-filtros {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 12px -16px;
        padding: 2px 16px;
        scrollbar-width: none;
    }

    .importar-filtros .chip {
        flex-shrink: 0;
        height: 40px;
        white-space: nowrap;
    }

    .importar-confirmar button[type="submit"] {
        width: 100%;
    }

    .importar-confirmar .btn-cancelar {
        width: 100%;
        justify-content: center;
    }

    .importar-descarga-errores {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        margin-left: 0;
    }

    .importar-resumen .card strong {
        font-size: 19px;
    }

    /* En la tarjeta de la fila, las observaciones se leen a todo lo ancho */
    :is(.tabla, .tabla-apilable) td.importar-observaciones {
        padding-left: 14px;
        text-align: left;
    }

    :is(.tabla, .tabla-apilable) td.importar-observaciones::before {
        position: static;
        display: block;
        width: auto;
        margin-bottom: 4px;
    }

    :is(.tabla, .tabla-apilable) td.importar-observaciones:not(:has(span)) {
        display: none;
    }
}

/* ---------------------------------------------------------------------
   Escritorio a todo lo ancho (≥ 992 px), en TODAS las secciones:
     · el contenido ya no se queda en una columna centrada de 1100 px;
     · .barra-botones pone los botones de la página en UNA fila que ocupa
       todo el ancho, todos del mismo tamaño (2, 3 o 4 botones por igual);
     · las tablas usan todo el ancho: los datos cortos (folios, fechas,
       importes, estatus, acciones) van en una sola línea y la columna
       marcada con .col-principal en su <th> toma el espacio que sobra.
       (El JS copia la clase del <th> a las celdas de esa columna.)
   Los formularios conservan su ancho de lectura cómoda a propósito.
   --------------------------------------------------------------------- */
@media (min-width: 992px) {
    .content {
        max-width: none;
    }

    .barra-botones {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 12px;
        margin: 18px 0 14px;
    }

    .barra-guardar {
        margin-top: 16px;
    }

    .barra-guardar button[type="submit"] {
        width: 100%;
        min-height: 46px;
        justify-content: center;
        margin: 0;
    }

    .tabla th,
    .tabla td {
        white-space: nowrap;
    }

    .tabla .col-flex,
    .tabla .col-principal {
        white-space: normal;
    }

    .tabla .col-principal {
        width: 100%;
        min-width: 160px;
    }

    .tabla .col-importe {
        text-align: right;
    }

    .tabla td select {
        min-width: 130px;
    }

    .barra-botones form {
        display: flex;
        margin: 0;
    }

    .barra-botones .btn {
        width: 100%;
        min-height: 46px;
        justify-content: center;
        text-align: center;
        line-height: 1.25;
    }

    .filtro-cargos-escritorio {
        margin: 6px 0 14px;
    }

    /* Columnas: datos cortos en una sola línea (folio, fechas, importes, estatus,
       acciones); el nombre del alumno usa el espacio que sobra */
    #tabla-cargos th,
    #tabla-cargos td {
        white-space: nowrap;
    }

    #tabla-cargos td:nth-child(2),
    #tabla-cargos td:nth-child(4) {
        white-space: normal;
    }

    #tabla-cargos td:nth-child(2) {
        min-width: 150px;
        width: 100%;
    }

    #tabla-cargos .fecha-cargo {
        white-space: nowrap;
    }

    #tabla-cargos .col-importe {
        text-align: right;
    }

    #tabla-cargos .pagado-compacto {
        display: none;
    }

    #tabla-cargos .badges-cargo {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 3px;
    }
}

/* Con espacio de sobra (≥ 1440 px): fecha y avisos en la misma línea */

@media (min-width: 1440px) {
    #tabla-cargos td:nth-child(4) {
        white-space: nowrap;
    }

    #tabla-cargos .badges-cargo {
        display: inline-flex;
        flex-wrap: nowrap;
        margin: 0 0 0 6px;
        vertical-align: middle;
    }
}

@media (min-width: 992px) {

    #tabla-cargos .acciones-iconos {
        flex-wrap: nowrap;
    }
}

/* Con espacio de sobra, las columnas flexibles (destinatario, tipo…) no se parten en
   tantas líneas: el sobrante sigue yendo a la columna principal */
@media (min-width: 1280px) {
    .tabla .col-flex {
        min-width: 150px;
    }
}

@media (min-width: 1600px) {
    .tabla .col-flex {
        min-width: 200px;
    }
}

/* Escritorio angosto (992–1279 px): un poco menos de margen lateral para dar espacio a las tablas */
@media (min-width: 992px) and (max-width: 1279.98px) {
    .content {
        padding-left: 16px;
        padding-right: 16px;
    }

    .tabla th,
    .tabla td {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Encabezados largos ("Responsable de pago") en dos líneas para que la tabla quepa */
    .tabla th {
        white-space: normal;
    }

    .tabla .col-principal {
        min-width: 120px;
    }

    /* Correos y textos largos sin espacios pueden partirse en vez de ensanchar la tabla */
    .tabla .col-flex {
        overflow-wrap: anywhere;
    }
}

/* Escritorio hasta 1439 px: celdas más compactas para que quepan todas las columnas
   sin desplazamiento lateral */
@media (min-width: 992px) and (max-width: 1439.98px) {
    #tabla-cargos th,
    #tabla-cargos td {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (min-width: 992px) and (max-width: 1279.98px) {
    #tabla-cargos th,
    #tabla-cargos td {
        padding: 11px 6px;
        font-size: 0.84rem;
    }

    #tabla-cargos th {
        font-size: 0.66rem;
        letter-spacing: 0.03em;
    }

    #tabla-cargos .btn-icono {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }

    #tabla-cargos .acciones-iconos {
        gap: 4px;
    }

    #tabla-cargos td:nth-child(2) {
        min-width: 105px;
    }

    /* En pantallas de 992–1279 px "Pagado" se muestra debajo de "Monto" en vez de
       ocupar su propia columna, para que la tabla quepa completa sin desplazarse */
    #tabla-cargos th:nth-child(6),
    #tabla-cargos td:nth-child(6) {
        display: none;
    }

    #tabla-cargos .pagado-compacto {
        display: block;
        font-size: 0.74rem;
        color: var(--text-muted);
    }


    .barra-botones .btn {
        padding: 9px 10px;
        font-size: 0.84rem;
    }
}

/* =====================================================================
   EXPERIENCIA MÓVIL  (celulares y tablets: < 992 px)
   ---------------------------------------------------------------------
   El sistema se usa como una app nativa, cómoda con una sola mano.
   Cada bloque indica la ley de UX que lo justifica:

     Fitts ........ lo importante abajo (zona del pulgar) y todo lo tocable
                    de ≥ 44 px (40 px en botones chicos).
     Hick ......... máx. 4 destinos + 1 acción principal; lo demás en "Más".
     Jakob ........ patrones conocidos: barra inferior y hojas desde abajo.
     Von Restorff . la acción principal es el ÚNICO botón relleno y elevado.
     Miller ....... información en bloques chicos con título; KPI de 2 en 2.
     Doherty ...... respuesta visual inmediata al tocar (:active 0.92–0.96).
     Tesler ....... el sistema absorbe la complejidad (?abrir= lleva directo
                    al campo/ventana correcta; filtros sin recargar).

   ESCRITORIO (≥ 992 px): nada de esta sección cambia el diseño, salvo el
   botón "Instalar app" y el selector de tema en la barra superior.
   ===================================================================== */

/* ---- Tokens nuevos (tema claro) --------------------------------------- */
:root {
    color-scheme: light;
    --mv-barra-alto: 64px;
    --mv-top-alto: 56px;
    --tinte-marca: color-mix(in srgb, var(--color-primario) 12%, var(--bg-card));
    --insignia-bg: #D92D20;
    --asa: #C5CAD3;
    --velo: rgba(9, 12, 18, 0.48);
    --sombra-barra: 0 -4px 18px rgba(16, 24, 40, 0.07);
    --sombra-hoja: 0 -12px 40px rgba(16, 24, 40, 0.18);
    /* Mezcla de los tonos de color de la hoja de acciones */
    --tono-fondo-pct: 13%;
    --tono-texto-pct: 82%;
    --tono-texto-mezcla: #000;
}

/* ---- Tema oscuro -------------------------------------------------------
   Automático según el sistema (salvo que el usuario haya elegido "Claro"),
   o forzado con data-theme="dark". Contraste WCAG AA verificado:
   texto ≥ 4.5:1 (principal 13.9:1, secundario 7.3:1) y bordes de campos 3.1:1. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg-app: #0F141B;
        --bg-card: #171E27;
        --text-principal: #E6EAF0;
        --text-muted: #A3ACB9;
        --borde: #2A3441;
        --borde-campo: #5F6B7C;
        --superficie-2: #1E2631;
        --superficie-hover: #1C2430;
        --btn-icono-bg: #243040;
        --foto-bg: #2A3441;
        --badge-bg: #26303D;
        --exito-bg: #10291D;
        --exito-texto: #6EE7A8;
        --exito-borde: #1C4A33;
        --peligro-bg: #3A1517;
        --peligro-texto: #FCA5A5;
        --peligro-borde: #5C2427;
        --color-primario-texto: color-mix(in srgb, var(--color-primario) 40%, #FFFFFF);
        --tinte-marca: color-mix(in srgb, var(--color-primario) 30%, var(--bg-card));
        --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
        --sombra-md: 0 6px 16px rgba(0, 0, 0, 0.5);
        --asa: #4A5566;
        --velo: rgba(0, 0, 0, 0.62);
        --sombra-barra: 0 -4px 18px rgba(0, 0, 0, 0.35);
        --sombra-hoja: 0 -12px 40px rgba(0, 0, 0, 0.55);
        --tono-fondo-pct: 24%;
        --tono-texto-pct: 55%;
        --tono-texto-mezcla: #FFF;
        --foco: color-mix(in srgb, var(--color-primario) 40%, #FFFFFF);
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg-app: #0F141B;
    --bg-card: #171E27;
    --text-principal: #E6EAF0;
    --text-muted: #A3ACB9;
    --borde: #2A3441;
    --borde-campo: #5F6B7C;
    --superficie-2: #1E2631;
    --superficie-hover: #1C2430;
    --btn-icono-bg: #243040;
    --foto-bg: #2A3441;
    --badge-bg: #26303D;
    --exito-bg: #10291D;
    --exito-texto: #6EE7A8;
    --exito-borde: #1C4A33;
    --peligro-bg: #3A1517;
    --peligro-texto: #FCA5A5;
    --peligro-borde: #5C2427;
    --color-primario-texto: color-mix(in srgb, var(--color-primario) 40%, #FFFFFF);
    --tinte-marca: color-mix(in srgb, var(--color-primario) 30%, var(--bg-card));
    --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --sombra-md: 0 6px 16px rgba(0, 0, 0, 0.5);
    --asa: #4A5566;
    --velo: rgba(0, 0, 0, 0.62);
    --sombra-barra: 0 -4px 18px rgba(0, 0, 0, 0.35);
    --sombra-hoja: 0 -12px 40px rgba(0, 0, 0, 0.55);
    --tono-fondo-pct: 24%;
    --tono-texto-pct: 55%;
    --tono-texto-mezcla: #FFF;
    --foco: color-mix(in srgb, var(--color-primario) 40%, #FFFFFF);
}

/* En oscuro, los campos toman el texto claro del tema (en claro se deja el del navegador, como antes) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) :is(.formulario, .buscador, .tabla, .tabla-apilable, .mv-filtro) :is(input, select, textarea) {
        color: var(--text-principal);
    }

    :root:not([data-theme="light"]) .login-box input {
        background: var(--superficie-2);
        color: var(--text-principal);
    }
}
:root[data-theme="dark"] :is(.formulario, .buscador, .tabla, .tabla-apilable, .mv-filtro) :is(input, select, textarea) {
    color: var(--text-principal);
}

:root[data-theme="dark"] .login-box input {
    background: var(--superficie-2);
    color: var(--text-principal);
}

/* ---- Utilidades generales ---------------------------------------------- */
/* El atributo hidden siempre gana (antes, clases con display: flex lo anulaban;
   p. ej. el ícono de WhatsApp aparecía aunque el teléfono no fuera válido). */
[hidden] {
    display: none !important;
}

@media (min-width: 992px) {
    .solo-movil,
    .mv-marca, .mv-titulo, .mv-avatar, .mv-barra,
    #hoja-mas {
        display: none !important;
    }

    /* En escritorio, la hoja de acciones ("Nuevo") se abre como ventana centrada
       cerca de la parte superior, como una paleta de comandos */
    .mv-capa.mv-hoja {
        align-items: flex-start;
        padding: 12vh 24px 24px;
    }

    .mv-capa.mv-hoja .mv-hoja-panel {
        max-width: 520px;
        border-radius: 18px;
        box-shadow: var(--sombra-md), 0 24px 60px rgba(0, 0, 0, 0.22);
        padding-bottom: 6px;
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
        transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.18s ease;
    }

    .mv-capa.es-abierta.mv-hoja .mv-hoja-panel {
        opacity: 1;
        transform: none;
    }

    .mv-capa.mv-hoja .mv-hoja-asa {
        display: none;
    }

    .mv-hoja .mv-hoja-cabecera {
        padding-top: 14px;
    }

    .mv-accion:hover {
        background: var(--superficie-2);
    }

    .mv-accion:focus-visible {
        outline-offset: -2px;
    }
}

/* Escritorio angosto (992–1199 px): la barra superior se compacta */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .topbar-user-texto,
    .boton-instalar span {
        display: none;
    }

    .boton-instalar {
        width: 34px;
        padding: 0;
        justify-content: center;
    }

    .topbar-user {
        padding-left: 4px;
        border-left: none;
    }
}

@media (max-width: 991.98px) {
    .solo-escritorio {
        display: none !important;
    }
}

/* ---- Barra superior: botón "Instalar app" y selector de tema (TODOS los tamaños) ---- */
.boton-instalar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    margin-right: 12px;
    border-radius: 999px;
    border: 1px solid var(--borde);
    background: var(--bg-card);
    color: var(--color-primario-texto);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.boton-instalar:hover {
    border-color: var(--color-primario-texto);
}

.boton-tema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--btn-icono-bg);
    color: var(--text-principal);
    font-size: 0.95rem;
    cursor: pointer;
}

/* ---- Capas: hojas inferiores y ventanas (Jakob) ------------------------ */
.mv-capa {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.mv-fondo {
    position: absolute;
    inset: 0;
    background: var(--velo);
    opacity: 0;
    transition: opacity 0.22s ease;
    -webkit-tap-highlight-color: transparent;
}

.mv-capa.es-abierta .mv-fondo {
    opacity: 1;
}

html.mv-bloqueo,
html.mv-bloqueo body {
    overflow: hidden;
}

/* Hoja inferior: esquinas de 20 px, asa de 40×5, máx. 88 dvh */
.mv-hoja-panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-radius: 20px 20px 0 0;
    box-shadow: var(--sombra-hoja);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    outline: none;
}

.mv-capa.es-abierta .mv-hoja-panel {
    transform: translateY(0);
}

.mv-hoja-asa {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
    cursor: grab;
    touch-action: none;
}

.mv-hoja-asa span {
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: var(--asa);
}

.mv-hoja-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 12px 8px 20px;
    touch-action: none;
}

.mv-hoja-titulo {
    margin: 0;
    font-family: var(--fuente-base);
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Fitts: el cierre es un objetivo de 40 px */
.mv-cerrar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--btn-icono-bg);
    color: var(--text-principal);
    font-size: 1rem;
    cursor: pointer;
}

.mv-hoja-cuerpo {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 18px;
}

/* Hoja de acción principal: filas de 68 px, ícono de 46 px teñido, título + descripción + flecha */
.mv-acciones {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mv-accion {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 10px 8px;
    border-radius: 14px;
    color: var(--text-principal);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s ease, transform 0.08s ease;
}

.mv-accion[data-tono="azul"]   { --tono: #2563EB; }
.mv-accion[data-tono="verde"]  { --tono: #16A34A; }
.mv-accion[data-tono="ambar"]  { --tono: #D97706; }
.mv-accion[data-tono="morado"] { --tono: #9333EA; }
.mv-accion[data-tono="rosa"]   { --tono: #DB2777; }

.mv-accion-icono {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 1.3rem;
    background: color-mix(in srgb, var(--tono) var(--tono-fondo-pct), var(--bg-card));
    color: color-mix(in srgb, var(--tono) var(--tono-texto-pct), var(--tono-texto-mezcla));
}

.mv-accion-texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mv-accion-texto strong {
    font-size: 0.97rem;
    font-weight: 700;
    line-height: 1.3;
}

.mv-accion-texto span {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mv-accion-flecha {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Doherty: respuesta inmediata al tocar */
.mv-accion:active {
    background: var(--superficie-2);
    transform: scale(0.96);
}

/* Hoja "Más": grupos con título en mayúsculas pequeñas (Miller / proximidad) */
.mv-grupo {
    margin: 4px 0 18px;
}

.mv-grupo-titulo {
    margin: 0 4px 8px;
    font-family: var(--fuente-base);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Mosaicos de 3 columnas; 4 si el grupo tiene exactamente 4 (para no dejar uno suelto) */
.mv-mosaicos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.mv-mosaicos[data-columnas="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mv-mosaico {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 84px;
    padding: 12px 4px 10px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: none;
    color: var(--text-principal);
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s ease, transform 0.08s ease;
}

.mv-mosaico-icono {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--superficie-2);
    color: var(--color-primario-texto);
    font-size: 1.15rem;
}

.mv-mosaico-foto {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    object-fit: cover;
}

.mv-mosaico-inicial {
    font-weight: 800;
    font-size: 1rem;
}

.mv-mosaico-texto {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.mv-mosaico.es-activo {
    background: var(--tinte-marca);
    color: var(--color-primario-texto);
}

.mv-mosaico.es-activo .mv-mosaico-icono {
    background: var(--bg-card);
}

.mv-mosaico:active {
    transform: scale(0.95);
}

/* Tema Claro / Oscuro / Auto como control segmentado */
.mv-segmentado {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--borde);
    border-radius: 14px;
    background: var(--superficie-2);
}

.mv-segmentado button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.mv-segmentado button[aria-pressed="true"] {
    background: var(--bg-card);
    color: var(--text-principal);
    box-shadow: var(--sombra-sm);
}

.mv-segmentado button:active {
    transform: scale(0.96);
}

.mv-mas-pie {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mv-boton-fila {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid var(--borde);
    border-radius: 14px;
    background: var(--bg-card);
    color: var(--text-principal);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.mv-boton-fila:active {
    transform: scale(0.96);
}

.mv-boton-salir {
    color: var(--peligro-texto);
    background: var(--peligro-bg);
    border-color: var(--peligro-borde);
}

/* ---- Ventanas emergentes: centradas en ≥ 576 px, hoja desde abajo en < 576 px ---- */
.mv-ventana {
    align-items: center;
    padding: 24px;
}

.mv-ventana-caja {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 86vh;
    max-height: 86dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-card);
    border-radius: 18px;
    box-shadow: var(--sombra-md);
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
    outline: none;
}

.mv-capa.es-abierta .mv-ventana-caja {
    opacity: 1;
    transform: none;
}

/* Funciona igual si un <form> envuelve encabezado, cuerpo y pie */
.mv-ventana-caja > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.mv-ventana-cabecera {
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 12px 12px 20px;
    border-bottom: 1px solid var(--borde);
}

.mv-ventana-cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px;
}

.mv-ventana-pie {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--borde);
}

/* Botón de pie de ventana: tonal, no relleno (Von Restorff: el relleno es solo de la acción principal) */
.mv-boton-pie {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border: none;
    border-radius: 12px;
    background: var(--tinte-marca);
    color: var(--color-primario-texto);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.mv-boton-pie:active {
    transform: scale(0.96);
}

.mv-instalar-intro {
    margin: 0 0 12px;
}

.mv-instalar-pasos h3 {
    margin: 4px 0 6px;
    font-size: 0.95rem;
}

.mv-instalar-pasos ol {
    margin: 0;
    padding-left: 22px;
}

.mv-instalar-pasos li {
    margin-bottom: 8px;
}

@media (max-width: 575.98px) {
    .mv-ventana {
        align-items: flex-end;
        padding: 0;
    }

    .mv-ventana-caja {
        max-width: none;
        max-height: 94vh;
        max-height: 94dvh;
        border-radius: 20px 20px 0 0;
        box-shadow: var(--sombra-hoja);
        opacity: 1;
        transform: translateY(100%);
        transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* Asa visual en el encabezado (se puede arrastrar para cerrar) */
    .mv-ventana-cabecera {
        padding-top: 22px;
        touch-action: none;
    }

    .mv-ventana-cabecera::before {
        content: "";
        position: absolute;
        top: 9px;
        left: 50%;
        width: 40px;
        height: 5px;
        margin-left: -20px;
        border-radius: 3px;
        background: var(--asa);
    }

    /* Fitts: botones del pie a todo lo ancho, al alcance del pulgar */
    .mv-ventana-pie {
        flex-direction: column-reverse;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    .mv-ventana-pie > * {
        width: 100%;
    }
}

/* Destello breve del elemento al que se llegó con ?abrir= (Tesler) */
@keyframes mv-resaltar {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primario) 55%, transparent); }
    100% { box-shadow: 0 0 0 12px transparent; }
}

.mv-resaltado {
    animation: mv-resaltar 1.4s ease-out 2;
    border-radius: var(--radio-sm);
}

/* =====================================================================
   < 992 px: navegación de app
   ===================================================================== */
@media (max-width: 991.98px) {

    /* Jakob/Hick: la barra inferior reemplaza al menú lateral y al botón ☰ */
    .sidebar,
    .topbar-user,
    .boton-tema,
    .topbar-spacer,
    .migas,
    .buscador-global {
        display: none !important;
    }

    .app-shell {
        display: block;
        min-height: 100vh;
        min-height: 100dvh;
    }

    /* ---- Barra superior compacta: 56 px + zona segura superior, sticky ---- */
    .topbar {
        height: calc(var(--mv-top-alto) + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left));
        gap: 6px;
    }

    /* Marca pequeña de 32 px dentro de un objetivo táctil de 44 px (Fitts) */
    .mv-marca {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        text-decoration: none;
    }

    .mv-marca img,
    .mv-marca i {
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }

    .mv-marca img {
        object-fit: contain;
        background: #FFFFFF;
        border: 1px solid var(--borde);
    }

    .mv-marca i {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-primario);
        color: var(--sobre-primario);
        font-size: 1rem;
    }

    .mv-titulo {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        font-size: 1.06rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .boton-instalar {
        flex-shrink: 0;
        height: 40px;
        margin-right: 2px;
        padding: 0 12px;
    }

    .mv-avatar {
        flex-shrink: 0;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: 0 2px 0 4px;
        border: none;
        border-radius: 50%;
        background: var(--color-primario);
        color: var(--sobre-primario);
        font-family: inherit;
        font-size: 0.85rem;
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
    }

    /* Área táctil de 44 px aunque el círculo mida 36 px */
    .mv-avatar::after {
        content: "";
        position: absolute;
        inset: -4px;
    }

    .mv-avatar:active,
    .mv-marca:active {
        transform: scale(0.94);
    }

    /* ---- Contenido: nunca queda tapado por la barra inferior ---- */
    .content {
        padding: 16px max(16px, env(safe-area-inset-right)) calc(var(--mv-barra-alto) + env(safe-area-inset-bottom) + 32px) max(16px, env(safe-area-inset-left));
    }

    #contenido [id] {
        scroll-margin-top: calc(var(--mv-top-alto) + env(safe-area-inset-top) + 16px);
    }

    /* El H1 que repite el título de la barra se oculta (lo detecta el JS) */
    .mv-h1-repetido {
        display: none;
    }

    /* ---- Barra inferior fija: 64 px + zona segura (Fitts + Jakob) ---- */
    .mv-barra {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        background: var(--bg-card);
        border-top: 1px solid var(--borde);
        box-shadow: var(--sombra-barra);
    }

    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        .mv-barra {
            background: color-mix(in srgb, var(--bg-card) 88%, transparent);
            -webkit-backdrop-filter: saturate(1.6) blur(14px);
            backdrop-filter: saturate(1.6) blur(14px);
        }
    }

    .mv-barra-fila {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        height: var(--mv-barra-alto);
        max-width: 640px;
        margin: 0 auto;
    }

    .mv-tab {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        padding: 0 2px;
        border: none;
        background: none;
        color: var(--text-muted);
        font-family: inherit;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    /* Ícono de 20 px dentro de la "píldora" de 58×30 */
    .mv-tab-icono {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 58px;
        max-width: 100%;
        height: 30px;
        border-radius: 999px;
        font-size: 20px;
        transition: background 0.18s ease, transform 0.08s ease;
    }

    .mv-tab-texto {
        max-width: 100%;
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: 0.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Activo: ícono relleno (-fill) en píldora con tinte de marca + texto de marca */
    .mv-tab.es-activo {
        color: var(--color-primario-texto);
    }

    .mv-tab.es-activo .mv-tab-icono {
        background: var(--tinte-marca);
    }

    .mv-tab.es-activo .mv-tab-texto {
        font-weight: 700;
    }

    .mv-tab:active .mv-tab-icono {
        transform: scale(0.92);
    }

    /* Von Restorff: la acción principal es el ÚNICO botón relleno y elevado.
       Cuadrado redondeado de 54 px, color sólido de marca, elevado −24 px,
       con anillo del color de fondo de la página y sombra. */
    .mv-tab-central {
        justify-content: flex-end;
        padding-bottom: 9px;
    }

    .mv-central-boton {
        position: absolute;
        top: -24px;
        left: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 54px;
        margin-left: -27px;
        border-radius: 18px;
        background: var(--color-primario);
        color: var(--sobre-primario);
        font-size: 24px;
        box-shadow: 0 0 0 5px var(--bg-app), 0 8px 20px color-mix(in srgb, var(--color-primario) 45%, transparent);
        transition: transform 0.08s ease;
    }

    .mv-tab-central:active .mv-central-boton {
        transform: scale(0.92);
    }

    .mv-tab-central .mv-tab-texto {
        color: var(--text-principal);
    }

    /* Insignia roja de pendientes en la esquina del ícono (99+ máximo) */
    .mv-insignia {
        position: absolute;
        top: -3px;
        left: calc(50% + 4px);
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: var(--insignia-bg);
        color: #FFFFFF;
        font-size: 10.5px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
        font-variant-numeric: tabular-nums;
        box-shadow: 0 0 0 2px var(--bg-card);
    }

    .mv-mosaico-icono .mv-insignia {
        top: -6px;
        left: auto;
        right: -8px;
    }

    /* ---- Indicadores (KPI) en 2 columnas compactas (Miller: de 2 en 2) ---- */
    .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 14px;
    }

    .card {
        padding: 12px 14px;
        font-size: 0.8rem;
        line-height: 1.3;
        color: var(--text-muted);
    }

    .card .stat-icon {
        float: none;
        display: block;
        margin-bottom: 6px;
        font-size: 1.1rem;
    }

    .card strong {
        margin-top: 4px;
        font-size: 19px;
        color: var(--text-principal);
        overflow-wrap: anywhere;
    }

    /* Resumen: una columna, cada dato en su fila separada por línea fina */
    .resumen {
        grid-template-columns: 1fr;
    }

    .resumen-dato {
        padding: 14px 16px;
    }

    .resumen-dato + .resumen-dato {
        border-left: none;
        border-top: 1px solid var(--borde);
    }

    .resumen-cifra {
        font-size: 1.5rem;
    }

    /* Acciones frecuentes: filas de 68 px como en la hoja de acciones (Jakob) */
    .accesos-grid {
        grid-template-columns: 1fr;
    }

    .accesos-grid > li:nth-child(odd) {
        border-right: none;
    }

    .accesos-grid > li:nth-last-child(2):nth-child(odd) {
        border-bottom: 1px solid var(--borde);
    }

    .acceso-card:active,
    .tarjeta-alumno:active {
        transform: scale(0.96);
    }

    /* ---- Pestañas y filtros: UNA línea deslizable horizontal de chips ---- */
    .chips {
        display: flex;
        gap: 8px;
        margin: 6px -16px 12px;
        padding: 2px 16px;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .chips::-webkit-scrollbar {
        display: none;
    }

    .chip {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 40px;
        padding: 0 16px;
        border: 1px solid var(--borde-campo);
        border-radius: 999px;
        background: var(--bg-card);
        color: var(--text-principal);
        font-size: 0.88rem;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        scroll-snap-align: start;
        -webkit-tap-highlight-color: transparent;
    }

    .chip[aria-current="page"] {
        border-color: transparent;
        background: var(--tinte-marca);
        color: var(--color-primario-texto);
    }

    .chip:active {
        transform: scale(0.95);
    }

    /* ---- Campos: alto ≥ 44 px y letra de 16 px (evita el zoom automático de iOS) ---- */
    .formulario :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select),
    .bloque :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select, textarea),
    .login-box input,
    .buscador input[type="search"],
    .mv-filtro input,
    .tabla td :is(input:not([type="checkbox"]), select),
    .tabla-apilable td :is(input:not([type="checkbox"]), select) {
        min-height: 44px;
        font-size: 16px;
        border-color: var(--borde-campo);
    }

    .formulario textarea {
        font-size: 16px;
        border-color: var(--borde-campo);
    }

    :is(.formulario, .bloque, .importar-form) input[type="file"] {
        width: 100%;
        min-height: 44px;
        font-size: 15px;
        padding: 0;
        border: none;
    }

    :is(.formulario, .bloque, .importar-form) input[type="file"]::file-selector-button {
        min-height: 44px;
        margin-right: 10px;
        padding: 0 14px;
        border: 1px solid var(--borde-campo);
        border-radius: var(--radio-sm);
        background: var(--superficie-2);
        color: var(--text-principal);
        font-family: inherit;
        font-weight: 600;
    }

    .check input[type="checkbox"],
    .celda-check input[type="checkbox"] {
        width: 22px !important;
        height: 22px;
    }

    .check {
        min-height: 44px;
    }

    .formulario {
        max-width: none;
        padding: 18px 16px;
    }

    .bloque {
        padding: 0 14px;
    }

    .bloque summary {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 12px 0;
    }

    /* Botones: objetivos de ≥ 44 px; el texto de enlaces destructivos también */
    .content .btn,
    .content button[type="submit"]:not(.btn-icono):not(.link-button) {
        min-height: 44px;
        justify-content: center;
    }

    .content button[type="submit"]:active,
    .content .btn:active {
        transform: scale(0.96);
    }

    .link-button {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        font-size: 0.92rem;
    }

    .btn-cancelar {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 8px;
    }

    .enlace-volver {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 44px;
        font-weight: 600;
        text-decoration: none;
        color: var(--color-primario-texto);
    }

    /* ---- Búsqueda a todo el ancho ---- */
    .buscador {
        margin: 8px 0 12px;
    }

    .buscador input[type="search"],
    .mv-filtro input {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        max-width: none;
        padding: 10px 14px 10px 42px;
        border: 1px solid var(--borde-campo);
        border-radius: 12px;
        background: var(--bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 16 16' fill='%238A93A3'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E") no-repeat 14px center;
        font-family: inherit;
    }

    .mv-filtro {
        margin: 8px 0 12px;
    }

    .mv-mas-busqueda {
        margin: 2px 0 16px;
    }

    .mv-filtro input:focus {
        outline: none;
        border-color: var(--color-primario);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 18%, transparent);
    }

    /* En móvil la búsqueda se lanza con la tecla "Buscar" del teclado */
    .buscador button[type="submit"] {
        display: none;
    }

    /* ---- Tablas como tarjetas: acciones en su propia fila ---- */
    :is(.tabla, .tabla-apilable) td {
        font-size: 0.95rem;
    }

    :is(.tabla, .tabla-apilable) td[data-label="Acciones"] {
        padding: 8px 10px;
        text-align: left;
        background: var(--superficie-2);
    }

    :is(.tabla, .tabla-apilable) td[data-label="Acciones"]::before {
        content: none;
    }

    .acciones-iconos {
        justify-content: flex-start;
        gap: 8px;
    }

    /* Fitts: botones de ícono de 40 px */
    .btn-icono {
        width: 40px;
        height: 40px;
        font-size: 1.05rem;
    }

    .btn-icono:active {
        transform: scale(0.92);
    }

    /* Los destructivos van separados de editar/pagar (equivalente a ms-auto) */
    .acciones-iconos .btn-icono-peligro,
    td[data-label="Acciones"] .btn-icono-peligro {
        margin-left: auto;
    }

    /* ---- Portal ---- */
    .tarjetas-alumnos {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 12px;
    }

    .ficha-alumno-header {
        gap: 14px;
        margin-bottom: 14px;
    }

    .ficha-alumno-header .foto-preview {
        width: 72px;
        height: 72px;
        margin-bottom: 0;
    }

    .ficha-alumno-header h1 {
        font-size: 1.35rem;
    }

    /* ---- Inicio de sesión ---- */
    .login-box {
        margin: max(6vh, calc(env(safe-area-inset-top) + 24px)) 16px 32px;
        padding: 28px 20px;
    }

    .login-box button {
        min-height: 48px;
    }

    h1 {
        font-size: 1.45rem;
    }
}

/* Formularios que viven dentro de bloques plegables sin la clase .formulario
   (p. ej. Editar tutor): reciben el mismo estilo de campo que el resto (antes
   quedaban con el estilo del navegador: 21 px de alto y borde casi invisible) */
@media all {
    .bloque :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select, textarea) {
        width: 100%;
        min-height: 40px;
        margin-top: 4px;
        padding: 9px 11px;
        border: 1px solid var(--borde-campo);
        border-radius: var(--radio-sm);
        background: var(--bg-card);
        color: var(--text-principal);
        font-family: inherit;
        font-size: 0.95rem;
    }

    .bloque label {
        display: block;
        margin-top: 10px;
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--text-muted);
    }

    .bloque label.check {
        display: flex;
    }


}

/* Celular: la fila de foto vacía (sin foto cargada) no aporta nada en la tarjeta.
   (Solo en < 992 px: en escritorio la celda debe existir para que las columnas
   de la tabla queden alineadas con sus encabezados.) */
@media (max-width: 991.98px) {
    :is(.tabla, .tabla-apilable) td.td-foto:has(.foto-generica) {
        display: none;
    }
}

/* Pantallas táctiles: el :hover se queda "pegado" después de tocar, así que ahí no
   se usan los efectos de hover (en escritorio con mouse siguen igual que siempre). */
@media (hover: none) {
    .acceso-card:hover,
    .tarjeta-alumno:hover {
        transform: none;
        box-shadow: var(--sombra-sm);
        border-color: var(--borde);
    }

    .btn-icono:hover {
        background: var(--btn-icono-bg);
        color: var(--color-primario-texto);
    }

    .btn-icono-peligro:hover {
        color: var(--peligro-texto);
    }

    .tabla tbody tr:hover {
        background: transparent;
    }
}

/* Tablets (576–991 px): las tarjetas de las tablas en 2 columnas */
@media (min-width: 576px) and (max-width: 991.98px) {
    :is(.tabla, .tabla-apilable) tbody {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: start;
    }

    :is(.tabla, .tabla-apilable) tr {
        margin-bottom: 0;
    }

    .tarjetas-alumnos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cards-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .accesos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Teléfonos: formularios con el botón principal a todo lo ancho (zona del pulgar) */
@media (max-width: 575.98px) {
    .content form > button[type="submit"]:not(.btn-icono):not(.link-button),
    .content form .grid-full > button[type="submit"],
    .content .btn-guardar-vinculos {
        width: 100%;
    }

    .content form > button[type="submit"] + .btn-cancelar,
    .content form .grid-full > button[type="submit"] + .btn-cancelar {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 6px 0 0;
    }
}

/* Pantallas muy angostas (< 360 px): "Instalar app" queda solo con su ícono */
@media (max-width: 359.98px) {
    .boton-instalar {
        width: 40px;
        padding: 0;
        justify-content: center;
    }

    .boton-instalar span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* Accesibilidad: sin animaciones para quien las desactivó en su sistema */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Enlace de filtro bajo los botones de Colegiaturas: objetivo táctil/clic cómodo */
.filtro-cargos-escritorio a { display: inline-block; padding: 0.35rem 0; }

/* ---------------------------------------------------------------------
   Predictor del buscador (assets/js/buscador.js) y página de resultados
   --------------------------------------------------------------------- */
.con-predictor { position: relative; }

.sug-lista {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    width: min(440px, calc(100vw - 32px));
    max-height: min(70vh, 520px);
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-md);
}
.sug-lista[hidden] { display: none; }

.sug-grupo {
    padding: 8px 10px 4px;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sug-opcion {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 7px 10px;
    border-radius: var(--radio-sm);
    cursor: pointer;
    color: var(--text-principal);
}
.sug-opcion.es-activa { background: var(--tinte-marca); }

.sug-foto, .sug-icono {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
}
.sug-foto { object-fit: cover; border: 1px solid var(--borde); background: var(--foto-bg); }
.sug-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--superficie-hover);
    color: var(--text-muted);
    font-size: 1rem;
}

.sug-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sug-nombre, .sug-detalle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug-nombre { font-size: 0.92rem; font-weight: 600; }
.sug-detalle { color: var(--text-muted); font-size: 0.8rem; }
.sug-lista mark {
    background: transparent;
    color: var(--color-primario-texto);
    font-weight: 800;
}

.sug-todos {
    margin-top: 4px;
    border-top: 1px solid var(--borde);
    border-radius: 0 0 var(--radio-sm) var(--radio-sm);
    color: var(--color-primario-texto);
    font-size: 0.88rem;
    font-weight: 600;
}
.sug-mensaje { padding: 14px 12px; color: var(--text-muted); font-size: 0.9rem; }
.sug-mensaje a { color: var(--color-primario-texto); font-weight: 600; }

/* Página de resultados */
.buscar-pagina { margin: 0 0 14px; }
.buscar-pagina input {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--borde-campo);
    border-radius: var(--radio-sm);
    background: var(--bg-card);
    color: var(--text-principal);
    font: inherit;
}
.resultados {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
}
.resultados li + li { border-top: 1px solid var(--borde); }
.resultado {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 14px;
    color: var(--text-principal);
    text-decoration: none;
}
.resultado:hover { background: var(--superficie-hover); }
.resultado-texto { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.resultado-texto span { color: var(--text-muted); font-size: 0.85rem; overflow-wrap: anywhere; }
.resultado-flecha { color: var(--text-muted); }
.vacio-busqueda { padding: 8px 0; }

/* Dentro de la hoja "Más" (celular) la lista va en el flujo, no flotando */
.mv-mas-busqueda .sug-lista {
    position: static;
    width: auto;
    max-height: 45vh;
    margin-top: 8px;
    box-shadow: none;
}