/* ═══════════════════════════════════════════════════════════════
   APP.CSS — Estilos base del sistema Mentoora

   MAPEO DE VARIABLES:
     tema.css inyecta:  --color-primario, --color-secundario, --color-acento, --color-texto,
                        --fuente-principal, --fuente-titulos, paleta extendida
   COLORES POR DEFECTO (marca Mentoora):
     --c-principal:    #fd5100
     --c-secundario-a: #d20a2d
     --c-secundario-b: #00ceb3
     --c-blanco:       #ffffff
     --c-gris:         #878787

   TIPOGRAFÍAS POR DEFECTO:
     Títulos: Inter — Cuerpo: Inter
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Colores Base del Sistema ──────────── */
    --c-principal: #fd5100;
    --c-secundario-a: #d20a2d;
    --c-secundario-b: #00ceb3;
    --c-blanco: #ffffff;
    --c-gris: #878787;

    --font: 'Inter', sans-serif;
    --font-titulos: 'Inter', sans-serif;

    /* ── Colores Derivados Automáticos ────────────────────────────── */
    --c-texto: color-mix(in srgb, var(--c-principal) 15%, black);

    --c-principal-claro: color-mix(in srgb, var(--c-principal) 30%, white);
    --c-principal-light: color-mix(in srgb, var(--c-principal), transparent 85%);
    --c-principal-hover: color-mix(in srgb, var(--c-principal) 82%, black);

    --c-secundario-a-light: color-mix(in srgb, var(--c-secundario-a), transparent 94%);

    --c-secundario-b-claro: color-mix(in srgb, var(--c-secundario-b) 40%, white);
    --c-secundario-b-oscuro: color-mix(in srgb, var(--c-secundario-b) 80%, black);

    /* ── Grises y neutros ────────────────────────────────────── */
    --fondo: #f6f6f6;
    --gris-claro: #e8e9ed;
    --gris-texto: #767a83;
    --gris-tabla: #ededed;
    --gris-td: #706f6f;
    --gris-suave: #a0a4ac;
    --gris-oscuro: #878787;
    --borde: #e8e9ed;
    --borde-soft: #c6c6c6;
    --texto: #3c3c3b;
    --texto-sidebar: #3c3c3b;
    --texto-soft: #a0a4ac;
    --exito: #10b981;
    --exito-soft: #d1fae5;
    --peligro: #ef4444;
    --peligro-soft: #fee2e2;
    --info: #3b82f6;
    --info-soft: #dbeafe;



    /* ── Layout ──────────────────────────────────────────────── */
    --cabecera-h: 80px;
    --sidebar-w: 275px;

    /* ── Escala tipográfica (base 16px) ──────────────────────── */
    --text-2xs: 0.625rem;
    /* 10px — micro etiquetas       */
    --text-xs: 0.75rem;
    /* 12px — badges, hints         */
    --text-body: 0.8125rem;
    /* 13px — cuerpo admin, inputs  */
    --text-sm: 0.875rem;
    /* 14px — labels, metadata      */
    --text-base: 1rem;
    /* 16px — base del navegador    */
    --text-md: 1.125rem;
    /* 18px — párrafos destacados   */
    --text-lg: 1.25rem;
    /* 20px — subtítulos            */
    --text-xl: 1.375rem;
    /* 22px — títulos de sección    */
    --text-2xl: 1.5rem;
    /* 24px — títulos destacados    */
    --text-3xl: 1.5625rem;
    /* 25px — títulos principales   */
    --text-4xl: 2rem;
    /* 32px — hero, números KPI     */


    /* ── Pesos tipográficos ──────────────────────────────────── */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* ── Line heights ────────────────────────────────────────── */
    --lh-tight: 1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;

    /* ── Sombras ─────────────────────────────────────────────── */
    --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --sombra-md: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --sombra-lg: 0 10px 30px rgba(0, 0, 0, 0.12);

    /* ── Radios ──────────────────────────────────────────────── */
    --radio-sm: 6px;
    --radio: 10px;
    --radio-lg: 14px;
    --radio-pill: 999px;
}

/* ═══════════════════════════════════════════════════════════════
   RESET Y BASE
   ═══════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Anti-FOUC: limitar SVGs inline */
svg:not(.marca-logo-img) {
    max-width: 24px;
    max-height: 24px;
    flex-shrink: 0;
}

body {
    font-family: var(--font);
    font-size: var(--text-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    background-color: var(--fondo);
    color: var(--texto);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--c-principal);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   TIPOGRAFÍA GLOBAL — Tags HTML (Mentoora: Inter)
   ═══════════════════════════════════════════════════════════════ */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-titulos);
}

h1 {
    font-size: var(--text-3xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--texto);
    letter-spacing: -0.3px;
}

h2 {
    font-size: var(--text-2xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--c-secundario-a);
    margin: 0;
}

h3 {
    font-size: var(--text-xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--c-secundario-a);
    margin: 0;
}

h4 {
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--c-secundario-a);
}

h5 {
    font-size: var(--text-md);
    font-weight: var(--fw-semibold);
    color: var(--c-secundario-a);
}

h6 {
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    color: var(--c-secundario-a);
}

p {
    font-size: var(--text-base);
    color: var(--texto);
    line-height: var(--lh-relaxed);
    font-family: var(--font);
}

small,
.text-small {
    font-size: var(--text-sm);
    color: var(--gris-texto);
}

/* ── Clases utilitarias ─────────────────────────────────────── */
.text-2xs {
    font-size: var(--text-2xs);
}

.text-xs {
    font-size: var(--text-xs);
}

.text-sm {
    font-size: var(--text-sm);
}

.text-base {
    font-size: var(--text-base);
}

.text-md {
    font-size: var(--text-md);
}

.text-lg {
    font-size: var(--text-lg);
}

.text-xl {
    font-size: var(--text-xl);
}

.text-2xl {
    font-size: var(--text-2xl);
}

.text-3xl {
    font-size: var(--text-3xl);
}

.text-4xl {
    font-size: var(--text-4xl);
}

.fw-light {
    font-weight: var(--fw-light);
}

.fw-regular {
    font-weight: var(--fw-regular);
}

.fw-medium {
    font-weight: var(--fw-medium);
}

.fw-semibold {
    font-weight: var(--fw-semibold);
}

.fw-bold {
    font-weight: var(--fw-bold);
}

.fw-extrabold {
    font-weight: var(--fw-extrabold);
}

.text-muted {
    color: var(--gris-texto);
}

.text-primary {
    color: var(--c-principal);
}

.text-dark {
    color: var(--c-secundario-a);
}

.text-white {
    color: var(--c-blanco);
}

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

