/* ===== UNITEC STYLES - NUEVA PALETA DE COLORES ===== */
:root {
    /* Colores principales UNITEC */
    --unitec-primary: #0D6FBE;
    /* Azul UNITEC principal (CTAs, acentos, precio) */
    --unitec-primary-hover: #0A5A9E;
    /* Azul UNITEC hover (8% más oscuro) */
    --unitec-secondary: #B6CCDE;
    /* Azul de apoyo (bordes, labels) */
    --unitec-accent: #28a745;
    /* Verde para botones de acción (editar, nuevo) */
    --unitec-accent-hover: #218838;
    /* Verde hover (8% más oscuro) */

    /* Textos */
    --unitec-text-primary: #000000;
    /* Texto principal negro */
    --unitec-text-secondary: #6A6A6A;
    /* Texto secundario gris medio */
    --unitec-text-meta: #6B7280;
    /* Texto meta/información */

    /* Fondos y superficies */
    --unitec-bg-white: #FFFFFF;
    /* Fondo blanco */
    --unitec-bg-light: #EDF3F8;
    /* Azul muy claro para secciones/filtros */
    --unitec-bg-info: #EDF3F8;
    /* Fondo info neutral (cards, tips) */
    --unitec-bg-body: #F5F5F5;
    /* Gris claro para fondo del body */

    /* Bordes */
    --unitec-border: #EDF3F8;
    /* Bordes suaves */
    --unitec-border-line: #B6CCDE;
    /* Líneas de borde */

    /* Estados informativos */
    --unitec-warning: #F68B1F;
    /* Amarillo para sugerencias/ayuda */
    --unitec-warning-text: #FFFFFF;
    /* Texto sobre amarillo */
    --unitec-info: #003053;
    /* Azul oscuro para texto info */

    /* Colores de estado (mantener compatibilidad) */
    --unitec-success: #28a745;
    /* Verde (mismo que accent) */
    --unitec-danger: #ef4444;
    /* Rojo para errores */

    /* Footer */
    --unitec-footer: #0D6FBE;
    /* Azul del footer */

    /* Compatibilidad con código antiguo */
    --unitec-light: #b7defd;
    --unitec-dark: #003053;
    --unitec-gray: #6A6A6A;
    --unitec-light-gray: #EDF3F8;
    --unitec-dark-gray: #6B7280;
}

/* Importar fuente Montserrat de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    /* Regular */
    background-color: var(--unitec-bg-white);
    color: var(--unitec-text-primary);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    border: none;
}

/* Estilos de tipografía Montserrat */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    /* Bold para títulos */
    color: var(--unitec-text-primary);
}

.text-light {
    font-weight: 300;
    /* Light */
}

.text-regular {
    font-weight: 400;
    /* Regular */
}

.text-medium {
    font-weight: 500;
    /* Medium */
}

.text-semibold {
    font-weight: 600;
    /* Semibold */
}

.text-bold {
    font-weight: 700;
    /* Bold */
}

/* ===== ESTILOS DE LOGIN - UNITEC STYLE ===== */

.containerLogin {
    display: flex;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
}

.login-left {
    width: 50%;
    height: 100vh;
    background-color: var(--unitec-bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
    position: relative;
}

.login-right {
    width: 50%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.form-container {
    width: 100%;
    max-width: 400px;
}

.logo-unitec-container {
    text-align: left;
    margin-top: -3rem;
    margin-bottom: 3.5rem;
}

.logo-unitec {
    height: clamp(40px, 6vw, 80px);
    width: auto;
}

.login-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--unitec-primary);
    margin-bottom: 0.5rem;
    margin-top: 1rem;
    text-align: left !important;
    letter-spacing: 0.5px;
}

.login-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--unitec-text-secondary);
    margin-bottom: 2rem;
    text-align: left;
}

.login-form-wrapper {
    width: 100%;
}

.form-group-login {
    margin-bottom: 1rem;
}

.input-login {
    width: 100%;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--unitec-border);
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--unitec-text-primary);
    transition: all 0.3s ease;
    background-color: var(--unitec-bg-white);
}

.input-login:focus {
    outline: none;
    border-color: var(--unitec-primary);
    box-shadow: 0 0 0 3px rgba(13, 111, 190, 0.1);
}

.input-login::placeholder {
    color: var(--unitec-text-meta);
    font-weight: 300;
}

.forgot-password-link {
    text-align: right;
    margin-bottom: 1.5rem;
}

.forgot-password-link a {
    font-family: 'Montserrat', sans-serif;
    color: var(--unitec-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.forgot-password-link a:hover {
    color: var(--unitec-primary);
}

.error-messages {
    min-height: 20px;
    margin-bottom: 1rem;
    text-align: center;
}

.error-messages .errorLabel {
    font-family: 'Montserrat', sans-serif;
    color: var(--unitec-danger);
    font-size: 0.9rem;
    font-weight: 500;
    display: block;
    margin-bottom: 0.5rem;
}

.btn-login {
    width: 100%;
    background-color: var(--unitec-primary);
    color: var(--unitec-bg-white);
    border: none;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    box-shadow: 0 4px 12px rgba(13, 111, 190, 0.25);
    letter-spacing: 0.5px;
}

.btn-login:hover {
    background-color: var(--unitec-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(13, 111, 190, 0.35);
}

.btn-login:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(13, 111, 190, 0.2);
}

.login-right .background-image {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.login-right .unitec-blanco-image {
    position: absolute;
    top: 15vh;
    right: 10vw;
    width: 250px;
    height: auto;
    object-fit: contain;
    z-index: 10;
}


.footer-login {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    background-color: var(--unitec-footer);
    color: var(--unitec-bg-white);
    text-align: center;
    padding: 0.75rem 1rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    z-index: 1000;
    margin: 0;
    box-sizing: border-box;
}


.footer-login p {
    margin: 0.25rem 0;
}


/* Estilos para validaciones - Patrón UNITEC */
input.error-field,
select.error-field,
textarea.error-field {
    border-color: #dc3545 !important;
    background-color: #fff5f5 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2) !important;
}

.error-message {
    color: #dc3545 !important;
    font-size: 0.875em;
    margin-top: 0.25rem;
    display: block;
    font-weight: normal;
}

.error,
.errorLabel {
    color: #dc3545 !important;
    font-size: 0.875em;
    margin-top: 0.25rem;
    display: block;
    font-weight: normal;
}

.contador-caracteres {
    font-size: 0.75em;
    color: #666;
    margin-top: 0.25rem;
    display: block;
}

.contador-limite {
    color: #dc3545 !important;
    font-weight: bold;
}

.required::after {
    content: " *";
    color: #dc3545;
}

.navbar-brand {
    color: var(--unitec-primary) !important;
    font-weight: bold;
}

/* NOTA: .btn-primary está definido en la sección "BOTONES GLOBALES" más abajo */

/* 🎯 .sidebar - Menú lateral izquierdo (definición completa más abajo) */
.sidebar .nav-link {
    color: white;
}

.sidebar .nav-link:hover {
    background-color: var(--unitec-secondary);
}

.card-header {
    background-color: var(--unitec-primary);
    color: white;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 51, 102, 0.05);
}

/* DataTables Modern Styles */
.dataTables_wrapper {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.dataTables_length,
.dataTables_filter {
    margin-bottom: 10px;
}

.dataTables_length label,
.dataTables_filter label {
    font-weight: 500;
    color: var(--unitec-primary);
    font-size: 14px;
}

.dataTables_length select,
.dataTables_filter input {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 6px 10px;
    margin: 0 8px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.dataTables_filter input:focus {
    border-color: var(--unitec-secondary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

/* 🎯 .datatableSIS - Tabla principal con DataTables (CLASE MÁS IMPORTANTE) */
/* Esta es la tabla estándar para todas las vistas de lista con paginación */
.datatableSIS {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--unitec-bg-white);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--unitec-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.datatableSIS thead th {
    background: var(--unitec-primary) !important;
    color: var(--unitec-bg-white) !important;
    padding: 16px 12px !important;
    text-align: center !important;
    border: none !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.datatableSIS tbody td {
    padding: 14px 12px;
    border: none;
    border-bottom: 1px solid var(--unitec-border);
    text-align: center;
    vertical-align: middle;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--unitec-text-primary);
}

.datatableSIS thead th {
    border-left: none !important;
    border-right: none !important;
}

.datatableSIS tbody td {
    border-left: none !important;
    border-right: none !important;
}

.datatableSIS tbody tr {
    transition: all 0.2s ease;
}

.datatableSIS tbody tr:nth-child(even) {
    background-color: var(--unitec-bg-light);
}

.datatableSIS tbody tr:hover {
    background-color: rgba(13, 111, 190, 0.08) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(13, 111, 190, 0.12);
}

.dataTables_info {
    color: var(--unitec-primary);
    font-weight: 500;
    margin-top: 10px;
    font-size: 14px;
}

.dataTables_paginate {
    margin-top: 10px;
}

.dataTables_paginate .paginate_button {
    padding: 8px 12px;
    margin: 0 2px;
    border: 1px solid #e0e0e0;
    background: white;
    color: var(--unitec-primary) !important;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.dataTables_paginate .paginate_button:hover {
    background: var(--unitec-secondary) !important;
    color: white !important;
    border-color: var(--unitec-secondary);
    transform: translateY(-1px);
}

.dataTables_paginate .paginate_button.current {
    /* background: var(--unitec-primary) !important; */
    color: white !important;
    border-color: var(--unitec-primary);
}

.sorting:after {
    content: " ↕";
    opacity: 0.5;
}

.sorting_asc:after {
    content: " ↑";
    opacity: 1;
}

.sorting_desc:after {
    content: " ↓";
    opacity: 1;
}

.sorting_disabled:after {
    content: "";
}

.no-sort {
    cursor: default !important;
}

.iconRow {
    width: 180px;
    text-align: center;
    white-space: nowrap;
}

/* Estilos específicos para tabla de URLs */
.tabla-urls th:nth-child(1),
.tabla-urls td:nth-child(1) {
    max-width: 50px;
    width: 50px;
}

.tabla-urls th:nth-child(2),
.tabla-urls td:nth-child(2) {
    max-width: 100px;
    width: 100px;
    text-align: center;
}

.tabla-urls th:nth-child(3),
.tabla-urls td:nth-child(3) {
    max-width: 200px;
    width: 200px;
}

.tabla-urls th:nth-child(4),
.tabla-urls td:nth-child(4) {
    max-width: 150px;
    width: 150px;
}

.tabla-urls th:nth-child(5),
.tabla-urls td:nth-child(5) {
    max-width: 200px;
    width: 200px;
}

.tabla-urls th:nth-child(6),
.tabla-urls td:nth-child(6) {
    max-width: 80px;
    width: 80px;
}

.tabla-urls th:nth-child(7),
.tabla-urls td:nth-child(7) {
    width: 120px;
    min-width: 120px;
    text-align: center;
}

.tabla-urls th:nth-child(8),
.tabla-urls td:nth-child(8) {
    width: 90px;
    min-width: 90px;
    text-align: center;
}

/* Estilos para opción menú */
.icono-palomita {
    color: #28a745;
    font-size: 16px;
    font-weight: bold;
}

.fila-opcion-menu {
    background-color: #d4edda !important;
}

.fila-opcion-menu:hover {
    background-color: #c3e6cb !important;
}

/* Títulos de sección sofisticados */
h2,
.main-content h2 {
    text-align: center !important;
    color: var(--unitec-primary);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 30px 0 20px 0;
    font-size: 24px;
}

/* Estilos para inputs, selects y buttons */
input,
select,
button {
    font-size: 110%;
    font-family: inherit;
    height: 36px;
    border: 1px solid #F6F6F6;
    border-radius: 5px;
    padding: 0 12px;
    transition: all 0.3s ease;
}

input:focus,
select:focus {
    border-color: var(--unitec-secondary);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
    outline: none;
}

button {
    background: var(--unitec-primary);
    color: white;
    border: 1px solid var(--unitec-primary);
    cursor: pointer;
    font-weight: 500;
}

button:hover {
    background: var(--unitec-secondary);
    border-color: var(--unitec-secondary);
    transform: translateY(-1px);
}

@media screen and (max-width: 1024px) {

    input,
    select,
    button {
        height: 40px !important;
        font-size: 115% !important;
    }
}

/* Responsive breadcrumb */
@media (max-width: 768px) {
    #menu {
        padding: 12px 20px;
        margin: 15px 0 25px 0;
    }

    #menu a {
        padding: 6px 12px;
        font-size: 13px;
        gap: 6px;
    }

    #menu img {
        height: 18px !important;
    }

    #menu li:not(:last-child)::after {
        margin: 0 8px;
    }
}

/* Breadcrumb Styles - Moderno y Elegante */
#menu {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--unitec-primary) !important;
    padding: 16px 20px;
    margin: 16px 0 28px 0;
    position: relative;
}

#menu::before {
    display: none;
}

#menu ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
}

