@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css');

/* ===== TECMES PEGASUS DESIGN SYSTEM & THEME ===== */

:root {
    /* Paleta de Colores Institucional (Light Mode) */
    --tm-blue:          #005B99;       /* Azul TECMES Principal */
    --tm-blue-d:        #003f6b;       /* Azul Profundo */
    --tm-blue-l:        #0077C8;       /* Azul Claro */
    --tm-sky:           #E8F4FD;       /* Azul de Fondo Suave */
    --tm-accent:        #00A8E8;       /* Azul Eléctrico */
    --tm-orange:        #F47C20;       /* Naranja */
    --tm-green:         #27AE60;       /* Verde */
    --tm-red:           #E74C3C;       /* Rojo */
    --tm-gray:          #6B7280;       /* Gris */
    --tm-light:         #F4F8FC;       /* Fondo de Página */
    --tm-card:          #ffffff;       /* Fondo de Tarjetas */
    --tm-border:        #D1E3F0;       /* Bordes */
    --tm-text:          #1A2D42;       /* Texto */
    --tm-muted:         #708396;       /* Texto Muted */

    /* Variables de Tabla */
    --tm-row:           #ffffff;       /* Fondo fila normal */
    --tm-row-alt:       #e8f0f7;       /* Fondo fila alternada */
    --tm-row-header:    #f0f4f8;       /* Fondo cabecera tabla */
    --tm-row-border:    #e8edf2;       /* Borde entre filas */
    --tm-row-hover:     #f0f7fc;       /* Fondo fila hover */
    --tm-pager-btn:     #f1f5f9;       /* Botón paginador */
    --tm-pager-border:  #e2e8f0;       /* Borde botón paginador */
    --tm-day-other:     #94a3b8;       /* Días fuera del mes */

    /* Variables Estructurales */
    --radius:           12px;
    --radius-sm:        6px;
    --shadow:           0 4px 20px rgba(0, 91, 153, 0.08);
}

/* Soporte Nativo para Modo Oscuro */
@media (prefers-color-scheme: dark) {
    :root {
        --tm-blue:          #4da3e0;
        --tm-blue-d:        #90c4ee;
        --tm-blue-l:        #60b3f0;
        --tm-sky:           #1a2d42;
        --tm-accent:        #00ccff;
        --tm-orange:        #f9a44a;
        --tm-green:         #4ade80;
        --tm-red:           #f87171;
        --tm-gray:          #9ca3af;
        --tm-light:         #0f1c2e;
        --tm-card:          #162033;
        --tm-border:        #263d56;
        --tm-text:          #e2eaf2;
        --tm-muted:         #7a9bb5;
        --shadow:           0 4px 20px rgba(0, 0, 0, 0.3);

        /* Variables de Tabla (modo oscuro) */
        --tm-row:           #162033;
        --tm-row-alt:       #1a2d42;
        --tm-row-header:    #1a2d42;
        --tm-row-border:    #263d56;
        --tm-row-hover:     #1e3550;
        --tm-pager-btn:     #1a2d42;
        --tm-pager-border:  #263d56;
        --tm-day-other:     #4a6278;
    }
}

/* ===== CONTROL DE FORMULARIO PREMIUM ===== */
.form-select {
    font-family: 'Inter', sans-serif !important;
    padding: 8px 12px !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--radius-sm) !important;
    background-color: var(--tm-card) !important;
    color: var(--tm-text) !important;
    font-size: 13px !important;
    height: 38px !important;
    box-sizing: border-box !important;
    outline: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    padding-right: 28px !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-select:focus {
    border-color: var(--tm-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 91, 153, 0.15) !important;
}

.date-control {
    font-family: 'Inter', sans-serif !important;
    padding: 8px 12px !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--radius-sm) !important;
    background-color: var(--tm-card) !important;
    color: var(--tm-text) !important;
    font-size: 13px !important;
    height: 38px !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.date-control:focus {
    border-color: var(--tm-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 91, 153, 0.15) !important;
}

.action-button {
    font-family: 'Inter', sans-serif !important;
    background: var(--tm-blue) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 6px -1px rgba(11, 94, 168, 0.2) !important;
    height: 38px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s, transform 0.1s;
}
.action-button:hover {
    background: var(--tm-blue-l) !important;
}
.action-button:active {
    transform: translateY(1px);
}

