/* Paleta institucional inspirada en infop.hn (azul institucional #203d89 y
   dorado de acento #ffb606, tomados de las variables de marca propias del
   sitio oficial) adaptada a tonos algo mas profundos para uso en un sistema
   interno de escritorio/paneles. Todo el sistema consume estas variables, asi
   que la identidad completa se puede reajustar cambiando solo este bloque. */
:root {
    --primary: #1c3c73;
    --primary-dark: #12274d;
    --primary-light: #2f5aa3;
    --secondary: #3f6ba3;
    --accent: #f0a90c;
    --accent-dark: #c4870a;
    --background: #f3f5f8;
    --card-bg: #ffffff;
    --text: #202834;
    --text-muted: #667085;
    --danger: #c0392b;
    --danger-dark: #9e2e21;
    --success: #1f8f5a;
    --gray-border: #e3e7ee;
    --gray-100: #f7f9fc;
    --gray-200: #eef1f6;
    --radio: 12px;
    --radio-sm: 8px;
    --sombra-suave: 0 1px 2px rgba(28, 60, 115, 0.04), 0 6px 18px rgba(28, 60, 115, 0.06);
    --sombra-hover: 0 2px 6px rgba(28, 60, 115, 0.07), 0 14px 30px rgba(28, 60, 115, 0.11);
    --transicion: 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
    :root { --transicion: 0s; }
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

* {
    box-sizing: border-box;
    /* Sin esto, la impresion nativa del navegador (Ctrl+P / window.print(),
       usada en Empresas y Contactos) puede omitir fondos y colores de fondo
       por defecto, dejando tarjetas y grillas de graficos mas palidas de
       lo que se ven en pantalla. No afecta la exportacion a PDF por
       html2canvas/jsPDF (esa captura pixeles directamente). */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--background);
    margin: 0;
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Header del login e interno */
.main-header {
    background-color: var(--primary);
    background-image: linear-gradient(120deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(18, 39, 77, 0.18);
}

.logo-container img {
    height: 50px;
    width: auto;
    object-fit: contain;
}

/* Banner de bienvenida (paginas publicas): titulo + descripcion breve entre
   el header y la tarjeta del formulario. Fondo claro a proposito, para no
   apilar dos bloques oscuros seguidos (header ya es azul institucional). */
.banner-bienvenida {
    max-width: 800px;
    margin: 36px auto 0;
    padding: 0 24px;
    text-align: center;
}

.banner-bienvenida h1 {
    color: var(--primary);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.3px;
    margin: 0 0 8px;
}

.banner-bienvenida p {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* Footer institucional de las paginas publicas: mismo tono oscuro del header,
   para "cerrar" visualmente la pagina, con la unica info de contacto real que
   existe en el proyecto (no se inventan telefonos/direcciones/redes). */
.pie-institucional {
    background-color: var(--primary-dark);
    color: rgba(255, 255, 255, 0.82);
    margin-top: 40px;
    padding: 26px 24px 18px;
    text-align: center;
}

.pie-institucional-contenido {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.pie-institucional-contenido img {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.pie-institucional-contenido .pie-texto {
    text-align: left;
}

.pie-nombre {
    margin: 0;
    font-weight: 600;
    font-size: 13.5px;
    color: #ffffff;
}

.pie-correo {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.72);
}

.pie-copyright {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 480px) {
    .pie-institucional-contenido {
        flex-direction: column;
        text-align: center;
    }
    .pie-institucional-contenido .pie-texto {
        text-align: center;
    }
}

/* Footer discreto del panel interno (autenticado): una linea, no compite con
   el contenido de trabajo. Se oculta al imprimir junto con el resto del
   "chrome" de la interfaz. */
.pie-panel {
    text-align: center;
    padding: 14px 24px;
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 11.5px;
    border-top: 1px solid var(--gray-200);
}

/* Contenedores modernos */
.container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 24px;
    animation: fadeIn 0.35s ease;
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--gray-200);
    border-radius: var(--radio);
    box-shadow: var(--sombra-suave);
    padding: 26px;
    margin-bottom: 24px;
    animation: slideUp 0.3s ease;
    transition: box-shadow var(--transicion), border-color var(--transicion);
}

.card:hover {
    box-shadow: var(--sombra-hover);
    border-color: var(--gray-border);
}

/* Formularios en Grid (Dos columnas como tus imágenes) */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    grid-column: span 2;
}

label {
    font-weight: 600;
    font-size: 13.5px;
    margin-bottom: 7px;
    color: var(--primary);
    letter-spacing: 0.1px;
}

input, select, textarea {
    padding: 10px 13px;
    border: 1.5px solid var(--gray-border);
    border-radius: var(--radio-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background-color: #fff;
    transition: border-color var(--transicion), box-shadow var(--transicion);
}

input::placeholder, textarea::placeholder {
    color: #9aa5b5;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3.5px rgba(63, 107, 163, 0.16);
}

input:disabled, select:disabled, textarea:disabled {
    background-color: var(--gray-100);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Solo marca en rojo un campo inválido después de que el usuario interactuó con
   él (o intentó enviar el formulario) - nunca en la carga inicial de la página.
   :placeholder-shown no sirve para esto: un campo requerido SIN atributo
   placeholder nunca cumple :placeholder-shown, así que :not(:placeholder-shown)
   quedaba siempre verdadero y el campo se veía "inválido" desde el primer render. */
input:user-invalid {
    border-color: var(--danger);
}

/* Campo con icono a la izquierda (login, buscadores, etc.) */
.campo-con-icono {
    position: relative;
}

.campo-con-icono i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 15px;
    pointer-events: none;
}

.campo-con-icono input {
    width: 100%;
    box-sizing: border-box;
    padding-left: 40px;
}

/* Botones */
.btn-group {
    margin-top: 22px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn {
    padding: 10px 22px;
    border: none;
    border-radius: var(--radio-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.1px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform var(--transicion), box-shadow var(--transicion), background-color var(--transicion);
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(28, 60, 115, 0.16);
}

.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-primary { background-color: var(--primary); color: white; }
.btn-primary:hover { background-color: var(--primary-light); }
.btn-secondary { background-color: #64748b; color: white; }
.btn-secondary:hover { background-color: #57687c; }
.btn-danger { background-color: var(--danger); color: white; }
.btn-danger:hover { background-color: var(--danger-dark); }

/* Tablas Modernas */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 14px;
}

/* Evita que tablas anchas (muchos botones de acción) se salgan del marco de la tarjeta */
.contenedor-tabla {
    overflow-x: auto;
    border: 1px solid var(--gray-200);
    border-radius: var(--radio-sm);
}

.contenedor-tabla table {
    margin-top: 0;
}

th, td {
    padding: 13px 14px;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

th {
    background-color: var(--gray-100);
    color: var(--primary);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--gray-border);
    white-space: nowrap;
}

tbody tr {
    transition: background-color var(--transicion);
}

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

tbody tr:hover {
    background-color: var(--gray-100);
}

th[data-ordenable] {
    cursor: pointer;
    user-select: none;
}

th[data-ordenable]::after {
    content: '\f0dc';
    font-family: 'bootstrap-icons';
    font-size: 11px;
    margin-left: 6px;
    opacity: 0.35;
}

th[data-ordenable].orden-asc::after {
    content: '\f0de';
    opacity: 1;
    color: var(--accent-dark);
}

th[data-ordenable].orden-desc::after {
    content: '\f0dd';
    opacity: 1;
    color: var(--accent-dark);
}

/* ===== Login ===== */
.pantalla-centrada {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: radial-gradient(circle at top, #f7f9fc 0%, var(--background) 60%);
}

.tarjeta-login {
    width: 400px;
    max-width: 90vw;
}

.tarjeta-login .logo-login {
    text-align: center;
    margin-bottom: 20px;
}

.tarjeta-login .logo-login img {
    height: 70px;
    width: auto;
    object-fit: contain;
}

.campo-contrasena {
    position: relative;
}

.campo-contrasena input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 45px;
}

.boton-ver-contrasena {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--secondary);
    font-weight: 600;
}

.mensaje-error {
    background-color: #fbeae8;
    color: var(--danger-dark);
    border: 1px solid #f3cdc8;
    padding: 11px 16px;
    border-radius: var(--radio-sm);
    text-align: center;
    font-weight: 600;
    margin-bottom: 15px;
}

.mensaje-exito {
    background-color: #e7f6ee;
    color: #196b41;
    border: 1px solid #c3e9d5;
    padding: 11px 16px;
    border-radius: var(--radio-sm);
    text-align: center;
    font-weight: 600;
    margin-bottom: 15px;
}

/* ===== Layout del panel (barra lateral + contenido) ===== */
.diseno-panel {
    display: flex;
    min-height: 100vh;
}

.barra-lateral {
    width: 232px;
    flex-shrink: 0;
    background-color: var(--primary);
    background-image: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 12px rgba(18, 39, 77, 0.12);
}

.barra-lateral .logo-barra-lateral {
    text-align: center;
    padding: 26px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.barra-lateral .logo-barra-lateral img {
    max-width: 140px;
    height: auto;
    object-fit: contain;
}

.barra-lateral nav {
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.barra-lateral nav a {
    color: rgba(255,255,255,0.82);
    text-decoration: none;
    padding: 11px 14px;
    border-radius: var(--radio-sm);
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 3px solid transparent;
    transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion);
}

.barra-lateral nav a i {
    font-size: 16px;
    width: 18px;
    text-align: center;
}

.barra-lateral nav a:hover {
    background-color: rgba(255,255,255,0.08);
    color: white;
}

.barra-lateral nav a.modulo-activo {
    background-color: rgba(240, 169, 12, 0.16);
    border-left-color: var(--accent);
    color: white;
}

.titulo-grupo-menu {
    color: rgba(255,255,255,0.45);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 14px 14px 4px;
}

.barra-lateral nav a.enlace-submenu {
    padding-left: 32px;
    font-size: 13.5px;
}

.boton-menu-movil {
    display: none;
    background: none;
    border: none;
    color: var(--primary);
    font-size: 22px;
    cursor: pointer;
}

.contenido-principal {
    flex: 1;
    min-width: 0;
}

.barra-superior {
    background-color: white;
    padding: 14px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--gray-200);
    box-shadow: 0 1px 3px rgba(28, 60, 115, 0.04);
    gap: 15px;
}

.nombre-sistema {
    font-weight: 800;
    color: var(--primary);
    font-size: 15px;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.barra-superior .usuario-sesion {
    display: flex;
    align-items: center;
    gap: 18px;
}

.campana-notificaciones {
    position: relative;
}

.boton-campana {
    background: none;
    border: none;
    font-size: 19px;
    color: var(--primary);
    cursor: pointer;
    position: relative;
    padding: 4px;
}

.desplegable-notificaciones {
    display: none;
    position: absolute;
    right: 0;
    top: 130%;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radio-sm);
    box-shadow: var(--sombra-hover);
    padding: 15px;
    width: 220px;
    font-size: 13px;
    color: var(--text-muted);
    z-index: 50;
    animation: fadeIn 0.15s ease;
}

.campana-notificaciones.abierta .desplegable-notificaciones {
    display: block;
}

.avatar-usuario {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--primary);
    background-image: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

.btn-cerrar-sesion {
    background-color: transparent;
    color: var(--danger) !important;
    border: 1.5px solid #f0d3cf;
    padding: 6px 14px;
    border-radius: var(--radio-sm);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion);
}

.btn-cerrar-sesion:hover {
    background-color: var(--danger);
    border-color: var(--danger);
    color: white !important;
}

@media (max-width: 768px) {
    .boton-menu-movil {
        display: inline-flex;
    }

    .barra-lateral {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 900;
        transform: translateX(-100%);
        transition: transform var(--transicion);
    }

    .barra-lateral.sidebar-abierta {
        transform: translateX(0);
    }

    .usuario-sesion span {
        display: none;
    }

    /* Todos los formularios del sistema (registro publico, modales del panel,
       login) usan ".form-grid" a dos columnas; en movil se colapsan a una
       sola columna para que ningun campo quede angosto ni provoque scroll
       horizontal. */
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group.full-width {
        grid-column: span 1;
    }

    .indicador-pasos {
        flex-wrap: wrap;
    }

    .banner-bienvenida h1 {
        font-size: 23px;
    }
}

/* ===== Estados y acciones de tabla ===== */
.insignia-estado {
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: white;
    display: inline-block;
}

.insignia-estado.activo { background-color: var(--success); }
.insignia-estado.inactivo { background-color: #98a2b3; }

.insignia-estado.matriculado { background-color: var(--secondary); }
.insignia-estado.aprobado { background-color: var(--success); }
.insignia-estado.reprobado { background-color: var(--danger); }
.insignia-estado.manual { background-color: #b7791f; }

.insignia-principal {
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    color: white;
    display: inline-block;
    background-color: var(--primary);
}

.celda-acciones {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn-accion {
    padding: 6px 13px;
    border-radius: var(--radio-sm);
    text-decoration: none;
    font-size: 12.5px;
    color: white !important;
    border: none;
    cursor: pointer;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform var(--transicion), box-shadow var(--transicion), background-color var(--transicion), opacity var(--transicion);
}

.btn-accion:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(28, 60, 115, 0.18);
    opacity: 0.95;
}

.btn-ver { background-color: var(--secondary); }
.btn-editar { background-color: var(--accent); color: var(--primary-dark) !important; }
.btn-activar { background-color: var(--success); }
.btn-desactivar { background-color: var(--accent-dark); }
.btn-eliminar { background-color: var(--danger); }
.btn-eliminar[disabled] { background-color: #d5d9e0; color: #8a92a1 !important; cursor: not-allowed; transform: none; box-shadow: none; }

/* Paginación */
.paginacion {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.paginacion a {
    padding: 7px 13px;
    border-radius: var(--radio-sm);
    background-color: var(--gray-100);
    border: 1px solid var(--gray-200);
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 13.5px;
    transition: background-color var(--transicion), border-color var(--transicion);
}

.paginacion a:hover {
    background-color: var(--gray-200);
    border-color: var(--gray-border);
}

.paginacion a.pagina-actual {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white;
}

.paginacion-puntos {
    padding: 7px 4px;
    color: #98a2b3;
    font-weight: 700;
    letter-spacing: 1px;
}

/* ===== Dashboard ===== */
.rejilla-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    margin-bottom: 25px;
}

.tarjeta-kpi {
    background: var(--card-bg);
    border: 1px solid var(--gray-200);
    border-radius: var(--radio);
    box-shadow: var(--sombra-suave);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 3px solid var(--primary);
}

.etiqueta-kpi {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.valor-kpi {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.rejilla-graficos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 25px;
}

/* Alto fijo (no depende del ancho de la tarjeta): junto con
   maintainAspectRatio:false en Chart.js, esto hace que el alto del grafico
   sea siempre el mismo, predecible, tanto en pantalla como al imprimir. */
.zona-grafico {
    position: relative;
    height: 260px;
}

/* Selector compacto de tipo de grafico (Dashboard): a proposito angosto y a
   la izquierda, no debe competir visualmente con las tarjetas de graficos. */
.selector-tipo-grafico {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 178px;
    max-width: 100%;
    margin-bottom: 14px;
}

.selector-tipo-grafico label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.selector-tipo-grafico select {
    width: 100%;
    font-size: 13.5px;
    padding: 7px 10px;
    cursor: pointer;
}

/* ===== Sistema: matriz de permisos ===== */
.matriz-permisos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    max-height: 400px;
    overflow-y: auto;
}

.grupo-permisos-modulo {
    background-color: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--radio-sm);
    padding: 13px 15px;
}

.grupo-permisos-modulo label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 6px;
}

.grupo-permisos-modulo input[type="checkbox"] {
    width: auto;
}

@media (max-width: 900px) {
    .rejilla-graficos {
        grid-template-columns: 1fr;
    }
}

.barra-filtros {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

/* Dashboard: separador formal entre el titulo "Resumen General" (y sus
   botones de exportar) y el contenido de abajo, igual al patron de
   .titulo-seccion-formulario usado en el resto del panel. */
.barra-filtros-dashboard {
    padding-bottom: 14px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--gray-200);
}

.barra-filtros-dashboard h3 {
    color: var(--primary);
    font-size: 16px;
}

.barra-filtros select {
    width: auto;
}

/* ===== Modales ===== */
.fondo-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 22, 40, 0.55);
    backdrop-filter: blur(1.5px);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.fondo-modal.visible {
    display: flex;
    animation: fadeIn 0.18s ease;
}

.caja-modal {
    background: white;
    border-radius: var(--radio);
    width: 600px;
    max-width: 92vw;
    max-height: 88vh;
    overflow-y: auto;
    padding: 26px;
    box-shadow: 0 20px 50px rgba(18, 39, 77, 0.28);
    animation: slideUp 0.2s ease;
}

.caja-modal.angosta {
    width: 420px;
}

.cabecera-modal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--gray-200);
}

.cabecera-modal h3 {
    margin: 0;
    color: var(--primary);
}

.cerrar-modal {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--text-muted);
    line-height: 1;
    transition: color var(--transicion);
}