#menu li {
    display: flex !important;
    align-items: center !important;
}

#menu li:not(:last-child)::after {
    content: '>' !important;
    color: #333 !important;
    font-weight: 600 !important;
    margin: 0 12px !important;
    opacity: 0.8 !important;
    font-size: 16px !important;
}

#menu a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--unitec-primary) !important;
    text-decoration: none !important;
    padding: 8px 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
    border: none !important;
}

#menu a:hover {
    color: var(--unitec-primary-hover) !important;
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

#menu li:last-child a {
    color: var(--unitec-primary) !important;
    font-weight: 600 !important;
    background: transparent !important;
}

#menu li:last-child a:hover {
    color: var(--unitec-secondary) !important;
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

#menu i {
    color: #007bff !important;
    font-size: 14px !important;
    transition: color 0.3s ease !important;
}

#menu a:hover i {
    color: #007bff !important;
}

/* Menu Lateral Styles */
.top-bar {
    background-color: white;
    color: white;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 60px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.top-left {
    display: flex;
    align-items: center;
    gap: 35px;
}

.hamburger-menu {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hamburger-menu span {
    width: 25px;
    height: 3px;
    background: var(--unitec-secondary);
    transition: 0.3s;
}

.top-logo img {
    height: 40px;
}

.user-info {
    color: var(--unitec-text-primary);
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
}

.azulUNITEC {
    color: var(--unitec-primary);
    font-weight: 600;
}

.user-data-blue {
    color: var(--unitec-primary);
    font-weight: 600;
}

.logout-btn {
    color: var(--unitec-text-primary) !important;
    text-decoration: none;
    margin-left: 25px;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

.logout-btn i {
    color: var(--unitec-primary) !important;
    transition: color 0.3s ease;
}

.logout-btn:hover {
    background-color: var(--unitec-primary) !important;
    color: white !important;
}

.logout-btn:hover i {
    color: white !important;
}



/* ===== MENÚ LATERAL ===== */
/* 🎯 .sidebar - Menú lateral izquierdo (CLASE PRINCIPAL) */
.sidebar {
    position: fixed;
    top: 60px;
    left: -300px;
    width: 300px;
    height: calc(100vh - 60px);
    background: var(--unitec-primary);
    transition: left 0.3s ease;
    z-index: 999;
    overflow-y: auto;
}

.sidebar.active {
    left: 0;
}



/* ========== ESTILOS PARA MENÚ LATERAL EXPANDIBLE ========== */

/* Contenedor principal del menú */
.sidebar-menu-expandable {
    list-style: none;
    padding: 0;
    margin: 0;
    background: transparent;
}

/* Items principales del menú */
.menu-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Enlaces principales (padres) */
.menu-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    text-decoration: none;
    padding: 1.8rem 2rem;
    min-height: 60px;
    transition: all 0.3s ease;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 1rem;
    font-family: inherit;
}

.menu-parent:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Contenido izquierdo del menú padre */
.menu-parent-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Iconos del menú */
.menu-icon {
    width: 24px;
    height: 24px;
    text-align: center;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
}

/* Texto del menú */
.menu-text {
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.3px;
}

/* Flecha indicadora */
.menu-arrow {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
    color: rgba(255, 255, 255, 0.8);
    margin-right: 0.5rem;
}

/* Flecha cuando está expandido */
.menu-parent.expanded .menu-arrow {
    transform: rotate(90deg);
}

/* Submenú (hijos) */
.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: rgba(0, 0, 0, 0.3);
}

/* Submenú expandido */
.submenu.expanded {
    max-height: 600px;
}

/* Enlaces del submenú */
.submenu-item {
    display: block;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    padding: 1rem 2rem 1rem 4rem;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.submenu-item:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    padding-left: 4.5rem;
}

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

/* Items sin hijos (enlaces directos) */
.menu-direct-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: white;
    text-decoration: none;
    padding: 1.8rem 2rem;
    min-height: 60px;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.menu-direct-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.menu-direct-link .menu-icon {
    width: 24px;
    height: 24px;
    text-align: center;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
}

.menu-direct-link .menu-text {
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.3px;
}

.overlay {
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    display: none;
}

.overlay.active {
    display: block;
}

/* 🎯 .main-content - Contenedor principal de toda la aplicación (CLASE FUNDAMENTAL) */
/* Contiene todo el contenido de las páginas, excepto el sidebar y top-bar */
.main-content {
    margin-top: 70px;
    transition: margin-left 0.3s ease;
}


/* Navbar Dropdown Styles */
.dropdown-menu {
    background-color: var(--unitec-bg-white) !important;
    border: 1px solid var(--unitec-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.dropdown-item {
    color: var(--unitec-primary) !important;
    color: var(--unitec-primary) !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--unitec-secondary) !important;
    background-color: var(--unitec-secondary) !important;
    color: white !important;
}

.dropdown-item i {
    color: var(--unitec-primary) !important;
    color: var(--unitec-primary) !important;
    margin-right: 8px !important;
    width: 16px !important;
    text-align: center !important;
}

.dropdown-item:hover i,
.dropdown-item:focus i {
    color: white !important;
}

/* Navbar User Text Styles - Only for main navbar, not login */
.main-content~* .navbar .nav-link,
.navbar-expand-lg.navbar-dark .nav-link {
    color: var(--unitec-accent) !important;
}

.main-content~* .navbar .nav-link span,
.main-content~* .navbar .nav-link small,
.navbar-expand-lg.navbar-dark .nav-link span,
.navbar-expand-lg.navbar-dark .nav-link small {
    color: var(--unitec-accent) !important;
}

.main-content~* .navbar .nav-link i,
.navbar-expand-lg.navbar-dark .nav-link i {
    color: var(--unitec-accent) !important;
}



/* ===== SISTEMA DE FILTROS ===== */
/* 🎯 .filtros - Contenedor principal de filtros (CLASE PRINCIPAL) */
/* Usado en todas las vistas de lista para filtrar datos */
.filtros {
    background: var(--unitec-bg-light);
    padding: 20px 24px;
    margin: 16px 0 24px 0;
    border-radius: 14px;
    border: 1px solid var(--unitec-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    text-align: center;
}

.filtros form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.filtros label {
    color: var(--unitec-primary);
    font-weight: 500;
    margin: 0;
}

.filtros select {
    min-width: 120px;
    font-size: 13px;
}

.filtros label {
    font-size: 15px;
    font-weight: bold;
}

/* 🎯 .btn-buscar - Botón de búsqueda (azul UNITEC) */
.btn-buscar {
    padding: 10px 20px;
    background: var(--unitec-primary);
    color: var(--unitec-bg-white);
    border: 1px solid var(--unitec-primary);
    border-radius: 12px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    box-shadow: 0 2px 6px rgba(13, 111, 190, 0.2);
}

.btn-buscar:hover {
    background: var(--unitec-primary-hover);
    border-color: var(--unitec-primary-hover);
    color: var(--unitec-bg-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(13, 111, 190, 0.3);
}

/* 🎯 .btn-nuevo - Botón para crear nuevos elementos (azul UNITEC) */
.btn-nuevo {
    padding: 10px 20px;
    background: var(--unitec-primary);
    color: var(--unitec-bg-white);
    border: 1px solid var(--unitec-primary);
    border-radius: 12px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    box-shadow: 0 2px 6px rgba(13, 111, 190, 0.2);
}

.btn-nuevo:hover {
    background: var(--unitec-primary-hover);
    border-color: var(--unitec-primary-hover);
    color: var(--unitec-bg-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(13, 111, 190, 0.3);
}

/* ===== FORMULARIOS ===== */
/* 🎯 .tablaFormulario - Formulario principal estilo tabla (heredado de SIEC) */
/* Usado para formularios de creación y edición */
.tablaFormulario {
    width: 80%;
    max-width: 950px;
    margin: 20px auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.tablaFormulario th {
    color: var(--unitec-primary);
    height: 60px;
    font-size: 20px;
    text-transform: uppercase;
    background: #f8f9fa;
    text-align: center;
    vertical-align: middle;
    border-bottom: 2px solid var(--unitec-primary);
}

.tablaFormulario td {
    height: 50px;
    padding: 10px 15px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
}

.tablaFormulario input,
.tablaFormulario select,
.tablaFormulario textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.tablaFormulario input:focus,
.tablaFormulario select:focus,
.tablaFormulario textarea:focus {
    border-color: var(--unitec-secondary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

.tablaFormulario label {
    font-weight: 500;
    color: var(--unitec-primary);
    margin-bottom: 5px;
    display: block;
}

.tablaFormulario .form-actions {
    text-align: right;
    padding: 20px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
}

.tablaFormulario td.form-actions {
    text-align: right;
    padding: 20px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
}

.tablaFormulario .btn {
    margin: 0 5px;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    min-width: 120px;
    box-sizing: border-box;
    height: 40px;
    line-height: 1;
    font-size: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
}

.tablaFormulario .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Standalone form-actions (not inside tablaFormulario) */
.form-actions:not(.tablaFormulario .form-actions) {
    text-align: center;
    margin-top: 20px;
    padding: 20px;
}


.tablaFormulario .btn {
    margin: 0 5px;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    min-width: 120px;
    box-sizing: border-box;
    height: 40px;
    line-height: 1;
    font-size: 14px;
}

.tablaFormulario button.btn {
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
}

.tablaFormulario a.btn {
    border: 1px solid transparent;
}

.tablaFormulario .btn-primary {
    background: var(--unitec-primary);
    color: white;
    border-color: var(--unitec-primary);
}

.tablaFormulario .btn-primary:hover {
    background: var(--unitec-secondary);
    border-color: var(--unitec-secondary);
}

.tablaFormulario .btn-secondary {
    background: #6c757d;
    color: white;
    border-color: #6c757d;
}

.tablaFormulario .btn-secondary:hover {
    background: #5a6268;
    border-color: #5a6268;
}

.botonInicio:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .inicio-container {
        height: auto;
        min-height: calc(100vh - 140px);
    }

    .menus-wrapper {
        flex-direction: column;
        height: auto;
    }

    .columnaMenu {
        max-width: 100%;
        width: 100%;
        height: auto;
        min-height: 400px;
    }
}

/* Responsive para pantallas pequeñas - LOGIN */
@media (max-width: 768px) {
    .containerLogin {
        flex-direction: row;
    }

    .login-left {
        width: 100%;
        height: 100vh;
        padding: 1rem;
    }

    .login-right {
        display: none;
    }

    .form-container {
        max-width: 100%;
        padding: 1rem;
    }

    .logo-unitec {
        height: 50px;
        width: auto;
    }

    .login-title {
        font-size: 1.5rem;
    }

    .login-subtitle {
        font-size: 0.85rem;
    }

    .input-login {
        font-size: 0.9rem;
        padding: 0.65rem 0.85rem;
    }

    .btn-login {
        padding: 0.85rem;
        font-size: 0.95rem;
    }
}

/* ===== MÓDULO DE RECOMPENSAS ===== */
/* NOTA: Los badges y botones usan las clases globales definidas arriba */

.btn-editar-icon {
    font-size: 18px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-editar-icon:hover {
    transform: scale(1.2);
}

/* NOTA: .filtros ya está definido arriba como clase principal */

/* Alertas */
.alert {
    padding: 12px 20px;
    margin: 15px 0;
    border-radius: 4px;
    font-weight: 500;
}

.alert-success {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #10b981;
}

.alert-danger {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #ef4444;
}

/* Formularios */
.form-horizontal {
    max-width: 800px;
    margin: 20px auto;
    padding: 30px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--unitec-dark);
}

.form-group label.required::after {
    content: " *";
    color: #ef4444;
}

.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.form-control:focus {
    outline: none;
    border-color: var(--unitec-secondary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}



/* ===== BOTONES GLOBALES - CLASE PRINCIPAL ===== */
/* 🎯 .btn-primary - Botón principal del sistema (azul UNITEC) */
.btn-primary {
    background: var(--unitec-primary);
    color: var(--unitec-bg-white);
    border: 1px solid var(--unitec-primary);
    padding: 10px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(13, 111, 190, 0.2);
}

.btn-primary:hover {
    background: var(--unitec-primary-hover);
    border-color: var(--unitec-primary-hover);
    color: var(--unitec-bg-white);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(13, 111, 190, 0.3);
}

/* 🎯 .btn-secondary - Botón secundario (gris) */
.btn-secondary {
    background: var(--unitec-text-secondary);
    color: var(--unitec-bg-white);
    border: 1px solid var(--unitec-text-secondary);
    padding: 10px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(106, 106, 106, 0.2);
}

.btn-secondary:hover {
    background: var(--unitec-text-meta);
    border-color: var(--unitec-text-meta);
    color: var(--unitec-bg-white);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(106, 106, 106, 0.3);
}

.tablaFormulario .btn-secondary:hover {
    background: #8a9196;
    border-color: #8a9196;
}

.btn-secondary:hover {
    background: #5a6268;
    border-color: #5a6268;
    color: white;
    text-decoration: none;
}

.btn-tertiary {
    background: #6c757d;
    color: white;
    border: 1px solid #6c757d;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-tertiary:hover {
    background: #5a6268;
    border-color: #5a6268;
    color: white;
    text-decoration: none;
}

table.datatableSIS {
    width: 100%;
}

/* ===== BADGES GLOBALES - CLASES PRINCIPALES ===== */
/* 🎯 .badge-activo - Badge verde para elementos activos (fondo transparente con borde) */
.badge-activo {
    background-color: rgba(40, 167, 69, 0.1);
    color: var(--unitec-accent);
    border: 2px solid var(--unitec-accent);
    padding: 6px 14px;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 🎯 .badge-inactivo - Badge rojo para elementos inactivos (fondo transparente con borde) */
.badge-inactivo {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--unitec-danger);
    border: 2px solid var(--unitec-danger);
    padding: 6px 14px;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 🎯 .badge-borrador - Badge azul para borradores (fondo transparente con borde) */
.badge-borrador {
    background-color: rgba(182, 204, 222, 0.15);
    color: var(--unitec-info);
    border: 2px solid var(--unitec-secondary);
    padding: 6px 14px;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 🎯 .badge-cancelado - Badge rojo para elementos cancelados (fondo transparente con borde) */
.badge-cancelado {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--unitec-danger);
    border: 2px solid var(--unitec-danger);
    padding: 6px 14px;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 🎯 .badge-publicado - Badge verde para elementos publicados (fondo transparente con borde) */
.badge-publicado {
    background-color: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 2px solid #16a34a;
    padding: 6px 14px;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 🎯 .badge-bloqueado - Badge naranja para elementos bloqueados (fondo transparente con borde) */
.badge-bloqueado {
    background-color: rgba(249, 115, 22, 0.1);
    color: #ea580c;
    border: 2px solid #ea580c;
    padding: 6px 14px;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== MÓDULO DE PROSPECTOS ===== */
/* 🎯 .prospecto-nombre-cell - Celda especial para mostrar nombre, email y teléfono */
/* Usado en la tabla de prospectos para mostrar información de contacto completa */
.prospecto-nombre-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}

.text-left {
    text-align: left !important;
}

.prospecto-nombre-cell strong {
    font-size: 0.95rem;
    color: var(--unitec-primary);
}

.prospecto-contacto {
    font-size: 0.8rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 5px;
}

.prospecto-icon {
    font-size: 0.7rem;
    color: #60a5fa;
}

/* Badges de estatus para prospectos - Estilo consistente con eventos */
.badge-status-microregistro {
    background-color: rgba(246, 139, 31, 0.1);
    color: var(--unitec-warning);
    border: 2px solid var(--unitec-warning);
    padding: 6px 14px;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-status-registro {
    background-color: rgba(13, 111, 190, 0.1);
    color: var(--unitec-primary);
    border: 2px solid var(--unitec-primary);
    padding: 6px 14px;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-status-enviar {
    background-color: rgba(182, 204, 222, 0.15);
    color: var(--unitec-info);
    border: 2px solid var(--unitec-secondary);
    padding: 6px 14px;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-status-enviando {
    background-color: rgba(106, 106, 106, 0.1);
    color: var(--unitec-text-secondary);
    border: 2px solid var(--unitec-text-secondary);
    padding: 6px 14px;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-status-enviado {
    background-color: rgba(40, 167, 69, 0.1);
    color: var(--unitec-accent);
    border: 2px solid var(--unitec-accent);
    padding: 6px 14px;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-status-reenviado {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--unitec-danger);
    border: 2px solid var(--unitec-danger);
    padding: 6px 14px;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 🎯 .badge-status-error - Badge rojo para prospectos con envío fallido */
.badge-status-error {
    background-color: rgba(220, 53, 69, 0.15);
    color: #dc3545;
    border: 2px solid #dc3545;
    padding: 6px 14px;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 🎯 .btn-reintentar - Botón naranja para reintentar envío */
.btn-reintentar {
    background-color: #fd7e14;
    color: var(--unitec-bg-white);
    padding: 8px 16px;
    border: none;
    border-radius: 12px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(253, 126, 20, 0.3);
}

.btn-reintentar:hover {
    background-color: #e86b0a;
    color: var(--unitec-bg-white);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(253, 126, 20, 0.4);
}

.btn-reintentar:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(253, 126, 20, 0.3);
}

/* 🎯 .btn-activar - Botón verde para activar carreras */
.btn-activar {
    background-color: #28a745;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
}

.btn-activar:hover {
    background-color: #218838;
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
}

/* 🎯 .btn-desactivar - Botón rojo para desactivar carreras */
.btn-desactivar {
    background-color: #dc3545;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
}

.btn-desactivar:hover {
    background-color: #c82333;
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
}



/* ===== FILTROS DE FECHA ===== */
/* 🎯 .filtro-fecha - Input de fecha con estilo consistente */
.filtro-fecha {
    padding: 8px 12px;
    border: 1px solid var(--unitec-border-line);
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--unitec-text-primary);
    background-color: var(--unitec-bg-white);
    transition: all 0.3s ease;
    cursor: pointer;
}

.filtro-fecha:hover {
    border-color: var(--unitec-primary);
}

.filtro-fecha:focus {
    outline: none;
    border-color: var(--unitec-primary);
    box-shadow: 0 0 0 3px rgba(13, 111, 190, 0.1);
}

/* Personalizar el icono del calendario (limitado por el navegador) */
.filtro-fecha::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.filtro-fecha::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* NOTA: El calendario desplegable nativo no puede ser personalizado completamente 
   por razones de seguridad del navegador. Para un calendario totalmente personalizado,
   se requeriría usar una librería JavaScript como Flatpickr, Air Datepicker, o similar. */

/* 🎯 .btn-editar - Botón de editar (verde acento) */
.btn-editar {
    background-color: var(--unitec-accent);
    color: var(--unitec-bg-white);
    padding: 8px 16px;
    border: none;
    border-radius: 12px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.2);
}

.btn-editar:hover {
    background-color: var(--unitec-accent-hover);
    color: var(--unitec-bg-white);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
}

.btn-editar:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.2);
}

/* 🎯 .btn-perfiles - Botón de perfiles (azul UNITEC) */
.btn-perfiles {
    background-color: var(--unitec-primary);
    color: var(--unitec-bg-white);
    padding: 8px 16px;
    border: none;
    border-radius: 12px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(13, 111, 190, 0.2);
}

.btn-perfiles:hover {
    background-color: var(--unitec-primary-hover);
    color: var(--unitec-bg-white);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(13, 111, 190, 0.3);
}

.btn-perfiles:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(13, 111, 190, 0.2);
}

/* Estilos adicionales para clases de tabla */
.row100 {
    width: 100%;
}

.head {
    background-color: var(--unitec-primary);
}

.column1 {
    text-align: center;
    vertical-align: middle;
}

.cell-border {
    border-collapse: separate;
    border-spacing: 0;
}

/* Clase específica para contenido de módulos */
.modulos-content {
    padding: 0px 15px 30px 15px;
}

/* Estilos para la página de inicio */
.inicio-container {
    padding: 10px;
    height: calc(100vh - 70px);
    display: flex;
    flex-direction: column;
    margin: 0;
}

.no-menu-message {
    text-align: center;
    padding: 40px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.menus-wrapper {
    display: flex;
    gap: 20px;
    width: 100%;
    height: 100%;
    flex: 1;
    margin: 0;
}

.columnaMenu {
    background: var(--unitec-bg-white);
    border-radius: 16px;
    border: 1px solid var(--unitec-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 280px;
    max-width: 280px;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
}

.columnaMenu:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(13, 111, 190, 0.12);
    border-color: var(--unitec-secondary);
}

.columnaMenu.active {
    border: 2px solid var(--unitec-primary);
    transform: translateY(-3px);
}

.menu-header-section {
    background: white;
    color: var(--unitec-primary);
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 10px;
    text-align: left;
    position: relative;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.menu-icon-container {
    margin-bottom: 10px;
}

.menu-icon-inicio {
    font-size: 25px;
    color: var(--unitec-primary);
    margin-bottom: 5px;
}

.menu-title-container .tituloInicio {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--unitec-primary);
}

.menu-items-section {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: 15px;
}

.botonInicio {
    width: 100%;
    padding: 18px 24px;
    background: var(--unitec-bg-light);
    border: 2px solid var(--unitec-border);
    border-radius: 12px;
    color: var(--unitec-primary);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin: 0;
}

.botonInicio:hover {
    background: var(--unitec-primary);
    color: var(--unitec-bg-white);
    border-color: var(--unitec-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13, 111, 190, 0.2);
}

.botonInicio:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .inicio-container {
        height: auto;
        min-height: calc(100vh - 140px);
    }

    .menus-wrapper {
        flex-direction: column;
        height: auto;
    }

    .columnaMenu {
        max-width: 100%;
        width: 100%;
        height: auto;
        min-height: 400px;
    }
}

/* Responsive para pantallas pequeñas - LOGIN */
@media (max-width: 768px) {
    .containerLogin {
        flex-direction: row;
    }

    .login-left {
        width: 100%;
        height: 100vh;
        padding: 1rem;
    }

    .login-right {
        display: none;
    }

    .form-container {
        max-width: 100%;
        padding: 1rem;
    }

    .logo-unitec-container {
        margin-top: -1rem;
        margin-bottom: 1rem;
    }

    .logo-unitec {
        height: 40px;
        width: auto;
    }

    .login-title {
        font-size: 1.5rem;
    }

    .login-subtitle {
        font-size: 0.85rem;
    }

    .input-login {
        font-size: 0.9rem;
        padding: 0.65rem 0.85rem;
    }

    .btn-login {
        padding: 0.85rem;
        font-size: 0.95rem;
    }
}

.form-catalogo {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-header {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.form-header h4 {
    margin: 0;
    color: #495057;
    font-weight: 600;
}

.form-group {
    margin-bottom: 15px;
}

.form-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-input:focus {
    outline: 0;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}



/* ===== PÁGINA DE INICIO ===== */
/* 🎯 .inicio-layout - Layout principal de dos columnas (menús + dashboard) */
.inicio-layout {
    display: flex;
    gap: 0;
    padding: 20px;
    min-height: calc(100vh - 140px);
}

.inicio-menus-column {
    flex: 2;
    display: flex;
    flex-direction: column;
}

.inicio-leads-column {
    flex: 1;
    min-width: 350px;
    /* Remover max-width para que ocupe todo el espacio restante */
}

/* ===== DASHBOARD DE LEADS ===== */
/* 🎯 .leads-dashboard-sidebar - Sidebar del dashboard de leads (CLASE PRINCIPAL) */
/* Muestra estadísticas, leads recientes y gráficos en la página de inicio */
.leads-dashboard-sidebar {
    background: var(--unitec-bg-white);
    border-radius: 16px;
    border: 1px solid var(--unitec-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px;
    transition: all 0.3s ease;
}

.leads-dashboard-sidebar:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(13, 111, 190, 0.12);
    border-color: var(--unitec-secondary);
}

/* Contenido del dashboard */
.leads-content-section {
    flex: 1;
    overflow-y: auto;
}

.dashboard-title {
    color: var(--unitec-primary);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-bottom: 2px solid var(--unitec-secondary);
    padding-bottom: 10px;
}

.dashboard-title i {
    color: var(--unitec-secondary);
}

/* Tarjetas de estadísticas en sidebar */
.stats-cards-sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.stat-card-small {
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.stat-card-small:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.15);
}

.stat-card-small.total {
    border-color: #1e3a8a;
}

.stat-card-small.nuevo {
    border-color: #3b82f6;
}

.stat-card-small.contactado {
    border-color: #60a5fa;
}

.stat-card-small.interesado {
    border-color: #fbbf24;
}

.stat-card-small.inscrito {
    border-color: #10b981;
}

.stat-card-small.asignado {
    border-color: #8b5cf6;
}

.stat-icon-small {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.stat-card-small.total .stat-icon-small {
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
    color: white;
}

.stat-card-small.nuevo .stat-icon-small {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    color: white;
}

.stat-card-small.contactado .stat-icon-small {
    background: linear-gradient(135deg, #60a5fa, #93c5fd);
    color: white;
}

.stat-card-small.interesado .stat-icon-small {
    background: linear-gradient(135deg, #fbbf24, #fcd34d);
    color: white;
}

.stat-card-small.inscrito .stat-icon-small {
    background: linear-gradient(135deg, #10b981, #34d399);
    color: white;
}

.stat-card-small.asignado .stat-icon-small {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
    color: white;
}

.stat-content-small h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--unitec-primary);
    margin: 0;
    line-height: 1;
}

.stat-content-small p {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
    font-weight: 500;
}

/* Secciones del sidebar */
.leads-section-sidebar {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.leads-section-sidebar:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.section-title-sidebar {
    color: var(--unitec-primary);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title-sidebar i {
    color: var(--unitec-secondary);
    font-size: 0.9rem;
}

/* Lista de leads recientes */
.leads-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lead-item {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    border-left: 3px solid var(--unitec-secondary);
    transition: all 0.3s ease;
}

.lead-item:hover {
    background: #e9ecef;
    transform: translateX(3px);
}

/* Grid de detalles del lead en 2 columnas */
.lead-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 15px;
}

.lead-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lead-name {
    font-weight: 600;
    color: var(--unitec-primary);
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.lead-empty-space {
    height: 1.1rem;
}

.lead-detail-with-icon {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lead-icon {
    font-size: 0.65rem;
    color: #60a5fa;
    flex-shrink: 0;
}

.lead-detail-value {
    font-size: 0.7rem;
    color: #6b7280;
    word-break: break-word;
    line-height: 1.3;
}

/* Gráfico de carreras en sidebar */
.carreras-chart-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.carrera-item-sidebar {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.carrera-info-sidebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.carrera-nombre-sidebar {
    font-weight: 500;
    color: var(--unitec-primary);
    font-size: 0.8rem;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.carrera-cantidad-sidebar {
    font-weight: 700;
    color: var(--unitec-secondary);
    font-size: 0.9rem;
    background: rgba(30, 58, 138, 0.1);
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 30px;
    text-align: center;
}

.carrera-bar-sidebar {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.carrera-bar-fill-sidebar {
    height: 100%;
    background: linear-gradient(90deg, var(--unitec-primary), var(--unitec-secondary));
    border-radius: 8px;
    transition: width 0.5s ease;
}

.no-data-small {
    text-align: center;
    color: #9ca3af;
    padding: 15px;
    font-style: italic;
    font-size: 0.85rem;
}

/* Contenedor de gráficas */
.chart-container {
    position: relative;
    width: 100%;
    padding: 10px 0;
}

.chart-container canvas {
    max-height: 300px;
}

/* Layout de dos columnas para leads recientes y cajas informativas */
.leads-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}

.leads-recientes-column {
    display: flex;
    flex-direction: column;
}

.cajas-informativas-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-top: 30px;
}

/* Cajas informativas horizontales (icono a la izquierda) */
.info-card-horizontal {
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.info-card-horizontal:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(13, 111, 190, 0.15);
}

/* Caja Total - Fondo azul UNITEC, icono y texto blancos */
.info-card-horizontal.total {
    background: var(--unitec-primary);
    border-color: var(--unitec-primary);
}

.info-card-horizontal.total .info-icon-horizontal {
    color: var(--unitec-bg-white);
}

.info-card-horizontal.total .info-content-horizontal h3 {
    color: var(--unitec-bg-white);
}

.info-card-horizontal.total .info-content-horizontal p {
    color: var(--unitec-bg-white);
}

/* Caja Nuevo - Fondo blanco, borde azul UNITEC, icono y texto azul UNITEC */
.info-card-horizontal.nuevo {
    background: var(--unitec-bg-white);
    border-color: var(--unitec-primary);
}

.info-card-horizontal.nuevo .info-icon-horizontal {
    color: var(--unitec-primary);
}

.info-card-horizontal.nuevo .info-content-horizontal h3 {
    color: var(--unitec-primary);
}

.info-card-horizontal.nuevo .info-content-horizontal p {
    color: var(--unitec-primary);
}

.info-icon-horizontal {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.info-content-horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.info-content-horizontal h3 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1;
}

.info-content-horizontal p {
    font-size: 1.1rem;
    margin: 0;
    font-weight: 600;
}

/* Sección de gráfica con ancho completo */
.leads-section-full-width {
    margin-bottom: 15px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e5e7eb;
}

.chart-container-full {
    position: relative;
    width: 100%;
    margin-top: 15px;
}

.chart-container-full canvas {
    max-height: 350px;
}

/* Scrollbar personalizado para el dashboard sidebar */
.leads-dashboard-sidebar::-webkit-scrollbar {
    width: 6px;
}

.leads-dashboard-sidebar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.leads-dashboard-sidebar::-webkit-scrollbar-thumb {
    background: var(--unitec-secondary);
    border-radius: 10px;
}

.leads-dashboard-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--unitec-primary);
}

/* Responsive para layout de inicio */
@media (max-width: 1200px) {
    .inicio-layout {
        flex-direction: column;
    }

    .inicio-leads-column {
        max-width: 100%;
        width: 100%;
    }

    .leads-dashboard-sidebar {
        position: relative;
        top: 0;
        max-height: none;
    }

    .stats-cards-sidebar {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .inicio-layout {
        padding: 10px;
        gap: 15px;
    }

    .stats-cards-sidebar {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .stat-card-small {
        padding: 10px;
    }

    .stat-icon-small {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .stat-content-small h3 {
        font-size: 1.3rem;
    }

    .stat-content-small p {
        font-size: 0.7rem;
    }

    .dashboard-title {
        font-size: 1.2rem;
    }

    .section-title-sidebar {
        font-size: 0.9rem;
    }

    /* Responsive para layout de dos columnas */
    .leads-two-columns {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .info-icon-horizontal {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .info-content-horizontal h3 {
        font-size: 2rem;
    }

    .info-content-horizontal p {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .stats-cards-sidebar {
        grid-template-columns: 1fr;
    }

    .lead-item {
        padding: 10px;
    }

    .lead-name {
        font-size: 0.85rem;
    }

    .lead-info {
        font-size: 0.7rem;
    }

    .info-card-horizontal {
        padding: 12px;
    }

    .info-icon-horizontal {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }

    .info-content-horizontal {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .info-content-horizontal h3 {
        font-size: 1.8rem;
    }

    .info-content-horizontal p {
        font-size: 0.85rem;
    }
}

/* Toggle Switch Styles */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}

input:checked+.slider {
    background-color: #2196F3;
}

input:checked+.slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 24px;
}

.slider.round:before {
    border-radius: 50%;
}

/* ===== TABLA DE MENÚS DE USUARIO ===== */
/* 🎯 .table-menus - Tabla simple sin paginación para asignar menús a usuarios */
.container-table-menus {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px 120px;
}

.wrap-table-menus {
    width: 100%;
    max-width: 800px;
}

.table-menus {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    overflow: hidden;
}

.table-menus thead th {
    background-color: white;
    color: #2c5aa0;
    font-weight: bold;
    padding: 12px 15px;
    text-align: center;
    border-top: 2px solid #e0e0e0;
    border-bottom: 2px solid #e0e0e0;
    font-size: 16px;
}

.table-menus tbody td {
    padding: 10px 15px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    font-size: 15px;
}

.table-menus tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.table-menus tbody tr:hover {
    background-color: #f0f8ff;
}

/* Ocultar elementos de DataTables para tabla simple */
.table-menus_wrapper .dataTables_length,
.table-menus_wrapper .dataTables_filter,
.table-menus_wrapper .dataTables_info,
.table-menus_wrapper .dataTables_paginate {
    display: none !important;
}

/* Anchos específicos para columnas de tabla menús */
.table-menus th:nth-child(1),
.table-menus td:nth-child(1) {
    width: 60px;
}

.table-menus th:nth-child(2),
.table-menus td:nth-child(2),
.table-menus th:nth-child(3),
.table-menus td:nth-child(3) {
    width: 250px;
}

.table-menus th:nth-child(4),
.table-menus td:nth-child(4) {
    width: 120px;
}

/* 
===== BADGES DE NOTIFICACIONES ===== */
.badge-status-pendiente {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background-color: transparent;
    border: 2px solid #ffc107;
    color: #ffc107;
}

.badge-status-enviada {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background-color: transparent;
    border: 2px solid #28a745;
    color: #28a745;
}

.badge-status-leida {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background-color: transparent;
    border: 2px solid #0D6FBE;
    color: #0D6FBE;
}

.badge-status-error {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background-color: transparent;
    border: 2px solid #dc3545;
    color: #dc3545;
}

/* ===== BOTÓN DE ENVIAR NOTIFICACIÓN ===== */
.btn-accion-enviar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background-color: #28a745;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-accion-enviar:hover {
    background-color: #218838;
    transform: scale(1.1);
}

.btn-accion-enviar i {
    font-size: 14px;
}


/* ===== BOTÓN VER ===== */
.btn-ver {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background-color: #0D6FBE;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-ver:hover {
    background-color: #0a5a9e;
    transform: scale(1.1);
}

.btn-ver i {
    font-size: 14px;
}

/* ===== ESTILOS PARA INPUT DE ARCHIVO (FILE UPLOAD) ===== */

.file-upload-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.file-upload-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.file-upload-input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.file-upload-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background-color: var(--unitec-bg-light);
    border: 2px dashed var(--unitec-border-line);
    border-radius: 8px;
    color: var(--unitec-primary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    justify-content: center;
}

.file-upload-label:hover {
    background-color: var(--unitec-primary);
    color: white;
    border-color: var(--unitec-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13, 111, 190, 0.2);
}

.file-upload-label i {
    font-size: 20px;
}

.file-upload-info {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--unitec-text-secondary);
    font-weight: 400;
}

.file-upload-info i {
    margin-right: 5px;
    color: var(--unitec-warning);
}

.file-selected-info {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background-color: #e8f5e9;
    border: 1px solid #4caf50;
    border-radius: 6px;
    margin-top: 10px;
}

.file-selected-info.show {
    display: flex;
}

.file-selected-info i {
    color: #4caf50;
    font-size: 18px;
}

.file-selected-name {
    flex: 1;
    font-weight: 500;
    color: var(--unitec-text-primary);
    font-size: 14px;
}

.file-remove-btn {
    background: none;
    border: none;
    color: #f44336;
    cursor: pointer;
    padding: 5px;
    font-size: 18px;
    transition: transform 0.2s;
}

.file-remove-btn:hover {
    transform: scale(1.2);
}

.image-preview-container {
    margin-top: 15px;
    padding: 15px;
    background-color: var(--unitec-bg-light);
    border-radius: 8px;
    border: 1px solid var(--unitec-border-line);
}

.image-preview-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--unitec-text-secondary);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.image-preview-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

.image-preview {
    max-width: 200px;
    max-height: 200px;
    border-radius: 8px;
    border: 2px solid var(--unitec-border-line);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

.image-preview-info {
    flex: 1;
}

.image-preview-badge {
    display: inline-block;
    padding: 4px 12px;
    background-color: var(--unitec-primary);
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}

.image-preview-text {
    font-size: 13px;
    color: var(--unitec-text-secondary);
    line-height: 1.5;
}

/* Animación de carga */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.file-upload-label.loading {
    animation: pulse 1.5s ease-in-out infinite;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
    .image-preview-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .image-preview {
        max-width: 100%;
    }
}

/* ===== ESTILOS MEJORADOS PARA SELECT ===== */

/* Select estándar mejorado */
select.inputForm {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D6FBE' 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");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid var(--unitec-border-line);
    background-color: white;
}

select.inputForm:hover {
    border-color: var(--unitec-primary);
    box-shadow: 0 2px 8px rgba(13, 111, 190, 0.1);
}

select.inputForm:focus {
    outline: none;
    border-color: var(--unitec-primary);
    box-shadow: 0 0 0 3px rgba(13, 111, 190, 0.1);
    background-color: var(--unitec-bg-light);
}

/* Select múltiple mejorado */
select[multiple].inputForm {
    background-image: none;
    padding: 8px;
    border: 2px solid var(--unitec-border-line);
    border-radius: 8px;
    background-color: white;
    transition: all 0.3s ease;
}

select[multiple].inputForm:hover {
    border-color: var(--unitec-primary);
    box-shadow: 0 4px 12px rgba(13, 111, 190, 0.15);
}

select[multiple].inputForm:focus {
    outline: none;
    border-color: var(--unitec-primary);
    box-shadow: 0 0 0 4px rgba(13, 111, 190, 0.1);
    background-color: var(--unitec-bg-light);
}

/* Opciones del select múltiple */
select[multiple].inputForm option {
    padding: 10px 12px;
    margin: 2px 0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

select[multiple].inputForm option:hover {
    background-color: var(--unitec-bg-light);
    color: var(--unitec-primary);
}

select[multiple].inputForm option:checked {
    background: linear-gradient(135deg, var(--unitec-primary) 0%, var(--unitec-primary-hover) 100%);
    color: white;
    font-weight: 600;
}

select[multiple].inputForm option:checked:hover {
    background: linear-gradient(135deg, var(--unitec-primary-hover) 0%, var(--unitec-primary) 100%);
}

/* Contenedor de select con icono */
.select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.select-wrapper::before {
    content: '\f0d7';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--unitec-primary);
    pointer-events: none;
    font-size: 16px;
}

.select-wrapper select {
    width: 100%;
}

/* Estilos para select deshabilitado */
select.inputForm:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Animación al seleccionar */
@keyframes selectPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(13, 111, 190, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(13, 111, 190, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(13, 111, 190, 0);
    }
}

select.inputForm:focus {
    animation: selectPulse 0.6s ease-out;
}

/* Estilos para el select múltiple específico de tipos de botón */
#tipoBotonSelect {
    min-height: 100px;
    max-height: 150px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--unitec-primary) var(--unitec-bg-light);
}

#tipoBotonSelect::-webkit-scrollbar {
    width: 8px;
}

#tipoBotonSelect::-webkit-scrollbar-track {
    background: var(--unitec-bg-light);
    border-radius: 4px;
}

#tipoBotonSelect::-webkit-scrollbar-thumb {
    background: var(--unitec-primary);
    border-radius: 4px;
}

#tipoBotonSelect::-webkit-scrollbar-thumb:hover {
    background: var(--unitec-primary-hover);
}

/* Badge para mostrar cantidad de seleccionados */
.select-badge {
    display: inline-block;
    padding: 4px 12px;
    background-color: var(--unitec-primary);
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

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

/* Responsive */
@media (max-width: 768px) {
    select[multiple].inputForm {
        min-height: 120px;
    }

    select[multiple].inputForm option {
        padding: 12px;
        font-size: 14px;
    }
}

.air-datepicker-cell.-year-.-other-decade-,
.air-datepicker-cell.-day-.-other-month- {
    color: var(--adp-color-other-month)
}

.air-datepicker-cell.-year-.-other-decade-:hover,
.air-datepicker-cell.-day-.-other-month-:hover {
    color: var(--adp-color-other-month-hover)
}

.-disabled-.-focus-.air-datepicker-cell.-year-.-other-decade-,
.-disabled-.-focus-.air-datepicker-cell.-day-.-other-month- {
    color: var(--adp-color-other-month)
}

.-selected-.air-datepicker-cell.-year-.-other-decade-,
.-selected-.air-datepicker-cell.-day-.-other-month- {
    color: #fff;
    background: var(--adp-background-color-selected-other-month)
}

.-selected-.-focus-.air-datepicker-cell.-year-.-other-decade-,
.-selected-.-focus-.air-datepicker-cell.-day-.-other-month- {
    background: var(--adp-background-color-selected-other-month-focused)
}

.-in-range-.air-datepicker-cell.-year-.-other-decade-,
.-in-range-.air-datepicker-cell.-day-.-other-month- {
    background-color: var(--adp-background-color-in-range);
    color: var(--adp-color)
}

.-in-range-.-focus-.air-datepicker-cell.-year-.-other-decade-,
.-in-range-.-focus-.air-datepicker-cell.-day-.-other-month- {
    background-color: var(--adp-background-color-in-range-focused)
}

.air-datepicker-cell.-year-.-other-decade-:empty,
.air-datepicker-cell.-day-.-other-month-:empty {
    background: none;
    border: none
}

.air-datepicker-cell {
    border-radius: var(--adp-cell-border-radius);
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    z-index: 1
}

.air-datepicker-cell.-focus- {
    background: var(--adp-cell-background-color-hover)
}

.air-datepicker-cell.-current- {
    color: var(--adp-color-current-date)
}

.air-datepicker-cell.-current-.-focus- {
    color: var(--adp-color)
}

.air-datepicker-cell.-current-.-in-range- {
    color: var(--adp-color-current-date)
}

.air-datepicker-cell.-disabled- {
    cursor: default;
    color: var(--adp-color-disabled)
}

.air-datepicker-cell.-disabled-.-focus- {
    color: var(--adp-color-disabled)
}

.air-datepicker-cell.-disabled-.-in-range- {
    color: var(--adp-color-disabled-in-range)
}

.air-datepicker-cell.-disabled-.-current-.-focus- {
    color: var(--adp-color-disabled)
}

.air-datepicker-cell.-in-range- {
    background: var(--adp-cell-background-color-in-range);
    border-radius: 0
}

.air-datepicker-cell.-in-range-:hover {
    background: var(--adp-cell-background-color-in-range-hover)
}

.air-datepicker-cell.-range-from- {
    border: 1px solid var(--adp-cell-border-color-in-range);
    background-color: var(--adp-cell-background-color-in-range);
    border-radius: var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius)
}

.air-datepicker-cell.-range-to- {
    border: 1px solid var(--adp-cell-border-color-in-range);
    background-color: var(--adp-cell-background-color-in-range);
    border-radius: 0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0
}

.air-datepicker-cell.-range-to-.-range-from- {
    border-radius: var(--adp-cell-border-radius)
}

.air-datepicker-cell.-selected- {
    color: #fff;
    border: none;
    background: var(--adp-cell-background-color-selected)
}

.air-datepicker-cell.-selected-.-current- {
    color: #fff;
    background: var(--adp-cell-background-color-selected)
}

.air-datepicker-cell.-selected-.-focus- {
    background: var(--adp-cell-background-color-selected-hover)
}

.air-datepicker-body {
    transition: all var(--adp-transition-duration) var(--adp-transition-ease)
}

.air-datepicker-body.-hidden- {
    display: none
}

.air-datepicker-body--day-names {
    display: grid;
    grid-template-columns: repeat(7, var(--adp-day-cell-width));
    margin: 8px 0 3px
}

.air-datepicker-body--day-name {
    color: var(--adp-day-name-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    text-transform: uppercase;
    font-size: .8em
}

.air-datepicker-body--day-name.-clickable- {
    cursor: pointer
}

.air-datepicker-body--day-name.-clickable-:hover {
    color: var(--adp-day-name-color-hover)
}

.air-datepicker-body--cells {
    display: grid
}

.air-datepicker-body--cells.-days- {
    grid-template-columns: repeat(7, var(--adp-day-cell-width));
    grid-auto-rows: var(--adp-day-cell-height)
}

.air-datepicker-body--cells.-months- {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: var(--adp-month-cell-height)
}

.air-datepicker-body--cells.-years- {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: var(--adp-year-cell-height)
}

.air-datepicker-nav {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--adp-border-color-inner);
    min-height: var(--adp-nav-height);
    padding: var(--adp-padding);
    box-sizing: content-box
}

.-only-timepicker- .air-datepicker-nav {
    display: none
}

.air-datepicker-nav--title,
.air-datepicker-nav--action {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center
}

.air-datepicker-nav--action {
    width: var(--adp-nav-action-size);
    border-radius: var(--adp-border-radius);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.air-datepicker-nav--action:hover {
    background: var(--adp-background-color-hover)
}

.air-datepicker-nav--action:active {
    background: var(--adp-background-color-active)
}

.air-datepicker-nav--action.-disabled- {
    visibility: hidden
}

.air-datepicker-nav--action svg {
    width: 32px;
    height: 32px
}

.air-datepicker-nav--action path {
    fill: none;
    stroke: var(--adp-nav-arrow-color);
    stroke-width: 2px
}

.air-datepicker-nav--title {
    border-radius: var(--adp-border-radius);
    padding: 0 8px
}

.air-datepicker-nav--title i {
    font-style: normal;
    color: var(--adp-nav-color-secondary);
    margin-left: .3em
}

.air-datepicker-nav--title:hover {
    background: var(--adp-background-color-hover)
}

.air-datepicker-nav--title:active {
    background: var(--adp-background-color-active)
}

.air-datepicker-nav--title.-disabled- {
    cursor: default;
    background: none
}

.air-datepicker-buttons {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column
}

.air-datepicker-button {
    display: inline-flex;
    color: var(--adp-btn-color);
    border-radius: var(--adp-btn-border-radius);
    cursor: pointer;
    height: var(--adp-btn-height);
    border: none;
    background: rgba(255, 255, 255, 0)
}

.air-datepicker-button:hover {
    color: var(--adp-btn-color-hover);
    background: var(--adp-btn-background-color-hover)
}

.air-datepicker-button:focus {
    color: var(--adp-btn-color-hover);
    background: var(--adp-btn-background-color-hover);
    outline: none
}

.air-datepicker-button:active {
    background: var(--adp-btn-background-color-active)
}

.air-datepicker-button span {
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%
}

.air-datepicker-time {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-column-gap: 12px;
    align-items: center;
    position: relative;
    padding: 0 var(--adp-time-padding-inner)
}

.-only-timepicker- .air-datepicker-time {
    border-top: none
}

.air-datepicker-time--current {
    display: flex;
    align-items: center;
    flex: 1;
    font-size: 14px;
    text-align: center
}

.air-datepicker-time--current-colon {
    margin: 0 2px 3px;
    line-height: 1
}

.air-datepicker-time--current-hours,
.air-datepicker-time--current-minutes {
    line-height: 1;
    font-size: 19px;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    position: relative;
    z-index: 1
}

.air-datepicker-time--current-hours:after,
.air-datepicker-time--current-minutes:after {
    content: "";
    background: var(--adp-background-color-hover);
    border-radius: var(--adp-border-radius);
    position: absolute;
    left: -2px;
    top: -3px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    opacity: 0
}

.air-datepicker-time--current-hours.-focus-:after,
.air-datepicker-time--current-minutes.-focus-:after {
    opacity: 1
}

.air-datepicker-time--current-ampm {
    text-transform: uppercase;
    align-self: flex-end;
    color: var(--adp-time-day-period-color);
    margin-left: 6px;
    font-size: 11px;
    margin-bottom: 1px
}

.air-datepicker-time--row {
    display: flex;
    align-items: center;
    font-size: 11px;
    height: 17px;
    background: linear-gradient(to right, var(--adp-time-track-color), var(--adp-time-track-color)) left 50%/100% var(--adp-time-track-height) no-repeat
}

.air-datepicker-time--row:first-child {
    margin-bottom: 4px
}

.air-datepicker-time--row input[type=range] {
    background: none;
    cursor: pointer;
    flex: 1;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    -webkit-appearance: none
}

.air-datepicker-time--row input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none
}

.air-datepicker-time--row input[type=range]::-ms-tooltip {
    display: none
}

.air-datepicker-time--row input[type=range]:hover::-webkit-slider-thumb {
    border-color: var(--adp-time-track-color-hover)
}

.air-datepicker-time--row input[type=range]:hover::-moz-range-thumb {
    border-color: var(--adp-time-track-color-hover)
}

.air-datepicker-time--row input[type=range]:hover::-ms-thumb {
    border-color: var(--adp-time-track-color-hover)
}

.air-datepicker-time--row input[type=range]:focus {
    outline: none
}

.air-datepicker-time--row input[type=range]:focus::-webkit-slider-thumb {
    background: var(--adp-cell-background-color-selected);
    border-color: var(--adp-cell-background-color-selected)
}

.air-datepicker-time--row input[type=range]:focus::-moz-range-thumb {
    background: var(--adp-cell-background-color-selected);
    border-color: var(--adp-cell-background-color-selected)
}

.air-datepicker-time--row input[type=range]:focus::-ms-thumb {
    background: var(--adp-cell-background-color-selected);
    border-color: var(--adp-cell-background-color-selected)
}

.air-datepicker-time--row input[type=range]::-webkit-slider-thumb {
    box-sizing: border-box;
    height: 12px;
    width: 12px;
    border-radius: 3px;
    border: 1px solid var(--adp-time-track-color);
    background: #fff;
    cursor: pointer;
    -webkit-transition: background var(--adp-transition-duration);
    transition: background var(--adp-transition-duration)
}

.air-datepicker-time--row input[type=range]::-moz-range-thumb {
    box-sizing: border-box;
    height: 12px;
    width: 12px;
    border-radius: 3px;
    border: 1px solid var(--adp-time-track-color);
    background: #fff;
    cursor: pointer;
    -moz-transition: background var(--adp-transition-duration);
    transition: background var(--adp-transition-duration)
}

.air-datepicker-time--row input[type=range]::-ms-thumb {
    box-sizing: border-box;
    height: 12px;
    width: 12px;
    border-radius: 3px;
    border: 1px solid var(--adp-time-track-color);
    background: #fff;
    cursor: pointer;
    -ms-transition: background var(--adp-transition-duration);
    transition: background var(--adp-transition-duration)
}

.air-datepicker-time--row input[type=range]::-webkit-slider-thumb {
    margin-top: calc(var(--adp-time-thumb-size)/2*-1)
}

.air-datepicker-time--row input[type=range]::-webkit-slider-runnable-track {
    border: none;
    height: var(--adp-time-track-height);
    cursor: pointer;
    color: rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0)
}

.air-datepicker-time--row input[type=range]::-moz-range-track {
    border: none;
    height: var(--adp-time-track-height);
    cursor: pointer;
    color: rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0)
}

.air-datepicker-time--row input[type=range]::-ms-track {
    border: none;
    height: var(--adp-time-track-height);
    cursor: pointer;
    color: rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0)
}

.air-datepicker-time--row input[type=range]::-ms-fill-lower {
    background: rgba(0, 0, 0, 0)
}

.air-datepicker-time--row input[type=range]::-ms-fill-upper {
    background: rgba(0, 0, 0, 0)
}

.air-datepicker {
    --adp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --adp-font-size: 14px;
    --adp-width: 246px;
    --adp-z-index: 100;
    --adp-padding: 4px;
    --adp-grid-areas: "nav" "body" "timepicker" "buttons";
    --adp-transition-duration: .3s;
    --adp-transition-ease: ease-out;
    --adp-transition-offset: 8px;
    --adp-background-color: #fff;
    --adp-background-color-hover: #f0f0f0;
    --adp-background-color-active: #eaeaea;
    --adp-background-color-in-range: rgba(92, 196, 239, .1);
    --adp-background-color-in-range-focused: rgba(92, 196, 239, .2);
    --adp-background-color-selected-other-month-focused: #8ad5f4;
    --adp-background-color-selected-other-month: #a2ddf6;
    --adp-color: #4a4a4a;
    --adp-color-secondary: #9c9c9c;
    --adp-accent-color: #4eb5e6;
    --adp-color-current-date: var(--adp-accent-color);
    --adp-color-other-month: #dedede;
    --adp-color-disabled: #aeaeae;
    --adp-color-disabled-in-range: #939393;
    --adp-color-other-month-hover: #c5c5c5;
    --adp-border-color: #dbdbdb;
    --adp-border-color-inner: #efefef;
    --adp-border-radius: 4px;
    --adp-border-color-inline: #d7d7d7;
    --adp-nav-height: 32px;
    --adp-nav-arrow-color: var(--adp-color-secondary);
    --adp-nav-action-size: 32px;
    --adp-nav-color-secondary: var(--adp-color-secondary);
    --adp-day-name-color: #ff9a19;
    --adp-day-name-color-hover: #8ad5f4;
    --adp-day-cell-width: 1fr;
    --adp-day-cell-height: 32px;
    --adp-month-cell-height: 42px;
    --adp-year-cell-height: 56px;
    --adp-pointer-size: 10px;
    --adp-poiner-border-radius: 2px;
    --adp-pointer-offset: 14px;
    --adp-cell-border-radius: 4px;
    --adp-cell-background-color-hover: var(--adp-background-color-hover);
    --adp-cell-background-color-selected: #5cc4ef;
    --adp-cell-background-color-selected-hover: #45bced;
    --adp-cell-background-color-in-range: rgba(92, 196, 239, 0.1);
    --adp-cell-background-color-in-range-hover: rgba(92, 196, 239, 0.2);
    --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);
    --adp-btn-height: 32px;
    --adp-btn-color: var(--adp-accent-color);
    --adp-btn-color-hover: var(--adp-color);
    --adp-btn-border-radius: var(--adp-border-radius);
    --adp-btn-background-color-hover: var(--adp-background-color-hover);
    --adp-btn-background-color-active: var(--adp-background-color-active);
    --adp-time-track-height: 1px;
    --adp-time-track-color: #dedede;
    --adp-time-track-color-hover: #b1b1b1;
    --adp-time-thumb-size: 12px;
    --adp-time-padding-inner: 10px;
    --adp-time-day-period-color: var(--adp-color-secondary);
    --adp-mobile-font-size: 16px;
    --adp-mobile-nav-height: 40px;
    --adp-mobile-width: 320px;
    --adp-mobile-day-cell-height: 38px;
    --adp-mobile-month-cell-height: 48px;
    --adp-mobile-year-cell-height: 64px
}

.air-datepicker-overlay {
    --adp-overlay-background-color: rgba(0, 0, 0, .3);
    --adp-overlay-transition-duration: .3s;
    --adp-overlay-transition-ease: ease-out;
    --adp-overlay-z-index: 99
}

.air-datepicker {
    background: var(--adp-background-color);
    border: 1px solid var(--adp-border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    border-radius: var(--adp-border-radius);
    box-sizing: content-box;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, max-content);
    grid-template-areas: var(--adp-grid-areas);
    font-family: var(--adp-font-family), sans-serif;
    font-size: var(--adp-font-size);
    color: var(--adp-color);
    width: var(--adp-width);
    position: absolute;
    transition: opacity var(--adp-transition-duration) var(--adp-transition-ease), transform var(--adp-transition-duration) var(--adp-transition-ease);
    z-index: var(--adp-z-index)
}

.air-datepicker:not(.-custom-position-) {
    opacity: 0
}

.air-datepicker.-from-top- {
    transform: translateY(calc(var(--adp-transition-offset) * -1))
}

.air-datepicker.-from-right- {
    transform: translateX(var(--adp-transition-offset))
}

.air-datepicker.-from-bottom- {
    transform: translateY(var(--adp-transition-offset))
}

.air-datepicker.-from-left- {
    transform: translateX(calc(var(--adp-transition-offset) * -1))
}

.air-datepicker.-active-:not(.-custom-position-) {
    transform: translate(0, 0);
    opacity: 1
}

.air-datepicker.-active-.-custom-position- {
    transition: none
}

.air-datepicker.-inline- {
    border-color: var(--adp-border-color-inline);
    box-shadow: none;
    position: static;
    left: auto;
    right: auto;
    opacity: 1;
    transform: none
}

.air-datepicker.-inline- .air-datepicker--pointer {
    display: none
}

.air-datepicker.-is-mobile- {
    --adp-font-size: var(--adp-mobile-font-size);
    --adp-day-cell-height: var(--adp-mobile-day-cell-height);
    --adp-month-cell-height: var(--adp-mobile-month-cell-height);
    --adp-year-cell-height: var(--adp-mobile-year-cell-height);
    --adp-nav-height: var(--adp-mobile-nav-height);
    --adp-nav-action-size: var(--adp-mobile-nav-height);
    position: fixed;
    width: var(--adp-mobile-width);
    border: none
}

.air-datepicker.-is-mobile- * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.air-datepicker.-is-mobile- .air-datepicker--pointer {
    display: none
}

.air-datepicker.-is-mobile-:not(.-custom-position-) {
    transform: translate(-50%, calc(-50% + var(--adp-transition-offset)))
}

.air-datepicker.-is-mobile-.-active-:not(.-custom-position-) {
    transform: translate(-50%, -50%)
}

.air-datepicker.-custom-position- {
    transition: none
}

.air-datepicker-global-container {
    position: absolute;
    left: 0;
    top: 0
}

.air-datepicker--pointer {
    --pointer-half-size: calc(var(--adp-pointer-size) / 2);
    position: absolute;
    width: var(--adp-pointer-size);
    height: var(--adp-pointer-size);
    z-index: -1
}

.air-datepicker--pointer:after {
    content: "";
    position: absolute;
    background: #fff;
    border-top: 1px solid var(--adp-border-color-inline);
    border-right: 1px solid var(--adp-border-color-inline);
    border-top-right-radius: var(--adp-poiner-border-radius);
    width: var(--adp-pointer-size);
    height: var(--adp-pointer-size);
    box-sizing: border-box
}

.-top-left- .air-datepicker--pointer,
.-top-center- .air-datepicker--pointer,
.-top-right- .air-datepicker--pointer,
[data-popper-placement^=top] .air-datepicker--pointer {
    top: calc(100% - var(--pointer-half-size) + 1px)
}

.-top-left- .air-datepicker--pointer:after,
.-top-center- .air-datepicker--pointer:after,
.-top-right- .air-datepicker--pointer:after,
[data-popper-placement^=top] .air-datepicker--pointer:after {
    transform: rotate(135deg)
}

.-right-top- .air-datepicker--pointer,
.-right-center- .air-datepicker--pointer,
.-right-bottom- .air-datepicker--pointer,
[data-popper-placement^=right] .air-datepicker--pointer {
    right: calc(100% - var(--pointer-half-size) + 1px)
}

.-right-top- .air-datepicker--pointer:after,
.-right-center- .air-datepicker--pointer:after,
.-right-bottom- .air-datepicker--pointer:after,
[data-popper-placement^=right] .air-datepicker--pointer:after {
    transform: rotate(225deg)
}

.-bottom-left- .air-datepicker--pointer,
.-bottom-center- .air-datepicker--pointer,
.-bottom-right- .air-datepicker--pointer,
[data-popper-placement^=bottom] .air-datepicker--pointer {
    bottom: calc(100% - var(--pointer-half-size) + 1px)
}

.-bottom-left- .air-datepicker--pointer:after,
.-bottom-center- .air-datepicker--pointer:after,
.-bottom-right- .air-datepicker--pointer:after,
[data-popper-placement^=bottom] .air-datepicker--pointer:after {
    transform: rotate(315deg)
}

.-left-top- .air-datepicker--pointer,
.-left-center- .air-datepicker--pointer,
.-left-bottom- .air-datepicker--pointer,
[data-popper-placement^=left] .air-datepicker--pointer {
    left: calc(100% - var(--pointer-half-size) + 1px)
}

.-left-top- .air-datepicker--pointer:after,
.-left-center- .air-datepicker--pointer:after,
.-left-bottom- .air-datepicker--pointer:after,
[data-popper-placement^=left] .air-datepicker--pointer:after {
    transform: rotate(45deg)
}

.-top-left- .air-datepicker--pointer,
.-bottom-left- .air-datepicker--pointer {
    left: var(--adp-pointer-offset)
}

.-top-right- .air-datepicker--pointer,
.-bottom-right- .air-datepicker--pointer {
    right: var(--adp-pointer-offset)
}

.-top-center- .air-datepicker--pointer,
.-bottom-center- .air-datepicker--pointer {
    left: calc(50% - var(--adp-pointer-size)/2)
}

.-left-top- .air-datepicker--pointer,
.-right-top- .air-datepicker--pointer {
    top: var(--adp-pointer-offset)
}

.-left-bottom- .air-datepicker--pointer,
.-right-bottom- .air-datepicker--pointer {
    bottom: var(--adp-pointer-offset)
}

.-left-center- .air-datepicker--pointer,
.-right-center- .air-datepicker--pointer {
    top: calc(50% - var(--adp-pointer-size)/2)
}

.air-datepicker--navigation {
    grid-area: nav
}

.air-datepicker--content {
    box-sizing: content-box;
    padding: var(--adp-padding);
    grid-area: body
}

.-only-timepicker- .air-datepicker--content {
    display: none
}

.air-datepicker--time {
    grid-area: timepicker
}

.air-datepicker--buttons {
    grid-area: buttons
}

.air-datepicker--buttons,
.air-datepicker--time {
    padding: var(--adp-padding);
    border-top: 1px solid var(--adp-border-color-inner)
}

.air-datepicker-overlay {
    position: fixed;
    background: var(--adp-overlay-background-color);
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    opacity: 0;
    transition: opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease), left 0s, height 0s, width 0s;
    transition-delay: 0s, var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration);
    z-index: var(--adp-overlay-z-index)
}

.air-datepicker-overlay.-active- {
    opacity: 1;
    width: 100%;
    height: 100%;
    transition: opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease), height 0s, width 0s
}

/* Air Datepicker - Tema UNITEC */
/* Personalización con los colores de UNITEC */

/* Contenedor principal del calendario */
.air-datepicker {
    border: 2px solid var(--unitec-border-line, #B6CCDE);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(13, 111, 190, 0.15);
    font-family: 'Montserrat', sans-serif;
}

/* Encabezado del calendario */
.air-datepicker-nav {
    background-color: var(--unitec-primary, #0D6FBE);
    border-radius: 10px 10px 0 0;
    padding: 12px;
}

.air-datepicker-nav--title {
    color: white;
    font-weight: 600;
}

.air-datepicker-nav--action {
    color: white;
}

.air-datepicker-nav--action:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Días de la semana */
.air-datepicker-body--day-name {
    color: var(--unitec-text-secondary, #6A6A6A);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
}

/* Celdas de días */
.air-datepicker-cell {
    border-radius: 8px;
    font-weight: 500;
}

.air-datepicker-cell.-day- {
    color: var(--unitec-text-primary, #000000);
}

/* Día hover */
.air-datepicker-cell.-day-:hover {
    background-color: var(--unitec-bg-light, #EDF3F8);
    color: var(--unitec-primary, #0D6FBE);
}

/* Día seleccionado */
.air-datepicker-cell.-selected- {
    background-color: var(--unitec-primary, #0D6FBE);
    color: white;
}

.air-datepicker-cell.-selected-:hover {
    background-color: var(--unitec-primary-hover, #0A5A9E);
}

/* Día actual */
.air-datepicker-cell.-current- {
    border: 2px solid var(--unitec-primary, #0D6FBE);
    color: var(--unitec-primary, #0D6FBE);
    font-weight: 600;
}

/* Día en rango */
.air-datepicker-cell.-in-range- {
    background-color: rgba(13, 111, 190, 0.1);
    color: var(--unitec-primary, #0D6FBE);
}

.air-datepicker-cell.-range-from-,
.air-datepicker-cell.-range-to- {
    background-color: var(--unitec-primary, #0D6FBE);
    color: white;
}

/* Días deshabilitados */
.air-datepicker-cell.-disabled- {
    color: var(--unitec-text-meta, #6B7280);
    opacity: 0.4;
}

/* Días de otros meses */
.air-datepicker-cell.-other-month- {
    color: var(--unitec-text-meta, #6B7280);
    opacity: 0.5;
}

/* Botones de acción */
.air-datepicker-buttons {
    border-top: 1px solid var(--unitec-border-line, #B6CCDE);
    padding: 12px;
}

.air-datepicker-button {
    background-color: var(--unitec-primary, #0D6FBE);
    color: white;
    border-radius: 8px;
    font-weight: 600;
    padding: 8px 16px;
    font-family: 'Montserrat', sans-serif;
}

.air-datepicker-button:hover {
    background-color: var(--unitec-primary-hover, #0A5A9E);
}

/* Selector de tiempo (si se usa) */
.air-datepicker-time {
    border-top: 1px solid var(--unitec-border-line, #B6CCDE);
}

.air-datepicker-time--current {
    color: var(--unitec-primary, #0D6FBE);
    font-weight: 600;
}

/* Animaciones suaves */
.air-datepicker {
    animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* ===== PERSONALIZACIÓN ADICIONAL AIR DATEPICKER - HOVER MES/AÑO ===== */

/* Remover fondo gris del hover en el título de navegación (mes/año) */
.air-datepicker-nav--title:hover {
    background: transparent !important;
    text-decoration: underline;
}

/* Asegurar que el texto del mes/año sea blanco */
.air-datepicker-nav--title {
    color: #FFFFFF !important;
}

/* Mantener el color blanco en hover */
.air-datepicker-nav--title:hover {
    color: #FFFFFF !important;
}

/* Remover cualquier fondo en el contenedor del título */
.air-datepicker-nav--title i {
    color: #FFFFFF !important;
}

/* ===== PERSONALIZACIÓN DATATABLES - COLORES UNITEC ===== */

/* Aplicar color azul UNITEC a todos los textos de DataTables */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--unitec-primary, #0D6FBE) !important;
}

/* Labels específicos */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: var(--unitec-primary, #0D6FBE) !important;
    font-weight: 400;
}

/* Texto de información (Mostrando X a Y de Z registros) */
.dataTables_wrapper .dataTables_info {
    color: var(--unitec-primary, #0D6FBE) !important;
    font-weight: 400;
}

/* Botones de paginación */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--unitec-primary, #0D6FBE) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: var(--unitec-primary-hover, #0A5A9E) !important;
    background: rgba(13, 111, 190, 0.1);
    border-color: var(--unitec-primary, #0D6FBE);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: #FFFFFF !important;
    background: var(--unitec-primary, #0D6FBE) !important;
    border-color: var(--unitec-primary, #0D6FBE) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #FFFFFF !important;
    background: var(--unitec-primary-hover, #0A5A9E) !important;
    border-color: var(--unitec-primary-hover, #0A5A9E) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: #999 !important;
}

/* ===== PERSONALIZACIÓN INPUT DE BÚSQUEDA DATATABLES ===== */

/* Hacer el input de búsqueda más ancho (doble del tamaño por defecto) */
.dataTables_wrapper .dataTables_filter input {
    width: 400px !important;
    max-width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--unitec-border-line, #B6CCDE);
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: var(--unitec-primary, #0D6FBE);
    box-shadow: 0 0 0 2px rgba(13, 111, 190, 0.1);
}

/* Ajustar el label del filtro */
.dataTables_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Select de "Mostrar X registros" */
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--unitec-border-line, #B6CCDE);
    border-radius: 4px;
    padding: 4px 8px;
    color: var(--unitec-text-primary, #000000);
}

.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--unitec-primary, #0D6FBE);
    box-shadow: 0 0 0 2px rgba(13, 111, 190, 0.1);
}

/* Responsive: en pantallas pequeñas, ajustar el ancho */
@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
    }
}

/* ===== ESTILOS DE VALIDACIÓN GLOBAL ===== */
input.inputForm.error-field,
input.error-field,
textarea.inputForm.error-field,
textarea.error-field,
select.inputForm.error-field,
select.error-field {
    border: 3px solid #d32f2f !important;
    background-color: #ffebee !important;
    box-shadow: 0 0 8px rgba(211, 47, 47, 0.6) !important;
    outline: none !important;
}

input.inputForm.error-field:focus,
input.error-field:focus,
textarea.inputForm.error-field:focus,
textarea.error-field:focus,
select.inputForm.error-field:focus,
select.error-field:focus {
    border: 3px solid #d32f2f !important;
    background-color: #ffebee !important;
}

.error-message {
    color: #d32f2f !important;
    font-size: 11px !important;
    display: block !important;
    margin-top: 2px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

/* ===== DROPDOWN PERSONALIZADO GLOBAL ===== */
.custom-select-wrapper {
    position: relative;
    display: inline-block;
    min-width: 70px;
    vertical-align: middle;
}

/* Wrapper con clase inputForm debe ser de ancho completo pero inline */
div.custom-select-wrapper.inputForm {
    display: inline-block;
    width: 100%;
    max-width: 100%;
}

.custom-select {
    position: relative;
    cursor: pointer;
}

.custom-select-trigger {
    padding: 8px 12px;
    padding-right: 30px;
    /* Espacio para la flecha */
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    user-select: none;
    min-width: 70px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

/* Flecha indicadora del dropdown */
.custom-select-trigger::after {
    content: '▼';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #666;
    pointer-events: none;
}

/* Rotar flecha cuando está abierto */
.custom-select.open .custom-select-trigger::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Trigger en wrapper con inputForm debe alinearse a la izquierda */
.custom-select-wrapper.inputForm .custom-select-trigger {
    text-align: left;
}

.custom-select-trigger:hover {
    border-color: #0D6FBE;
}

.custom-select.open .custom-select-trigger {
    border-color: #0D6FBE;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.custom-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #0D6FBE;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.custom-select.open .custom-options {
    display: block;
}

.custom-option {
    padding: 8px 12px;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
}

.custom-option:hover {
    background-color: #EDF3F8;
}

.custom-option.selected {
    background-color: #0D6FBE;
    color: white;
}

/* Estilos de la barra de scroll para dropdowns personalizados */
.custom-options::-webkit-scrollbar {
    width: 8px;
}

.custom-options::-webkit-scrollbar-track {
    background: #f0f0f0;
}

.custom-options::-webkit-scrollbar-thumb {
    background: #0D6FBE;
    border-radius: 4px;
}

.custom-options::-webkit-scrollbar-thumb:hover {
    background: #0A5A9E;
}

/* Para Firefox */
.custom-options {
    scrollbar-width: thin;
    scrollbar-color: #0D6FBE #f0f0f0;
}

/* ===== ESTILOS DE VALIDACIÓN GLOBAL (ACTUALIZADO) ===== */
input.inputForm.error-field,
input.error-field,
textarea.inputForm.error-field,
textarea.error-field,
select.inputForm.error-field,
select.error-field {
    border: 3px solid #d32f2f !important;
    background-color: #ffebee !important;
    box-shadow: 0 0 8px rgba(211, 47, 47, 0.6) !important;
    outline: none !important;
}

input.inputForm.error-field:focus,
input.error-field:focus,
textarea.inputForm.error-field:focus,
textarea.error-field:focus,
select.inputForm.error-field:focus,
select.error-field:focus {
    border: 3px solid #d32f2f !important;
    background-color: #ffebee !important;
}

.error-message {
    color: #d32f2f !important;
    font-size: 11px !important;
    display: block !important;
    margin-top: 2px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

/* ===== BOTÓN TOGGLE PARA ACTIVAR/DESACTIVAR ===== */
.btn-toggle {
    display: inline-block;
    padding: 8px 12px;
    color: #666;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-toggle:hover {
    background-color: #f0f0f0;
    color: #0D6FBE;
}

.btn-toggle i.fa-toggle-on {
    color: #4CAF50;
    font-size: 28px;
}

.btn-toggle i.fa-toggle-off {
    color: #999;
    font-size: 28px;
}

.btn-toggle:hover i.fa-toggle-on {
    color: #45a049;
}

.btn-toggle:hover i.fa-toggle-off {
    color: #666;
}

/* ===== VALIDACIÓN PARA CUSTOM SELECT ===== */
.custom-select.error-field {
    border: 3px solid #d32f2f !important;
    background-color: #ffebee !important;
    box-shadow: 0 0 8px rgba(211, 47, 47, 0.6) !important;
}

.custom-select.error-field .custom-select-trigger {
    color: #d32f2f !important;
}

/* ===== ESTILOS PARA CHECKBOXES DE TIPO BOTÓN ===== */
#tipoBotonCheckboxes label:hover {
    background-color: #f5f5f5;
}

#tipoBotonCheckboxes label:has(input:checked) {
    background-color: #e3f2fd;
    border: 1px solid #0D6FBE;
}

/* ===== BADGES DE TIPO DE ENVÍO ===== */
.badge-tipo-envio {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.5px;
    text-align: center;
    min-width: 70px;
}

/* Badge para tipo Manual */
.badge-tipo-envio[data-tipo="Manual"],
.badge-tipo-envio:contains("Manual") {
    background-color: transparent;
    color: var(--unitec-accent);
    border: 1px solid var(--unitec-accent);
}

/* Badge para tipo Programada */
.badge-tipo-envio[data-tipo="Programada"],
.badge-tipo-envio:contains("Programada") {
    background-color: transparent;
    color: var(--unitec-primary);
    border: 1px solid var(--unitec-primary);
}

/* Badge para tipo Automática */
.badge-tipo-envio[data-tipo="Automática"],
.badge-tipo-envio:contains("Automática") {
    background-color: transparent;
    color: var(--unitec-warning);
    border: 1px solid var(--unitec-warning);
}

/* Badge vacío cuando no hay tipo definido */
.badge-tipo-envio-vacio {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    min-width: 70px;
    background-color: rgba(106, 106, 106, 0.1);
    color: var(--unitec-text-secondary);
    border: 1px solid rgba(106, 106, 106, 0.2);
}

/* Estilos específicos para cada tipo usando clases directas */
.badge-tipo-manual {
    background-color: transparent;
    color: var(--unitec-accent);
    border: 1px solid var(--unitec-accent);
}

.badge-tipo-programada {
    background-color: transparent;
    color: var(--unitec-primary);
    border: 1px solid var(--unitec-primary);
}

.badge-tipo-automatica {
    background-color: transparent;
    color: var(--unitec-warning);
    border: 1px solid var(--unitec-warning);
}

/* Mantener compatibilidad con nombres anteriores */
.badge-tipo-automatico {
    background-color: transparent;
    color: var(--unitec-primary);
    border: 1px solid var(--unitec-primary);
}

.badge-tipo-periodico {
    background-color: transparent;
    color: var(--unitec-warning);
    border: 1px solid var(--unitec-warning);
}