/* ============================================================
   SGECELEX — Estilos principales
   Bootstrap 5 base + customizaciones de marca CELEX
   ============================================================ */

:root {
    --sg-primary:   #1a3a6b;
    --sg-secondary: #c8102e;
    --sg-accent:    #f5a800;
    --sg-light:     #f4f6f9;
    --sg-dark:      #12294e;
    --sg-navbar-bg: #1a3a6b;
    --sg-navbar-text: #ffffff;
    --sg-navbar-text-muted: rgba(255,255,255,0.78);
}

/* ---- Navbar ---- */
.navbar-rya {
    background: linear-gradient(90deg, var(--sg-navbar-bg) 0%, #244f8a 100%);
}
.navbar-rya .navbar-brand,
.navbar-rya .nav-link,
.navbar-rya .navbar-text {
    color: var(--sg-navbar-text) !important;
}
.navbar-rya .nav-link {
    border-radius: 0.45rem;
    padding: 0.45rem 0.7rem;
}
.navbar-rya .nav-link:hover,
.navbar-rya .nav-link:focus,
.navbar-rya .nav-link.active {
    color: var(--sg-navbar-text) !important;
    background: rgba(255,255,255,0.12);
}
.navbar-rya .dropdown-toggle::after {
    margin-left: 0.4rem;
}
.navbar-rya .navbar-toggler {
    border-color: rgba(255,255,255,0.35);
}
.navbar-rya .navbar-toggler-icon {
    filter: brightness(0) invert(1);
}
.navbar-rya .badge-role,
.navbar-rya .text-white-50,
.navbar-rya .small,
.navbar-rya .dropdown-item-text,
.navbar-rya .dropdown-item-text em {
    color: var(--sg-navbar-text-muted) !important;
}
.navbar-rya .dropdown-menu {
    border: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.navbar-rya .dropdown-menu .dropdown-item-text,
.navbar-rya .dropdown-menu .dropdown-item-text em,
.navbar-rya .dropdown-menu .small {
    color: #333 !important;
}
.navbar-rya .dropdown-item:hover,
.navbar-rya .dropdown-item:focus {
    background: rgba(26,58,107,0.08);
}
.navbar-sgecelex {
    background-color: var(--sg-primary);
}
.navbar-sgecelex .navbar-brand {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.navbar-sgecelex .badge-role {
    font-size: 0.7rem;
    padding: 0.3em 0.55em;
}

/* ---- Auth wrapper (login / registro / reset) ---- */
.auth-wrapper {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--sg-primary) 0%, #2c5f9e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    border: none;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    overflow: hidden;
}

.auth-card .auth-header {
    background: var(--sg-primary);
    color: #fff;
    text-align: center;
    padding: 1.75rem 1.5rem 1.5rem;
}
.auth-card .auth-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0.5rem 0 0.25rem;
}
.auth-card .auth-header p {
    font-size: 0.82rem;
    opacity: 0.75;
    margin: 0;
}

/* ---- Dashboard cards ---- */
.module-card {
    border: 1px solid #dee2e6;
    border-radius: 12px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}
.module-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.13);
    color: inherit;
    text-decoration: none;
}
.module-card .card-body {
    padding: 2rem 1.5rem;
    text-align: center;
}
.module-card .module-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.75rem;
}
.module-card .module-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.module-card .module-desc {
    font-size: 0.82rem;
    color: #6c757d;
}

