/* =========================================================
   🎨 ESTILOS PERSONALIZADOS DE LA APP NOMITOYO
   ========================================================= */

/* 🔹 Pantalla de carga */
.custom-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}
.mud-nav-link {
    text-decoration: none;
}

    .custom-loading.hidden {
        opacity: 0;
        pointer-events: none;
    }

.spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #e0e0e0;
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.text {
    margin-top: 1rem;
    font-size: 1.1rem;
    font-weight: 500;
    color: #444;
}

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

/* 🔹 Estilos generales */
.centered-canvas {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    height: 600px;
    max-width: 100%;
}

.chart-canvas {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.custom-header th {
    background-color: #1976d2;
    color: black;
}

.gray-background {
    background-color: #f5f5f5;
}

.green-background {
    background-color: #e8f5e9;
}

/* 🔹 Centrar título en AppBar */
.appbar-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: white;
}

/* 🔹 Selects a la mitad del ancho */
.select-mitad {
    width: 50% !important;
}

/* =========================================================
   🔸 ESTILOS PARA MUDGRID, MUDITEM Y RESPONSIVE
   ========================================================= */

/* 🔹 Elimina margen entre columnas y controla padding */
.no-gutter-grid {
    margin: 0 !important;
}

    .no-gutter-grid .mud-grid-item {
        padding: 0 8px !important;
        box-sizing: border-box;
    }

/* 🔹 Evita overflow dentro del MudCard */
.mud-item-fix {
    box-sizing: border-box;
    max-width: 100%;
}

    .mud-item-fix .mud-input,
    .mud-item-fix .mud-picker {
        width: 100% !important;
    }

.mud-card {
    overflow: hidden;
}

/* =========================================================
   🔸 ICONOS Y NOTIFICACIONES EN APPBAR
   ========================================================= */
.icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 40px;
    width: 40px;
    padding: 0;
}

.notification-badge {
    position: absolute;
    top: 4px;
    right: 2px;
    font-size: 0.7rem;
    padding: 2px 6px;
    z-index: 10;
}

.notification-dropdown {
    position: absolute;
    top: 64px;
    right: 80px;
    width: 320px;
    z-index: 1050;
    border-radius: 0.75rem;
    background-color: #fff;
}

.notification-body {
    max-height: 250px;
    overflow-y: auto;
}

.notification-dropdown .list-group-item {
    transition: background-color 0.2s ease;
    cursor: pointer;
    padding: 0.75rem 1rem;
}

    .notification-dropdown .list-group-item:hover {
        background-color: #f8f9fa;
    }

.notification-dropdown::-webkit-scrollbar {
    width: 6px;
}

.notification-dropdown::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

/* =========================================================
   📱 RESPONSIVE DESIGN
   ========================================================= */

/* 🔸 Ajustes generales para pantallas pequeñas */
@media (max-width: 600px) {
    /* Oculta títulos en AppBar */
    .appbar-title, .ml-3 {
        display: none !important;
    }

    /* Ajusta dropdown de notificaciones */
    .notification-dropdown {
        right: 10px !important;
        width: 90% !important;
        top: 56px !important;
    }

    /* Íconos más pequeños */
    .icon-wrapper {
        width: 36px;
        height: 36px;
    }

    /* Reduce padding entre columnas */
    .no-gutter-grid .mud-grid-item {
        padding: 0 4px !important;
    }

    /* Evita desbordes laterales */
    .mud-card {
        margin: 0 4px;
    }

    /* Asegura que todos los inputs sean 100% */
    .mud-item-fix .mud-input,
    .mud-item-fix .mud-picker {
        width: 100% !important;
    }
}

/* ===========================================
   🔹 NUEVOS ESTILOS PARA TABLAS Y TOOLBAR RESPONSIVE
   =========================================== */

.table-responsive {
    overflow-x: auto;
    width: 100%;
}

.input-fullwidth {
    width: 100% !important;
    box-sizing: border-box;
}

.toolbar-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 180px; /* Mayor espacio entre toolbar y tabla */
}

@media (max-width: 768px) {
    .toolbar-flex {
        justify-content: center;
    }

        .toolbar-flex > * {
            flex: 1 1 100%;
            max-width: 100%;
        }

    .mud-text-field input {
        width: 100% !important;
    }

    .mud-table-cell {
        padding: 8px 6px !important;
    }
}
/* --- Ajustes Responsivos de ToolBar --- */
/* ===================================
   Toolbar con MudChips y botón
   =================================== */
/* Toolbar y chips */
.toolbar-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start; /* alinea botones y chips arriba */
    margin-bottom: 24px; /* separa toolbar de la tabla */
}

.toolbar-flex .chip-margin {
        margin-bottom: 16px; /* evita que los chips se encimen sobre la tabla */
    }

.autorizar-btn {
    margin-top: 4px; /* separa botón de la parte superior */
}

/* Ajustes responsive */
@media (max-width: 768px) {
    .toolbar-flex {
        justify-content: center; /* centra los elementos en pantallas pequeñas */
    }

        .toolbar-flex > * {
            flex: 1 1 100%;
            max-width: 100%;
        }
}