/* ===== CALENDARIOS Y DATEPICKERS (AJAX CONTROL TOOLKIT) ===== */
.ajax__calendar_container,
.MyCalendar_container,
.MyCalendar .ajax__calendar_container {
    font-family: 'Inter', sans-serif !important;
    background-color: var(--tm-card) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 28px rgba(0, 91, 153, 0.14) !important;
    padding: 14px !important;
    width: 270px !important; /* Slightly wider to accommodate larger fonts */
    z-index: 100000 !important;
    box-sizing: border-box !important;
}

.ajax__calendar_container table,
.MyCalendar_container table,
.MyCalendar .ajax__calendar_container table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ajax__calendar_header,
.ajax__calendar_footer,
.ajax__calendar_days,
.ajax__calendar_months,
.ajax__calendar_years,
.ajax__calendar_body > div,
.MyCalendar_header,
.MyCalendar_footer,
.MyCalendar_days,
.MyCalendar_months,
.MyCalendar_years,
.MyCalendar_body > div,
.MyCalendar .ajax__calendar_header,
.MyCalendar .ajax__calendar_footer,
.MyCalendar .ajax__calendar_days,
.MyCalendar .ajax__calendar_months,
.MyCalendar .ajax__calendar_years,
.MyCalendar .ajax__calendar_body > div {
    width: 100% !important;
}

.ajax__calendar_header,
.MyCalendar_header,
.MyCalendar .ajax__calendar_header {
    background-color: transparent !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid var(--tm-sky) !important;
    padding-bottom: 8px !important;
    height: 28px !important;
}

.ajax__calendar_title,
.MyCalendar_title,
.MyCalendar .ajax__calendar_title {
    color: var(--tm-blue-d) !important;
    font-weight: 700 !important;
    font-size: 15px !important; /* Larger font size */
    cursor: pointer !important;
    line-height: 28px !important;
}