.mt-1 {
    margin-top: .5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mb-1 {
    margin-bottom: .5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

.hidden {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   FORMULARIOS
   ═══════════════════════════════════════════════════════════════ */
input,
select,
textarea {
    font-size: var(--text-base);
    color: var(--texto);
    border-radius: 10px;
    border: none;
    font-family: var(--font);
}

label {
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    font-family: var(--font);
}

input::placeholder,
textarea::placeholder {
    color: var(--gris-suave);
    font-size: var(--text-sm);
    font-weight: var(--fw-regular);
}

input:focus,
textarea:focus {
    border: 1.5px solid var(--c-principal);
    box-shadow: 0 0 0 3px var(--c-principal-light);
    background-color: var(--c-blanco);
    outline: none;
}

select {
    background-color: var(--gris-claro);
    width: max-content;
    border: none;
    border-radius: 10px;
}

select:focus {
    border: 1.5px solid var(--c-principal);
    box-shadow: 0 0 0 3px var(--c-principal-light);
    background-color: var(--gris-claro);
}



.form-grupo label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--gris-oscuro);
    margin-bottom: 6px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    font-family: var(--font);
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.form-input {
    width: 100%;
    padding: 0 12px;
    border-radius: var(--radio-sm, 6px);
    border: 1px solid var(--borde, #e8e9ed);
    background: var(--c-blanco);
    font-size: var(--text-sm);
    color: var(--texto, #1a1a1a);
    height: 40px;
    font-family: var(--font, sans-serif);
    transition: all .15s ease-in-out;
}

.form-input[type="file"] {
    padding: 7px 12px;
    background: var(--fondo);
    cursor: pointer;
}

.form-input[type="file"]::file-selector-button {
    background: var(--c-blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    padding: 4px 12px;
    margin-right: 12px;
    color: var(--texto);
    font-weight: 500;
    cursor: pointer;
    font-size: 12px;
    transition: all .15s;
}

.form-input[type="file"]::file-selector-button:hover {
    border-color: var(--c-principal);
    color: var(--c-principal-hover);
}

.form-input:focus {
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

.form-input.has-icon-left {
    padding-left: 40px;
}

.form-input::placeholder {
    color: var(--texto-soft, #a0a4ac);
    font-size: var(--text-body);
    font-weight: var(--fw-regular);
}

.form-input:focus {
    border-color: var(--c-principal);
    background: var(--c-blanco);
    box-shadow: 0 0 0 3px var(--c-principal-light);
}

textarea.form-input {
    height: auto;
    padding: 10px 14px;
    resize: vertical;
    min-height: 72px;
}

select.form-input {
    cursor: pointer;
    padding: 0 12px;
}

/* ── Utilidades de formulario reutilizables ─────────────────────
   Reemplazan inline styles en los formularios.
   ─────────────────────────────────────────────────────────────── */

/* Asterisco de campo requerido: <label>Nombre <span class="req">*</span></label> */
.req {
    color: var(--peligro);
    margin-left: 2px;
    font-weight: 700;
}

/* Texto de ayuda bajo un input: <small class="form-hint">…</small> */
.form-hint {
    display: block;
    margin-top: 4px;
    color: var(--gris-oscuro);
    font-size: 11px;
    line-height: 1.4;
}

/* Input que tiene un botón toggle a la derecha (ej. mostrar/ocultar contraseña) */
.form-input--with-toggle {
    padding-right: 38px;
}

/* Botón toggle posicionado dentro del .input-wrapper (típicamente para passwords) */
.btn-toggle-password svg {
    pointer-events: none;
}

/* ==========================================================================
   BOTONES DE ACCIÓN PRINCIPALES (EJ: AGREGAR DOCENTE, AGREGAR ADMIN)
   ========================================================================== */
.btn-accion-principal {
    display: inline-flex;
    background: var(--c-principal);
    color: var(--c-blanco);
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 600;
    border: none;
    text-decoration: none;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-accion-principal svg {
    color: var(--c-blanco)
}

.btn-accion-principal:hover {
    opacity: 0.9;
}

.btn-accion-principal svg {
    flex-shrink: 0;
}

.btn-toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--gris-suave);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border-radius: 4px;
    transition: color .15s, background-color .15s;
}

.btn-toggle-password:hover {
    color: var(--c-secundario-a);
    background: var(--fondo);
}

.btn-toggle-password:focus-visible {
    outline: 2px solid var(--c-principal);
    outline-offset: 1px;
}

/* ── Iconos dentro del input ─────────────────────────────────── */
.input-icono {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

.input-icono-left {
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gris-suave);
    transition: color 0.2s;
}

.input-wrapper:focus-within .input-icono-left {
    color: var(--c-principal);
}

.input-icono svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Botón ojo (toggle contraseña) ────────────── */
.btn-ojo {
    position: absolute;
    right: 14px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    color: var(--gris-suave);
    transition: color 0.2s;
}

.btn-ojo:hover {
    color: var(--c-principal);
}

.btn-ojo span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-ojo svg {
    width: 20px;
    height: 20px;
}

/* ── Error en input ──────────────────────────────────────────── */
.input-error {
    border-color: var(--peligro) !important;
    animation: shake 0.4s ease;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-6px);
    }

    40% {
        transform: translateX(6px);
    }

    60% {
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(4px);
    }
}

/* Mensaje de error inline bajo cada campo obligatorio */
.field-error-msg {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--peligro);
    animation: fadeInDown .15s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════
   ESTRUCTURA PRINCIPAL
   Layout: sidebar izquierdo (100vh) | derecha: header + contenido
   ═══════════════════════════════════════════════════════════════ */
.body-main {
    display: flex;
    min-height: 100vh;
    background-color: var(--fondo);
    padding: 0;
    gap: 0;
}

.menu {
    width: var(--sidebar-w);
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

.section-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--fondo);
    min-height: 100vh;
    /* Ensure it covers full height even if content is small */
}

.section-main {
    padding: 7px 26px 26px;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    background: var(--fondo);
    border-radius: 0;
    box-shadow: none;
}

/* ── Encabezado de sección ───────────────────────────────────── */
.encabezado-section {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    /* Alinear contenido (como botones) a la derecha */
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 0;
}

/* Ocultar título y descripción local, ya que ahora van en el header superior */
.encabezado-section h2,
.encabezado-section p {
    display: none !important;
}

/* ── Alertas ──────────────────────────────────────────────── */
.alert {
    padding: .8rem 1rem;
    border-radius: var(--radio);
    margin-bottom: 1rem;
    font-size: .9rem;
}

.alert-error {
    background: #fdecea;
    color: #b71c1c;
    border-left: 4px solid #c62828;
}

.alert-success {
    background: #e8f5e9;
    color: #1b5e20;
    border-left: 4px solid #2e7d32;
}

.alert-info {
    background: #e3f2fd;
    color: #0d47a1;
    border-left: 4px solid #1976d2;
}

/* ── Cards ──────────────────────────────────────────────── */
.card {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-sm);
    padding: 1.5rem;
}

/* ── Badges ──────────────────────────────────────────────── */
/* Estado: punto + texto (sin pill sólida). Estilo de la maqueta. */
.badge-activo,
.badge-inactivo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-size: var(--text-sm) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: 0;
}

.badge-activo {
    color: var(--c-secundario-b);
}

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

.badge-activo::before,
.badge-inactivo::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Dot explícito (para renderizado JS) */
.badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    display: inline-block;
}

/* Badge de Rol */
.badge-rol {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    background: var(--c-principal);
    color: var(--c-blanco);
    letter-spacing: 0.02em;
}

/* ── Botones ──────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .7rem 1.2rem;
    border: 0;
    border-radius: var(--radio);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: filter .15s, transform .05s;
    text-decoration: none;
}

.btn:hover {
    filter: brightness(.92);
    text-decoration: none;
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.btn-primario {
    background: var(--c-principal);
    color: #fff;
}

.btn-secundario {
    background: var(--c-secundario-a);
    color: var(--c-blanco);
}

.btn-acento {
    background: var(--peligro);
    color: #fff;
}

.btn-block {
    width: 100%;
}

/* Spinner para botones en estado cargando */
.btn.loading {
    position: relative;
    color: transparent !important;
}

.btn.loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    animation: spin .8s linear infinite;
}

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

