/* ESTILOS GENERALES PARA MATERIALES */

/***** Ajuste del contenido de Ciclos Materiales ******/
#ciclo {
    width: auto;
    min-width: 150px;
    /* O puedes poner un valor mínimo si lo deseas */
    padding: 0.375rem 0.75rem;
    /* Estilo de padding de Bootstrap, ajustable */
    font-size: 14px;
    /* Ajusta el tamaño de la fuente según lo desees */
}


/* Ajuste del contenido de Linea Materiales */

#fuerza {
    width: auto;
    min-width: 150px;
    /* Ancho mínimo ajustable según lo necesites */
    padding: 0.375rem 0.75rem;
    /* Padding de Bootstrap, ajustable */
    font-size: 14px;
    /* Ajuste de tamaño de la fuente */
}

/* Ajustar el tamaño del contenido de Productos Materiales */
#producto {
    width: auto;
    min-width: 164px;
    /* Ancho mínimo ajustable según lo necesites */
    padding: 0.375rem 0.75rem;
    /* Padding de Bootstrap, ajustable */
    font-size: 14px;
    /* Ajuste de tamaño de la fuente */
}



/* Ajusta el contenido de Cantidad Asignada  */
#darwin {
    width: 160px;
    /* Ajusta el ancho */
    height: 35px;
    /* Ajusta la altura */
    font-size: 14px;
    /* Ajusta el tamaño de letra */
    padding: 5px;
    /* Agrega un poco de espacio interno */
}

#quintil {
    width: 160px;
    /* Ajusta el ancho */
    height: 35px;
    /* Ajusta la altura */
    font-size: 14px;
    /* Ajusta el tamaño de letra */
    padding: 5px;
    /* Agrega un poco de espacio interno */
}


#especialidades {
    width: 160px;
    /* Ajusta el ancho */
    height: 35px;
    /* Ajusta la altura */
    font-size: 14px;
    /* Ajusta el tamaño de letra */
    padding: 5px;
    /* Agrega un poco de espacio interno */
}

#quintilesdos {
    width: 160px;
    /* Ajusta el ancho */
    height: 35px;
    /* Ajusta la altura */
    font-size: 14px;
    /* Ajusta el tamaño de letra */
    padding: 5px;
    /* Agrega un poco de espacio interno */
}

/*aqui Finaliza la primera parte...y Continua con el select */

.fixed-section select {
    width: 120%;
    /* Ajusta el ancho de todos los select */
    height: 35px;
    /* Ajusta la altura para que sean uniformes , Aqui termina la segunda parte  */
}





/****** Tabla de Materiales *****/

/* Reducir tamaño de los títulos */
#tabla-materiales th {
    font-size: 12px;
    /* Tamaño de fuente pequeño */
    padding: 4px 6px;
    /* Reducir el padding (arriba/abajo, izquierda/derecha) */
    background-color: #0077eed3;
    /* Color de fondo azul (puedes cambiarlo) */
    color: #f7f7f7;
    /* Color de texto blanco para contraste */

}

/* Ajustar celdas del cuerpo para que sean compactas */
#tabla-materiales td {
    font-size: 12px;
    /* Tamaño consistente con los títulos */
    padding: 4px 6px;

}

/* Alinear "Producto" a la izquierda sin salto de línea */
#tabla-materiales th:nth-child(3),
#tabla-materiales td:nth-child(3) {
    text-align: left;
    white-space: nowrap;
}

/* Mejorar responsividad */
.table-responsive {
    max-height: 500px;
    /* Altura máxima opcional para desplazamiento vertical */
    overflow-y: auto;
    /* Desplazamiento vertical si hay muchas filas */
}


/* Opcional: Ocultar columnas menos importantes en pantallas pequeñas */
@media (max-width: 768px) {

    #tabla-materiales th:nth-child(n+12),
    #tabla-materiales td:nth-child(n+12) {
        display: none;
        /* Oculta columnas desde la 12 en adelante en pantallas pequeñas */
    }
}


/****** Tabla Materiales Select checkbox *****/
.selected-row {
    background-color: #7beb95 !important;
    color: #020202;
    font-weight: bold;

}