/* =========================================================
   🔹 Ajuste de espaciado visual para tabla de papeletas
   ========================================================= */
.tabla-papeletas-container {
    /*display: block;
    margin-top: 32px;*/ /* baja la tabla completa */
    padding-top: 80px; /* 💡 Ajusta este valor según el alto de tu AppBar */
}

.toolbar-papeletas {
    /*margin-bottom: 48px !important;*/ /* asegura separación dentro del toolbar */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end; /* 🔽 baja los elementos (como el TextField) dentro del contorno */
    margin-top: 12px;
    margin-bottom: 48px !important;
}

/* Ajuste adicional: baja aún más la tabla si MudBlazor la "pega" demasiado */
.mud-table-toolbar {
    margin-bottom: 32px !important;
}

/* Asegura que el buscador no sobresalga visualmente del contenedor */
.toolbar-papeletas .mud-input-control {
    margin-top: 8px; /* baja el input un poco */
}

/* Da un poco más de espacio entre chips y el buscador */
.toolbar-papeletas .mud-chip {
    margin-top: 4px;
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .tabla-papeletas-container {
        /*margin-top: 16px;*/
        padding-top: 60px;
    }

    .toolbar-papeletas {
        /*margin-bottom: 32px !important;*/
        /*margin-top: 8px;
        margin-bottom: 32px !important;*/
        align-items: stretch; /* en móvil, que todo se apile correctamente */
        padding-top: 10px;
    }
}

/* 🔹 Limita ancho en escritorio */
.responsive-filter {
    flex: 1 1 25%;
    max-width: 25%;
}

/* 🔹 En pantallas pequeñas, que ocupen todo el ancho */
@media (max-width: 768px) {
    .responsive-filter {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* =========================================================
   🔸 GRID RESPONSIVO REUTILIZABLE PARA FILTROS Y FORMULARIOS
   ========================================================= */

/* 🟩 Aplica separación uniforme entre columnas y filas */
.responsive-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -8px; /* elimina el padding externo */
}

    /* 🟦 Ajusta los MudItem internos */
    .responsive-grid > .mud-grid-item {
        padding: 8px;
        box-sizing: border-box;
    }

    /* 🔹 Asegura que todos los inputs, selects y pickers ocupen el 100% */
    .responsive-grid .mud-input,
    .responsive-grid .mud-select,
    .responsive-grid .mud-picker,
    .responsive-grid .mud-autocomplete {
        width: 100% !important;
    }

/* 🔸 Versión para móviles: apila todo en una sola columna */
@media (max-width: 768px) {
    .responsive-grid {
        flex-direction: column;
        margin: 0;
    }

        .responsive-grid > .mud-grid-item {
            padding: 4px 0;
            width: 100% !important;
        }
}

/* Grafico*/
.chart-container {
    width: 100%;
    max-width: 500px; /* tamaño máximo en escritorio */
    aspect-ratio: 1; /* mantiene proporción cuadrada */
    margin: 0 auto; /* centra la gráfica */
}

/* =========================================================
   🔹 ESTILOS UNIFORMES PARA MUDDIALOG DE PERFIL Y NÓMINA
   ========================================================= */

.dialog-uniform {
    width: 800px; /* ancho fijo del dialogo */
    max-width: 90vw; /* no exceda el ancho de la ventana */
    height: 600px; /* alto fijo */
    min-height: 600px;
    max-height: 600px;
}

.scrollable-dialog-content {
    overflow-y: auto; /* scroll vertical si el contenido supera la altura */
    height: 100%;
    padding: 16px; /* opcional, para que no pegue con los bordes */
    box-sizing: border-box;
}

/* =========================================================
🔹 PARA BOTONES PROCESAR EFECTO PROGRESS 
========================================================= */
.processing-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* =========================================================
   🔹 MANTENER BORDES EN TEXTFIELDS DESHABILITADOS (Outlined)
   ========================================================= */

.mud-input.mud-disabled .mud-input-outlined-border {
    border-color: var(--mud-palette-primary) !important;
    opacity: 1 !important;
}

/* Evita el efecto "lavado" visual del disabled */
.mud-input.mud-disabled {
    opacity: 1 !important;
}

    /* Mantiene el color del label */
    .mud-input.mud-disabled .mud-input-label {
        color: var(--mud-palette-text-primary) !important;
        opacity: 1 !important;
    }

/* =========================================
   🔹 TABLA BLANCA CON TEXTO NEGRO
   ========================================= */

/* Encabezados */
.table-text-black thead th {
    color: #000000 !important;
    font-weight: 600;
}

/* Columnas Num Empleado, Nombre, Sucursal */
.table-text-black tbody tr td:nth-child(1),
.table-text-black tbody tr td:nth-child(2),
.table-text-black tbody tr td:nth-child(3) {
    color: #000000 !important;
}

/* Asegurar fondo blanco en celdas */
.table-text-black tbody tr td {
    background-color: #FFFFFF !important;
}