.custom-navlink {
    background-color: #32b4a8 !important; /* Azul */
    color: white !important;
    font-weight: bold;
}

    .custom-navlink .mud-nav-link-icon {
        color: white !important; /* Hace que el ícono sea blanco */
    }

    /* 👇 Cambia de color cuando se pasa el mouse */
    .custom-navlink:hover {
        background-color: #ace7ac !important; /* Azul más oscuro al pasar el mouse */
    }

.appbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

.appbar-logo-container {
    height: 48px; /* Ajusta según el tamaño de tu MudAppBar */
    display: flex;
    align-items: center;
    background-color: white;
    padding-left: 16px; /* Ajusta el margen izquierdo para mover el logo */
    padding: 4px;
    border-radius: 4px;
}

.appbar-logo {
    height: 100%;
    max-height: 48px; /* Ajusta si es necesario */
    object-fit: contain;
}

.menu-button {
    margin-left: auto; /* Empuja el botón al final del espacio disponible */
}

    .menu-button:hover {
        background-color: #ace7ac !important; /* Azul claro */
    }

.no-uppercase .mud-button-label,
.no-uppercase .mud-fab-label {
    text-transform: none !important;
}

::selection {
    background-color: #a3ddd8; /* 💚 Verde más claro al seleccionar */
    color: #000000; /* 🖤 Texto negro al seleccionar */
}

.mud-nav-group {
    background-color: #FFFFFF !important;
    color: #32b4a8 !important;
}

    .mud-nav-group .mud-nav-link {
        color: #32b4a8 !important;
    }
/* Estado normal */
.mud-nav-link {
    background-color: #FFFFFF !important;
    color: #32b4a8 !important;
}

    /* Íconos también en color verde */
    .mud-nav-link .mud-icon-root {
        color: #32b4a8 !important;
    }

    /* Hover */
    .mud-nav-link:hover {
        background-color: #E0F7F5 !important;
        color: #32b4a8 !important;
    }

        .mud-nav-link:hover .mud-icon-root {
            color: #32b4a8 !important;
        }

    /* Texto dentro de NavLink (por si hay span u otro tag) */
    .mud-nav-link span,
    .mud-nav-link div {
        color: #32b4a8 !important;
    }

    /* Hover texto también */
    .mud-nav-link:hover span,
    .mud-nav-link:hover div {
        color: #32b4a8 !important;
    }

    /* Activo (seleccionado) */
    .mud-nav-link.mud-nav-link-active {
        background-color: #D0F0ED !important;
        color: #32b4a8 !important;
    }

        .mud-nav-link.mud-nav-link-active .mud-icon-root {
            color: #32b4a8 !important;
        }

        .mud-nav-link.mud-nav-link-active span,
        .mud-nav-link.mud-nav-link-active div {
            color: #32b4a8 !important;
        }

.mud-snackbar-info {
    background-color: #32b4a8 !important;
    color: white !important;
}

.mud-snackbar-success {
    background-color: #2aa894 !important;
    color: white !important;
}

.mud-snackbar-warning {
    background-color: #f4b942 !important;
    color: black !important;
}

.mud-snackbar-error {
    background-color: #e45757 !important;
    color: white !important;
}

/* Selecciona el label de MudTextField y lo pone en negrita */
.custom-label .mud-input-label {
    font-weight: bold !important;
}

/* Enfocar también los campos deshabilitados con MudTextField */
.custom-label .mud-input-control.mud-input-disabled {
    font-weight: bold !important; /* Aplica negrita al campo también si está deshabilitado */
}