.ajax__calendar_next, .ajax__calendar_prev,
.MyCalendar_next, .MyCalendar_prev,
.MyCalendar .ajax__calendar_next, .MyCalendar .ajax__calendar_prev {
    width: 26px !important;
    height: 26px !important;
    background-color: var(--tm-sky) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

.ajax__calendar_next:hover, .ajax__calendar_prev:hover,
.MyCalendar_next:hover, .MyCalendar_prev:hover,
.MyCalendar .ajax__calendar_next:hover, .MyCalendar .ajax__calendar_prev:hover {
    background-color: var(--tm-border) !important;
}

.ajax__calendar_body,
.MyCalendar_body,
.MyCalendar .ajax__calendar_body {
    width: 100% !important;
    height: 225px !important; /* Increased to fit 32px height cells (7 rows * 32px = 224px) */
}

.ajax__calendar_dayname,
.MyCalendar_dayname,
.MyCalendar .ajax__calendar_dayname {
    color: var(--tm-muted) !important;
    font-weight: 700 !important;
    font-size: 12px !important; /* Larger font size */
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    width: auto !important;
    height: 32px !important; /* Larger cell size */
    line-height: 32px !important;
    padding: 0 !important;
}

.ajax__calendar_day,
.MyCalendar_day,
.MyCalendar .ajax__calendar_day {
    color: var(--tm-text) !important;
    font-size: 14px !important; /* Larger font size */
    font-weight: 500 !important;
    text-align: center !important;
    width: auto !important;
    height: 32px !important; /* Larger cell size */
    line-height: 32px !important;
    padding: 0 !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
}

.ajax__calendar_day:hover,
.MyCalendar_day:hover,
.MyCalendar .ajax__calendar_day:hover {
    background-color: var(--tm-sky) !important;
    color: var(--tm-blue) !important;
    font-weight: 700 !important;
}

.ajax__calendar_active .ajax__calendar_day,
.MyCalendar_active .MyCalendar_day,
.MyCalendar .ajax__calendar_active .ajax__calendar_day {
    background-color: var(--tm-blue) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.ajax__calendar_today .ajax__calendar_day,
.MyCalendar_today .MyCalendar_day,
.MyCalendar .ajax__calendar_today .ajax__calendar_day {
    border: 1.5px solid var(--tm-blue) !important;
    color: var(--tm-blue) !important;
    font-weight: 700 !important;
}

.ajax__calendar_other .ajax__calendar_day,
.MyCalendar_other .MyCalendar_day,
.MyCalendar .ajax__calendar_other .ajax__calendar_day {
    color: var(--tm-day-other) !important;
}

.ajax__calendar_invalid .ajax__calendar_day,
.MyCalendar_invalid .MyCalendar_day,
.MyCalendar .ajax__calendar_invalid .ajax__calendar_day {
    color: var(--tm-day-other) !important;
    cursor: not-allowed !important;
}

.ajax__calendar_footer,
.MyCalendar_footer,
.MyCalendar .ajax__calendar_footer {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important; /* Larger font size */
    font-weight: 700 !important;
    color: var(--tm-blue) !important;
    border-top: 1px solid var(--tm-sky) !important;
    padding-top: 8px !important;
    margin-top: 8px !important;
    text-align: center !important;
    cursor: pointer !important;
}

.ajax__calendar_footer:hover,
.MyCalendar_footer:hover,
.MyCalendar .ajax__calendar_footer:hover {
    color: var(--tm-blue-d) !important;
}

/* ===== ICONO DE CALENDARIO (TABLER ICONS) ===== */
.calendar-btn {
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    width: 38px !important; /* Matches height of control exactly */
    height: 38px !important; /* Matches height of control exactly */
    padding: 0 !important;
    outline: none !important;
    flex-shrink: 0;
    border-radius: 8px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-calendar' width='24' height='24' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23708396' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z' /%3E%3Cpath d='M16 3v4' /%3E%3Cpath d='M8 3v4' /%3E%3Cpath d='M4 11h16' /%3E%3Cpath d='M11 15h1' /%3E%3Cpath d='M12 15v3' /%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: all 0.2s ease !important;
}

.calendar-btn:hover {
    transform: scale(1.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-calendar' width='24' height='24' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23005B99' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z' /%3E%3Cpath d='M16 3v4' /%3E%3Cpath d='M8 3v4' /%3E%3Cpath d='M4 11h16' /%3E%3Cpath d='M11 15h1' /%3E%3Cpath d='M12 15v3' /%3E%3C/svg%3E") !important;
}


/* ===== ACCIONES ADICIONALES ===== */
.action-button.secondary {
    background: transparent !important;
    color: var(--tm-muted) !important;
    border: 1px solid var(--tm-border) !important;
    box-shadow: none !important;
}
.action-button.secondary:hover {
    background: var(--tm-sky) !important;
    color: var(--tm-blue) !important;
    border-color: var(--tm-blue) !important;
}

/* ===== PÁGINA DE LOGIN (DEFAULT.ASPX) Y MAQUETACIÓN ===== */

/* Cabecera Premium */
.encabezado {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 28px !important;
    background: linear-gradient(135deg, var(--tm-blue-d) 0%, var(--tm-blue) 100%) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    height: auto !important;
    position: relative !important;
    top: 0 !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    box-sizing: border-box !important;
}

img#logo {
    position: static !important;
    height: 38px !important;
    width: auto !important;
    filter: brightness(0) invert(1) !important; /* Logotipo en blanco para contrastar */
    transition: transform 0.3s ease;
}
img#logo:hover {
    transform: scale(1.03);
}

/* Panel de Login */
.login {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
}

.HAcceso {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #ffffff !important;
    margin-right: 8px !important;
    font-family: 'Inter', sans-serif !important;
}

.login label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.login input[type="text"],
.login input[type="password"] {
    font-family: 'Inter', sans-serif !important;
    padding: 6px 12px !important;
    height: 32px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: var(--radius-sm) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    outline: none !important;
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s !important;
    width: 120px !important;
    box-sizing: border-box !important;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25) !important;
}

/* Link para Olvidó su clave */
.login a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    transition: color 0.2s !important;
}
.login a:hover {
    color: var(--tm-orange) !important;
    text-decoration: underline !important;
}

/* Mensajes de error en la cabecera */
.titleConfig {
    width: 100% !important;
    margin-top: 4px !important;
}
.titleConfig span, 
.titleConfig label {
    color: #ff8a80 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    font-family: 'Inter', sans-serif !important;
}

