/* ============================================
   HotelStaff Web Admin - Modernized
   ============================================ */

:root {
    /* Hasta dónde crece el contenido antes de quedarse centrado. */
    --ancho-contenido: 1500px;
    --bg-desktop: #f4f6f9;
    /* Cambiado a un gris claro muy moderno, en lugar del #2D2D2D oscuro */
    --bg-sidebar: #483D8B;
    /* DarkSlateBlue original - Lo mantenemos */
    --bg-sidebar-hover: #5d4db0;
    --bg-submenu: #35285E;
    /* Darker shade original */
    --accent-blue: #6495ED;
    --text-white: #FFFFFF;
    --text-muted: #d1c9ff;
    /* Un tono lila suave para los textos secundarios */
    --border-sidebar: rgba(255, 255, 255, 0.1);
}

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

html,
body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    /* Tipografía más moderna */
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--bg-desktop);
    overflow: hidden;
    /* Previene el scroll de toda la ventana */
}

.login-page-body {
    overflow: auto;
    min-height: 100vh;
    background: linear-gradient(135deg, #1a1040 0%, #483D8B 55%, #6b52c8 100%);
}

.app-wrapper {
    display: flex;
    height: 100vh;
    width: 100vw;
}

/* ============================================
   SIDEBAR (MENÚ LATERAL) - MODERNIZADO
   ============================================ */
.sidebar {
    width: 280px;
    /* Un poco más ancho para que respiren los textos */
    background-color: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Transición más fluida */
    border-right: 1px solid var(--border-sidebar);
    flex-shrink: 0;
    z-index: 100;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
    /* Sombra elegante */
}

.sidebar.collapsed {
    width: 80px;
}

.sidebar-header {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
}

.brand-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hamburger-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    color: var(--text-white);
    cursor: pointer;
    padding: 6px 8px;
    opacity: 0.8;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hamburger-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

.sidebar-logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
    transition: transform 0.3s;
    flex-shrink: 0;
}

.sidebar-header:hover .sidebar-logo {
    transform: scale(1.1);
}

.sidebar-brand-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-white);
    letter-spacing: 0.5px;
    line-height: 1.2;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar.collapsed .sidebar-brand-name,
.sidebar.collapsed .sidebar-logo {
    display: none;
}

.sidebar.collapsed .hamburger-btn {
    margin: 0 auto;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 10px;
}

/* Scrollbar sidebar elegante */
.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

.nav-group {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Botones Principales del Menú */
.nav-item-main {
    height: 55px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    color: var(--text-white);
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    outline: none;
    transition: all 0.2s ease;
}

/* ¡EL TRUCO! Hace que todos los iconos PNG sean blancos */
.nav-item-main img,
.nav-item-sub img,
.btn-salir img {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    filter: brightness(0) invert(1) opacity(0.85);
    /* Iconos blancos */
    transition: all 0.2s ease;
}

.nav-item-main:hover {
    background-color: var(--bg-sidebar-hover);
    border-left: 4px solid var(--text-white);
}

.nav-item-main:hover img {
    filter: brightness(0) invert(1) opacity(1);
    transform: scale(1.1);
}

.nav-item-main span {
    margin-left: 15px;
    white-space: nowrap;
}

.sidebar.collapsed .nav-item-main span {
    display: none;
}

.sidebar.collapsed .nav-item-main {
    justify-content: center;
    padding: 0;
}

/* Submenús */
.nav-submenu {
    background-color: var(--bg-submenu);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.nav-submenu.open {
    max-height: 1000px;
}

.nav-item-sub {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 15px 0 50px;
    /* Sangría para submenú */
    color: var(--text-muted);
    text-decoration: none !important;
    font-size: 14px;
    transition: all 0.2s;
    white-space: nowrap;
}

.nav-item-sub:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-white);
    padding-left: 55px;
    /* Pequeño movimiento a la derecha al hacer hover */
}