/* Estilo del contenedor del checkbox */
.styled-checkbox {
    position: absolute;
    opacity: 0; /* Ocultamos el checkbox original */
}

    /* Estilo del contenedor visual del checkbox */
    .styled-checkbox + .styled-label {
        position: relative;
        padding-left: 30px; /* Espacio para el círculo */
        cursor: pointer;
        display: inline-block;
        font-size: 16px;
        line-height: 20px;
        color: #333;
        user-select: none; /* Evita que el texto sea seleccionado */
    }

        /* Círculo visual del checkbox */
        .styled-checkbox + .styled-label::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 20px;
            height: 20px;
            background-color: #fff;
            border: 2px solid #007bff;
            border-radius: 50%; /* Hacemos que sea un círculo */
            transition: background-color 0.3s, border-color 0.3s;
        }

    /* Cuando el checkbox está seleccionado */
    .styled-checkbox:checked + .styled-label::before {
        background-color: #007bff; /* Color de fondo cuando está seleccionado */
        border-color: #007bff; /* Cambiar el color del borde */
    }

    /* Marca de verificación en el círculo */
    .styled-checkbox:checked + .styled-label::after {
        content: '✔';
        position: absolute;
        left: 4px;
        top: 2px;
        color: white;
        font-size: 14px;
        font-weight: bold;
    }

    /* Efecto cuando el checkbox se coloca sobre él */
    .styled-checkbox + .styled-label:hover::before {
        background-color: #f0f0f0; /* Color cuando se pasa el mouse sobre el checkbox */
    }

    /* Efecto de enfoque */
    .styled-checkbox:focus + .styled-label::before {
        border-color: #0056b3; /* Color de borde cuando el checkbox tiene foco */
    }

.mud-table-head {
    height: 30px !important;
}

    .mud-table-head .mud-table-cell {
        padding: 4px 8px !important;
        font-size: 0.75rem !important; /* Más pequeño que el normal (0.875rem) */
        line-height: 1 !important;
    }




.grid-header-cell {
    background-color: #32b4a8;
    border: none;
    color: white !important; /* texto blanco */
    font-size: 0.75rem;
    padding: 4px 8px;
}

    .grid-header-cell.first {
        border-top-left-radius: 12px;
    }

    .grid-header-cell.last {
        border-top-right-radius: 12px;
    }
.sticky-sidebar {
    position: sticky;
    top: 80px; /* ajusta este valor según la altura de tu navbar o encabezado */
    z-index: 10;
}
.texto-normal {
    text-transform: none !important;
}

.mud-popover, .mud-select-menu {
    z-index: 3000 !important;
}

.sticky-left {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #f9f9f9;
}

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

/* Estilo para el título con fondo, bordes redondeados y centrado */
.custom-dialog-header {
    background-color: var(--mud-palette-primary);
    color: white;
    font-weight: bold;
    padding: 16px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    text-align: center; /* CENTRAR texto horizontalmente */
    font-size: 1.1rem; /* Opcional: ajustar tamaño */
}
.custom-modal {
    width: 600px; /* o lo que necesites */
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
}


/* Estilo para el contenedor del modal completo */
.custom-modal .mud-dialog {
    border-radius: 12px !important; /* Asegura redondeo completo */
    overflow: hidden;
}

.swal2-container {
    z-index: 5000 !important; /* cualquier valor mayor al del dialog de Mud (≈1300) */
}
.manual-icon-button {
    border-radius: 12px;
}

/* Capa oscura a pantalla completa, centrada */
.overlay-modal {
    position: fixed;
    inset: 0; /* top/right/bottom/left: 0 */
    background: rgba(0,0,0,.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Evita “saltos” de ancho cuando aparece/desaparece scroll */
    scrollbar-gutter: stable both-edges;
}

/* Contenedor del card con ancho fijo relativo al viewport */
.modal-card-80 {
    width: 60vw; /* 80% del ancho de la ventana */
    max-width: 800px; /* límite opcional en pantallas grandes */
    min-width: 360px; /* límite opcional en pantallas chicas */
    box-sizing: border-box; /* que padding/border no cambien el ancho */
    flex: 0 0 auto; /* que no “crezca/encoga” por el contenido */
}

    /* Si el contenido crece en alto, que haga scroll sin cambiar el ancho */
    .modal-card-80 .mud-card-content {
        max-height: 80vh;
        overflow: auto;
    }

    /* Asegura que los selects ocupen el 100% y no expandan el contenedor */
    .modal-card-80 select.form-select {
        width: 70%;
    }

/* Activa fondo solo cuando el <body> tenga la clase home-bg */

/* El content debe ser el contenedor de posición */
.mud-main-content {
    position: relative;
    min-height: 100vh; /* para cubrir la ventana */
}

/* Capa de fondo pegada al content (no al body) */
#home-bg-layer {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0; /* detrás del contenido real */
    pointer-events: none; /* no bloquea clicks */
}

/* Opcional: envoltura para tu contenido de Home, para que quede por encima */
.home-bg-content {
    position: relative;
    z-index: 1;
    background: transparent;
}