/* Cuerpo de la página de Login */
.login-body {
    padding: 30px 20px !important;
    background-color: var(--tm-light) !important;
    min-height: calc(100vh - 75px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Contenedor del Iframe */
.frame-container {
    width: 100% !important;
    max-width: 1100px !important;
    background: var(--tm-card) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    overflow: hidden !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    transition: box-shadow 0.3s ease !important;
}
.frame-container:hover {
    box-shadow: 0 8px 30px rgba(0, 91, 153, 0.12) !important;
}

iframe.frame {
    width: 100% !important;
    border: none !important;
    border-radius: calc(var(--radius) - 6px) !important;
    display: block !important;
}

/* Tarjeta de Recuperación de Contraseña */
.recovery-card {
    background: var(--tm-card) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    padding: 36px 30px !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 40px auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
    animation: fadeIn 0.3s ease-out !important;
}

.recovery-card h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--tm-blue) !important;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    font-family: 'Inter', sans-serif !important;
}

.recovery-field {
    margin-bottom: 20px !important;
    text-align: left !important;
}

.recovery-field label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--tm-text) !important;
    margin-bottom: 8px !important;
    font-family: 'Inter', sans-serif !important;
}

.recovery-field input[type="text"] {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--radius-sm) !important;
    background-color: var(--tm-card) !important;
    color: var(--tm-text) !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.recovery-field input[type="text"]:focus {
    border-color: var(--tm-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 91, 153, 0.15) !important;
}

.recovery-buttons {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    margin-top: 24px !important;
}

/* Animaciones */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.loading-container {
    height: 40px;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    margin: 10px 0 !important;
}

.loading-spinner {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--tm-blue) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

.animate-spin {
    animation: spin 1s linear infinite !important;
}

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

/* ===== GRID CONTAINER & SCROLL CARDS ===== */
.grid-card {
    background-color: var(--tm-card);
    border: 1px solid var(--tm-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    padding-bottom: 12px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.tablaScroll {
    overflow-x: auto !important;
    overflow-y: auto !important;
    background: var(--tm-card);
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    border: none;
    scrollbar-width: auto !important;
    scrollbar-color: var(--tm-blue) var(--tm-sky) !important;
}

/* Sleek Modern Scrollbar (Global to match horizontal and vertical style) */
* {
    scrollbar-width: auto;
    scrollbar-color: var(--tm-blue) var(--tm-sky);
}

::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}
::-webkit-scrollbar-track {
    background: var(--tm-sky);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb {
    background: var(--tm-blue);
    border-radius: 4px;
    border: 2px solid var(--tm-sky);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--tm-blue-l);
}

/* Specific scrollbar styling for .tablaScroll to ensure it is always styled and visible */
.tablaScroll::-webkit-scrollbar {
    width: 14px !important;
    height: 14px !important;
}
.tablaScroll::-webkit-scrollbar-track {
    background: var(--tm-sky) !important;
}
.tablaScroll::-webkit-scrollbar-thumb {
    background: var(--tm-blue) !important;
    border: 2px solid var(--tm-sky) !important;
    border-radius: 4px !important;
}
.tablaScroll::-webkit-scrollbar-thumb:hover {
    background: var(--tm-blue-l) !important;
}

/* ===== MODERN GRIDVIEW STYLING (USED ACROSS ALL TABLES) ===== */
.modern-grid {
    width: 100% !important;
    min-width: max-content !important; /* Fuerza a la tabla a expandirse para habilitar el desplazamiento horizontal */
    border-collapse: collapse !important;
    font-size: 12.5px !important;
    color: var(--tm-text) !important;
    margin: 0 0 24px 0 !important;
    border: none !important;
}

.modern-grid-header th {
    position: sticky !important;
    top: 0 !important;
    background-color: var(--tm-row-header) !important;
    z-index: 11 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    color: var(--tm-muted) !important;
    font-weight: 700 !important;
    padding: 8px 10px !important;
    text-align: right !important;
    border-bottom: 2px solid var(--tm-border) !important;
    font-size: calc(10px * var(--font-scale, 1.0)) !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
}

/* Freeze the first column header (usually Date/Time) so it stays visible during horizontal scrolling */
.modern-grid-header th:first-child {
    text-align: left !important;
    position: sticky !important;
    left: 0 !important;
    background-color: var(--tm-row-header) !important;
    z-index: 12 !important; /* Higher than regular sticky headers (11) */
    border-right: 2px solid var(--tm-border) !important;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05) !important;
}

.modern-grid-header th a {
    color: var(--tm-muted) !important;
    text-decoration: none !important;
}