.nav-item-sub.active {
    color: var(--text-white);
    font-weight: bold;
    border-left: 3px solid var(--accent-blue);
}

.nav-item-sub img {
    width: 18px;
    height: 18px;
    margin-right: 12px;
}

.sidebar.collapsed .nav-item-sub {
    padding: 0;
    justify-content: center;
}

.sidebar.collapsed .nav-item-sub span {
    display: none;
}

.sidebar.collapsed .nav-item-sub img {
    margin-right: 0;
}

/* Sidebar Footer / Login Info */
.sidebar-footer {
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 1px solid var(--border-sidebar);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.login-info-panel {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-display {
    color: var(--text-muted);
    font-size: 13px;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar.collapsed .user-display {
    display: none;
}

.btn-salir {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-white);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    width: 100%;
    transition: all 0.2s ease;
}

.btn-salir:hover {
    background-color: #d93025;
    /* Rojo de salida */
    border-color: #d93025;
}

.btn-salir img {
    margin-right: 10px;
}

.sidebar.collapsed .btn-salir span {
    display: none;
}

.sidebar.collapsed .btn-salir img {
    margin-right: 0;
}

.sidebar.collapsed .btn-salir {
    padding: 10px 0;
    border: none;
    background: transparent;
}

.sidebar.collapsed .btn-salir:hover {
    background-color: transparent;
}

.sidebar.collapsed .btn-salir:hover img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(91%) saturate(2379%) hue-rotate(345deg) brightness(93%) contrast(89%);
    /* Vuelve el icono rojo */
}


/* ============================================
   MAIN CONTENT (CONTENIDO PRINCIPAL)
   ============================================ */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    background-color: var(--bg-desktop);
    /* Desactivé el fondo de imagen oscuro por defecto, el gris claro se ve mucho más limpio.
       Si quieres volver a la imagen, descomenta las líneas de abajo */
    /* background-image: url('/images/wallpapernuevo.png'); */
    /* background-repeat: no-repeat; */
    /* background-position: center; */
    /* background-size: cover; */
}

.page-content {
    flex: 1;
    overflow: auto;
    padding: 30px;
    /* Más margen para respirar */
}

/* En un monitor panorámico el contenido se estiraba sin límite: en el listado de bajas, por
   ejemplo, el nombre del trabajador quedaba a un palmo de la fecha. El contenido crece hasta
   un ancho cómodo de leer y a partir de ahí se queda centrado.

   Las pantallas que sí necesitan todo el ancho —la planilla de horarios, con una columna por
   día más las de totales— se salen con la clase .ancho-completo. */