/* ── Toasts ──────────────────────────────────────────────── */
/* Movidos a components.css para evitar duplicación. */

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: var(--gris-claro);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--gris-oscuro);
    border-radius: 3px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .body-main {
        flex-direction: column;
        min-height: auto;
    }

    .menu {
        width: 100%;
        order: 2;
    }

    .section-container {
        height: auto;
        overflow-y: visible;
    }

    .section-main {
        padding: 16px;
    }

    .encabezado-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .content-card {
        border-radius: 12px;
        padding: 16px;
        gap: 14px;
    }

    .section-filtros {
        padding: 0;
        flex-direction: column;
        align-items: stretch;
    }

    .input-buscador-main {
        width: 100%;
        max-width: none;
    }

    .section-filtros .btn-toolbar-action {
        margin-left: 0;
        align-self: stretch;
        justify-content: center;
    }

    .pagination-container {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px 4px 4px;
    }

    .pagination-controles {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TABLAS — Diseño premium Mentoora (Inter)
   Solo aplica a tablas con clase .table
   ═══════════════════════════════════════════════════════════════ */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* ── Header ─────────────────────────────────────────────────── */
.table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.table th {
    background: var(--gris-tabla);
    text-align: center;
    color: var(--texto-sidebar);
    font-size: 13.5px;
    font-weight: 700;
    padding: 14px 22px;
    border: none;
    white-space: nowrap;
    text-transform: capitalize;
    letter-spacing: 0.02em;
    font-family: var(--font);
}

.table th:first-child {
    border-radius: var(--radio, 10px) 0 0 0;
}

.table th:last-child {
    border-radius: 0 var(--radio, 10px) 0 0;
}

.table th span {
    color: inherit;
    font-size: inherit;
}

/* ── Body cells ─────────────────────────────────────────────── */
.table td {
    border: none;
    border-bottom: 1px solid var(--gris-tabla, #f0f1f4);

    text-align: center;
    font-size: var(--text-sm);
    font-weight: var(--fw-regular);
    color: var(--gris-td);
    background: var(--c-blanco);
    vertical-align: middle;
    padding: 11px 22px;
}

/* ── Sin zebra striping — diseño limpio (todas las filas blancas) ─ */
.table tbody tr {
    transition: background 0.15s ease;
}

.table tbody tr:hover td {
    background: var(--fondo, #f5f6f8);
}

/* ── Última fila con esquinas redondeadas ──── */
.table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 var(--radio, 10px);
}

.table tbody tr:last-child td:last-child {
    border-radius: 0 0 var(--radio, 10px) 0;
}

/* ── Bordes laterales del cuerpo de la tabla ──── */
.table tbody td:first-child {
    border-left: 1px solid var(--gris-tabla, #f0f1f4);
}

.table tbody td:last-child {
    border-right: 1px solid var(--gris-tabla, #f0f1f4);
}

/* ═══════════════════════════════════════════════════════════════
   CONTENT CARD + FILTROS + PAGINACIÓN
   El .content-card es UN SOLO contenedor blanco con padding interno
   que envuelve filtros + tabla + paginación.
   ═══════════════════════════════════════════════════════════════ */
.content-card {
    background: var(--c-blanco);
    border: none;
    border-radius: var(--radio-lg, 16px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .03);
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 22px;
    gap: 18px;
}

/* ── Contenedor scrollable premium ── */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    flex: 1;
    /* Permite que el contenedor de la tabla tome el espacio disponible */
    border-radius: var(--radio, 10px);
}

/* Scrollbar estilizado para la tabla */
.table-responsive::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.table-responsive::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 45px;
    /* Evita que el scrollbar se sobreponga al header rojo */
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.content-body {
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* El scroll lo maneja .table-responsive */
    min-height: 0;
}

/* Fila de filtros — sin background propio ni border-bottom,
   ahora es parte del card padre. */
.section-filtros {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 0;
    background: transparent;
    border-bottom: none;
}

.filtros-pagina,
.filtros-orden {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    color: var(--gris-texto);
    font-family: var(--font);
}

.filtros-pagina select,
.filtros-orden select {
    font-size: var(--text-body);
    padding: 9px 36px 9px 16px;
    border-radius: var(--radio, 10px);
    border: 1px solid var(--borde, #e8e9ed);
    background: var(--c-blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23767a83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
    color: var(--texto, #1f2329);
    font-family: var(--font);
    font-weight: 500;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: all 0.18s ease;
}

.filtros-pagina select:hover,
.filtros-orden select:hover {
    border-color: var(--c-principal);
}

.filtros-pagina select:focus,
.filtros-orden select:focus {
    outline: 0;
    border-color: var(--borde);
    box-shadow: 0 0 0 3px var(--c-principal);
}

.input-buscador-main {
    background-color: var(--c-blanco);
    border: 1px solid var(--borde);
    flex: 1 1 280px;
    min-width: 240px;
    max-width: 340px;
    display: flex;
    align-items: center;
    border-radius: var(--radio, 10px);
    height: 40px;
    position: relative;
    transition: all 0.18s ease;
}

.input-buscador-main:hover,
.input-buscador-main:focus-within {
    border-color: var(--c-principal);

}

.input-buscador-main input {
    border: none;
    background: transparent;
    font-size: var(--text-sm);
    color: var(--c-secundario-a);
    flex: 1;
    padding: 0 12px;
    height: 100%;
    outline: none;
}

.input-buscador-main input::placeholder {
    color: var(--gris-suave);
    font-size: var(--text-sm);
}

.input-buscador-main input:focus {
    border: none !important;
    box-shadow: none !important;
}

.svg-lupa {
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.svg-lupa svg {
    width: 16px;
    height: 16px;
}

/* ── Buscador con sugerencias (REUTILIZABLE) ─────────────────────
   Patrón usado en módulos como Docentes / Cursos / etc.
   Estructura esperada en el HTML:
     <div class="input-buscador-main buscador-con-sugerencias">
       <div class="svg-lupa"><x-svg name="search"/></div>
       <input type="text" id="buscarXxx">
       <button class="btn-limpiar-buscar">…</button>   ← X opcional
       <div class="buscador-sugerencias">…</div>       ← dropdown
     </div>
   ─────────────────────────────────────────────────────────────── */

/* Wrapper que ancla el dropdown debajo del input */
.buscador-con-sugerencias {
    position: relative;
}

/* Botón "X" para limpiar el input.
   El JS le añade .visible cuando hay texto. */
.input-buscador-main .btn-limpiar-buscar {
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 8px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--gris-suave, #a0a4ac);
    padding: 0;
    flex-shrink: 0;
    transition: background-color .15s, color .15s, transform .1s;
}

.input-buscador-main .btn-limpiar-buscar.visible {
    display: inline-flex;
}

.input-buscador-main .btn-limpiar-buscar:hover {
    background: var(--fondo, #f5f6f8);
    color: var(--c-secundario-a);
}

.input-buscador-main .btn-limpiar-buscar:active {
    transform: scale(0.92);
}

.input-buscador-main .btn-limpiar-buscar svg {
    width: 14px;
    height: 14px;
    pointer-events: none;
    /* el click siempre lo recibe el botón */
}

/* Dropdown de sugerencias */
.buscador-sugerencias {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio, 10px);
    box-shadow: 0 12px 32px -10px rgba(30, 40, 90, .15),
        0 2px 8px rgba(30, 40, 90, .04);
    max-height: 380px;
    overflow-y: auto;
    z-index: 100;
    animation: sugerencia-aparece .15s ease-out;
}

@keyframes sugerencia-aparece {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Cada item del dropdown */
.sugerencia-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--borde-soft, #f0f1f4);
    transition: background-color .12s;
}

.sugerencia-item:last-child {
    border-bottom: none;
}

.sugerencia-item:hover,
.sugerencia-item.activo {
    background: var(--fondo, #f5f6f8);
}

/* Foto / avatar del item */
.sug-foto {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--c-principal-light);
    border: 1px solid var(--borde);
}

.sug-foto--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-principal-hover);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    object-fit: unset;
    border: none;
}

/* Info textual del item */
.sug-info {
    flex: 1;
    min-width: 0;
}

.sug-nombre {
    font-weight: 600;
    font-size: var(--text-body);
    color: var(--texto);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sug-meta {
    font-size: 11px;
    color: var(--gris-texto);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sug-estado {
    flex-shrink: 0;
}

/* Estado "buscando…" / "no se encontró" */
.tabla-listado .td-cargando {
    padding: 40px 0;
    text-align: center;
    color: transparent;
}

.sugerencia-vacia {
    padding: 18px 14px;
    text-align: center;
    color: var(--gris-texto);
    font-size: 12px;
    font-style: italic;
}

/* ── Paginación ──────────────────────────────────────────────────
   "Mostrando 1-10 de 248 X" + Anterior pill blanco + páginas
   numeradas en container con borde + Siguiente pill rojo lleno.
   ─────────────────────────────────────────────────────────────── */
.pagination-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 4px 4px;

    font-family: var(--font);
    font-size: var(--text-sm);
    color: var(--gris-texto);
    background: transparent;
    flex-wrap: wrap;
}

.pagination-info {
    font-size: var(--text-sm);
    color: var(--gris-texto);
    font-weight: 500;
}

.pagination-info strong {
    color: var(--gris-oscuro, #1f2329);
    font-weight: 700;
}

.pagination-controles {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Container que agrupa las páginas numeradas */
.pagination-pages {
    display: inline-flex;
    align-items: center;
    background: var(--c-blanco);
    border: 1px solid var(--borde, #e8e9ed);
    border-radius: var(--radio, 10px);
    padding: 3px;
    gap: 0;
}

/* Página individual */
.btn-page {
    width: 32px;
    height: 32px;
    color: var(--gris-texto);
    border: 0;
    background-color: transparent;
    border-radius: 7px;
    cursor: pointer;
    font-size: var(--text-body);
    font-family: var(--font);
    font-weight: 500;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-page:hover:not(.active) {
    background-color: var(--fondo, #f5f6f8);
    color: var(--texto);
}

.btn-page.active {
    background: var(--c-secundario-b);
    color: #fff;
    font-weight: 700;
}

/* Anterior (pill blanco con borde) y Siguiente (pill rojo lleno) */
.btn-prev,
.btn-next {
    cursor: pointer;
    font-size: var(--text-sm);
    font-family: var(--font);
    font-weight: 500;
    padding: 0 20px;
    border-radius: var(--radio, 10px);
    transition: all .15s ease;
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.btn-prev {
    background: var(--c-blanco);
    border: 1px solid var(--borde);
    color: var(--texto, #1f2329);
}

.btn-prev:hover:not(:disabled) {
    background-color: var(--fondo, #f5f6f8);
    border-color: var(--gris-suave, #a0a4ac);
}

.btn-next {
    background: var(--c-secundario-b);
    border: 1px solid var(--c-secundario-b);
    color: #fff;
}

.btn-next:hover:not(:disabled) {
    background-color: #6f0f1d;
    border-color: #6f0f1d;
}

.btn-prev:disabled,
.btn-next:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════
   BOTONES DE ACCIÓN + BADGES
   ═══════════════════════════════════════════════════════════════ */
.acciones-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ═══════════════════════════════════════════════════════════════
   BOTONES DE ACCIÓN (.btn-icon) — Unificación global
   Garantiza que todos los SVG dentro de los botones de acción
   tengan el mismo color y tamaño, sin importar el módulo.
   ═══════════════════════════════════════════════════════════════ */
.acciones-wrap .btn-icon {
    color: var(--peligro, #ef4444);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radio-sm, 6px);
    transition: background .15s ease, color .15s ease;
}

.acciones-wrap .btn-icon:hover {
    background: var(--fondo, #f5f6f8);
}

.acciones-wrap .btn-icon svg,
.acciones-wrap .btn-icon i {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    font-size: 15px !important;
    stroke-width: 2 !important;
}

.btn-accion {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radio-sm, 6px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    background: transparent !important;
}

.btn-accion:hover {
    background: var(--fondo, #f5f6f8) !important;
}

.btn-accion svg {
    width: 16px;
    height: 16px;
    color: var(--c-secundario-a);
}

/* Color de SVG según tipo de botón */
.btn-editar,
.btn-editar-rol,
.btn-editar-permiso {
    color: var(--c-principal);
}

.btn-editar:hover,
.btn-editar-rol:hover,
.btn-editar-permiso:hover {
    color: var(--c-principal-hover);
}

.btn-editar svg,
.btn-editar-rol svg,
.btn-editar-permiso svg {
    stroke: currentColor;
}

.btn-estado,
.btn-eliminar,
.btn-eliminar-rol,
.btn-eliminar-permiso {
    color: var(--c-secundario-a);
}

.btn-estado:hover,
.btn-eliminar:hover,
.btn-eliminar-rol:hover,
.btn-eliminar-permiso:hover {
    color: #630e1a;
    /* Darker c2 */
}



.badge-naranja {
    background: var(--c-principal-light);
    color: var(--c-principal-hover);
    padding: 2px 8px;
    border-radius: var(--radio-pill, 999px);
    font-size: 11px;
    font-weight: 600;
}

/* ── Botón del encabezado (legacy) y de toolbar de filtros ──── */
.encabezado-section button,
.btn-toolbar-action {
    background: var(--c-principal);
    color: #fff;
    font-size: var(--text-body);
    font-weight: 600;
    border: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radio, 10px);
    padding: 10px 24px;
    cursor: pointer;
    font-family: var(--font);
    transition: filter .15s, transform .05s;
    white-space: nowrap;
    height: 40px;
}

.encabezado-section button:hover,
.btn-toolbar-action:hover {
    filter: brightness(.92);
}

.encabezado-section button:active,
.btn-toolbar-action:active {
    transform: translateY(1px);
}

.encabezado-section button svg,
.btn-toolbar-action svg {
    width: 14px;
    height: 14px;
}



/* ═══════════════════════════════════════════════════════════════
   MODALES
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    animation: fadeIn .15s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-overlay .modal-content {
    background: var(--c-blanco);
    border-radius: var(--radio-lg);
    width: 100%;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--sombra-lg);
    animation: modalIn .2s ease;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.cabecera-form {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 12px;
}

.cabecera-form .title-span {
    font-size: var(--text-md);
    font-weight: var(--fw-bold);
    color: var(--c-principal);
    font-family: var(--font);
    display: block;
}

.cabecera-form p {
    font-size: var(--text-sm);
    color: var(--texto) !important;
    font-weight: var(--fw-regular);
    margin: 2px 0 0;
}

.modal-design {
    overflow-y: auto;
    padding: 8px 24px 20px;
    flex: 1;
}

.modal-footer-custom {

    padding: 14px 24px 20px;
    display: flex;

    gap: 10px;
}

.btn-cerrar-modal {
    cursor: pointer;
    padding: 6px;
    color: var(--gris-suave);
    transition: color .2s;
    border-radius: 8px;
    background: none;
    border: none;
    display: flex;
}

.btn-cerrar-modal:hover {
    color: var(--c-secundario-a);
    background: var(--gris-claro);
}

.btn-guardar {
    background: var(--c-principal) !important;
    color: var(--c-blanco) !important;
    font-weight: 600 !important;
    border: 1px solid transparent !important;
    border-radius: var(--radio, 10px) !important;
    padding: 9px 18px !important;
    font-family: var(--font) !important;
    font-size: var(--text-sm) !important;
    transition: all .15s !important;
}

.btn-guardar:hover {
    background: var(--c-principal-hover) !important;
}

.btn-cancelar {
    color: var(--texto) !important;
    font-weight: 600 !important;
    border: 1px solid var(--borde) !important;
    border-radius: var(--radio, 10px) !important;
    padding: 9px 18px !important;
    font-family: var(--font) !important;
    font-size: var(--text-body) !important;
    background: transparent;
    cursor: pointer;
}

.btn-cancelar:hover {
    background: var(--fondo) !important;
}



.card-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: filter .35s ease, opacity .35s ease;
}

body.panel-abierto .content-card {
    flex-direction: row !important;
    align-items: stretch;
    padding: 0 !important;
    gap: 0 !important;
}

body.panel-abierto .card-main {
    flex: 1 1 42%;
    padding: 22px;
    overflow: hidden;
    filter: grayscale(1) opacity(.6);
    pointer-events: auto;
    user-select: auto;
}

body.panel-abierto .filtros-pagina,
body.panel-abierto .filtros-orden {
    display: none !important;
}

body.panel-abierto .col-hide-on-panel {
    display: none !important;
}

body.panel-abierto .table-responsive {
    border: 1px solid var(--borde, #e8e9ed);
    border-radius: var(--radio, 10px);
    overflow: hidden;
}

body.panel-abierto .btn-toolbar-action span {
    display: none !important;
}

body.panel-abierto .btn-toolbar-action {
    width: 38px;
    height: 38px;
    padding: 0 !important;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radio-sm, 8px);
}

body.panel-abierto .pagination-info {
    font-size: 11.5px;
}

body.panel-abierto .btn-prev,
body.panel-abierto .btn-next,
body.panel-abierto .pagination-controles button[data-pag-prev],
body.panel-abierto .pagination-controles button[data-pag-next] {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    font-size: 0 !important;
    border-radius: var(--radio-sm, 6px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

body.panel-abierto .btn-prev::before,
body.panel-abierto .pagination-controles button[data-pag-prev]::before {
    content: '‹';
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1;
}

body.panel-abierto .btn-next::before,
body.panel-abierto .pagination-controles button[data-pag-next]::before {
    content: '›';
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1;
}

body.panel-abierto .pagination-pages button:not(.active),
body.panel-abierto .pagination-pages .btn-page-dots,
body.panel-abierto .pagination .pages button:not(.active) {
    display: none !important;
}

body.panel-abierto .pagination-pages,
body.panel-abierto .pagination .pages {
    gap: 4px;
}

body.panel-abierto .pagination-container,
body.panel-abierto .pagination {
    padding: 12px 0 !important;
    gap: 8px;
    flex-wrap: wrap;
}

.side-panel-overlay {
    flex: 0 0 58%;
    flex-direction: column;
    overflow: hidden;
    background: var(--c-blanco);
    box-shadow: -12px 0 24px -10px rgba(30, 40, 90, 0.10);
    border-left: 1px solid var(--c-secundario-a);
    perspective: 1600px;
    perspective-origin: left center;
}

.side-panel-overlay .side-panel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--c-blanco);
    transform-origin: left center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
    animation: panelOpenBook .42s cubic-bezier(.22, .9, .3, 1.02) both;
}

@keyframes panelOpenBook {
    from {
        opacity: 0;
        transform: rotateY(-78deg);
    }


    60% {
        opacity: 1;
    }

    to {
        opacity: 1;
        transform: rotateY(0);
    }
}

.side-panel-overlay.cerrando .side-panel-content {
    animation: panelCloseBook .32s cubic-bezier(.5, 0, .75, 0) forwards;
}

@keyframes panelCloseBook {
    from {
        opacity: 1;
        transform: rotateY(0);
    }

    to {
        opacity: 0;
        transform: rotateY(-78deg);
    }
}

@media (max-width: 1100px) {
    body.panel-abierto .card-main {
        flex: 1 1 35%;
    }

    .side-panel-overlay {
        flex: 0 0 65%;
    }
}

@media (max-width: 768px) {
    body.panel-abierto .card-main {
        display: none;
    }

    .side-panel-overlay {
        flex: 1 1 100%;
        perspective: 1200px;
        border-left: 0;
    }

    @keyframes panelOpenBook {
        from {
            opacity: 0;
            transform: translateX(20px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes panelCloseBook {
        from {
            opacity: 1;
            transform: translateX(0);
        }

        to {
            opacity: 0;
            transform: translateX(20px);
        }
    }
}

.side-panel-overlay .cabecera-form {
    background: var(--c-secundario-a);
    color: #fff;
    padding: 22px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    align-items: center;
}

.side-panel-overlay .cabecera-form .pretitulo {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .65);
    margin-bottom: 4px;
}

.side-panel-overlay .cabecera-form .title-span {
    color: #fff !important;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.side-panel-overlay .cabecera-form p {
    color: rgba(255, 255, 255, .78) !important;
    margin-top: 4px;
    font-size: 12.5px;
}

.side-panel-overlay .btn-cerrar-modal {
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .08);
    border-radius: 8px;
    padding: 8px;
}

.side-panel-overlay .btn-cerrar-modal:hover {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.side-panel-overlay .modal-design {
    overflow-y: auto;
    padding: 24px 28px;
    flex: 1;
}

.side-panel-overlay .form-grupo {
    margin-bottom: 0;
}

.side-panel-overlay .form-grupo label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--texto, #000000);
    letter-spacing: 0.06em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.side-panel-overlay .form-input,
.side-panel-overlay select.form-input,
.side-panel-overlay input.form-input {
    width: 100%;
    border-radius: 10px;
    border: 1.5px solid var(--borde, #e8e9ed);
    padding: 11px 14px;
    font-size: var(--text-body);
    font-family: inherit;
    background: #fff;
    color: var(--texto);
    transition: border-color .15s, box-shadow .15s;
}

.side-panel-overlay .form-input:hover {
    border-color: #d0d3da;
}

.side-panel-overlay .form-input:focus {
    border-color: var(--c-secundario-a);
    box-shadow: 0 0 0 3px rgba(149, 21, 39, 0.12);
    outline: 0;
}

.side-panel-overlay .form-input:read-only {

    color: var(--gris-texto, #6b7280);
    cursor: not-allowed;
}

.side-panel-overlay .modal-footer-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 28px 20px;

    gap: 10px;

}

.side-panel-overlay .btn-cancelar {
    background: #fff !important;
    color: var(--gris-texto, #6b7280) !important;
    border: 1px solid var(--borde, #e8e9ed) !important;
    padding: 10px 26px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: var(--text-body) !important;
    transition: all .15s !important;
}

.side-panel-overlay .btn-cancelar:hover {
    background: var(--fondo, #fafafa) !important;
    border-color: #d0d3da !important;
    color: var(--texto) !important;
}

.side-panel-overlay .btn-guardar {
    background: var(--c-secundario-a) !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 28px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: var(--text-body) !important;
    box-shadow: 0 1px 2px rgba(149, 21, 39, .2) !important;
    transition: all .15s !important;
}

.side-panel-overlay .btn-guardar:hover {
    background: #7a1220 !important;
    box-shadow: 0 4px 8px rgba(149, 21, 39, .25) !important;
    transform: translateY(-1px);
}

.side-panel-overlay .btn-guardar:active {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

    .card-main,
    .side-panel-overlay .side-panel-content,
    .side-panel-overlay.cerrando .side-panel-content {
        transition: none;
        animation-duration: .15s;
        animation-timing-function: ease;
    }

    .side-panel-overlay .btn-guardar:hover {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOM SWITCH (TIPO iOS) - EDITAR PERMISOS DE ROLES
   ═══════════════════════════════════════════════════════════════ */
.switch-wrapper {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.switch-wrapper.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.switch-input {
    display: none;
}

.switch-track {
    width: 44px;
    height: 24px;
    background: #e0e0e0;
    border-radius: 20px;
    position: relative;
    transition: background 0.3s ease;
    flex-shrink: 0;
}

.switch-thumb {
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.switch-input:checked~.switch-track {
    background: var(--c-secundario-a);
    /* Amarillo */
}

.switch-input:checked~.switch-track .switch-thumb {
    transform: translateX(20px);
}

.switch-label-left {
    margin-right: 12px;
    font-size: var(--text-body);
    color: var(--gris-texto);
    font-weight: 500;
}

/* Categorías dentro del Modal de Permisos */
.cat-permisos-header {
    background: #f9f9f9;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    margin-bottom: 12px;
    margin-top: 16px;
}

.cat-permisos-header span {

    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    color: var(--texto);
}

.permiso-row {
    border-bottom: 1px solid var(--border-color);
    padding: 16px 16px 16px 12px;
}

.permiso-row:last-child {
    border-bottom: none;
}

.permiso-row-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.permiso-info {
    display: flex;
    flex-direction: column;
}

.permiso-info .titulo {
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    color: var(--texto);
}

.permiso-info .desc {
    font-size: var(--text-sm);
    font-weight: var(--fw-regular);
    color: var(--texto);
    margin-top: 2px;
}

.subpermisos-box {
    margin-top: 12px;
    margin-left: 12px;
    padding: 12px 14px;
    background: #fdfdfd;
    border-left: 2px solid var(--c-principal);
    border-radius: 0 6px 6px 0;
    display: none;
    /* Se mostrará con JS */
    flex-wrap: wrap;
    gap: 16px;
}

.subpermisos-box.visible {
    display: flex;
}

.subpermiso-check-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--c-secundario-a);
    font-weight: 500;
}

.subpermiso-check-wrap input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--c-principal);
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   BUSCADOR CON DROPDOWN DE SUGERENCIAS + CHIP DE FILTRO ACTIVO
   Plantilla genérica — usar clase .buscador-sugerencias-wrap
   Aplicar en: permisos, roles, administradores y cualquier módulo
   que necesite búsqueda con selección y confirmación visual.
   ═══════════════════════════════════════════════════════════════ */

/* ── Contenedor principal ─────────────────────────────────────── */
.buscador-sugerencias-wrap {
    position: relative;
    flex: 1;
    max-width: 480px;
}

/* ── Input ────────────────────────────────────────────────────── */
.buscador-sugerencias-input {
    width: 100%;
    padding: 10px 40px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    font-size: var(--text-base);
    background: var(--c-blanco);
    transition: border-color .15s, box-shadow .15s;
    font-family: var(--font);
    color: var(--c-secundario-a);
}

.buscador-sugerencias-input:focus {
    outline: 0;
    border-color: var(--c-principal);
    box-shadow: 0 0 0 3px var(--c-principal-light);
}

.buscador-sugerencias-input::placeholder {
    color: var(--gris-suave);
    font-size: var(--text-sm);
}

/* ── Ícono lupa (izquierda) ───────────────────────────────────── */
.buscador-sugerencias-wrap .buscador-icono-lupa {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gris-suave);
    pointer-events: none;
    display: flex;
    align-items: center;
}

/* ── Botón limpiar (derecha) ──────────────────────────────────── */
.buscador-sugerencias-wrap .buscador-btn-limpiar {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--gris-suave);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}

.buscador-sugerencias-wrap .buscador-btn-limpiar.visible {
    display: flex;
}

.buscador-sugerencias-wrap .buscador-btn-limpiar:hover {
    background: var(--gris-claro);
    color: var(--c-secundario-a);
}

/* ── Dropdown ─────────────────────────────────────────────────── */
.buscador-sugerencias-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--c-blanco);
    border: 1px solid var(--borde);
    border-radius: 10px;
    box-shadow: var(--sombra-lg);
    max-height: 320px;
    overflow-y: auto;
    z-index: 50;
    display: none;
    animation: buscadorDropIn .15s ease-out;
}

.buscador-sugerencias-dropdown.visible {
    display: block;
}

@keyframes buscadorDropIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Ítems del dropdown ───────────────────────────────────────── */
.buscador-sugerencias-item {
    padding: 12px 16px;
    cursor: pointer;
    font-size: var(--text-base);
    color: var(--c-secundario-a);
    font-weight: var(--fw-medium);
    transition: background .12s;
    border-bottom: 1px solid var(--gris-claro);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.buscador-sugerencias-item:last-child {
    border-bottom: none;
}

.buscador-sugerencias-item:hover,
.buscador-sugerencias-item.activo {
    background: var(--c-secundario-a-light);
    color: var(--c-principal);
}

.buscador-sugerencias-item .item-nombre {
    flex: 1;
}

.buscador-sugerencias-item .item-codigo {
    font-family: monospace;
    font-size: var(--text-xs);
    color: var(--gris-texto);
    background: var(--gris-claro);
    padding: 2px 8px;
    border-radius: 4px;
}

.buscador-sugerencias-item .item-match {
    color: var(--c-principal);
    font-weight: var(--fw-bold);
}

/* ── Estados vacío / cargando ─────────────────────────────────── */
.buscador-sugerencias-vacio,
.buscador-sugerencias-cargando {
    padding: 20px 16px;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--gris-suave);
}

/* ── Chip de filtro activo ────────────────────────────────────── */
.buscador-chip-activo {
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--c-principal-light);
    border: 1px solid color-mix(in srgb, var(--c-principal) 30%, transparent);
    border-radius: 20px;
    padding: 6px 12px;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-secundario-a);
    margin-left: 8px;
}

.buscador-chip-activo.visible {
    display: inline-flex;
}

.buscador-chip-activo .chip-texto {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.buscador-chip-activo .chip-cerrar {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--text-base);
    line-height: 1;
    color: var(--c-secundario-a);
    padding: 0 2px;
    border-radius: 50%;
    transition: background .12s;
}

.buscador-chip-activo .chip-cerrar:hover {
    background: rgba(0, 0, 0, .08);
}

/* ── Highlight temporal en fila de tabla (después de seleccionar en buscador) ── */
@keyframes rowHighlight {
    0% {
        background: color-mix(in srgb, var(--c-principal) 25%, transparent);
    }

    60% {
        background: color-mix(in srgb, var(--c-principal) 12%, transparent);
    }

    100% {
        background: transparent;
    }
}

tr.fila-highlight td {
    animation: rowHighlight 2.5s ease-out forwards !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LISTADOS CON TABLA (REUTILIZABLE) — Docentes, Usuarios, etc.
   ═══════════════════════════════════════════════════════════════════
   Conjunto de clases compartidas para módulos con tabla + filtros +
   side-panel + modal de opciones. Para que un módulo "herede" todo
   esto, basta con que su <tbody> tenga la clase .tabla-listado
   (ej: <tbody id="tablaDocentesBody" class="tabla-listado">).

   Clases incluidas:
     · .td-cargando / .td-error / .td-vacio
     · .foto-mini  +  .foto-mini--placeholder  (avatar mini en filas)
     · tbody.tabla-listado  →  fade-out / fade-in suave
     · tr.fila-resaltada    →  destello naranja al editar/desactivar
     · .acciones-vacias     →  cuando el usuario no tiene permisos
     · #modalOpciones       →  modal Cancelar/Desactivar/Eliminar
     · .modal-opciones / .modal-opciones-texto
     · .modal-footer-opciones
   ═══════════════════════════════════════════════════════════════════ */

/* ── Estados de la tabla ──────────────────────────────────────── */
.tabla-listado .td-cargando,
.tabla-listado .td-error,
.tabla-listado .td-vacio {
    text-align: center;
    padding: 40px 20px;
    font-size: var(--text-body);
    color: var(--gris-texto);
}

.tabla-listado .td-cargando {
    color: var(--gris-suave);
    font-style: italic;
}

.tabla-listado .td-error {
    color: var(--peligro, #ef4444);
    font-weight: 500;
}

.tabla-listado .td-vacio {
    color: var(--gris-suave);
}

/* Marcador para acciones cuando no hay permisos */
.acciones-vacias {
    color: var(--gris-suave);
    font-size: var(--text-sm);
    font-weight: 400;
}


/* ── Avatar mini (foto/iniciales) en las filas ────────────────── */
.foto-mini {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    background: var(--c-principal-light);
    border: 1px solid var(--borde);
}

.foto-mini--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-principal-light);
    color: var(--c-principal-hover);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    object-fit: unset;
    border: none;
}

/* Alias legacy: docente-foto-mini → foto-mini.
   Si tienes vistas que aún usan el nombre viejo, no se rompen. */
.docente-foto-mini {
    /* ↓ mismo CSS que .foto-mini */
    width: 39px;
    height: 39px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    background: var(--c-principal-light);
    border: 1px solid var(--borde);
}

.docente-foto-mini--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-principal-light);
    color: var(--c-principal-hover);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    object-fit: unset;
    border: none;
}

/* Modificador para cuando el avatar SVG necesita un fondo y ser más pequeño */
.docente-foto-mini-avatar-wrap {
    overflow: hidden;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(254, 81, 0, 0.15);
    border: none;
}

.docente-foto-mini-avatar-wrap img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}


/* ── Crossfade suave entre cargas (silenciosas) ────────────────
   El JS añade .tabla-fade-out al tbody, espera 180ms, reemplaza
   las filas y aplica .tabla-fade-in. Se usa al desactivar / editar
   para que el cambio de página no se vea brusco. */
.tabla-listado {
    transition: opacity 180ms ease-out;
}

.tabla-listado.tabla-fade-out {
    opacity: 0;
}

.tabla-listado.tabla-fade-in {
    animation: tabla-fade-in 220ms ease-out;
}

@keyframes tabla-fade-in {
    from {
        opacity: 0;
        transform: translateY(2px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}


/* ── Resaltado de fila al crear/editar/desactivar ──────────────
   El JS añade .fila-resaltada por 3 segundos. Selector global por
   clase: funciona en CUALQUIER <tr> de cualquier módulo. */
@keyframes resaltado-fila-bg {
    0% {
        background-color: color-mix(in srgb, var(--c-principal) 18%, transparent);
    }

    60% {
        background-color: color-mix(in srgb, var(--c-principal) 10%, transparent);
    }

    100% {
        background-color: transparent;
    }
}

tr.fila-resaltada>td {
    animation: resaltado-fila-bg 3s ease-out forwards;
}



/* Que el scroll suave no quede tapado por headers sticky */
.tabla-listado tr {
    scroll-margin-top: 80px;
    scroll-margin-bottom: 80px;
}

/* Accesibilidad: respeta usuarios con motion reducido */
@media (prefers-reduced-motion: reduce) {
    .tabla-listado {
        transition: none;
    }

    .tabla-listado.tabla-fade-out {
        opacity: 1;
    }

    .tabla-listado.tabla-fade-in {
        animation: none;
    }

    tr.fila-resaltada>td {
        animation: none;
        background: var(--c-principal-light);
    }
}


/* ── Modal-rounded (variante con bordes redondeados) ──────────── */
.modal-overlay .modal-content.modal-rounded {
    border-radius: var(--radio-lg, 14px);
}


/* ═══════════════════════════════════════════════════════════════════
   MODAL DE OPCIONES (REUTILIZABLE)
   ═══════════════════════════════════════════════════════════════════
   Patrón: Cancelar  ·············  Desactivar/Reactivar  Eliminar
   Tres botones en una sola fila. ID #modalOpciones es el mismo en
   todos los módulos (docentes, admins, etc.) — lo abre y cierra
   cada módulo desde su propio JS.
   ═══════════════════════════════════════════════════════════════════ */

.modal-overlay .modal-opciones {
    max-width: 520px;
}

.modal-opciones-texto {
    color: var(--texto);
    font-size: var(--text-sm);
    margin: 0;
}

.modal-footer-opciones {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 24px 20px;

    flex-wrap: wrap;
}

/* Cancelar empujado a la izquierda · acciones a la derecha */
.modal-footer-opciones .btn-cancelar {
    margin-right: auto;
}

/* Botones de acción (Desactivar / Eliminar / Confirmar modal) — base común */
#btnOpcionDesactivar,
#btnOpcionEliminar,
.btn-opcion-principal {
    padding: 9px 18px;
    border: none;
    border-radius: var(--radio, 999px);
    font-weight: 600;
    font-size: var(--text-body);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    white-space: nowrap;
    transition: filter .15s, box-shadow .15s, transform .1s;
}

/* Desactivar (naranja) — el JS le pone .btn-warning por defecto */
#btnOpcionDesactivar {
    background: var(--gris-suave);
}

/* Reactivar (verde) — el JS le pone .btn-success cuando está inactivo */
#btnOpcionDesactivar.btn-success {
    background: var(--exito, #10b981);
    box-shadow: 0 1px 2px rgba(16, 185, 129, .25);
}

/* Eliminar permanente (rojo) y opciones principales */
#btnOpcionEliminar,
.btn-opcion-principal {
    background: var(--c-principal);
}

#btnOpcionDesactivar:hover,
#btnOpcionEliminar:hover,
.btn-opcion-principal:hover {
    filter: brightness(.92);
}

#btnOpcionDesactivar:active,
#btnOpcionEliminar:active,
.btn-opcion-principal:active {
    transform: translateY(1px);
}

/* En pantallas muy estrechas se apilan verticalmente */
@media (max-width: 480px) {
    .modal-footer-opciones {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .modal-footer-opciones .btn-cancelar {
        margin-right: 0;
    }

    #btnOpcionDesactivar,
    #btnOpcionEliminar,
    .btn-opcion-principal,
    .modal-footer-opciones .btn-cancelar {
        width: 100%;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   FORMULARIO DE 2 COLUMNAS (REUTILIZABLE)
   ═══════════════════════════════════════════════════════════════════
   Usado dentro del side-panel para los formularios de docente, admin,
   etc. Una sola columna en pantallas estrechas.
   ═══════════════════════════════════════════════════════════════════ */
/* Global form grid */
.form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}

.form-grid-2col .full {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .form-grid-2col {
        grid-template-columns: 1fr;
    }
}

.side-panel-overlay .form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}

.side-panel-overlay .form-grid-2col .full {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .side-panel-overlay .form-grid-2col {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   MODALES "MAIN" — Módulo de Programas
   (modalCursoVivo, modalCursoGrabado, modalDetalleCursoVivo,
    modalListadoCursosVivos, modalEliminarCV, modalEliminarCursoVivoSeccion,
    modalEliminarCursoVivoDetalle)

   Las clases modal-main-* no estaban definidas antes en app.css.
   Reglas críticas usan !important para garantizar visibilidad
   sin importar el orden de carga de otros stylesheets.
   ════════════════════════════════════════════════════════════════════════════ */


/* ─── Overlay (fondo oscuro a pantalla completa) ─────────────────────────── */
.modal-main-overlay {
    /* Oculto por defecto. El JS hace `style.display = 'flex'` para abrirlo. */
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    background: rgba(15, 18, 30, 0.55) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    box-sizing: border-box;
    margin: 0 !important;
    transform: none !important;
    animation: mmOverlayIn .18s ease-out;
}

/* Compatibilidad con apertura por clase (.visible / .open) */
.modal-main-overlay.visible,
.modal-main-overlay.open {
    display: flex !important;
}

@keyframes mmOverlayIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* ─── Caja del modal ──────────────────────────────────────────────────────── */
.modal-main-overlay .modal-main-content {
    background: var(--c-blanco) !important;
    border-radius: var(--radio-lg, 14px);
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 64px);
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--sombra-lg, 0 10px 30px rgba(0, 0, 0, .12));
    font-family: var(--font, 'Inter', sans-serif);
    position: relative;
    z-index: 1;
    animation: mmContentIn .22s cubic-bezier(.22, .9, .3, 1.02);
}

@keyframes mmContentIn {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* ─── Header ──────────────────────────────────────────────────────────────── */
.modal-main-overlay .modal-main-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 14px;
    border-bottom: 1px solid var(--borde, #e8e9ed);
    flex-shrink: 0;
}

.modal-main-overlay .modal-main-header-content {
    flex: 1;
    min-width: 0;
}

.modal-main-overlay .modal-main-header-content h3 {
    margin: 0 0 2px;
    font-size: var(--text-base);
    font-weight: var(--fw-bold, 700);
    color: var(--c-principal-hover);
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-main-overlay .modal-main-header-content p {
    margin: 0;
    font-size: 12px;
    color: var(--gris-texto, #767a83);
    font-weight: var(--fw-regular, 400);
}


/* ─── Body ────────────────────────────────────────────────────────────────── */
.modal-main-overlay .modal-main-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 24px;
    min-height: 0;
}


/* ─── Footer ──────────────────────────────────────────────────────────────── */
.modal-main-overlay .modal-main-footer {
    padding: 14px 24px 18px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--borde, #e8e9ed);
    background: var(--c-blanco);
    flex-shrink: 0;
}


/* ─── Botones del modal ───────────────────────────────────────────────────── */
.modal-main-overlay .btn-modal-base,
.btn-modal-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: var(--radio-sm, 6px);
    font-family: var(--font, 'Inter', sans-serif);
    font-size: var(--text-body);
    font-weight: var(--fw-semibold, 600);
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
    white-space: nowrap;
    text-decoration: none;
    height: auto;
}

.btn-modal-base:active {
    transform: translateY(1px);
}

.btn-modal-base:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

.btn-modal-base i,
.btn-modal-base svg {
    font-size: var(--text-body);
    width: 14px;
    height: 14px;
}

.btn-modal-primario {
    background: var(--c-principal) !important;
    color: #fff !important;
    border-color: var(--c-principal) !important;
}

.btn-modal-primario:hover:not(:disabled) {
    background: var(--c-principal-hover) !important;
    border-color: var(--c-principal-hover) !important;
}

.btn-modal-secundario {
    background: #fff !important;
    color: var(--texto, #1f2937) !important;
    border-color: var(--borde, #e8e9ed) !important;
}

.btn-modal-secundario:hover:not(:disabled) {
    background: var(--gris-claro, #e8e9ed) !important;
}

.btn-modal-peligro {
    background: var(--peligro, #ef4444) !important;
    color: #fff !important;
    border-color: var(--peligro, #ef4444) !important;
}

.btn-modal-peligro:hover:not(:disabled) {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}


/* ─── Botón cerrar (X) en la cabecera ─────────────────────────────────────── */
.modal-main-overlay .btn-cerrar-modal {
    flex-shrink: 0;
    align-self: flex-start;
}


/* ─── Form elements del modal ─────────────────────────────────────────────── */
.grupo-modal {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 4px;
}

.grupo-modal>label {
    font-size: 12px;
    font-weight: var(--fw-semibold, 600);
    color: var(--texto, #1f2937);
    line-height: 1.2;
}

.input-modal {
    width: 100%;
    padding: 9px 12px;
    font-family: var(--font, 'Inter', sans-serif);
    font-size: var(--text-body);
    font-weight: var(--fw-regular, 400);
    color: var(--texto, #1f2937);
    background: #fff;
    border: 1px solid var(--borde, #e8e9ed);
    border-radius: var(--radio-sm, 6px);
    transition: border-color .15s ease, box-shadow .15s ease;
    outline: none;
    box-sizing: border-box;
}

.input-modal:hover {
    border-color: var(--gris-suave, #a0a4ac);
}

.input-modal:focus {
    border-color: var(--c-principal);
    box-shadow: 0 0 0 3px var(--c-principal-light);
}

.input-modal:disabled,
.input-modal[readonly] {
    background: var(--gris-claro, #f3f4f6);
    color: var(--gris-texto, #767a83);
    cursor: not-allowed;
}

textarea.input-modal {
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
}


/* ─── Secciones internas del form ─────────────────────────────────────────── */
.form-section-main {
    padding: 14px 0 18px;
    border-bottom: 1px dashed var(--borde, #e8e9ed);
    margin-bottom: 14px;
}

.form-section-main:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.form-section-main>h4 {
    margin: 0 0 12px;
    font-size: var(--text-body);
    font-weight: var(--fw-bold, 700);
    color: var(--c-secundario-a);
    text-transform: uppercase;
    letter-spacing: .4px;
    display: flex;
    align-items: center;
    gap: 6px;
}


/* ─── Lista de docentes ───────────────────────────────────────────────────── */
.docentes-lista-container {
    margin-top: 8px;
}


/* ─── Tabla "main" (modalListadoCursosVivos) ──────────────────────────────── */
.tabla-main-responsive {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--borde, #e8e9ed);
    border-radius: var(--radio-sm, 6px);
}

.tabla-main {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-body);
    color: var(--texto, #1f2937);
}

.tabla-main thead th {
    text-align: left;
    padding: 10px 12px;
    background: var(--gris-claro, #f3f4f6);
    color: var(--gris-texto, #767a83);
    font-size: 11px;
    font-weight: var(--fw-bold, 700);
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 1px solid var(--borde, #e8e9ed);
    white-space: nowrap;
}

.tabla-main tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--borde, #e8e9ed);
    vertical-align: middle;
}

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

.tabla-main tbody tr:hover {
    background: color-mix(in srgb, var(--gris-claro, #f3f4f6) 60%, transparent);
}

.tabla-main.align-middle td,
.tabla-main.align-middle th {
    vertical-align: middle;
}


/* ─── Lock scroll del body con modal/panel abierto ────────────────────────── */
body.panel-abierto {
    overflow: hidden;
}


/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .modal-main-overlay {
        padding: 12px;
        align-items: flex-end;
    }

    .modal-main-overlay .modal-main-content {
        max-width: 100%;
        max-height: 92vh;
        border-radius: var(--radio-lg, 14px) var(--radio-lg, 14px) 0 0;
    }

    .modal-main-overlay .modal-main-header,
    .modal-main-overlay .modal-main-body,
    .modal-main-overlay .modal-main-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .modal-main-overlay .modal-main-footer {
        flex-direction: column-reverse;
    }

    .modal-main-overlay .modal-main-footer .btn-modal-base {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MÓDULO TABS — Pestañas de navegación dentro de módulos
   (Lista de Docentes / Nuevo Docente, etc.)
   ═══════════════════════════════════════════════════════════════ */
.modulo-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--gris-claro);
    margin: 24px 0px;
    width: max-content;
}

.modulo-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 2px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gris-texto);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.modulo-tab svg {
    stroke: currentColor !important;
    opacity: 0.7;
}

.modulo-tab svg [fill]:not([fill="none"]) {
    fill: currentColor !important;
}

.modulo-tab:hover {
    color: var(--c-principal);
    border-bottom-color: var(--c-principal);
}

.modulo-tab.active {
    color: var(--c-principal);
    border-bottom-color: var(--c-principal);
}

.modulo-tab.active {
    color: var(--c-principal);
    border-bottom-color: var(--c-principal);
}

.modulo-tab.active svg {
    stroke: var(--c-principal) !important;
    opacity: 1;
}

.modulo-tab.active svg [fill]:not([fill="none"]) {
    fill: var(--c-principal) !important;
}

.tab-content {
    display: none;
    animation: fadeInTab 0.3s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════
   FORM SECTION CARD — Tarjetas de sección en formularios
   Borde izquierdo naranja solo al interactuar (:focus-within)
   ═══════════════════════════════════════════════════════════════ */
.form-section-card {
    background: white;
    border: 1px solid var(--borde);

    border-radius: 12px;
    padding: 28px;
    margin-bottom: 20px;
    transition: border-left-color 0.2s ease;
}

.form-section-card:focus-within {
    border-left: 3px solid var(--c-principal);
}

.form-section-card h3 {
    margin: 0 0 4px;
    font-size: var(--text-xl);
    font-weight: var(--fw-bold);
    color: var(--texto);
}

.form-section-card>p {
    margin: 0 0 20px;
    font-size: var(--text-sm);
    color: var(--gris-oscuro);
}

.form-actions-bottom {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

/* ═══════════════════════════════════════════════════════════════
   WIZARD DE MATRÍCULA — Clases específicas
   Pegar este bloque al FINAL de app.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Resultados del buscador de estudiantes ───────────────────── */
.nmat-resultados-buscador {
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    background: var(--c-blanco);
    max-height: 320px;
    overflow-y: auto;
}

.nmat-resultados-msg {
    text-align: center;
    padding: 20px 14px;
    color: var(--gris-texto);
    font-size: var(--text-sm);
    font-style: italic;
    margin: 0;
}

/* ── Items del buscador (misma estructura que .sugerencia-item) ── */
.nmat-est-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--borde-soft, #f0f1f4);
    transition: background-color .12s;
}

.nmat-est-item:last-child {
    border-bottom: none;
}

.nmat-est-item:hover {
    background: var(--fondo);
}

.nmat-est-item-nombre {
    font-weight: 600;
    font-size: var(--text-body);
    color: var(--texto);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nmat-est-item-meta {
    font-size: 11px;
    color: var(--gris-texto);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Avatar mini (misma estructura que .foto-mini--placeholder) ── */
.nmat-est-avatar-mini {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-principal-light);
    color: var(--c-principal-hover);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ── Estudiante seleccionado (box de confirmación) ────────────── */
.nmat-est-sel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding: 14px 18px;
    background: var(--fondo-peach, #FFF2EB);
    border: 1px solid color-mix(in srgb, var(--c-principal) 20%, transparent);
    border-radius: var(--radio);
    animation: fadeInTab 0.3s ease;
}

.nmat-est-sel-info {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.nmat-est-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-principal);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.nmat-est-nombre {
    font-weight: var(--fw-bold);
    font-size: var(--text-base);
    color: var(--texto);
    line-height: 1.3;
}

.nmat-est-meta {
    font-size: var(--text-xs);
    color: var(--gris-texto);
    margin-top: 2px;
}

/* ── Estado vacío ─────────────────────────────────────────────── */
.nmat-vacio {
    text-align: center;
    padding: 32px 20px;
    color: var(--gris-suave);
}

.nmat-vacio i {
    font-size: 28px;
    margin-bottom: 8px;
    display: block;
    opacity: 0.4;
}

.nmat-vacio p {
    margin: 0;
    font-size: var(--text-body);
    color: var(--gris-suave);
}

/* ═══════════════════════════════════════════════════════════════
   TARJETAS DE PROGRAMA SELECCIONADO (Sección 3)
   ═══════════════════════════════════════════════════════════════ */
.matricula-prog-card {
    background: var(--c-blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    margin-bottom: 14px;
    overflow: hidden;
    transition: border-color .15s;
}

.matricula-prog-card:hover {
    border-color: var(--gris-suave);
}

.matricula-prog-card:last-child {
    margin-bottom: 0;
}

.matricula-prog-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: var(--gris-tabla);
    border-bottom: 1px solid var(--borde);
}

.matricula-prog-card-titulo {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    color: var(--texto);
    font-family: var(--font-titulos);
}

.matricula-prog-card-meta {
    font-size: var(--text-xs);
    color: var(--gris-texto);
    margin-top: 2px;
}

.matricula-prog-card-meta strong {
    color: var(--c-principal);
    font-weight: var(--fw-bold);
}

.matricula-prog-card-eliminar {
    background: transparent;
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--peligro);
    cursor: pointer;
    font-family: var(--font);
    transition: all .15s;
    white-space: nowrap;
}

.matricula-prog-card-eliminar:hover {
    background: var(--peligro-soft);
    border-color: var(--peligro);
}

.matricula-prog-card-body {
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px 16px;
}

.matricula-prog-card-body .form-grupo {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .matricula-prog-card-body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .matricula-prog-card-body {
        grid-template-columns: 1fr 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESUMEN DE MATRÍCULA (Sección 4)
   ═══════════════════════════════════════════════════════════════ */
.resumen-seccion {
    padding: 16px 0;
    border-bottom: 1px dashed var(--borde);
}

.resumen-seccion:last-of-type {
    border-bottom: none;
}

.resumen-seccion h4 {
    margin: 0 0 10px;
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    color: var(--c-secundario-a);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-titulos);
}

.resumen-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: var(--text-body);
}

.resumen-fila-label {
    color: var(--gris-texto);
    font-weight: var(--fw-medium);
}

.resumen-fila-valor {
    color: var(--texto);
    font-weight: var(--fw-semibold);
    text-align: right;
}

.resumen-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    margin-top: 14px;
    background: var(--fondo-peach, #FFF2EB);
    border: 1px solid color-mix(in srgb, var(--c-principal) 20%, transparent);
    border-radius: var(--radio);
    font-size: var(--text-md);
    font-weight: var(--fw-bold);
    color: var(--c-principal);
    font-family: var(--font-titulos);
}

/* ── Responsive del wizard ────────────────────────────────────── */
@media (max-width: 640px) {
    .nmat-est-sel {
        flex-direction: column;
        align-items: flex-start;
    }

    .resumen-fila {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .resumen-fila-valor {
        text-align: left;
    }

    .resumen-total {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }
}

.tab-content .seccion-titulo {

    padding-top: 25px;

}

.tab-content .seccion-titulo:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.tab-content .seccion-titulo h3 {
    margin: 0 0 4px;
    font-size: var(--text-xl);
    font-weight: var(--fw-bold);
    color: var(--texto);
}

.tab-content .seccion-titulo>p {
    margin: 0 0 16px;
    font-size: var(--text-sm);
    color: var(--gris-oscuro);
}