.deselected {
    background-color: #ffffff;
    /* Blanco o color por defecto */

}

.fila-deshabilitada {
    background-color: #c9c9ca;
    /* Gris claro */
    opacity: 0.6;
}





/****** Resto del diseño anterior *****/

#productividadTable {
    font-size: 1.5rem;
    height: min-content;
    border: 1px solid grey
}

#productividadTable,
table {
    gap: 0;
    font-size: 1.5rem;
}


/* Estilo para el contenedor principal de las tablas */
.tablas-container {
    color: black;
    object-position: 600% 50%;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-left: 40px;
    margin-right: 40px;
    padding-block: 5% 10%;
    writing-mode: horizontal-tb;
}

.tablas-container::-webkit-scrollbar {
    width: 12px;
    /* Ancho del scrollbar */
    background-color: white;
    /* Color de fondo del scrollbar */
}

/* Estilo del thumb del scrollbar */
.tablas-container::-webkit-scrollbar-thumb {
    background-color: #e7e7e7;
    /* Color del thumb */
}

.tablas-container::-webkit-scrollbar-thumb:hover {
    background-color: #e7e7e7;
    /* Color del thumb al pasar el mouse por encima */
}

/* Estilo para cada contenedor de tabla */
.tabla-container {
    color: black;
    border-radius: 10px;
    min-width: 180px;
    /* espacion entre tablas parrilla dinamica */
    padding: 10px;
    margin: 10px 0;
}

/* EStilo de Parrillas  fija,com,NA,Sem*/
.mi-tabla-estilo {
    border-radius: 10px;
    background-color: white;
    /* Aprovechar todo el espacio disponible en el contenedor */
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 14px;
    /* Tamaño de fuente para la tabla */
    white-space: nowrap;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Agregar sombra */

}

.mi-tabla-estilo th {
    text-align: center;

}

.mi-tabla-estilo th,
.mi-tabla-estilo td {
    border-radius: 10px solid grey;
    padding: 6px;
    /* Espaciado interno más compacto */
    font-size: 11px;
    /* Tamaño de fuente para celdas de encabezado y contenido */
}

.mi-tabla-estilo td:nth-child(1) {
    text-align: left;
}

/* Estilo para la segunda columna (centrado) */
.mi-tabla-estilo td:nth-child(2) {
    text-align: center;
}

.mi-tabla-estilo td:last-child {
    text-align: center;
}

/* Estilos para hacer la vista responsiva */
@media (max-width: 800px) {
    .tabla-container {
        max-width: 100%;
        /* Ocupar todo el ancho en dispositivos móviles */
        margin-bottom: 10px;
        /* Agregar espacio inferior entre las tablas */
    }
}

/* tablas de las parrillas */
.tablas-container {
    display: flex;
    gap: 20px;
    /* Espacio horizontal entre las tablas */
    margin-top: 20px;
    /* Espacio superior */
    justify-content: flex-start;
    /* Alineación a la izquierda */
}

/* Tablas fija, com, fija NA, sem link Resultados */
#resultadosContainer_fija,
#resultadosContainer_com,
#resultadosContainer_na,
#resultadosContainer_sem {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    overflow-x: auto;
    white-space: nowrap;
    scroll-behavior: smooth;
    row-gap: 0;

    /* Añadir espacio entre las tablas */
    border-radius: 5px;

    /* Añadir relleno interno */
}

#resultadosContainer_fija table,
#resultadosContainer_com table,
#resultadosContainer_na table,
#resultadosContainer_sem table {
    table-layout: auto;
    /* Ajuste automático del ancho de la tabla */
    height: min-content;
    white-space: nowrap;
    background-color: white;
    color: black;
    margin: 10px;
    /* Añadir un margen para separación */
    border-radius: 10px;
    display: inline-block;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Añadir sombra */
    transition: transform 0.3s, box-shadow 0.3s;
    /* Transición para hover */
    overflow: hidden;
    /* Evitar desbordamiento */
    border-collapse: collapse;
}