.page-content > *:not(.ancho-completo) {
    width: 100%;
    max-width: var(--ancho-contenido);
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   ESTILOS EXISTENTES MANTENIDOS (WinForms & Login)
   ============================================ */

.winforms-window {
    background-color: #f0f0f0;
    border: 1px solid #707070;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    height: 90vh;
    max-width: 1400px;
    margin: 0 auto;
}

.winforms-titlebar {
    background-color: #99B4D1;
    color: black;
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 12px;
}

.winforms-titlebar-text {
    flex: 1;
}

.winforms-btn-close {
    width: 45px;
    height: 29px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.winforms-btn-close:hover {
    background-color: #E81123;
    color: white;
}

.winforms-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.winforms-statusbar {
    background-color: #F0F0F0;
    border-top: 1px solid #D0D0D0;
    height: 22px;
    font-size: 12px;
    padding: 2px 5px;
    color: #444;
}

.winforms-toolStrip {
    background-color: #483D8B;
    padding: 10px;
    display: flex;
    gap: 5px;
    height: 140px;
    align-items: center;
}

.winforms-dgv-container {
    flex: 1;
    overflow: auto;
    background: white;
}

.winforms-dgv {
    width: 100%;
    border-collapse: collapse;
}

.winforms-dgv thead tr {
    background-color: #f0f0f0;
    border-bottom: 1px solid #ccc;
}

.winforms-dgv th {
    padding: 5px;
    text-align: left;
    font-size: 14px;
    border-right: 1px solid #ccc;
    font-weight: normal;
}

.winforms-dgv tr:hover {
    background: #e5f3ff;
}

.winforms-dgv tr.selected {
    background: #0078d7 !important;
    color: white !important;
}

/* Toast - Centered modal-style notification */
.toast-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(3px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: toastOverlayIn 0.25s ease;
}

.toast-overlay.toast-closing {
    animation: toastOverlayOut 0.25s ease forwards;
}

.toast-dialog {
    background: white;
    border-radius: 16px;
    min-width: 340px;
    max-width: 480px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: toastDialogIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast-closing .toast-dialog {
    animation: toastDialogOut 0.25s ease forwards;
}

.toast-dialog-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1rem;
    color: white;
}

.toast-dialog-header.toast-h-success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.toast-dialog-header.toast-h-error {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.toast-dialog-header.toast-h-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.toast-dialog-header.toast-h-info {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.toast-dialog-header .toast-icon {
    font-size: 1.3rem;
}

.toast-dialog-body {
    padding: 20px 24px;
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.5;
}

.toast-dialog-footer {
    padding: 12px 20px 16px;
    display: flex;
    justify-content: flex-end;
}

.toast-btn-ok {
    padding: 8px 28px;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    color: white;
    transition: all 0.2s;
}

.toast-btn-ok.toast-ok-success {
    background: #22c55e;
}

.toast-btn-ok.toast-ok-success:hover {
    background: #16a34a;
}

.toast-btn-ok.toast-ok-error {
    background: #ef4444;
}

.toast-btn-ok.toast-ok-error:hover {
    background: #dc2626;
}

.toast-btn-ok.toast-ok-warning {
    background: #f59e0b;
}

.toast-btn-ok.toast-ok-warning:hover {
    background: #d97706;
}

.toast-btn-ok.toast-ok-info {
    background: #3b82f6;
}

.toast-btn-ok.toast-ok-info:hover {
    background: #2563eb;
}

@keyframes toastOverlayIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes toastOverlayOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes toastDialogIn {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(20px);
    }

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

@keyframes toastDialogOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* ============================================
   LOGIN PAGE - Modern Card Design
   ============================================ */
.login-modern-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.login-modern-container::before,
.login-modern-container::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
}

.login-modern-container::before {
    width: 700px;
    height: 700px;
    top: -250px;
    right: -250px;
    background: rgba(255, 255, 255, 0.04);
}

.login-modern-container::after {
    width: 500px;
    height: 500px;
    bottom: -200px;
    left: -200px;
    background: rgba(255, 255, 255, 0.04);
}

.login-modern-card {
    background: white;
    border-radius: 20px;
    padding: 48px 44px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    position: relative;
    z-index: 1;
    animation: loginCardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes loginCardIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

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

.login-logo-wrap {
    text-align: center;
    margin-bottom: 22px;
}

.login-logo-wrap img {
    max-height: 72px;
    max-width: 200px;
    object-fit: contain;
}

.login-welcome {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a1040;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.login-subtitle {
    text-align: center;
    font-size: 0.875rem;
    color: #718096;
    margin-bottom: 30px;
}

.login-error-box {
    margin-bottom: 16px;
    padding: 12px 14px;
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: 10px;
    font-size: 0.85rem;
}

.login-field {
    position: relative;
    margin-bottom: 16px;
}

.login-field-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    opacity: 0.35;
    filter: brightness(0);
    pointer-events: none;
}

.login-field input[type='text'],
.login-field input[type='password'] {
    width: 100%;
    padding: 13px 42px 13px 40px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #1e293b;
    background: #f8fafc;
    transition: all 0.2s;
    outline: none;
    font-family: 'Segoe UI', Roboto, sans-serif;
}

.login-field input[type='text']:focus,
.login-field input[type='password']:focus {
    border-color: #483d8b;
    background: white;
    box-shadow: 0 0 0 4px rgba(72, 61, 139, 0.12);
}

.login-field input::placeholder {
    color: #a0aec0;
}

.login-eye-btn {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    line-height: 0;
    opacity: 0.35;
    transition: opacity 0.2s;
}

.login-eye-btn:hover {
    opacity: 0.75;
}

.login-eye-btn img {
    width: 19px;
    height: 19px;
    filter: brightness(0);
}

.login-field-error {
    display: block;
    color: #e53e3e;
    font-size: 0.78rem;
    margin-top: 5px;
    padding-left: 4px;
}

.login-remember-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    font-size: 0.875rem;
    color: #4a5568;
    cursor: pointer;
}

.login-remember-row input[type='checkbox'] {
    width: 15px;
    height: 15px;
    accent-color: #483d8b;
    cursor: pointer;
    flex-shrink: 0;
}

.login-btn-acceder {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #483d8b, #7c5cbf);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 18px rgba(72, 61, 139, 0.45);
    font-family: 'Segoe UI', Roboto, sans-serif;
}

.login-btn-acceder:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(72, 61, 139, 0.5);
}

.login-btn-acceder:active {
    transform: translateY(0);
}

.login-btn-acceder:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.text-danger {
    color: #dc3545;
    font-size: 12px;
}

/* ============================================
   RESPONSIVIDAD (MÓVILES Y TABLETS)
   ============================================ */
@media (max-width: 768px) {
    .sidebar {
        position: absolute;
        /* Flota sobre el contenido */
        height: 100%;
        transform: translateX(-100%);
        /* Oculto por defecto en móvil */
    }

    .sidebar.mobile-open {
        transform: translateX(0);
        /* Se muestra al pulsar el botón */
    }

    .sidebar.collapsed {
        transform: translateX(-100%);
        /* Ignora el modo colapsado en móvil, simplemente lo oculta */
    }

    .page-content {
        padding: 15px;
        /* Menos margen en móviles */
    }
}

/* ============================================
   MODERN UI COMPONENTS
   ============================================ */
.modern-page-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    animation: fadeIn 0.4s ease;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 15px;
    border-bottom: 2px solid #e2e8f0;
}

.page-title {
    margin: 0;
    font-size: 1.8rem;
    color: #2d3748;
    font-weight: 700;
}

.page-subtitle {
    margin: 5px 0 0 0;
    color: #718096;
    font-size: 0.95rem;
}

.action-toolbar {
    display: flex;
    gap: 12px;
}

.btn-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-action img {
    width: 20px;
    height: 20px;
}

.btn-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-primary {
    background-color: var(--bg-sidebar);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--bg-sidebar-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
    background-color: #ffffff;
    color: #4a5568;
    border: 1px solid #cbd5e0;
}

.btn-secondary:hover:not(:disabled) {
    background-color: #f7fafc;
    border-color: #a0aec0;
}

.btn-danger {
    background-color: #ef4444;
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background-color: #dc2626;
    transform: translateY(-1px);
}

.icon-filter-white {
    filter: brightness(0) invert(1);
}

.icon-filter-dark {
    filter: brightness(0) opacity(0.7);
}

.data-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    border: 1px solid #edf2f7;
}