.modern-grid-row td {
    padding: 7px 10px !important;
    border-bottom: 1px solid var(--tm-row-border) !important;
    font-weight: 500 !important;
    text-align: right !important;
    color: var(--tm-text) !important;
    background-color: var(--tm-row) !important;
    font-size: calc(12px * var(--font-scale, 1.0)) !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
}

.modern-grid-row-alt td {
    padding: 7px 10px !important;
    border-bottom: 1px solid var(--tm-row-border) !important;
    font-weight: 500 !important;
    text-align: right !important;
    color: var(--tm-text) !important;
    background-color: var(--tm-row-alt) !important;
    font-size: calc(12px * var(--font-scale, 1.0)) !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
}

/* Freeze the first column cells for normal rows */
.modern-grid-row td:first-child {
    text-align: left !important;
    color: var(--tm-blue-d) !important;
    font-weight: 600 !important;
    position: sticky !important;
    left: 0 !important;
    background-color: var(--tm-row) !important;
    z-index: 9 !important; /* Higher than regular cells, below header */
    border-right: 2px solid var(--tm-border) !important;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05) !important;
}

/* Freeze the first column cells for alternating rows */
.modern-grid-row-alt td:first-child {
    text-align: left !important;
    color: var(--tm-blue-d) !important;
    font-weight: 600 !important;
    position: sticky !important;
    left: 0 !important;
    background-color: var(--tm-row-alt) !important;
    z-index: 9 !important; /* Higher than regular cells, below header */
    border-right: 2px solid var(--tm-border) !important;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05) !important;
}

.modern-grid-row {
    background-color: var(--tm-row) !important;
}

.modern-grid-row-alt {
    background-color: var(--tm-row-alt) !important;
}

/* Ensure first column inherits hover background styles properly */
.modern-grid-row:hover td, .modern-grid-row-alt:hover td,
.modern-grid-row:hover td:first-child, .modern-grid-row-alt:hover td:first-child {
    background-color: var(--tm-row-hover) !important;
    color: var(--tm-blue-l) !important;
}

.modern-grid-row-selected td,
.modern-grid-row-selected td:first-child {
    background-color: var(--tm-sky) !important;
    color: var(--tm-blue-d) !important;
    font-weight: 700 !important;
}

/* ===== CUSTOM GRIDVIEW PAGER ===== */
.modern-grid-pager {
    background-color: transparent !important;
}

.modern-grid-pager td {
    background-color: var(--tm-row) !important;
    border-top: 1px solid var(--tm-border) !important;
    padding: 12px 16px !important;
    text-align: left !important; /* Overwrite standard text-align right */
}

/* Hace que la etiqueta de página [Página X de Y] aparezca exactamente al lado de la última página como un badge azul premium alineado */
.modern-grid-pager td > span {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 16px !important;
    margin-top: 0 !important;
    vertical-align: middle !important;
    font-weight: 600 !important;
    background-color: var(--tm-blue) !important;
    color: #ffffff !important;
    border: 1px solid var(--tm-blue) !important;
    padding: 0 12px !important;
    height: 32px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    min-width: auto !important;
    line-height: normal !important;
}

.modern-grid-pager table {
    display: inline-flex !important;
    gap: 6px !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

.modern-grid-pager table a, .modern-grid-pager table span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.modern-grid-pager table a {
    background-color: var(--tm-pager-btn) !important;
    color: var(--tm-text) !important;
    border: 1px solid var(--tm-pager-border) !important;
}

.modern-grid-pager table a:hover {
    background-color: var(--tm-sky) !important;
    color: var(--tm-blue) !important;
    border-color: var(--tm-border) !important;
}

.modern-grid-pager table span {
    background-color: var(--tm-blue) !important;
    color: #ffffff !important;
    border: 1px solid var(--tm-blue) !important;
}

/* ===== DARK MODE: FILAS DE TABLA — forzar en TD para que no queden blancas ===== */
@media (prefers-color-scheme: dark) {
    .modern-grid-row td,
    .modern-grid-row td:first-child { background-color: var(--tm-row) !important; color: var(--tm-text) !important; }

    .modern-grid-row-alt td,
    .modern-grid-row-alt td:first-child { background-color: var(--tm-row-alt) !important; color: var(--tm-text) !important; }

    .modern-grid-row:hover td,
    .modern-grid-row-alt:hover td { background-color: var(--tm-row-hover) !important; }

    .modern-grid-header th,
    .modern-grid-header th:first-child { background-color: var(--tm-row-header) !important; color: var(--tm-blue-d) !important; }

    .modern-grid-pager td { background-color: var(--tm-row) !important; }
    .modern-grid-pager table a { background-color: var(--tm-pager-btn) !important; color: var(--tm-text) !important; border-color: var(--tm-pager-border) !important; }
}

/* ===== DARK MODE: INPUTS, SELECTS Y OPCIONES NATIVAS ===== */
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
textarea,
select {
    background-color: var(--tm-card);
    color: var(--tm-text);
    border-color: var(--tm-border);
}

/* Forzar color en opciones nativas del <select> en modo oscuro */
@media (prefers-color-scheme: dark) {
    select option {
        background-color: var(--tm-card);
        color: var(--tm-text);
    }
    select,
    input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]) {
        color-scheme: dark;
    }
}