/* Colores de accent por card */
.module-card.card-placement .module-icon { color: #0d6efd; }
.module-card.card-boletas  .module-icon { color: #0d6efd; }
.module-card.card-usuarios .module-icon { color: #6f42c1; }
.module-card.card-info     .module-icon { color: #198754; }
.module-card.card-placement:hover { border-color: #0d6efd; }
.module-card.card-escolar  .module-icon { color: #7952b3; }
.module-card.card-escolar:hover { border-color: #7952b3; }
.module-card.card-inscripciones .module-icon { color: #1a3a6b; }
.module-card.card-inscripciones:hover { border-color: #1a3a6b; }
.module-card.card-landing  .module-icon { color: #f5a800; }
.module-card.card-landing:hover { border-color: #f5a800; }
.module-card.card-aula     .module-icon { color: #c8102e; }
.module-card.card-aula:hover { border-color: #c8102e; }

/* ---- Secciones del panel principal ---- */
.seccion-encabezado {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem 0 .7rem;
    border-bottom: 2px solid #e3e8ef;
    margin-bottom: 1.1rem;
}
.seccion-encabezado > i {
    font-size: 1.25rem; color: var(--sg-primary);
    background: #eaf1fb; border-radius: 9px;
    width: 2.3rem; height: 2.3rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.seccion-titulo {
    display: block; font-weight: 700; font-size: 1.08rem;
    color: var(--sg-dark); letter-spacing: -.01em;
}
.seccion-ayuda { display: block; font-size: .84rem; color: #6c757d; }

/* ---- Upload zone ---- */
.upload-zone {
    border: 3px dashed #b0bec5;
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    background: #fafcff;
}
.upload-zone.dragover {
    background: #e3f0fd;
    border-color: var(--sg-primary);
}
.upload-zone .upload-icon {
    font-size: 3.2rem;
    color: #90a4ae;
}

/* ---- Tabla admin ---- */
.table-admin thead th {
    background-color: var(--sg-primary);
    color: #fff;
    white-space: nowrap;
    font-size: 0.88rem;
}

/* ---- Badges de rol ---- */
.badge-invitado   { background-color: #6c757d; }
.badge-estudiante { background-color: #0d6efd; }
.badge-profesor   { background-color: #198754; }
.badge-admin      { background-color: #dc3545; }
.badge-superadmin { background-color: #6f42c1; }

/* ---- Verify QR ---- */
.verify-header {
    background: var(--sg-primary);
    color: #fff;
    padding: 1.5rem;
    border-radius: 8px 8px 0 0;
}
.verify-status-aprobado {
    background: #d4edda;
    color: #155724;
    border-radius: 6px;
    padding: 0.45rem 0.9rem;
    font-weight: 600;
    display: inline-block;
}
.verify-status-pendiente {
    background: #fff3cd;
    color: #856404;
    border-radius: 6px;
    padding: 0.45rem 0.9rem;
    font-weight: 600;
    display: inline-block;
}
.verify-status-reprobado {
    background: #f8d7da;
    color: #842029;
    border-radius: 6px;
    padding: 0.45rem 0.9rem;
    font-weight: 600;
    display: inline-block;
}

/* ---- Spinner overlay (importación) ---- */
#sgLoadingOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    color: #fff;
    font-size: 1.05rem;
}
#sgLoadingOverlay.active {
    display: flex;
}

/* ---- Flash alert ---- */
.alert-flash {
    position: fixed;
    top: 1.1rem;
    right: 1.1rem;
    z-index: 1100;
    min-width: 290px;
    animation: slideInRight 0.3s ease;
}
@keyframes slideInRight {
    from { transform: translateX(110%); opacity: 0; }
    to   { transform: translateX(0);   opacity: 1; }
}

/* ---- Misc ---- */
body {
    background-color: var(--sg-light);
}
.page-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--sg-primary);
    margin-bottom: 1.25rem;
}
.text-sg-primary { color: var(--sg-primary) !important; }
.bg-sg-primary   { background-color: var(--sg-primary) !important; }

/* ============================================================
   MÓDULO EXAMEN — Estilos específicos del sistema de exámenes
   Adaptados de sistema_limpio/css/estilo.css
   ============================================================ */

/* Botones pequeños para acciones en dashboard */
.btn-pequeno {
    padding: 4px 10px !important;
    font-size: 0.8rem !important;
    border-radius: 5px !important;
    margin: 2px 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
}

/* Alertas de examen */
.alert.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
}
.alert.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
}
.mensaje-exito { color: green; font-weight: bold; }
.mensaje-error { color: red; font-weight: bold; }

/* Botones de acción para examen */
.btn-accion {
    background-color: #2295F2;
    color: #fff !important;
    border: none;
    padding: 12px 28px;
    font-size: 18px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(34, 149, 242, 0.18);
    transition: background 0.2s, transform 0.2s;
    margin: 10px 0;
    display: inline-block;
}
.btn-accion:hover, .btn-accion:focus {
    background-color: #691B98;
    color: #fff !important;
    transform: scale(1.07);
    outline: none;
}

/* Botón dashboard de examen */
.dashboard-btn {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: linear-gradient(90deg, #4f8cff 0%, #6ee7b7 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(79,140,255,0.08);
    transition: background 0.2s, transform 0.2s;
    text-decoration: none;
}
.dashboard-btn:hover {
    background: linear-gradient(90deg, #6ee7b7 0%, #4f8cff 100%);
    transform: translateY(-1px) scale(1.04);
}

/* Títulos de sección para módulo de examen */
.titulo-principal {
    color: #691B98;
    text-align: center;
    margin-bottom: 30px;
    font-size: 2rem;
    font-weight: bold;
}
.titulo-seccion {
    color: #2295F2;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.25rem;
    font-weight: bold;
}

/* Secciones de asignación de claves */
.seccion-individual,
.seccion-masiva {
    margin-bottom: 38px;
    padding: 24px 18px;
    border: 2px solid #e3e3e3;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(34, 149, 242, 0.08);
    background: #fafaff;
    text-align: center;
}
.accion-masiva {
    margin-bottom: 14px;
    text-align: center;
}
.label-masiva {
    display: block;
    margin-bottom: 5px;
    color: #222;
    font-size: 1.08rem;
}
.enlace-accion {
    display: inline-block;
    margin-bottom: 8px;
}
.form-masiva {
    display: inline-block;
    margin-top: 5px;
    text-align: center;
}

/* Animación de entrada */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Dashboard de exámenes — tarjetas */
.dashboard-container {
    max-width: 900px;
    margin: 40px auto 0 auto;
    text-align: center;
}
.dashboard-tarjetas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-top: 2.5rem;
}
.dashboard-tarjeta {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 32px 0 rgba(31,38,135,0.18);
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    width: 240px;
    min-width: 200px;
    max-width: 280px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeInUp 0.8s cubic-bezier(.68,-0.55,.27,1.55);
    border: 1px solid #e0e0e0;
    overflow: hidden;
}
.dashboard-tarjeta h3 {
    color: #6c3eb6;
    margin-bottom: 0.7rem;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: center;
    width: 100%;
}
.dashboard-tarjeta p {
    color: #2d3a4b;
    font-size: 1rem;
    margin-bottom: 1.2rem;
}
.dashboard-tarjeta .tipo-examen {
    font-size: 0.92rem;
    color: #4f4f6f;
    text-align: center;
    line-height: 1.8;
    margin-bottom: 0.9rem;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
@media (max-width: 900px) {
    .dashboard-tarjetas { gap: 1rem; }
    .dashboard-tarjeta  { width: 95vw; min-width: 180px; margin-bottom: 1rem; }
}

/* Contenedor de inicio de examen */
.examen-inicio-container {
    max-width: 400px;
    margin: 60px auto 0 auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 32px 0 rgba(31,38,135,0.18);
    padding: 2.5rem 2rem 2rem 2rem;
    animation: fadeInUp 0.8s cubic-bezier(.68,-0.55,.27,1.55);
    border: 1px solid #e0e0e0;
}
.examen-inicio-form h2 {
    text-align: center;
    color: #2d3a4b;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
}
.examen-inicio-form label {
    font-weight: 500;
    color: #2d3a4b;
    margin-bottom: 0.3rem;
    display: block;
}
.examen-inicio-form input[type="text"] {
    width: 100%;
    padding: 0.7rem 1rem;
    margin-bottom: 1.2rem;
    border: 1px solid #bdbdbd;
    border-radius: 8px;
    background: #f7fafd;
    font-size: 1rem;
    transition: border 0.2s;
}
.examen-inicio-form input[type="text"]:focus {
    border: 1.5px solid #4f8cff;
    outline: none;
    background: #f0f7ff;
}
.examen-inicio-form button {
    width: 100%;
    padding: 0.8rem;
    background: linear-gradient(90deg, #4f8cff 0%, #6ee7b7 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(79,140,255,0.08);
    transition: background 0.2s, transform 0.2s;
}
.examen-inicio-form button:hover {
    background: linear-gradient(90deg, #6ee7b7 0%, #4f8cff 100%);
    transform: translateY(-2px) scale(1.03);
}
.alerta-error {
    background: #ffeaea;
    color: #b91c1c;
    border: 1.5px solid #ffb4b4;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    text-align: center;
    animation: fadeInUp 0.7s;
}

/* Contenedor de pregunta */
.examen-pregunta-container {
    max-width: 600px;
    margin: 40px auto 0 auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 32px 0 rgba(31,38,135,0.18);
    padding: 2.5rem 2rem 2rem 2rem;
    animation: fadeInUp 0.8s cubic-bezier(.68,-0.55,.27,1.55);
    border: 1px solid #e0e0e0;
}
.examen-timer {
    font-size: 1.1rem;
    font-weight: bold;
    color: #4f8cff;
    text-align: right;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}
.examen-progreso {
    font-size: 1rem;
    color: #2d3a4b;
    margin-bottom: 1.2rem;
    text-align: left;
}
.examen-pregunta-form h3 {
    color: #2d3a4b;
    margin-bottom: 1.2rem;
    font-size: 1.2rem;
}
.examen-nivel {
    display: inline-block;
    background: #e6f9f0;
    color: #1a7f5a;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 6px;
    padding: 0.2rem 0.7rem;
    margin-bottom: 0.7rem;
}
.examen-opciones {
    margin-bottom: 1.5rem;
}
.examen-opcion {
    display: block;
    background: #f7fafd;
    border-radius: 8px;
    padding: 0.7rem 1rem;
    margin-bottom: 0.7rem;
    font-size: 1rem;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    transition: background 0.2s, border 0.2s;
}
.examen-opcion:hover {
    background: #e6f9f0;
    border: 1.5px solid #6ee7b7;
}
.examen-opcion input[type="radio"] {
    margin-right: 1rem;
    accent-color: #4f8cff;
}
.examen-btns-ante-sig {
    width: 100%;
    padding: 0.8rem;
    background: linear-gradient(90deg, #4f8cff 0%, #6ee7b7 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(79,140,255,0.08);
    transition: background 0.2s, transform 0.2s;
}
.examen-btns-ante-sig:hover {
    background: linear-gradient(90deg, #6ee7b7 0%, #4f8cff 100%);
    transform: translateY(-2px) scale(1.03);
}

/* Contenedor de resultado */
.examen-resultado-container {
    max-width: 700px;
    margin: 50px auto 0 auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 32px 0 rgba(31,38,135,0.18);
    padding: 2.5rem 2rem 2rem 2rem;
    animation: fadeInUp 0.8s cubic-bezier(.68,-0.55,.27,1.55);
    border: 1px solid #e0e0e0;
    text-align: center;
}
.examen-resultado-calificacion {
    font-size: 1.5rem;
    color: #2d3a4b;
    margin-bottom: 1.5rem;
}
.examen-resultado-calificacion strong {
    font-size: 2.2rem;
    color: #4f8cff;
    margin: 0 0.5rem;
}
.examen-resultado-desglose {
    margin-top: 2rem;
    text-align: left;
}
.examen-resultado-desglose h3 {
    color: #2d3a4b;
    margin-bottom: 1rem;
}
.examen-resultado-desglose table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}
.examen-resultado-desglose th,
.examen-resultado-desglose td {
    border: 1px solid #e0e0e0;
    padding: 0.7rem;
    font-size: 1rem;
    text-align: left;
}
.examen-correcta {
    color: #1a7f5a;
    font-weight: bold;
    font-size: 1.2rem;
}
.examen-incorrecta {
    color: #b91c1c;
    font-weight: bold;
    font-size: 1.2rem;
}
.examen-btn-volver {
    display: inline-block;
    padding: 0.8rem 2rem;
    background: linear-gradient(90deg, #4f8cff 0%, #6ee7b7 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(79,140,255,0.08);
    transition: background 0.2s, transform 0.2s;
    text-decoration: none;
}
.examen-btn-volver:hover {
    background: linear-gradient(90deg, #6ee7b7 0%, #4f8cff 100%);
    transform: translateY(-2px) scale(1.03);
}

@media (max-width: 700px) {
    .examen-inicio-container,
    .examen-pregunta-container,
    .examen-resultado-container {
        padding: 1.2rem;
    }
    .examen-resultado-desglose table th,
    .examen-resultado-desglose table td {
        font-size: 0.95rem;
        padding: 0.5rem;
    }
}

/* Información de usuario en asignación de roles */
.usuario-info-tabla {
    width: 100%;
    display: flex;
    justify-content: center;
}
.usuario-info-tabla table {
    width: 80%;
    min-width: 340px;
    box-shadow: 0 2px 8px #eee;
    border-radius: 8px;
    border-collapse: separate;
    border-spacing: 0;
    background: #f7fafd;
    font-size: 1.08rem;
    margin: 0 auto;
}
.usuario-info-tabla th {
    background: #6c3eb6;
    color: #fff;
    padding: 12px 10px;
    border-radius: 8px 0 0 8px;
    text-align: left;
    width: 30%;
}
.usuario-info-tabla td {
    padding: 12px 10px;
    color: #222;
    background: #fff;
    border-radius: 0 8px 8px 0;
    text-align: left;
    border-bottom: 1px solid #6c3eb6;
}

/* Resumen de auditoría (ver_examen_respondido) */
.auditoria-resumen { margin-top: 18px; margin-bottom: 24px; }
.auditoria-resumen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}
.auditoria-resumen-grid > div {
    background: #f7fafd;
    border: 1px solid #dfe7f2;
    border-radius: 12px;
    padding: 14px 16px;
    text-align: center;
    color: #2d3a4b;
    box-shadow: 0 2px 8px rgba(79,140,255,0.06);
}
.auditoria-secciones {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.auditoria-seccion-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.05);
}
.auditoria-seccion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.auditoria-seccion-header h3 { margin: 0; color: #6c3eb6; }
.auditoria-seccion-header span {
    background: #eef4ff;
    color: #3559a8;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.9rem;
    font-weight: 700;
}
.auditoria-subseccion + .auditoria-subseccion { margin-top: 18px; }
.auditoria-subseccion h4 { margin: 0 0 10px 0; color: #2d3a4b; }
.auditoria-tabla-wrap { overflow-x: auto; }
.auditoria-tabla {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #d7dfeb;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}
.auditoria-tabla th,
.auditoria-tabla td {
    padding: 12px 14px;
    border-right: none;
    border-bottom: 2px solid #dde5f0;
    vertical-align: middle;
    text-align: center;
}
.auditoria-tabla th {
    background: linear-gradient(90deg, #6c3eb6 0%, #4f8cff 100%);
    color: #ffffff;
    font-weight: 700;
    border-bottom: 3px solid #d7c5ff;
    text-transform: none;
}
.auditoria-tabla th:last-child,
.auditoria-tabla td:last-child { border-right: none; }
.auditoria-tabla tbody tr:last-child td { border-bottom: none; }
.auditoria-tabla tbody tr:hover td { filter: brightness(0.985); }
.auditoria-tabla tbody td:nth-child(1) { background: #f4edff; }
.auditoria-tabla tbody td:nth-child(2) { background: #fcfcff; }
.auditoria-tabla tbody td:nth-child(3) { background: #f6faff; }
.auditoria-tabla tbody td:nth-child(4) { background: #f8fbf4; }
.auditoria-tabla tbody td:nth-child(5) { background: #fff9f3; }
.auditoria-tabla tbody td:nth-child(6) { background: #f7f7fb; }
.auditoria-tabla .col-pregunta { text-align: left; width: 42%; }
.auditoria-codigo {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ffffff;
    color: #6c3eb6;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid #d9c3ff;
}
.auditoria-estado {
    display: inline-block;
    min-width: 92px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
}
.auditoria-correcta  { background: #e8f8ee; color: #18794e; }
.auditoria-incorrecta { background: #fdecec; color: #b42318; }
.auditoria-pendiente { background: #f3f4f6; color: #4b5563; }
@media (max-width: 700px) {
    .auditoria-seccion-card { padding: 14px; }
    .auditoria-seccion-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Tabla de asignación de claves */
.asignacion-tabla-wrap { margin-top: 10px; }
.asignacion-tabla {
    min-width: 900px;
    table-layout: fixed;
}
.asignacion-tabla th,
.asignacion-tabla td { text-align: left; padding: 14px 16px; }
.asignacion-tabla th:nth-child(1),
.asignacion-tabla td:nth-child(1) { width: 70px; }
.asignacion-tabla th:nth-child(2),
.asignacion-tabla td:nth-child(2) { width: 220px; }
.asignacion-tabla th:nth-child(3),
.asignacion-tabla td:nth-child(3) { width: 360px; }
.asignacion-tabla th:nth-child(4),
.asignacion-tabla td:nth-child(4) { width: 210px; text-align: center; }
.asignacion-col-nombre { font-weight: 700; color: #26354a; }
.asignacion-col-email  { color: #334155; overflow-wrap: anywhere; word-break: break-word; }
.asignacion-col-accion .btn-accion { min-width: 150px; }
@media (max-width: 900px) {
    .asignacion-tabla { min-width: 760px; }
}

/* ============================================================
   KARDEX — dona de calificación, barra apilada por rubro
   Se usa en: calificaciones/kardex.php, escolar/grupo_panel.php
   y la tarjeta de grupo en mis_grupos.php.
   ============================================================ */

.kx-dona {
    --kx-pct: 0;
    --kx-color: #198754;
    width: 96px; height: 96px;
    flex: 0 0 96px;
    border-radius: 50%;
    display: grid; place-items: center;
    position: relative;
    background: conic-gradient(var(--kx-color) calc(var(--kx-pct) * 1%), #e9ecef 0);
}
.kx-dona::after {
    content: ''; position: absolute; inset: 9px;
    border-radius: 50%; background: var(--bs-body-bg, #fff);
}
.kx-dona-num {
    position: relative; z-index: 1;
    font-size: 1.4rem; font-weight: 700; line-height: 1;
    color: var(--kx-color);
}
.kx-dona-sm      { width: 68px; height: 68px; flex-basis: 68px; }
.kx-dona-sm::after { inset: 7px; }
.kx-dona-sm .kx-dona-num { font-size: 1.05rem; }
.kx-dona-xs      { width: 48px; height: 48px; flex-basis: 48px; }
.kx-dona-xs::after { inset: 5px; }
.kx-dona-xs .kx-dona-num { font-size: .8rem; }

.kx-dona[data-color="success"] { --kx-color: #198754; }
.kx-dona[data-color="warning"] { --kx-color: #fd7e14; }
.kx-dona[data-color="danger"]  { --kx-color: #dc3545; }

/* Barra apilada: cada segmento es lo que ese rubro APORTA al 100 */
.kx-barra {
    display: flex; height: 14px; border-radius: 7px;
    overflow: hidden; background: #e9ecef;
}
.kx-seg { transition: width .4s ease; }
.kx-seg-tareas   { background: #0d6efd; }
.kx-seg-aula     { background: #6f42c1; }
.kx-seg-foros    { background: #20c997; }
.kx-seg-falta    { background: repeating-linear-gradient(45deg, #f1f3f5, #f1f3f5 4px, #e9ecef 4px, #e9ecef 8px); }

.kx-punto {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 3px; margin-right: 4px; vertical-align: -1px;
}

.kx-materia   { border-left: 4px solid #dee2e6; }
.kx-resumen   { border-left: 4px solid #0d6efd; }

/* Mini-resumen dentro de la tarjeta de un grupo */
.kx-mini {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .75rem; border-radius: .5rem;
    background: rgba(0, 0, 0, .025);
}
.kx-mini .kx-mini-txt { line-height: 1.25; }

/* Barra desplazable de materias/grupos en Calificaciones */
.kx-tiras {
    display: flex; gap: .6rem; overflow-x: auto;
    padding: .25rem .25rem .75rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.kx-tiras::-webkit-scrollbar        { height: 8px; }
.kx-tiras::-webkit-scrollbar-thumb  { background: #ced4da; border-radius: 4px; }
.kx-tira {
    flex: 0 0 auto; scroll-snap-align: start;
    min-width: 210px; max-width: 260px;
    border: 1px solid #dee2e6; border-radius: .6rem;
    padding: .7rem .85rem; background: #fff;
    text-decoration: none; color: inherit;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.kx-tira:hover  { border-color: #adb5bd; box-shadow: 0 2px 8px rgba(0,0,0,.07); transform: translateY(-1px); color: inherit; }
.kx-tira.activa { border-color: #dc3545; box-shadow: 0 0 0 2px rgba(220,53,69,.15); }
.kx-tira-titulo { font-weight: 600; font-size: .92rem; }
.kx-tira-sub    { font-size: .78rem; color: #6c757d; }

/* ── Selector de temas gramaticales ────────────────────────── */
.temas-caja       { max-height: 20rem; overflow-y: auto; border: 1px solid #dee2e6;
                    border-radius: .5rem; padding: .75rem; background: #fbfcfd; }
.temas-nivel      { margin-bottom: .9rem; }
.temas-nivel:last-child { margin-bottom: 0; }
.temas-nivel-titulo {
    font-size: .72rem; font-weight: 700; letter-spacing: .06em;
    color: #6c757d; margin-bottom: .35rem;
}
.temas-lista      { display: flex; flex-wrap: wrap; gap: .35rem; }
.tema-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .28rem .6rem; font-size: .82rem;
    border: 1px solid #dee2e6; border-radius: 999px;
    background: #fff; cursor: pointer; transition: all .12s;
}
.tema-chip:hover  { border-color: #adb5bd; }
.tema-chip.activo { border-color: #c62828; background: rgba(198,40,40,.07); font-weight: 500; }
.tema-chip input  { margin: 0; }
.tema-es          { color: #8a93a3; font-size: .74rem; }
.tema-chip.activo .tema-es { color: #a5636a; }

/* ============================================================
   Formulario de generar claves de examen

   No tenía NINGÚN estilo: la clase .generar-form se usaba en el HTML pero
   nunca existió en esta hoja, así que el navegador pintaba etiquetas y
   campos en línea, amontonados y sin relación con el resto del sitio.
   Se toma el mismo lenguaje que .examen-inicio-form, que sí estaba resuelto.
   ============================================================ */
.generar-form {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    padding: 1.6rem 1.7rem;
    box-shadow: 0 2px 12px rgba(18, 41, 78, .06);
}
.generar-form label {
    display: block;
    font-weight: 600;
    color: #2d3a4b;
    font-size: .95rem;
    margin-bottom: .35rem;
}
.generar-form input[type="number"],
.generar-form select {
    width: 100%;
    padding: .7rem 1rem;
    margin-bottom: 1.15rem;
    border: 1px solid #bdbdbd;
    border-radius: 8px;
    background: #f7fafd;
    font-size: 1rem;
    color: #2d3a4b;
    transition: border .2s, background .2s;
}
.generar-form input[type="number"]:focus,
.generar-form select:focus {
    border: 1.5px solid #4f8cff;
    outline: none;
    background: #f0f7ff;
}
/* La ayuda va pegada al campo que explica, no flotando entre dos. */
.generar-form .ayuda-campo {
    display: block;
    margin: -.9rem 0 1.15rem;
    font-size: .84rem;
    line-height: 1.45;
    color: #6b7a8d;
}
.generar-form button {
    width: 100%;
    padding: .8rem;
    border: none;
    border-radius: 8px;
    font-size: 1.02rem;
    font-weight: 600;
    cursor: pointer;
}

/* ============================================================
   Tabla de exámenes asignados

   Se amontonaba porque `use_of_english_reading_listening` no tiene espacios:
   el navegador no puede partirlo, así que la columna se ensancha y empuja a
   las demás hasta que los encabezados se tocan entre sí.
   ============================================================ */
#tabla-examenes th,
#tabla-examenes td {
    padding: .55rem .7rem;
    vertical-align: middle;
    line-height: 1.35;
}
#tabla-examenes th {
    white-space: nowrap;   /* los encabezados nunca se parten */
    font-size: .84rem;
}
/* Los botones de acción se apilan en vez de estirar la fila a lo alto. */
#tabla-examenes td:last-child {
    white-space: nowrap;
    text-align: center;
}
#tabla-examenes td .btn-accion,
#tabla-examenes td .btn-pequeno {
    display: inline-block;
    margin: .12rem 0;
    font-size: .78rem;
    padding: .3rem .6rem;
}

/* ============================================================
   ENCABEZADOS DE TABLA — comunes a todo el sistema
   ============================================================

   Eran texto negro en negrita sobre fondo blanco, sin nada que los separara
   de los datos. En una tabla ancha —Seguimiento tiene quince columnas— la
   vista no encuentra dónde acaba el título y dónde empieza la fila, y hay que
   ir contando con el dedo.

   ── Por qué `table thead th` y no una clase nueva ────────────

   Porque hay más de treinta tablas repartidas por el sistema, y ponerles una
   clase a mano significaría, otra vez, que las que se hagan mañana nacen sin
   ella.

   Es un selector de tres ELEMENTOS (0,0,3). Toda tabla que ya defina su propio
   encabezado —`.table-admin`, `.auditoria-tabla`, `.usuario-info-tabla`— lo
   hace con una CLASE, que pesa más, así que **conserva su aspecto sin tocar
   nada**. Esto solo viste a las que no tenían nada.

   No alcanza a las boletas: mPDF recibe su propio HTML con los estilos dentro
   y esta hoja no entra ahí. Comprobado antes de escribir una línea.
   ============================================================ */
/* Las dos formas del mismo selector, y no por gusto.
   Bootstrap pinta el fondo de cada celda con `.table > :not(caption) > * > *`,
   que pesa (0,1,3): mas que `table thead th`, que pesa (0,0,3). Sin la segunda
   linea, las tablas de Bootstrap -que son la mayoria del sistema- ignorarian
   este encabezado y se quedarian en blanco. `table.table thead th` empata en
   peso con la de Bootstrap, y al empatar gana la ultima hoja cargada: esta,
   que el header carga despues. */
table thead th,
table.table thead th {
    background: var(--sg-primary);
    color: #fff;
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .02em;
    padding: .7rem .75rem;
    /* Sin `text-align` a proposito. `.seccion-masiva` centra su contenido y las
       celdas lo heredan; si el encabezado impusiera «izquierda», cada titulo
       quedaria desalineado con la columna que nombra -- peor que el problema
       que este bloque viene a arreglar. Cada tabla decide, y el encabezado la
       sigue. */
    border-bottom: 3px solid var(--sg-accent);
    vertical-align: middle;
}

/* Las esquinas, solo en los extremos: una tabla con las cuatro esquinas
   redondeadas y el cuerpo cuadrado se ve rota. */
table thead tr:first-child th:first-child { border-top-left-radius: 8px; }
table thead tr:first-child th:last-child  { border-top-right-radius: 8px; }

/* ── La pista de que la columna se puede ordenar ─────────────
   El comportamiento ya existe en comportamiento.js, pero sin esto no hay
   manera de adivinar que el encabezado es pulsable hasta que alguien lo pulsa
   por casualidad. */
table thead th[role="button"],
table.table thead th[role="button"] { transition: background .15s; }
table thead th[role="button"]:hover,
table thead th[aria-sort="ascending"],
table thead th[aria-sort="descending"],
table.table thead th[role="button"]:hover,
table.table thead th[aria-sort="ascending"],
table.table thead th[aria-sort="descending"] {
    background: var(--sg-dark);
}
table thead th[role="button"]:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--sg-accent);
}
.orden-flecha {
    font-size: .7em;
    vertical-align: .1em;
}

/* ============================================================
   Seguimiento de exámenes: las columnas se nombran, no se cuentan
   ============================================================

   Lo que había aquí eran reglas `td:nth-child(n)`, y esa forma de apuntar se
   corre entera en cuanto alguien inserta una columna. Ya había pasado: al
   añadir «Propósito», la regla escrita para el email quedó pintando la columna
   del estudiante, y nadie lo notó porque el resultado no es un error, solo un
   ancho raro.

   Con clases en la celda, una columna nueva no mueve nada.
   ============================================================ */
#tabla-examenes .col-folio {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-weight: 700;
    white-space: nowrap;
}
/* La clave y el tipo son cadenas largas sin espacios: se les permite quebrarse
   en cualquier punto en vez de estirar la columna y empujar a las demás. */
#tabla-examenes .col-clave,
#tabla-examenes .col-tipo {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .8rem;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 15rem;
}
#tabla-examenes .col-email {
    overflow-wrap: anywhere;
    max-width: 14rem;
    font-size: .86rem;
}
/* Las etiquetas de propósito y forma no se parten nunca. */
#tabla-examenes .col-etiqueta { white-space: nowrap; }

/* ── El aspecto ──────────────────────────────────────────────
   Quince columnas y filas altas, porque la celda de calificación lleva tres
   botones. Sin franjas alternas la vista se cambia de fila al recorrerla de
   extremo a extremo, que es justo lo que se hace aquí: leer qué nivel le tocó
   a un alumno concreto. */
/* Quince columnas se leen mejor pegadas a la izquierda; el ojo vuelve siempre
   al mismo sitio al bajar de fila. Se ponen las dos —encabezado y celda— para
   que no puedan discrepar. */
#tabla-examenes th,
#tabla-examenes td { text-align: left; }
#tabla-examenes td:last-child { text-align: center; }

#tabla-examenes {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(18, 41, 78, .10);
    background: #fff;
}
#tabla-examenes tbody td        { border-bottom: 1px solid #e6ebf2; }
#tabla-examenes tbody tr:nth-child(even) td { background: #f7f9fc; }
#tabla-examenes tbody tr:hover td           { background: #eef4ff; }
#tabla-examenes tbody tr:last-child td      { border-bottom: none; }