.table-responsive {
    flex: 1;
    overflow-y: auto;
}

.modern-table {
    width: 100%;
    border-collapse: collapse;
}

.modern-table th {
    background-color: #483d8b;
    color: white;
    font-weight: 600;
    padding: 15px;
    text-align: left;
    border-bottom: 2px solid #35285e;
    position: sticky;
    top: 0;
    z-index: 10;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.modern-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    font-size: 0.95rem;
}

.modern-row {
    cursor: pointer;
    transition: all 0.15s;
    /* Las filas se editan con doble clic; sin esto, el doble clic deja el texto seleccionado
       en azul encima del modal que acaba de abrirse. */
    user-select: none;
    -webkit-user-select: none;
}

.modern-row:hover {
    background-color: #f8fafc;
}

.modern-row.selected {
    background-color: #eef2ff;
    border-left: 4px solid var(--bg-sidebar);
}

.modern-row.selected td {
    padding-left: 12px;
    color: var(--bg-sidebar);
    font-weight: 500;
}

.card-footer {
    padding: 16px 20px;
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 0.9rem;
    text-align: right;
}

/* Modals */
.modern-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s;
}

.modern-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modern-modal-dialog {
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 600px;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    transform: translateY(-20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.modern-modal-overlay.active .modern-modal-dialog {
    transform: translateY(0);
}

.modal-header {
    padding: 16px 28px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    z-index: 10;
    flex-shrink: 0;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #1e293b;
    font-weight: 700;
}

.btn-close-modal {
    background: #f1f5f9;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1rem;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close-modal:hover {
    background-color: #fee2e2;
    color: #ef4444;
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    background: #f8fafc;
}

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

.form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
}

.form-control,
.form-select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #111827;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.form-control:focus {
    border-color: var(--bg-sidebar);
    box-shadow: 0 0 0 3px rgba(72, 61, 139, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    outline: none;
}

/* Standard Readonly/Disabled Styling */
.input-readonly,
input:disabled,
select:disabled,
textarea:disabled {
    background-color: #f8fafc !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Specific for checkboxes in list */
label.input-readonly,
.form-readonly .modern-checkbox-list,
.form-readonly .modern-checkbox-list-v2,
.form-readonly .modern-checkbox {
    opacity: 0.6;
    cursor: not-allowed !important;
    pointer-events: none;
}

.form-readonly {
    cursor: not-allowed;
}

.modal-footer {
    padding: 20px 28px;
    background-color: #f8fafc;
    border-top: 1px solid #f1f5f9;
    border-radius: 0 0 16px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-modal {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.btn-cancel {
    background-color: white;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.btn-cancel:hover {
    background-color: #f1f5f9;
    border-color: #94a3b8;
}

.btn-save {
    background-color: var(--bg-sidebar);
    color: white;
}

.btn-save:hover {
    background-color: var(--bg-sidebar-hover);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

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

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

/* Tab modern style */
.modern-tabs {
    display: flex;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 25px;
}

.modern-tab {
    padding: 12px 24px;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-bottom: none;
    margin-bottom: -2px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.modern-tab:hover {
    color: var(--bg-sidebar);
    background: #f1f5f9;
}

.modern-tab.active {
    color: white;
    background: var(--bg-sidebar);
    border-color: var(--bg-sidebar);
    box-shadow: 0 -2px 10px rgba(72, 61, 139, 0.1);
}

.tab-content {
    display: none;
    animation: fadeIn 0.4s ease;
}

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

/* Icon Filters */
.icon-filter-white {
    filter: brightness(0) invert(1);
}

.icon-filter-dark {
    filter: brightness(0) opacity(0.7);
}

/* --- Refinement Utilities --- */
.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 40px;
}

.form-section-header {
    margin: 30px 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #f1f5f9;
    color: #483d8b;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-section-header:first-child {
    margin-top: 5px;
}

.form-section-header img {
    width: 20px;
    height: 20px;
    opacity: 0.8;
}

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

/* Base Layout Utilities */
.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.contract-layout-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1200px) {
    .contract-layout-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .contract-layout-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1200px) {
    .form-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .form-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Enhanced Inputs in Grids */
.form-group .form-control,
.form-group .form-select {
    height: 40px;
}

/* Radio and Checkbox Groups */
.modern-radio-group,
.modern-checkbox-group {
    display: flex;
    gap: 15px;
    background: #ffffff;
    padding: 8px 15px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    height: 40px;
    align-items: center;
}

.modern-radio,
.modern-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
}

.modern-radio input,
.modern-checkbox input {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

/* Modal Action Buttons */
.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    height: 40px;
}

.btn-primary {
    background: var(--bg-sidebar);
    color: white;
}

.btn-primary:hover {
    background: var(--bg-sidebar-hover);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
    background: white;
    color: #475569;
    border-color: #e2e8f0;
}

.btn-secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e0;
}

.btn-danger {
    background: #ef4444;
    color: white;
}

.btn-danger:hover {
    background: #dc2626;
}

/* Compact Utilities */
.compact-form .form-group {
    margin-bottom: 12px;
}

.compact-form .form-label {
    margin-bottom: 4px;
    font-size: 0.75rem;
}

.compact-form .form-control,
.compact-form .form-select {
    height: 34px;
    padding: 6px 10px;
    font-size: 0.8rem;
}

/* =================================================================
   RESTORED LEINAD COMPONENTS (Anticipos, Pagos, Ausencias, etc.)
   ================================================================= */
.modern-toggle-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.toggle-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #4a5568;
}

.modern-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin: 0;
}

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

.modern-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e0;
    transition: .3s;
    border-radius: 24px;
}

.modern-switch .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.modern-switch input:checked+.slider {
    background-color: #483D8B;
}

.modern-switch input:checked+.red-slider {
    background-color: #e53e3e;
}

.modern-switch input:checked+.blue-slider {
    background-color: #3182ce;
}

.modern-switch input:checked+.slider:before {
    transform: translateX(20px);
}

.page-subtitle {
    color: #718096;
    font-size: 0.95rem;
}

.action-toolbar {
    display: flex;
    gap: 10px;
}

.btn-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #e2e8f0 !important;
    color: #a0aec0 !important;
    box-shadow: none;
}