/* ===== COMPACT AND LEFT-ALIGNED GRID OVERRIDES ===== */
.compact-grid {
    width: auto !important;
    min-width: 450px !important;
    max-width: 850px !important;
    margin: 10px 0 24px 0 !important;
}
.compact-grid th, .compact-grid td {
    text-align: left !important;
}

/* ===== NATIVE ASP.NET CALENDAR STYLING (MyCalendar) ===== */
table.MyCalendar {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    font-family: 'Inter', sans-serif !important;
    background-color: var(--tm-card) !important;
    width: 320px !important;
    box-shadow: var(--shadow) !important;
    margin-top: 10px !important;
}

/* Header styling (Month and navigation arrows) */
table.MyCalendar tr:first-child td {
    background-color: var(--tm-row-header) !important;
    color: var(--tm-blue-d) !important;
    font-weight: 700 !important;
    padding: 8px 10px !important;
    text-align: center !important;
    border-bottom: 1px solid var(--tm-border) !important;
}
table.MyCalendar tr:first-child a {
    color: var(--tm-blue) !important;
    text-decoration: none !important;
    font-weight: bold !important;
    font-size: 13px !important;
}
table.MyCalendar tr:first-child a:hover {
    color: var(--tm-blue-l) !important;
}

/* Day Names header row (lu, ma, mi, ju, vi, sa, do) */
table.MyCalendar tr:nth-child(2) td {
    background-color: var(--tm-row-alt) !important;
    color: var(--tm-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    padding: 6px !important;
    text-align: center !important;
    border-bottom: 1px solid var(--tm-border) !important;
}

/* Regular days and day cells */
table.MyCalendar td {
    text-align: center !important;
    padding: 5px !important;
    font-size: 12px !important;
    background-color: var(--tm-card) !important;
    border: none !important;
}
table.MyCalendar td a {
    color: var(--tm-text) !important;
    text-decoration: none !important;
    display: inline-block !important;
    width: 26px !important;
    height: 26px !important;
    line-height: 26px !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
}
table.MyCalendar td a:hover {
    background-color: var(--tm-row-hover) !important;
    color: var(--tm-blue-l) !important;
}

/* Selected day */
table.MyCalendar td.aspNetDisabled a,
table.MyCalendar td[style*="background-color"] a {
    background-color: var(--tm-blue) !important;
    color: white !important;
    font-weight: bold !important;
}

/* Weekend days color adjustment */
table.MyCalendar td a[title*="domingo"], table.MyCalendar td a[title*="sábado"] {
    color: var(--tm-muted) !important;
}

/* ===== SOFT PASTEL STATUS ROW INDICATORS ===== */

/* --- Config. Usuarios (GridView_UC): Soft Pastel Colors (8% opacity in Light, 15% in Dark) --- */
/* Light Mode */
#GridView_UC tr[style*="PaleGreen"] td,
#GridView_UC tr[style*="palegreen"] td,
#GridView_UC tr[style*="#98FB98"] td,
#GridView_UC tr[style*="#98fb98"] td {
    background-color: rgba(40, 167, 69, 0.08) !important;
    color: #1e4620 !important;
}
#GridView_UC tr[style*="LightSalmon"] td,
#GridView_UC tr[style*="lightsalmon"] td,
#GridView_UC tr[style*="#FFA07A"] td,
#GridView_UC tr[style*="#ffa07a"] td {
    background-color: rgba(220, 53, 69, 0.08) !important;
    color: #612224 !important;
}
/* Dark Mode */
@media (prefers-color-scheme: dark) {
    #GridView_UC tr[style*="PaleGreen"] td,
    #GridView_UC tr[style*="palegreen"] td,
    #GridView_UC tr[style*="#98FB98"] td,
    #GridView_UC tr[style*="#98fb98"] td {
        background-color: rgba(40, 167, 69, 0.15) !important;
        color: #e2fce2 !important;
    }
    #GridView_UC tr[style*="LightSalmon"] td,
    #GridView_UC tr[style*="lightsalmon"] td,
    #GridView_UC tr[style*="#FFA07A"] td,
    #GridView_UC tr[style*="#ffa07a"] td {
        background-color: rgba(220, 53, 69, 0.15) !important;
        color: #fce2e2 !important;
    }
}