#resultadosContainer_fija table:hover,
#resultadosContainer_com table:hover,
#resultadosContainer_na table:hover,
#resultadosContainer_sem table:hover {
    transform: scale(1.05);
    /* Efecto de escala al hacer hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    /* Sombra más profunda al hacer hover */
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 12px;
    /* Tamaño de fuente para la tabla */
    white-space: nowrap;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#resultadosContainer_fija th,
#resultadosContainer_com th,
#resultadosContainer_na th,
#resultadosContainer_sem th {
    background-color: #f2f2f2;
    text-align: center;


}

#resultadosContainer_fija td,
#resultadosContainer_com td,
#resultadosContainer_na td,
#resultadosContainer_sem td {
    text-align: center;
    padding: 2px;
    /* espacio entre celdas */

}

#resultadosContainer_fija th,
#resultadosContainer_com th,
#resultadosContainer_na th,
#resultadosContainer_sem th,
#resultadosContainer_fija td,
#resultadosContainer_com td,
#resultadosContainer_na td,
#resultadosContainer_sem td {
    font-size: 12px;

}

#resultadosContainer_fija td:nth-child(1),
#resultadosContainer_com td:nth-child(1),
#resultadosContainer_na td:nth-child(1),
#resultadosContainer_sem td:nth-child(1) {
    text-align: center;
}

#resultadosContainer_fija td:nth-child(2),
#resultadosContainer_com td:nth-child(2),
#resultadosContainer_na td:nth-child(2),
#resultadosContainer_sem td:nth-child(2) {
    text-align: center;
}

.titulo-contenedor {
    display: flex;
    justify-content: left;
    /* Alinea el contenido al final del contenedor */
    padding: 20px;
    /* Añade un poco de espacio a la derecha si es necesario */
}

.titulo {
    margin: 0;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    background-color: #f2f2f2;
    border-radius: 5px;
    display: inline-block;
    margin-right: 10px;
    /* Puedes ajustar el valor de margen según sea necesario */
    display: none;
    /* Oculta todos los elementos con la clase "titulo" */
}



.spinner-border {
    display: none;
}

/* Estilo inicial de la barra de progreso */
.progress-bar {
    background-color: grey;
    /* Color de fondo inicial de la barra */
    color: #2778c4;
    /* Color del texto en la barra (opcional) */
    transition: width 0.3s;
    /* Animación de transición de la anchura de la barra */
}

.table {
    font-size: 12px;
}

/* ###---Estilo para la tabla  ACTUAL Contenedor---### */
#tablaActual {
    color: black;
    background-color: white;
    border-collapse: collapse;
    /* Colapsar bordes de celda */
    width: 5px;
    /* Ancho automático basado en el contenido */
    margin: 10px 0;
    /* Margen superior e inferior para separar la tabla */
    /* tamaño del contenedor tabla de resultados */
    font-size: 16px;
    white-space: nowrap;
    /* Evita el salto de línea */

}

/* Estilo para las celdas de la tabla */
#tablaActual th,
#tablaActual td {
    border: 1px solid #ddd;
    /* Borde de 1 píxel con color gris */
    padding: 5px;
    /* Espacio interno para el contenido */
    font-size: 16px;

}

/* Estilo para la fila de encabezado */
#tablaActual th {
    background-color: #A5D6A7;
    /* Color de fondo gris claro */
}

/* Estilo para la fila "Valores únicos de TOTAL_DARWIN" */
#tablaActual tr:last-child {
    background-color: #A5D6A7;
    /* Color de fondo gris claro */
}

/* Estilo para la tabla  CICLO ANTERIOR*/
#tablaCicloanterior {

    border-collapse: collapse;
    /* Colapsar bordes de celda */
    width: auto;
    /* Ancho automático basado en el contenido */
    margin: 10px;
    /* Margen superior e inferior para separar la tabla */
}

/* Estilo para las celdas de la tabla */
#tablaCicloanterior th,
#tablaCicloanterior td {
    border: 1px solid #ddd;
    /* Borde de 1 píxel con color gris */
    padding: 8px;
    /* Espacio interno para el contenido */

}