.btn-action:disabled img {
    filter: grayscale(1) opacity(0.5);
}

.icon-filter-white {
    filter: brightness(0) invert(1);
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.icon-filter-dark {
    filter: brightness(0.3);
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.modern-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s;
}

.modern-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modern-modal-dialog {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 100%;
    max-width: 500px;
    transform: translateY(-20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    max-height: 95vh;
    overflow: hidden;
}

.modern-modal-overlay.active .modern-modal-dialog {
    transform: translateY(0);
}

.modern-modal-header {
    padding: 20px 25px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modern-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #1a202c;
    font-weight: 700;
}

.modern-modal-body {
    padding: 25px;
    overflow-y: auto;
    flex: 1;
}

.modern-modal-footer {
    padding: 15px 25px;
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 12px 12px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* SHARED FILTERS & PILL GROUPS */
.filter-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    border: 1px solid #e2e8f0;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    align-items: end;
}

.date-range-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.date-separator {
    color: #718096;
    font-weight: 600;
    font-size: 0.9rem;
}

.radio-pill-group {
    display: flex;
    gap: 5px;
    background: #edf2f7;
    padding: 4px;
    border-radius: 8px;
}

.radio-pill {
    flex: 1;
    position: relative;
    cursor: pointer;
}

.radio-pill input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.radio-pill span {
    display: block;
    text-align: center;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #718096;
    transition: all 0.2s;
}

.radio-pill input:checked~span {
    background-color: white;
    color: #483D8B;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dual-selects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.search-group {
    position: relative;
}

.record-counter {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.85rem;
    color: #718096;
    font-weight: 600;
}

.record-counter span {
    background-color: #483D8B;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 5px;
}

.split-view-modern {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    min-height: 0;
}

.split-top {
    flex: 2;
    min-height: 300px;
}

.split-bottom {
    flex: 1;
    min-height: 200px;
    border-top: 4px solid #483D8B;
}

.card-header-small {
    padding: 12px 20px;
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.card-header-small h4 {
    margin: 0;
    color: #4a5568;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-header-small i {
    color: #483D8B;
}

.card-footer {
    padding: 12px 20px;
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
    font-size: 0.9rem;
    color: #4a5568;
}