.cerrar-modal:hover {
    color: var(--danger);
}

.lista-seleccion-cursos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
}

.lista-seleccion-cursos label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: var(--text);
}

.lista-seleccion-cursos input[type="checkbox"] {
    width: auto;
}

.chips-cursos-elegidos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.chip-curso {
    background-color: var(--secondary);
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 600;
}

.texto-ayuda {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 5px;
}

/* ===== Formulario público en pasos ===== */
.indicador-pasos {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px;
}

.indicador-pasos span {
    padding: 7px 20px;
    border-radius: 20px;
    background-color: var(--gray-200);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 13px;
}

.indicador-pasos span.paso-activo {
    background-color: var(--primary);
    color: white;
}

.paso-formulario {
    display: none;
}

.paso-formulario.paso-visible {
    display: block;
}

.tarjeta-detalle-empresa {
    background-color: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--radio-sm);
    padding: 20px;
}

.tarjeta-detalle-empresa dt {
    font-weight: 700;
    color: var(--primary);
    margin-top: 10px;
}

.tarjeta-detalle-empresa dd {
    margin: 0;
}

/* Controles de la barra de filtros y búsqueda */
.grupo-controles-filtro {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.grupo-controles-filtro input,
.grupo-controles-filtro select {
    width: auto;
}

.columna-acciones {
    white-space: nowrap;
}

.btn-compartir { background-color: var(--primary); }

/* Secciones y bloques de contacto en los formularios */
.titulo-seccion-formulario {
    color: var(--primary);
    border-bottom: 2px solid var(--gray-200);
    padding-bottom: 9px;
    margin: 22px 0 16px;
    font-size: 16px;
}

.bloque-contacto {
    background-color: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--radio-sm);
    padding: 16px 20px;
    margin-bottom: 15px;
}