/* Estilo para la fila de encabezado */
#tablaCicloanterior th {
    background-color: #f2f2f2;
    /* Color de fondo gris claro */
}

/* Estilo para la fila "Valores únicos de TOTAL_DARWIN" */
#tablaCicloanterior tr:last-child {
    background-color: #f2f2f2;
    /* Color de fondo gris claro */
}

/* ###########   */
/* Estilo para la tabla DIFERENCIA  */
#tablaDiferencia {
    color: black;
    background-color: white;
    border-collapse: collapse;
    /* Colapsar bordes de celda */
    width: 5px;
    /* Ancho automático basado en el contenido */
    margin: 10px 0;
    /* Margen superior e inferior para separar la tabla */
    /* tamaño del contenedor tabla de resultados */
    font-size: 16px;
    white-space: nowrap;
    /* Evita el salto de línea */
}

/* Estilo para las celdas de la tabla */
#tablaDiferencia th,
#tablaDiferencia td {
    background-color: white;
    border: 1px solid #ddd;
    /* Borde de 1 píxel con color gris */
    padding: 5px;
    /* Espacio interno para el contenido */
    font-size: 16px;

}

/* Estilo para la fila de encabezado */
#tablaDiferencia th {
    background-color: #74e2e2ee;
    /* Color de fondo gris claro */
}

/* Estilo para la fila "Valores únicos de TOTAL_DARWIN" */
#tablaDiferencia tr:last-child {
    background-color: #74e2e2ee;
    /* Color de fondo gris claro */
}

/* OCULTA LA TABLA ACTUAL */
.ocultar-tabla {
    display: none;
}

.dropdown-container {
    display: inline-block;
    margin-right: 10px;
    /* Ajusta el valor del margen según tus preferencias */
}






/* Agrega este estilo a tu CSS para dar estilo a la ventana emergente */
.ventana-emergente {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.contenido-ventana {
    background-color: white;
    padding: 20px;
    width: 60%;
    /* Ajusta el ancho del contenido según tus preferencias */
    max-width: 450px;
    /* Ajusta el ancho máximo según tus preferencias */
    border-radius: 8px;
    position: relative;
}

.cerrar-ventana {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}

.table td,
.table th {
    text-align: center;
}

/* ###---Estilo para la tabla  ACTUAL Contenedor---### */
#tablaContactos {
    color: black;
    background-color: white;
    border-collapse: collapse;
    /* Colapsar bordes de celda */
    width: 5px;
    /* Ancho automático basado en el contenido */
    margin: 10px 0;
    /* Margen superior e inferior para separar la tabla */
    /* tamaño del contenedor tabla de resultados */
    font-size: 16px;
    white-space: nowrap;
    /* Evita el salto de línea */

}

/* Estilo para las celdas de la tabla */
#tablaContactos th,
#tablaContactos td {
    border: 1px solid #ddd;
    /* Borde de 1 píxel con color gris */
    padding: 5px;
    /* Espacio interno para el contenido */
    font-size: 16px;

}

/* Estilo para la fila de encabezado */
#tablaContactos th {
    background-color: #A5D6A7;
    /* Color de fondo gris claro */
}

.thead-gris {
    background-color: #f2f2f2;
    /* Cambia el color de fondo a un gris claro */
}

#especialidad option[disabled] {
    color: gray;
    font-style: italic;
}

.form-label {
    display: block;
    margin-bottom: 10px;
    /* Puedes ajustar el valor según sea necesario */
}

/*columnas de materiales*/
#columna1 {
    border: 4px solid #D6EAF8;
    border-radius: 10px;

}

.titulo-columna {

    text-align: center;
    position: relative;
    top: 5px;
    color: #57738a;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#columna2 {
    border-top: 4px solid #D6EAF8;
    border-bottom: 4px solid #D6EAF8;
    border-radius: 10px;
    border-right: none;

}

#columna2 .fixed-section {
    border-bottom: none;
}

#columna2 form {
    border-top: none;
}