/* --- Config. Equipos (GridView_EC): High Contrast Colors (#4C994C and #D14911 at 16% in Light, 50% in Dark) --- */
/* Light Mode */
#GridView_EC tr[style*="PaleGreen"] td,
#GridView_EC tr[style*="palegreen"] td,
#GridView_EC tr[style*="#98FB98"] td,
#GridView_EC tr[style*="#98fb98"] td {
    background-color: rgba(76, 153, 76, 0.16) !important;
    color: #2b5c2b !important;
}
#GridView_EC tr[style*="LightSalmon"] td,
#GridView_EC tr[style*="lightsalmon"] td,
#GridView_EC tr[style*="#FFA07A"] td,
#GridView_EC tr[style*="#ffa07a"] td {
    background-color: rgba(209, 73, 17, 0.16) !important;
    color: #912e06 !important;
}
/* Dark Mode */
@media (prefers-color-scheme: dark) {
    #GridView_EC tr[style*="PaleGreen"] td,
    #GridView_EC tr[style*="palegreen"] td,
    #GridView_EC tr[style*="#98FB98"] td,
    #GridView_EC tr[style*="#98fb98"] td {
        background-color: rgba(76, 153, 76, 0.5) !important;
        color: #F5F5F5 !important;
    }
    #GridView_EC tr[style*="LightSalmon"] td,
    #GridView_EC tr[style*="lightsalmon"] td,
    #GridView_EC tr[style*="#FFA07A"] td,
    #GridView_EC tr[style*="#ffa07a"] td {
        background-color: rgba(209, 73, 17, 0.5) !important;
        color: #F5F5F5 !important;
    }
}

/* ===== LETTER MENU FLEXBOX OVERRIDES (UsuariosConf) ===== */
div[id*="LetterMenu"] > table,
div[id*="LetterMenu"] > table > tbody,
div[id*="LetterMenu"] > table > tbody > tr {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
}
div[id*="LetterMenu"] td {
    display: inline-block !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
div[id*="LetterMenu"] a {
    display: inline-block !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    background-color: var(--tm-row-alt) !important;
    color: var(--tm-blue) !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    border: 1px solid var(--tm-border) !important;
}
div[id*="LetterMenu"] a:hover {
    background-color: var(--tm-blue) !important;
    color: white !important;
    border-color: var(--tm-blue) !important;
}
div[id*="LetterMenu"] td[style*="background-color"] a {
    background-color: var(--tm-blue) !important;
    color: white !important;
    border-color: var(--tm-blue) !important;
}

/* ===== COMPACT SEARCH TEXTBOX IN GRIDS ===== */
.search_textbox {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    height: auto !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: 6px !important;
    background-color: var(--tm-card) !important;
    color: var(--tm-text) !important;
    transition: all 0.25s ease !important;
}
.search_textbox:focus {
    border-color: var(--tm-blue) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(10, 78, 138, 0.15) !important;
}

/* ===== MOBILE TOUCH TARGETS & ACCESSIBILITY OPTIMIZATION (<= 767px) ===== */
@media (max-width: 767px) {
    button, input[type="button"], input[type="submit"], .btn-icon, .chip-item, .nav-link {
        min-height: 44px;
    }
    .btn-toggle-detail, .btn-toggle-forecast, .grid-filter-limpiar {
        min-width: 36px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Prevenir zoom automático descontrolado al hacer tap en campos de texto en iOS/Android */
    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
    select,
    textarea,
    .form-select,
    .grid-filter-input,
    .search_textbox {
        font-size: 16px !important;
    }
}