.etiqueta-contacto {
    font-weight: 700;
    color: var(--secondary);
    margin: 0 0 10px;
}

.cabecera-bloque-curso {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/* Trio Matriculados/Aprobados/Reprobados del modal de "Datos de Curso": una
   sola fila en vez de ocupar 3 celdas sueltas del form-grid general, para
   que se lean como un grupo relacionado. Compactos y sin estirarse a todo
   el ancho de la fila (flex-basis ~28% en vez de 1fr): dejan espacio libre
   a la derecha en pantallas anchas, y con flex-wrap nunca desbordan
   horizontalmente en pantallas angostas (bajan de fila en vez de
   recortarse). */
.fila-resultados-curso {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.campo-resultado-curso {
    flex: 0 1 28%;
    min-width: 100px;
}

.campo-resultado-curso label {
    font-size: 12.5px;
    margin-bottom: 3px;
}

.campo-resultado-curso input {
    width: 100%;
    box-sizing: border-box;
}

.campo-resultado-aprobados input {
    border-color: rgba(31, 143, 90, 0.35);
}

.campo-resultado-reprobados input {
    border-color: rgba(192, 57, 43, 0.25);
}

/* ===== Datos de Curso: tabla de registros ===== */
#tabla-cursos th:nth-child(1), #tabla-cursos td:nth-child(1) { white-space: nowrap; }
#tabla-cursos th:nth-child(4), #tabla-cursos td:nth-child(4) { text-align: center; }

.resultados-curso {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.chip-resultado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
}

.chip-resultado i {
    font-size: 11px;
}

.chip-matriculados { background-color: rgba(28, 60, 115, 0.09); color: var(--primary); }
.chip-aprobados { background-color: rgba(31, 143, 90, 0.12); color: var(--success); }
.chip-reprobados { background-color: rgba(192, 57, 43, 0.1); color: var(--danger); }

.lista-chips-empresas {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 240px;
}

.chip-empresa {
    background-color: var(--gray-100);
    border: 1px solid var(--gray-200);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

/* Módulo de mensajería */
.rejilla-correos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.lista-correos {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 260px;
    overflow-y: auto;
}

.lista-correos li {
    padding: 6px 0;
    border-bottom: 1px solid var(--gray-200);
    font-size: 14px;
}

textarea {
    resize: vertical;
    font-family: inherit;
}

/* Encabezado que solo aparece al imprimir */
.encabezado-impresion {
    display: none;
}

/* Logo a color (RUTA_LOGO_IMPRESION): no necesita caja de fondo, se ve
   presentable directamente sobre el papel/PDF blanco. */
.logo-imprimir {
    height: 42px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

@media print {
    /* Tablas anchas (Empresas, Contactos) caben mejor apaisadas. */
    @page {
        size: landscape;
        margin: 1.2cm;
    }

    .barra-lateral,
    .barra-superior,
    .barra-filtros,
    .columna-acciones,
    .paginacion,
    .fondo-modal,
    .selector-tipo-grafico,
    .pie-panel {
        display: none !important;
    }

    .diseno-panel,
    .contenido-principal,
    .container {
        display: block;
        margin: 0;
        padding: 0;
        max-width: none;
        width: 100%;
    }

    .card {
        box-shadow: none;
        border: none;
        padding: 0;
        overflow: visible;
    }

    /* Dashboard: los dos graficos se apilan uno debajo del otro (en vez de
       lado a lado) para que cada uno se vea a ancho completo y mas legible;
       las tarjetas KPI y los titulos se encogen (menos padding, menos alto,
       letra mas chica) para dejarles espacio. Todo junto, con el encabezado,
       siempre cabe en una sola pagina sin depender de que el ajuste por JS
       tenga que entrar a rescatar. */
    .rejilla-graficos {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 8px;
    }

    .zona-grafico {
        height: 215px;
    }

    .rejilla-kpi {
        gap: 10px;
        margin-bottom: 12px;
    }

    .tarjeta-kpi {
        padding: 8px 12px;
        box-shadow: none;
    }

    .etiqueta-kpi {
        font-size: 9.5px;
    }

    .valor-kpi {
        font-size: 19px;
    }

    .titulo-seccion-formulario {
        margin: 0 0 6px;
        padding-bottom: 4px;
        font-size: 12px;
    }

    /* Esto es la corrección clave: sin esto, el contenedor de la tabla
       conserva su "overflow-x: auto" de pantalla y el navegador solo
       imprime la porción visible/recortada (se ve como una captura de
       pantalla), en vez de la tabla completa con todos sus registros. */
    .contenedor-tabla {
        overflow-x: visible !important;
        width: 100%;
        border: none;
    }

    table {
        width: 100%;
        table-layout: auto;
        font-size: 11px;
    }

    /* Repite el encabezado de columnas en cada página cuando la tabla
       se parte entre páginas, y evita cortar una fila justo a la mitad. */
    thead {
        display: table-header-group;
    }

    tr {
        page-break-inside: avoid;
    }

    .encabezado-impresion {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid #ccc;
    }

    .encabezado-impresion-marca {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .encabezado-impresion h2 {
        color: #000;
        margin: 0;
        font-size: 15px;
    }

    .fecha-impresion {
        margin: 0;
        color: #666;
        font-size: 9px;
        white-space: nowrap;
    }
}