.titulo-columna2 {
    text-align: right;
    position: relative;
    top: 5px;
    color: #57738a;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

#columna3 {
    border: 4px solid #D6EAF8;
    border-radius: 10px;
}

.titulo-columna3 {
    text-align: center;
    position: relative;
    top: 5px;
    color: #57738a;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

#columna4 {
    border: 4px solid #D6EAF8;
    border-radius: 10px;
    height: 50px;
    position: relative;
    top: -69px;
    width: 98.5%;
}




/*stock material pestaña de Contactos*/

.container-fluid {
    padding-left: 20px;
    padding-right: 20px;
}

.table-wrapper {
    max-height: 750px;

    /* Ajusta la altura máxima según sea necesario */
    overflow-y: scroll;
    /* Habilita el desplazamiento vertical */
    scroll-behavior: auto;

}

#resultado {
    width: 100%;
    table-layout: fixed;
}

#resultado thead,
#resultado tbody {
    display: table;
    width: 100%;
    table-layout: fixed;
    /* Asegura que las columnas tengan un ancho fijo */
}

#resultado th,
#resultado td {
    text-align-last: center;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
    /* Alinea verticalmente al centro */
}

#resultado th {
    text-align: left;

}

#resultado tbody td {
    padding: 8px;
}

#resultado td {
    padding: 8px;
    white-space: normal;
    /* Permite que el texto se ajuste a varias líneas */
    vertical-align: top;
    /* Alinea el texto al inicio de la celda */
}

#resultado th,
#resultado td {
    text-align-last: center;
    /* Centra el texto, ajusta si prefieres alinear a la izquierda o derecha */
    vertical-align: middle;
    /* Alinea verticalmente al centro, cambia a 'top' si prefieres alinear al inicio */
}

#resultado thead th:nth-child(1),
#resultado tbody td:nth-child(1) {
    width: 30%;
}

#resultado thead th:nth-child(2),
#resultado tbody td:nth-child(2) {
    width: 55%;

}

#resultado thead th:nth-child(3),
#resultado tbody td:nth-child(3) {
    width: 15%;
}

#resultado thead th:nth-child(4),
#resultado tbody td:nth-child(4) {
    width: 20%;
}

.btn-custom {
    min-width: 120px;
    /* Ajusta este valor según el tamaño del botón "Andrómeda" */
    white-space: nowrap;
}



/* USUARIOS */

#usuarios {
    width: 90%;
    /* Reduje el ancho del 100% al 80% para hacerla más chica */
    border-collapse: collapse;
    margin: 20px auto;
    /* Centré la tabla y mantuve el margen */
    font-family: Arial, sans-serif;
}

#usuarios th {
    padding: 10px 12px;
    /* Reduje un poco el padding */
    text-align: left;
    border-bottom: 1px solid #ddd;
    background-color: #79daf8;
    color: white;
    font-weight: bold;
    font-size: 14px;
    /* Tamaño de fuente 14px para títulos */
}

#usuarios td {
    padding: 8px 12px;
    /* Reduje el padding vertical */
    text-align: left;
    border-bottom: 1px solid #ddd;
    font-size: 12px;
    /* Tamaño de fuente 12px para el texto */
}

#usuarios tr:nth-child(even) {
    background-color: #f2f2f2;
}

#usuarios tr:hover {
    background-color: #ddd;
}

#usuarios tbody tr {
    transition: background-color 0.3s;
}

/* 🎨 Personaliza el Select2 */
.select2-container--default .select2-selection--multiple {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    min-height: 10px;
    padding: 3px;
    transition: all 0.2s ease-in-out;
}

.select2-container--default .select2-selection--multiple:focus,
.select2-container--default .select2-selection--multiple:hover {
    border-color: #1bad82;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

/* 🏷️ Etiquetas de opciones seleccionadas */
.select2-selection__choice {
    background-color: #3DD974 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 3px 6px !important;
    margin-top: 3px !important;
}

.select2-selection__choice__remove {
    color: white !important;
    margin-right: 3px;
}

/* 🔽 Flecha del dropdown */
.select2-selection__arrow {
    height: 36px !important;
}