/*Estilo Dark*/
:root {
    --stybody-bg-color: linear-gradient(0deg, #000, #232323);
    --sty-titulo-login-color: #d1d4dc;
    --sty-color-principal-text: #d1d4dc; /* Color global para inputs */
    --sty-color-principal-label: #8a8e96; /* Color global para etiquetas */
    --sty-color-campo-recuadro: rgb(65, 93, 134, 0.47); /*recuadro semitrasparente*/
    --sty-color-campo-recuadro-over: rgb(60, 109, 182, 0.47); /*recuadro semitrasparente over*/
    /*marcadores de color*/
    --sty-marca-color-disable: #393b3d;
    --sty-marca-color-dia-hoy: #1D508F;
    --sty-marca-color-dia-feriado: #545350;
    /*tabla*/
    --sty-table-color-text-link: lightblue;
    --sty-table-tbody-bg-color: #212529;
    --sty-table-tbody-tr-over-color: #32383e;
    --sty-table-head-foot-color: #1f3344;
    --sty-table-border-color: rgb(160 160 160);
    --sty-table-filtro-box-bg-color: #40536c;
    /*menu*/
    --sty-barramnu-bg-color: #101010;
    --sty-barramnu-text-color: #c4c3c3;
    --sty-barramnu-item-over-bg-color: #6d6d6d;
    --sty-barramnu-item-over-text-color: #000;
    --sty-barramnu-item-active-bg-color: #2e2e2e;
    /*contenedores*/
    --sty-barra-princ-bg-color: #0c0c0c;
    --sty-componente-bg-color: #454545;
    --sty-lista-encabezado-bg-color: #1b1b1b;
    --sty-lista-cuerpo-bg-color: #121212;
    --sty-paginacion-icon-bg-color: #676767;
    --sty-alert-card-bg-color: #b48787;
    --sty-alert-card-text-color: #000;
    /*logos*/
    --sty-logo-checkin: url('/CheckInWhite_205x59.png');
    --sty-logo-siseg: url('/LogoSisegWhite.png');
    --sty-icono-checkin: url('/CheckIn.png');
}

body {
    background: var(--stybody-bg-color); /* Degradado entre dos colores (color1 pie, Color2 cabeza) */
    background-attachment: fixed; /* Fija el degradado para que no se repita */
    background-size: cover; /* Asegura que el degradado cubra todo el cuerpo */
    margin: 0;
}

.checkbox-scroll-container {
    max-height: 200px; /* Ajusta esta altura según tus necesidades */
    overflow-y: auto; /* Muestra la barra de desplazamiento vertical solo cuando es necesario */
    padding-right: 15px; /* Opcional: Para evitar que la barra de desplazamiento oculte parte del contenido */
}

.titulo-login {
    color: var(--sty-titulo-login-color);
}

/*estilo menu vertica de navegacion*/
.background-barra-menu {
    color: var(--sty-barramnu-text-color);
    background: var(--sty-barramnu-bg-color);
    font-weight: bold;
}

.barra-menu-logo-checkin {
    display: inline-block;
    width: 100px; /* Ancho deseado */
    height: 34px; /* Mantiene la proporción original */
    background-image: var(--sty-logo-checkin); /* definir si se usa icono claro:CheckInWhite_205x59.png  u oscuro:CheckInBlue_205x59.png */
    background-size: contain; /* Ajusta la imagen al tamaño del contenedor */
    background-repeat: no-repeat;
    background-position: center;
}
.barra-menu-logo-siseg {
    display: inline-block;
    width: 100px; /* Ancho deseado */
    height: 34px; /* Mantiene la proporción original */
    background-image: var(--sty-logo-siseg); /* definir si se usa icono claro:CheckInWhite_205x59.png  u oscuro:CheckInBlue_205x59.png */
    background-size: contain; /* Ajusta la imagen al tamaño del contenedor */
    background-repeat: no-repeat;
    background-position: center;
}
.barra-menu-icono-checkin {
    display: inline-block;
    width: 40px; /* Ancho deseado */
    height: 34px; /* Mantiene la proporción original */
    background-image: var(--sty-icono-checkin); /* definir si se usa icono claro:CheckInWhite_205x59.png  u oscuro:CheckInBlue_205x59.png */
    background-size: contain; /* Ajusta la imagen al tamaño del contenedor */
    background-repeat: no-repeat;
    background-position: center;
}

.menu-item {
    padding: 10px;
    transition: background-color 0.3s;
}

    .menu-item:hover {
        background-color: var(--sty-barramnu-item-over-bg-color); /* Fondo verde claro al pasar el mouse */
        color: var(--sty-barramnu-item-over-text-color); /* Opcional: color del texto al pasar el mouse */
    }

.menu-item-active {
    background-color: var(--sty-barramnu-item-active-bg-color); /* Fondo verde claro para el elemento activo */
    font-weight: bold; /* Opcional: resaltar el texto del elemento activo */
}

.menu-group {
    padding: 10px;
    transition: background-color 0.3s;
}

/*Estilos de objetos*/

.background-filtro-princ {
    background-color: var(--sty-barra-princ-bg-color);
    color: var(--sty-color-principal-text); /* Color del texto para contraste */
    border-radius: 8px;
}

.background-componente {
    background-color: var(--sty-componente-bg-color);
}

.background-lista-encabezado {
    background-color: var(--sty-lista-encabezado-bg-color);
    color: var(--sty-color-principal-text); /* Color del texto para contraste */
    border-radius: 8px;
}

.background-lista-cuerpo {
    background-color: var(--sty-lista-cuerpo-bg-color);
    color: var(--sty-color-principal-text); /* Color del texto para contraste */
    border-radius: 8px;
}

.background-paginacion-icon {
    background-color: var(--sty-paginacion-icon-bg-color); /*color para los iconos de botones de paginacion*/
}

.elert-card {
    background-color: var(--sty-alert-card-bg-color);
    color: var(--sty-alert-card-text-color); /* Color del texto para contraste */
    border-radius: 8px;
}

.filtro-box {
    border-radius: 8px;
    border: 1px solid #2e2e2e;
    background-color: var(--sty-table-filtro-box-bg-color);
    color: var(--sty-color-principal-label);
}

.tbl-style table {
    border-collapse: collapse;
    letter-spacing: 1px;
}
.tbl-style caption{
    caption-side: bottom;
    padding: 10px;
}
.tbl-style th, td {
    border: 1px solid var(--sty-table-border-color);
    padding: 5px 5px;
    text-align: left;
    color: var(--sty-color-principal-text);
}
.tbl-style tbody {
    background-color: var(--sty-table-tbody-bg-color);
}
    .tbl-style tbody tr:hover th,
    .tbl-style tbody tr:hover td {
        background-color: var(--sty-table-tbody-tr-over-color) !important; /* Color de fondo en hover */
    }
.tbl-style thead, tfoot {
    background-color: var(--sty-table-head-foot-color) !important;
}
    .tbl-style thead th,
    .tbl-style thead td {
        text-align: center;
    }

.form-campo-sl {
        color: var(--sty-color-principal-text); /* Color de texto */
        font-size: 1.2em;
    }
.form-label-sl {
    color: var(--sty-color-principal-label); /* Color de texto */
    font-size: .875rem;
}

.form-campo-edit {
    color: var(--sty-color-principal-text) !important; /* Color de texto */ 
    background-color: var(--sty-color-campo-recuadro);
    border-bottom: 1px solid #ccc;
    padding-bottom: 8px;
}

    .form-campo-edit:hover {
        background-color: var(--sty-color-campo-recuadro-over); /*fondo para resaltar el campo editable*/
    }

.div.mud-input-slot.mud-input-root {
    color: var(--sty-color-principal-label) !important;
}
.mud-input {
    color: var(--sty-color-principal-text) !important;
}
.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: var(--sty-color-principal-label);
}
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    color: var(--sty-color-principal-label);
}
.mud-input-helper-text {
    color: var(--sty-color-principal-label) !important;
}
.mud-input.mud-input-filled {
    background-color: var(--sty-color-campo-recuadro); /*se anula la propiedad original*/
}
.mud-input.mud-input-filled:hover {
    background-color: var(--sty-color-campo-recuadro-over); /*se anula la propiedad original*/
}
/*Estilos de formas*/
.foto-documento-left {
    float: left; /* Alinea la imagen a la derecha */
    margin-right: 15px; /* Añade espacio entre la imagen y el texto */
}
.foto-documento,
.foto-documento-left {
    cursor: zoom-in; /* Cambia el cursor para indicar ampliación */
    transition: transform 0.2s ease-in-out;
    width: auto; /* Se adapta al ancho del contenedor */
    max-width: 100px; /* Define un tamaño máximo, ajustable */
    height: auto; /* Mantiene la proporción original */
    border-radius: 5px; /* Para bordes ligeramente redondeados, opcional */
}
    .foto-documento:hover,
    .foto-documento-left:hover {
        transform: scale(2.02); /* Efecto de leve ampliación */
    }

    .foto-documento::after,
    .foto-documento-left::after {
        content: '\1F50D'; /* Código Unicode para una lupa */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 2em; /* Tamaño ajustable */
        color: rgba(255, 255, 255, 0.7); /* Color de la lupa */
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        pointer-events: none;
    }

    .foto-documento:hover::after,
    .foto-documento-left:hover::after {
        opacity: 1;
    }

    @media (min-width: 768px) {
        .foto-documento {
            max-width: 50px; /* Tamaño menor en pantallas más grandes */
        }
    }

    .table-auto {
    table-layout: auto;
    width: 100%;
}

    .table-auto th, .table-auto td {
        white-space: nowrap;
    }

/*estilo para Ventana modal*/
.modal {
    display: none;
    position: fixed;
    z-index: 1500;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    object-fit: contain; /* Mantiene las proporciones */
    
}

.cerrar {
    position: fixed; /* Usa fixed para que siempre esté visible */
    top: 20px;
    right: 30px;
    color: #ffffff;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1501; /* Asegura que esté por encima del modal */
}

    .cerrar:hover,
    .cerrar:focus {
        color: #bbbbbb;
        text-decoration: none;
    }