html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.container-fluid {
    padding-right: 0;
    padding-left: 0;
}

.custom-content {
    margin-left: 0;
    margin-right: 0;
}

/********************* Agrega lo que es un margen a la tabla *************************/
.table-wrapper {
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
    padding-left: 50px; /* Margen interno izquierdo */
    padding-right: 50px; /* Margen interno derecho */
    box-sizing: border-box; /* Incluye el padding en el cálculo del ancho */
}

/********************* Agrega lo que es un margen a la vista de Guardar *************************/

.titulo-vistaGuardar {
    padding-top: 0; /* Espacio en la parte superior */
    padding-left: 100px; /* Espacio en el lateral izquierdo */
    margin-top: 15px;
    /*margin-top: 160px;*/
}

.cuerpo-vistaGuardar {
    padding-left: 100px;
    padding-right: 100px;
}

    .cuerpo-vistaGuardar input,
    .cuerpo-vistaGuardar select,
    .cuerpo-vistaGuardar textarea,
    .cuerpo-vistaGuardar button,
    .cuerpo-vistaGuardar table,
    .cuerpo-vistaGuardar a {
        margin-bottom: 10px; /* Espacio entre los campos */
    }

/* Se le asigno un estilo especifico a select2 para los campos del formulario */
.select2-container {
    /*margin-bottom: 10px !important;*/
}

/************************ BTOTNOES DEL MISMO TAMAÑO EN LA VISTA *************************/
/* Contenedor flexible y centrado para la columna de acciones */
.acciones-tabla {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px; /* Espaciado uniforme entre botones */
    flex-wrap: nowrap;
}

/* Estilo estandarizado para CUALQUIER botón dentro de la tabla */
.btn-tabla {
    min-width: 80px; /* Garantiza que todos tengan exactamente el mismo ancho */
    height: 32px; /* Altura fija idéntica */
    padding: 0 10px !important;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 32px; /* Centrado vertical del texto */
    text-align: center;
    white-space: nowrap;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/****************************** Header & Focus General **************************************/

.header-superior {
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    font-size: 21px;
    width: 100%;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.header-menu {
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    z-index: 10;
}

.form {
    z-index: 1;
}

main {
    padding-top: 56px;
}

/* Enfoque accesible y limpio */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.15rem #ffffff, 0 0 0 0.25rem #258cfb;
    outline: none;
}

/****************************** Estándar General de Botones **************************************/

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    transition: all 0.2s ease-in-out;
    text-decoration: none !important;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

.btn-lg {
    padding: 0.65rem 1.25rem;
    font-size: 1.1rem;
    border-radius: 0.4rem;
}

/****************************** Sistema de Colores Semánticos **************************************/

/* 1. Aprobar / Timbrar (Verde Primario) */
.btn-aprobar,
.btn-timbrar {
    background-color: #28a745;
    border-color: #28a745;
    color: #ffffff;
    padding: 4px 10px;
}

    .btn-aprobar:hover,
    .btn-timbrar:hover {
        background-color: #218838;
        border-color: #1e7e34;
        color: #ffffff;
    }

/* 2. Guardar (Verde Oscuro) */
.btn-guardar {
    background-color: #218838;
    border-color: #218838;
    color: #ffffff;
    padding: 4px 10px;
}

    .btn-guardar:hover {
        background-color: #19692c;
        border-color: #145523;
        color: #ffffff;
    }

/* 3. Activo (Verde Suave) */
.btn-activo {
    background-color: #6bcf72;
    border-color: #5ac167;
    color: #ffffff;
    padding: 4px 10px;
}

    .btn-activo:hover {
        background-color: #57b862;
        border-color: #4ca355;
        color: #ffffff;
    }

/* Estilo para los botones de Agendar */
.btn-agendar {
    background-color: #0d9488;
    border-color: #0d9488;
    color: #ffffff;
    padding: 4px 10px;
}

    .btn-agendar:hover {
        background-color: #0f766e;
        border-color: #115e59;
        color: #ffffff;
    }

/* 4. Otros (Verde Azulado) */
.btn-otros {
    background-color: #20c997;
    border-color: #20c997;
    color: #ffffff;
    padding: 4px 10px;
}

    .btn-otros:hover {
        background-color: #1aa179;
        border-color: #168a67;
        color: #ffffff;
    }

/* 5. Crear Nuevo (Azul Primario Vibrante) */
.btn-crear {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #ffffff;
    padding: 5px 12px;
}

    .btn-crear:hover {
        background-color: #0b5ed7;
        border-color: #0a58ca;
        color: #ffffff;
    }

/* 6. Detalles / Secundario (Azul Oscuro) */
.btn-detalles,
.btn-secondary {
    background-color: #007bff;
    border-color: #007bff;
    color: #ffffff;
    padding: 4px 10px;
}

    .btn-detalles:hover,
    .btn-secondary:hover {
        background-color: #0056b3;
        border-color: #004085;
        color: #ffffff;
    }

/* 7. Regresar (Azul Marino) */
.btn-regresar {
    background-color: #4b5563;
    border-color: #4b5563;
    color: #ffffff;
    padding: 4px 10px;
}

    .btn-regresar:hover {
        background-color: #374151;
        border-color: #1f2937;
        color: #ffffff;
    }

.btn-regresar-view {
    padding-left: 100px;
}

/* 8. Editar (Naranja) */
.btn-edit,
.btn-warning {
    background-color: #fd7e14;
    border-color: #fd7e14;
    color: #ffffff;
    padding: 4px 10px;
}

    .btn-edit:hover,
    .btn-warning:hover {
        background-color: #e66900;
        border-color: #cc5d00;
        color: #ffffff;
    }

/* 9. Eliminar / Cancelar (Rojo) */
.btn-danger,
.btn-cancelar {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #ffffff;
    padding: 4px 10px;
}

    .btn-danger:hover,
    .btn-cancelar:hover {
        background-color: #c82333;
        border-color: #bd2130;
        color: #ffffff;
    }

/* 10. Rechazar (Rojo Oscuro) */
.btn-rechazar {
    background-color: #c82333;
    border-color: #c82333;
    color: #ffffff;
    padding: 4px 10px;
}

    .btn-rechazar:hover {
        background-color: #a71d2a;
        border-color: #8b1823;
        color: #ffffff;
    }

/* 11. Subir Archivos (Morado Claro) */
.btn-subir {
    background-color: #6f42c1;
    border-color: #6f42c1;
    color: #ffffff;
    padding: 4px 10px;
}

    .btn-subir:hover {
        background-color: #563d7c;
        border-color: #473266;
        color: #ffffff;
    }

/* 12. Enviar (Amarillo Calido con Texto Oscuro) */
.btn-enviar {
    background-color: #d97706;
    border-color: #d97706;
    color: #ffffff;
    padding: 4px 10px;
}

    .btn-enviar:hover {
        background-color: #b45309;
        border-color: #92400e;
        color: #ffffff;
    }

/* 13. Timbrado Especial (Dorado) */
.btn-timbrado {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
    padding: 4px 10px;
    font-weight: 600;
}

    .btn-timbrado:hover {
        background-color: #e0a800;
        border-color: #d39e00;
        color: #212529;
    }

/* 14. Instalados (Gris Carbón / Azul Oscuro) */
.btn-instalar {
    background-color: #4f46e5;
    border-color: #4f46e5;
    color: #ffffff;
    padding: 4px 10px;
}

    .btn-instalar:hover {
        background-color: #4338ca;
        border-color: #3730a3;
        color: #ffffff;
    }

/* 15. Buscar (Gris Oscuro) */
.btn-buscar {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #ffffff;
    padding: 4px 10px;
    height: 40px;
}

    .btn-buscar:hover {
        background-color: #5a6268;
        border-color: #545b62;
        color: #ffffff;
    }

/* 16. Mostrar (Gris Oscuro Moderno) */
.btn-mostrar {
    background-color: #495057;
    border-color: #495057;
    color: #ffffff;
    padding: 4px 10px;
}

    .btn-mostrar:hover {
        background-color: #343a40;
        border-color: #212529;
        color: #ffffff;
    }

/* 17. Seleccionar Archivos (Gris Medio con Texto Oscuro) */
.file-botonSeleccionar {
    background-color: #adb5bd;
    border-color: #adb5bd;
    color: #212529;
    padding: 4px 10px;
    font-weight: 500;
}

    .file-botonSeleccionar:hover {
        background-color: #9a9ea3;
        border-color: #898d92;
        color: #212529;
    }

/* 18. Inactivo (Gris Claro con Texto Oscuro) */
.btn-inactivo {
    background-color: #d6d8db;
    border-color: #c6c9cd;
    color: #212529;
    padding: 4px 10px;
}

    .btn-inactivo:hover {
        background-color: #c4c7cc;
        border-color: #b3b7bc;
        color: #212529;
    }

/* Sustitución de Pagos (Teal / Agamarina) */
.btn-sustitucion {
    background-color: #0f766e;
    border-color: #0f766e;
    color: #ffffff;
    padding: 4px 10px;
}

    .btn-sustitucion:hover {
        background-color: #115e59;
        border-color: #134e4a;
        color: #ffffff;
    }

/****************************** Contenedor de Acciones en Tablas **************************************/

.acciones-tabla {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
}

    .acciones-tabla .btn-tabla {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        text-align: center;
    }




/************************* LA SELECCION DE BOTONES SE MANTIENEN EN VERTAL CUANDO SON VARIAS OPCIONES **************************************/
/* Contenedor genérico vertical */
.filtros-vertical {
    display: flex;
    flex-direction: column;
    width: 140px;
    margin: 0;
    padding: 0;
}

/* Estilo base genérico ajustado al tamaño de .btn-guardar */
.btn-vertical {
    width: 100%;
    height: auto;
    border: 1px solid #6c757d;
    background-color: #f8f9fa;
    color: #212529;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    padding: 2px 8px;
    line-height: 1.2;
    transition: all 0.3s ease;
    border-radius: 0; /* predeterminado: todos cuadrados */
    border-top: none; /* para unir botones verticalmente */
}

    /* Primer botón: esquinas superiores redondeadas */
    .btn-vertical:first-child {
        border-radius: 6px 6px 0 0;
        border-top: 1px solid #6c757d; /* restaurar borde superior */
    }

    /* Botón del medio (no primero ni último): esquinas completamente cuadradas */
    .btn-vertical:not(:first-child):not(:last-child) {
        border-radius: 0;
    }

    /* Último botón: esquinas inferiores redondeadas */
    .btn-vertical:last-child {
        border-radius: 0 0 6px 6px;
    }

/* Estado activo */
.btn-activo {
    background-color: #007bff;
    color: white;
    border-color: #0069d9;
}

    .btn-activo:hover {
        background-color: #0069d9;
    }

/* Estado inactivo */
.btn-inactivo {
    background-color: #e9ecef;
    color: #495057;
}

    .btn-inactivo:hover {
        background-color: #dee2e6;
    }

/* Generar (Morado Vibrante / Procesamiento) */
.btn-generar {
    background-color: #7c3aed;
    border-color: #7c3aed;
    color: #ffffff;
    padding: 4px 10px;
}

    .btn-generar:hover {
        background-color: #6d28d9;
        border-color: #5b21b6;
        color: #ffffff;
    }

/* Validar (Ámbar / Naranja Cálido de Verificación) */
.btn-validar {
    background-color: #d97706;
    border-color: #d97706;
    color: #ffffff;
    padding: 4px 10px;
}

    .btn-validar:hover {
        background-color: #b45309;
        border-color: #92400e;
        color: #ffffff;
    }

/**********************************************************************************************************/

/******************************* Estilo general para los botones de descarga (XML, PDF ) *******************************/
.btn-descarga {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

    /* Efecto al pasar el mouse */
    .btn-descarga:hover {
        transform: scale(1.1);
        opacity: 0.85;
    }

    /* Asegura que las imágenes se ajusten correctamente */
    .btn-descarga img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }


/**************************************************************************************************************/


/* Estilos para grupo de botones que se encuentran dentro de un div */

.contenedor-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

    .contenedor-botones .btn-group .btn {
        margin-bottom: 0; /* evita que haya separación extra */
    }

.grupo-botones {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-start;
}

.fondo-div {
    background-color: #f2f2f2;
    border-radius: 6px;
    border: 1px solid #cccccc;
    padding: 10px 15px;
    display: flex;
    flex-direction: row; /* <-- cambia a row */
    align-items: center;
    gap: 12px;
    flex-wrap: wrap; /* permite que los botones hagan wrap */
    width: fit-content; /* <-- ajusta ancho al contenido */
    max-width: 100%; /* para evitar desbordamiento en pantallas pequeñas */
    margin-bottom: 25px;
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

label {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.7);
}


/*** Estilos para mantener en una sola fila los botones en el apartado de guardar e editar ***/
.botones-fila {
    display: flex; /* Habilita el layout flexbox */
    gap: 20px; /* Espacio entre los botones */
    justify-content: flex-end; /* Alinea los botones a la izquierda */
    align-items: center; /* Asegura que los botones estén alineados verticalmente */
    margin-top: 20px; /* Ajusta según sea necesario */
}

/*********************************/

/*******  Estilo al momento de subir un archivo en Excel  *******/
.custom-file-seleccionar {
    display: flex;
    align-items: center;
}

/* Estilo para el botón de archivo */
.file-botonSeleccionar {
    background-color: #adb5bd; /* Color personalizado */
    color: #212529; /* Color del texto */
    padding: 5px 15px; /* Espaciado interno */
    cursor: pointer;
    border-radius: 2px; /* Bordes redondeados */
    font-size: 14px; /* Tamaño del texto */
    text-align: center;
    line-height: 1.5;
    transition: background-color 0.3s ease;
}

    .file-botonSeleccionar:hover {
        background-color: #9a9ea3; /* Color en hover */
    }

/* Ocultar el input file nativo */
.file-inputSelect {
    display: none;
}

/* Estilo para el texto del archivo con fondo gris */
.file-nombreSeleccion {
    font-size: 14px;
    color: #888; /* Color inicial del texto */
    font-style: italic;
    background-color: #f0f0f0; /* Fondo gris claro */
    padding: 5px 10px; /* Espaciado interno */
    border-radius: 2px; /* Bordes redondeados */
    border: 1px solid #ddd; /* Borde sutil */
    min-width: 150px; /* Ancho mínimo para consistencia */
    text-align: center; /* Centrar el texto */
}

    .file-nombreSeleccion.selected {
        color: #333; /* Cambiar el color del texto cuando se selecciona un archivo */
        font-style: normal;
    }

/********************/


/******************************* Estilo para el buscador *************************************/

.style-buscador {
    display: flex;
    align-items: center;
}

.style-buscador-cobros {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Buscador con taño fijo */
.style-inputBusqueda {
    width: 250px;
    margin-right: 10px;
    height: 36px;
}

/* Buscar responsive */
.style-inputBusquedaResponsive {
    width: auto; /* Elimina el 100% para que no ocupe todo el espacio */
    max-width: 250px; /* Limita el ancho */
    margin-right: 10px;
    height: 36px;
    box-sizing: border-box;
}

/******************************* Resposividad de campos cortos *****************************************/



/***************************************************************************/
html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: #f8f8f8;
}

/******************************  Centrado de portada en home  *********************************/
.centered-container {
    position: fixed; /* Fija el contenedor a la ventana */
    top: 40%; /* Mueve el contenedor un poco más arriba */
    left: 50%; /* Mueve el contenedor al centro horizontal */
    transform: translate(-50%, -50%); /* Ajusta la posición para centrar perfectamente */
    text-align: center; /* Asegura que la imagen esté centrada dentro del contenedor */
    z-index: 1; /* Asegura que el contenedor esté por encima de otros elementos */
}

    .centered-container img {
        max-width: 100%; /* Asegura que la imagen no se desborde */
        height: auto; /* Mantiene la relación de aspecto */
    }
/**********************************************************************************************/

/* Estilos generales de la tabla */
table {
    width: 100%; /* Ajusta el ancho de la tabla al contenedor */
    /*max-width: 800px;*/ /* Establece un ancho máximo para evitar que las tablas pequeñas se expandan demasiado */
    border-collapse: collapse; /* Colapsa bordes para una mejor apariencia */
}

/* Estilo para el encabezado de la tabla */
th {
    background-color: #455a64; /* Color de fondo del encabezado */
    color: #fff;
    font-weight: bold; /* Texto en negrita */
    border: 1px solid #ccc; /* Borde de las celdas del encabezado */
    padding: 6px 8px; /* Ajusta el espacio vertical entre celdas */
    white-space: nowrap; /* Evita saltos de línea en texto corto */
    text-align: left; /* Centra los datos en todas las columnas */
}

/* Estilo para las celdas de la tabla */
td {
    border: 1px solid #ccc; /* Borde de las celdas */
    padding: 3px 8px; /* Ajusta el espacio entre celdas */
    white-space: nowrap; /* Evita saltos de línea en textos más cortos */
    overflow: hidden; /* Oculta el texto desbordado */
    text-overflow: ellipsis; /* Agrega puntos suspensivos si el texto es muy largo */
    max-width: 400px; /* Ajusta este valor al ancho máximo de la columna */
    word-break: break-word; /* Rompe palabras largas si sobrepasan el ancho */
    text-align: left; /* Alineación de texto en todas las columnas */
}
/****************************** Se usan para que los titulos de las tablas siempre se muestren *******************************/
.mantener-header-EnVista {
    position: sticky;
    top: 165px; /* Altura del contenedor fijo más la segunda fila */
    z-index: 2; /* Asegura que esté sobre el contenido de la tabla */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Agrega un efecto sutil */
}

/* Opcional: Mejorar el diseño de las celdas de encabezado */
.sticky-header th {
    padding: 10px;
    text-align: left;
    border-bottom: 2px solid #ccc; /* Separador visible */
}

.mantener-header-EnVistaButton {
    position: sticky;
    top: 175px; /* Altura del contenedor fijo más la segunda fila */
    z-index: 2; /* Asegura que esté sobre el contenido de la tabla */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Agrega un efecto sutil */
}

.mantener-header-EnVistaButton-3 {
    position: sticky;
    top: 230px; /* Altura del contenedor fijo más la segunda fila */
    z-index: 2; /* Asegura que esté sobre el contenido de la tabla */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Agrega un efecto sutil */
}

.mantener-header-EnVistaButton-4 {
    position: sticky;
    top: 235px; /* Altura del contenedor fijo más la segunda fila */
    z-index: 2; /* Asegura que esté sobre el contenido de la tabla */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Agrega un efecto sutil */
}

/*********************************************************************/

/* Estilo alternativo para filas pares */
tr:nth-child(even) {
    background-color: #EBE4E4; /* Color de fondo para filas pares */
}

/* Ajustes responsivos: Para pantallas pequeñas */
@media screen and (max-width: 768px) {
    .table-container {
        padding: 5px; /* Reduce el padding en pantallas pequeñas */
    }

    table {
        max-width: 100%; /* La tabla ocupa todo el ancho en pantallas pequeñas */
    }

    td, th {
        padding: 4px 6px; /* Reduce el padding en las celdas para pantallas pequeñas */
    }
}

/*******clases para el funcionamiento del menu**************/
.menuCSS {
    background-color: firebrick;
    color: white;
}

.enlaceInicialCSS {
    background-color: firebrick;
    color: white;
}

    .enlaceInicialCSS:hover {
        color: black;
    }

    .enlaceInicialCSS:focus {
        color: #F2E872;
    }

.dropdown-menu li {
    position: relative;
    background-color: firebrick;
    color: white;
}


.dropdown-menu > li:hover > .dropdown-submenu {
    display: block;
    background-color: firebrick;
}

/******************************** fin de las clases para el funcionamiento del menu ***********************************/

/******************************** Pie de pagina ***********************************/
.piePagina {
    background-color: firebrick;
    color: white;
    text-align: center;
    position: fixed; /* Mantiene el pie de página en la parte inferior */
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5%; /* Puedes ajustar la altura según necesites */
    padding: 10px;
    transition: transform 0.3s ease; /* Añadir una transición suave para mostrar/ocultar */
    transform: translateY(100%); /* Ocultar inicialmente moviéndolo fuera de la vista */
    z-index: 10;
}

.footer.show .piePagina {
    transform: translateY(0); /* Mover hacia arriba para mostrar */
}

/******************************** fin de pie de pagina ***********************************/


/********************* CENTRAR PAGINAS DE DETTALLES Y GUARDADOs *************************/

/* Contenedor del encabezado alineado y distribuido simétricamente */
.header-vista-guardar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

/* Grupo de botones del encabezado sin desfasamiento a la derecha */
.acciones-header-guardar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 5px;
}

/* Estilo para que la tabla abarque exactamente el 100% del formulario */
.table-detalles-guardar {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse;
}

/* Ajustes de espacio vertical uniforme en los controles del formulario */
.contenedor-vista-guardar .form-group {
    margin-bottom: 0.5rem;
}



/******************************************** PAGINACION*********************************************************************/
/* Estilo de la paginación */
.pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px; /* Espacio entre elementos de paginación */
    z-index: 1;
}

    /* Estilo de los enlaces de página */
    .pagination .page-link {
        color: darkblue;
        font-weight: bold;
        padding: 4px 10px;
        border: 1px solid darkblue;
        border-radius: 4px;
        transition: background-color 0.3s;
    }

    /* Estilo cuando un enlace está activo */
    .pagination .page-item.active .page-link {
        background-color: darkred;
        color: white;
        border-color: darkred;
    }

    /* Estilo cuando un enlace está deshabilitado */
    .pagination .page-item.disabled .page-link {
        color: gray;
        pointer-events: none;
        border-color: lightgray;
    }

ul.pagination {
    margin: 0; /* Elimina margen */
    padding: 0; /* Elimina relleno */
}

    /* Ajusta los márgenes en los elementos de la paginación (li) */
    ul.pagination li {
        margin: 0; /* Elimina margen en los elementos li */
    }

/* Posicion de la paginacion */
.posicion-paginacion {
    margin-right: 30px;
    margin-left: auto;
}


/******************************************** Fin de paginacion *********************************************************************/

/******************************************** Menu para el titulo y la paginacion *********************************************************************/
/* Clase base para las vistas que usen un contenedor fijo */
.contenedor-fijo {
    position: fixed; /* permite que se quede fijo al hacer scroll */
    top: 56px;
    left: 0;
    right: 0;
    background-color: white;
    padding: 10px 100px; /* Espacio de 100px en los laterales */
    border-bottom: 1px solid #ccc;
    display: flex;
    flex-direction: column; /* Organiza los elementos de arriba hacia abajo */
    align-items: flex-start; /* Alinea los elementos a la izquierda */
    justify-content: flex-start; /* Los elementos se 
        alinean en la parte superior */
    z-index: 1;
    padding-top: 10px;
    margin-bottom: 27px; /* Agrega 15px de margen debajo */
}

/* Para contenedor fijo de 1 fila 
.altura-contenedor-1-fila {
    padding-top: 90px; 
}*/

/* Para contenedor fijo de 2 filas */
.altura-contenedor-2-filas {
    padding-top: 135px; /* Ajusta este valor según el contenedor de 2 filas */
}
/* Espacio 3 filas */
.altura-contenedor-2-filas-3 {
    padding-top: 185px; /* Ajusta este valor según el contenedor de 2 filas */
}

/* Espacio 4 filas */
.altura-contenedor-2-filas-4 {
    padding-top: 175px; /* Ajusta este valor según el contenedor de 2 filas */
}

.mensajes-contenido {
    margin-top: 20px; /* Ajusta este valor según sea necesario */
}


.grupo-filtros-pills {
    display: inline-flex;
    background-color: #e9ecef;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid #ced4da;
}

    .grupo-filtros-pills .btn-pill {
        border: none;
        background: transparent;
        color: #495057;
        font-size: 12px;
        font-weight: 600;
        padding: 5px 12px;
        border-radius: 6px;
        transition: all 0.2s ease-in-out;
        cursor: pointer;
    }

        .grupo-filtros-pills .btn-pill:hover {
            background-color: #dee2e6;
            color: #212529;
        }

        .grupo-filtros-pills .btn-pill.activo {
            background-color: #007bff;
            color: #ffffff;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
        }

.contenedor-acciones-masivas {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 10px;
    border-left: 2px solid #e0e0e0; /* Separador visual sutil */
}

/*************************************** A las filas del encabezado se le asigna un estilo especifico *******************************************/
/* Primera fila: título, botón y paginación */
.fila-uno {
    display: flex;
    align-items: center; /* Alinea los elementos en el centro verticalmente */
    justify-content: space-between; /* Espacia los elementos de manera uniforme */
    width: 100%; /* Asegura que ocupe todo el ancho disponible */
}

/* Rediseño unificado de fila dos */
.fila-dos-compras {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Distribuye filtros a la izq y acciones a la der */
    width: 100%;
    flex-wrap: wrap;
    gap: 12px;
}

.bloque-izquierda-filtros {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Alturas y Headers estandarizados (Especial para Pre-Facturas) */
.altura-contenedor-estandar {
    padding-top: 135px; /* Empuja la tabla debajo de la barra de herramientas */
}

.mantener-header-estandar {
    position: sticky;
    top: 178px; /* Congela el encabezado justo debajo de los controles */
    z-index: 2;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}


/***************************** AJUSTO LOS ELEMENTOS FORM DEN CONTENEDOR FIJO PARA QUE MANTENGAN EL MISMO FORMATO*****************************/
/* Asegurar que el form tenga el mismo estilo */
.formulario-flex {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaciado entre los elementos del formulario */
    margin-right: 15px;
}

/* Contenedor de los elementos del form */
.contenedor-form {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre cada input y botón */
}
/*********************************************************************************************************************************************/

/* Ajuste del título pequeño */
.titulo-pequeno {
    font-size: 30px;
    margin-bottom: 0;
}

/* Espaciado de botones */
.boton-espaciado {
    margin-top: 0;
    margin-left: 10px;
}

/* Sin márgenes en el formulario */
.form-group {
    margin-bottom: 0; /* Ajuste si es necesario */
}

/* Alineación de los radio buttons */
.radio-btn {
    display: inline-block; /* Asegura que las etiquetas de radio estén al lado */
}

/********************************** Estilo para el campo contacto JSON al momento de añador uno nuevo **************************************/

.style-contactoEnCliente {
    background-color: #f0f0f0;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
}

.style-centroEnCliente {
    background-color: #f0f0f0;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
}

/******************************************** Estilos para ventana emergente *********************************************************************/

/* Estilo para el modal */
.modal-content {
    border-radius: 8px; /* Bordes redondeados */
    background-color: #FAFAFA; /* Un gris claro para el fondo de ventanas */
    color: #495057; /* Color de texto oscuro para mejor legibilidad */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

.modal-header {
    background-color: #FFDD57; /* Amarillo fuerte */
    border-bottom: 1px solid #ddd; /* Línea sutil en la parte inferior */
    border-top-left-radius: 8px; /* Bordes redondeados */
    border-top-right-radius: 8px; /* Bordes redondeados */
}

.modal-body {
    font-size: 16px;
    line-height: 1.5;
    font-weight: normal; /* Quitar negrita de los mensajes */
}

.alert {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 5px;
    font-weight: normal; /* Evitar negrita */
}

/* Íconos dentro de las alertas */
.alert-icon {
    margin-right: 10px;
}

/* Estilo personalizado para el botón de cerrar */
.btn-close-custom {
    background-color: #007bff; /* Color de fondo azul */
    color: white; /* Color de texto blanco */
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: normal; /* Sin negrita */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .btn-close-custom:hover {
        background-color: #0056b3; /* Color más oscuro al pasar el mouse */
    }

    .btn-close-custom:focus {
        outline: none; /* Eliminar borde al hacer foco */
    }

/******************************************** PANTALA DE CARGA *********************************************************************/

/* ===== Pantalla de carga global ===== */
#loadingOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    font-size: 20px;
}

    #loadingOverlay .spinner-border {
        width: 4rem;
        height: 4rem;
        margin-bottom: 15px;
    }

/******************************************** DATEPICKER *********************************************************************/

.datepicker {
    padding: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    direction: ltr;
}

.datepicker-inline {
    width: 220px;
}

.datepicker-rtl {
    direction: rtl;
}

    .datepicker-rtl.dropdown-menu {
        left: auto;
    }

    .datepicker-rtl table tr td span {
        float: right;
    }

.datepicker-dropdown {
    top: 0;
    left: 0;
}

    .datepicker-dropdown:before {
        content: '';
        display: inline-block;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #999;
        border-top: 0;
        border-bottom-color: rgba(0, 0, 0, 0.2);
        position: absolute;
    }

    .datepicker-dropdown:after {
        content: '';
        display: inline-block;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #fff;
        border-top: 0;
        position: absolute;
    }

    .datepicker-dropdown.datepicker-orient-left:before {
        left: 6px;
    }

    .datepicker-dropdown.datepicker-orient-left:after {
        left: 7px;
    }

    .datepicker-dropdown.datepicker-orient-right:before {
        right: 6px;
    }

    .datepicker-dropdown.datepicker-orient-right:after {
        right: 7px;
    }

    .datepicker-dropdown.datepicker-orient-bottom:before {
        top: -7px;
    }

    .datepicker-dropdown.datepicker-orient-bottom:after {
        top: -6px;
    }

    .datepicker-dropdown.datepicker-orient-top:before {
        bottom: -7px;
        border-bottom: 0;
        border-top: 7px solid #999;
    }

    .datepicker-dropdown.datepicker-orient-top:after {
        bottom: -6px;
        border-bottom: 0;
        border-top: 6px solid #fff;
    }

.datepicker table {
    margin: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.datepicker td,
.datepicker th {
    text-align: center;
    width: 20px;
    height: 20px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    border: none;
}

.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
    background-color: transparent;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
    background: #eee;
    cursor: pointer;
}

.datepicker table tr td.old,
.datepicker table tr td.new {
    color: #999;
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    background: none;
    color: #999;
    cursor: default;
}

.datepicker table tr td.highlighted {
    background: #d9edf7;
    border-radius: 0;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
    background-color: #fde19a;
    background-image: -moz-linear-gradient(to bottom, #fdd49a, #fdf59a);
    background-image: -ms-linear-gradient(to bottom, #fdd49a, #fdf59a);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
    background-image: -webkit-linear-gradient(to bottom, #fdd49a, #fdf59a);
    background-image: -o-linear-gradient(to bottom, #fdd49a, #fdf59a);
    background-image: linear-gradient(to bottom, #fdd49a, #fdf59a);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
    border-color: #fdf59a #fdf59a #fbed50;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #000;
}

    .datepicker table tr td.today:hover,
    .datepicker table tr td.today:hover:hover,
    .datepicker table tr td.today.disabled:hover,
    .datepicker table tr td.today.disabled:hover:hover,
    .datepicker table tr td.today:active,
    .datepicker table tr td.today:hover:active,
    .datepicker table tr td.today.disabled:active,
    .datepicker table tr td.today.disabled:hover:active,
    .datepicker table tr td.today.active,
    .datepicker table tr td.today:hover.active,
    .datepicker table tr td.today.disabled.active,
    .datepicker table tr td.today.disabled:hover.active,
    .datepicker table tr td.today.disabled,
    .datepicker table tr td.today:hover.disabled,
    .datepicker table tr td.today.disabled.disabled,
    .datepicker table tr td.today.disabled:hover.disabled,
    .datepicker table tr td.today[disabled],
    .datepicker table tr td.today:hover[disabled],
    .datepicker table tr td.today.disabled[disabled],
    .datepicker table tr td.today.disabled:hover[disabled] {
        background-color: #fdf59a;
    }

        .datepicker table tr td.today:active,
        .datepicker table tr td.today:hover:active,
        .datepicker table tr td.today.disabled:active,
        .datepicker table tr td.today.disabled:hover:active,
        .datepicker table tr td.today.active,
        .datepicker table tr td.today:hover.active,
        .datepicker table tr td.today.disabled.active,
        .datepicker table tr td.today.disabled:hover.active {
            background-color: #fbf069 \9;
        }

        .datepicker table tr td.today:hover:hover {
            color: #000;
        }

        .datepicker table tr td.today.active:hover {
            color: #fff;
        }

.datepicker table tr td.range,
.datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover {
    background: #eee;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

    .datepicker table tr td.range.today,
    .datepicker table tr td.range.today:hover,
    .datepicker table tr td.range.today.disabled,
    .datepicker table tr td.range.today.disabled:hover {
        background-color: #f3d17a;
        background-image: -moz-linear-gradient(to bottom, #f3c17a, #f3e97a);
        background-image: -ms-linear-gradient(to bottom, #f3c17a, #f3e97a);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
        background-image: -webkit-linear-gradient(to bottom, #f3c17a, #f3e97a);
        background-image: -o-linear-gradient(to bottom, #f3c17a, #f3e97a);
        background-image: linear-gradient(to bottom, #f3c17a, #f3e97a);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
        border-color: #f3e97a #f3e97a #edde34;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

        .datepicker table tr td.range.today:hover,
        .datepicker table tr td.range.today:hover:hover,
        .datepicker table tr td.range.today.disabled:hover,
        .datepicker table tr td.range.today.disabled:hover:hover,
        .datepicker table tr td.range.today:active,
        .datepicker table tr td.range.today:hover:active,
        .datepicker table tr td.range.today.disabled:active,
        .datepicker table tr td.range.today.disabled:hover:active,
        .datepicker table tr td.range.today.active,
        .datepicker table tr td.range.today:hover.active,
        .datepicker table tr td.range.today.disabled.active,
        .datepicker table tr td.range.today.disabled:hover.active,
        .datepicker table tr td.range.today.disabled,
        .datepicker table tr td.range.today:hover.disabled,
        .datepicker table tr td.range.today.disabled.disabled,
        .datepicker table tr td.range.today.disabled:hover.disabled,
        .datepicker table tr td.range.today[disabled],
        .datepicker table tr td.range.today:hover[disabled],
        .datepicker table tr td.range.today.disabled[disabled],
        .datepicker table tr td.range.today.disabled:hover[disabled] {
            background-color: #f3e97a;
        }

            .datepicker table tr td.range.today:active,
            .datepicker table tr td.range.today:hover:active,
            .datepicker table tr td.range.today.disabled:active,
            .datepicker table tr td.range.today.disabled:hover:active,
            .datepicker table tr td.range.today.active,
            .datepicker table tr td.range.today:hover.active,
            .datepicker table tr td.range.today.disabled.active,
            .datepicker table tr td.range.today.disabled:hover.active {
                background-color: #efe24b \9;
            }

.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover {
    background-color: #9e9e9e;
    background-image: -moz-linear-gradient(to bottom, #b3b3b3, #808080);
    background-image: -ms-linear-gradient(to bottom, #b3b3b3, #808080);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
    background-image: -webkit-linear-gradient(to bottom, #b3b3b3, #808080);
    background-image: -o-linear-gradient(to bottom, #b3b3b3, #808080);
    background-image: linear-gradient(to bottom, #b3b3b3, #808080);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
    border-color: #808080 #808080 #595959;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

    .datepicker table tr td.selected:hover,
    .datepicker table tr td.selected:hover:hover,
    .datepicker table tr td.selected.disabled:hover,
    .datepicker table tr td.selected.disabled:hover:hover,
    .datepicker table tr td.selected:active,
    .datepicker table tr td.selected:hover:active,
    .datepicker table tr td.selected.disabled:active,
    .datepicker table tr td.selected.disabled:hover:active,
    .datepicker table tr td.selected.active,
    .datepicker table tr td.selected:hover.active,
    .datepicker table tr td.selected.disabled.active,
    .datepicker table tr td.selected.disabled:hover.active,
    .datepicker table tr td.selected.disabled,
    .datepicker table tr td.selected:hover.disabled,
    .datepicker table tr td.selected.disabled.disabled,
    .datepicker table tr td.selected.disabled:hover.disabled,
    .datepicker table tr td.selected[disabled],
    .datepicker table tr td.selected:hover[disabled],
    .datepicker table tr td.selected.disabled[disabled],
    .datepicker table tr td.selected.disabled:hover[disabled] {
        background-color: #808080;
    }

        .datepicker table tr td.selected:active,
        .datepicker table tr td.selected:hover:active,
        .datepicker table tr td.selected.disabled:active,
        .datepicker table tr td.selected.disabled:hover:active,
        .datepicker table tr td.selected.active,
        .datepicker table tr td.selected:hover.active,
        .datepicker table tr td.selected.disabled.active,
        .datepicker table tr td.selected.disabled:hover.active {
            background-color: #666666 \9;
        }

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
    background-color: #006dcc;
    background-image: -moz-linear-gradient(to bottom, #08c, #0044cc);
    background-image: -ms-linear-gradient(to bottom, #08c, #0044cc);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#0044cc));
    background-image: -webkit-linear-gradient(to bottom, #08c, #0044cc);
    background-image: -o-linear-gradient(to bottom, #08c, #0044cc);
    background-image: linear-gradient(to bottom, #08c, #0044cc);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
    border-color: #0044cc #0044cc #002a80;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

    .datepicker table tr td.active:hover,
    .datepicker table tr td.active:hover:hover,
    .datepicker table tr td.active.disabled:hover,
    .datepicker table tr td.active.disabled:hover:hover,
    .datepicker table tr td.active:active,
    .datepicker table tr td.active:hover:active,
    .datepicker table tr td.active.disabled:active,
    .datepicker table tr td.active.disabled:hover:active,
    .datepicker table tr td.active.active,
    .datepicker table tr td.active:hover.active,
    .datepicker table tr td.active.disabled.active,
    .datepicker table tr td.active.disabled:hover.active,
    .datepicker table tr td.active.disabled,
    .datepicker table tr td.active:hover.disabled,
    .datepicker table tr td.active.disabled.disabled,
    .datepicker table tr td.active.disabled:hover.disabled,
    .datepicker table tr td.active[disabled],
    .datepicker table tr td.active:hover[disabled],
    .datepicker table tr td.active.disabled[disabled],
    .datepicker table tr td.active.disabled:hover[disabled] {
        background-color: #0044cc;
    }

        .datepicker table tr td.active:active,
        .datepicker table tr td.active:hover:active,
        .datepicker table tr td.active.disabled:active,
        .datepicker table tr td.active.disabled:hover:active,
        .datepicker table tr td.active.active,
        .datepicker table tr td.active:hover.active,
        .datepicker table tr td.active.disabled.active,
        .datepicker table tr td.active.disabled:hover.active {
            background-color: #003399 \9;
        }

.datepicker table tr td span {
    display: block;
    width: 23%;
    height: 54px;
    line-height: 54px;
    float: left;
    margin: 1%;
    cursor: pointer;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

    .datepicker table tr td span:hover,
    .datepicker table tr td span.focused {
        background: #eee;
    }

    .datepicker table tr td span.disabled,
    .datepicker table tr td span.disabled:hover {
        background: none;
        color: #999;
        cursor: default;
    }

    .datepicker table tr td span.active,
    .datepicker table tr td span.active:hover,
    .datepicker table tr td span.active.disabled,
    .datepicker table tr td span.active.disabled:hover {
        background-color: #006dcc;
        background-image: -moz-linear-gradient(to bottom, #08c, #0044cc);
        background-image: -ms-linear-gradient(to bottom, #08c, #0044cc);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#0044cc));
        background-image: -webkit-linear-gradient(to bottom, #08c, #0044cc);
        background-image: -o-linear-gradient(to bottom, #08c, #0044cc);
        background-image: linear-gradient(to bottom, #08c, #0044cc);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
        border-color: #0044cc #0044cc #002a80;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    }

        .datepicker table tr td span.active:hover,
        .datepicker table tr td span.active:hover:hover,
        .datepicker table tr td span.active.disabled:hover,
        .datepicker table tr td span.active.disabled:hover:hover,
        .datepicker table tr td span.active:active,
        .datepicker table tr td span.active:hover:active,
        .datepicker table tr td span.active.disabled:active,
        .datepicker table tr td span.active.disabled:hover:active,
        .datepicker table tr td span.active.active,
        .datepicker table tr td span.active:hover.active,
        .datepicker table tr td span.active.disabled.active,
        .datepicker table tr td span.active.disabled:hover.active,
        .datepicker table tr td span.active.disabled,
        .datepicker table tr td span.active:hover.disabled,
        .datepicker table tr td span.active.disabled.disabled,
        .datepicker table tr td span.active.disabled:hover.disabled,
        .datepicker table tr td span.active[disabled],
        .datepicker table tr td span.active:hover[disabled],
        .datepicker table tr td span.active.disabled[disabled],
        .datepicker table tr td span.active.disabled:hover[disabled] {
            background-color: #0044cc;
        }

            .datepicker table tr td span.active:active,
            .datepicker table tr td span.active:hover:active,
            .datepicker table tr td span.active.disabled:active,
            .datepicker table tr td span.active.disabled:hover:active,
            .datepicker table tr td span.active.active,
            .datepicker table tr td span.active:hover.active,
            .datepicker table tr td span.active.disabled.active,
            .datepicker table tr td span.active.disabled:hover.active {
                background-color: #003399 \9;
            }

    .datepicker table tr td span.old,
    .datepicker table tr td span.new {
        color: #999;
    }

.datepicker .datepicker-switch {
    width: 145px;
}

.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next,
.datepicker tfoot tr th {
    cursor: pointer;
}

    .datepicker .datepicker-switch:hover,
    .datepicker .prev:hover,
    .datepicker .next:hover,
    .datepicker tfoot tr th:hover {
        background: #1f2f54;
    }

    .datepicker .prev.disabled,
    .datepicker .next.disabled {
        visibility: hidden;
    }

.datepicker .cw {
    font-size: 10px;
    width: 12px;
    padding: 0 2px 0 5px;
    vertical-align: middle;
}

.input-append.date .add-on,
.input-prepend.date .add-on {
    cursor: pointer;
}

    .input-append.date .add-on i,
    .input-prepend.date .add-on i {
        margin-top: 3px;
    }

.input-daterange input {
    text-align: center;
}

    .input-daterange input:first-child {
        -webkit-border-radius: 3px 0 0 3px;
        -moz-border-radius: 3px 0 0 3px;
        border-radius: 3px 0 0 3px;
    }

    .input-daterange input:last-child {
        -webkit-border-radius: 0 3px 3px 0;
        -moz-border-radius: 0 3px 3px 0;
        border-radius: 0 3px 3px 0;
    }

.input-daterange .add-on {
    display: inline-block;
    width: auto;
    min-width: 16px;
    height: 18px;
    padding: 4px 5px;
    font-weight: normal;
    line-height: 18px;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    vertical-align: middle;
    background-color: #eee;
    border: 1px solid #ccc;
    margin-left: -5px;
    margin-right: -5px;
}

/***************************************** FIN DE BORDER PICKER **************************************************/

.botonesMeses {
    background-color: steelblue;
    color: white;
}

.tablaMeses {
    background-color: transparent;
    border: none;
}

/**ESTILOS PARA LA TABLA DE LOS PRODUCTOS EN EL APARTADO DE COMPRAS
#productosTable {
    width: auto; 
    table-layout: auto; 
}

    #productosTable th,
    #productosTable td {
        padding: 5px; 
        width: auto;
        max-width: 110px;
    }
 */

/*****************************************************************************************/

.check-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    transition: background-color 0.3s;
    margin-left: 10px;
    margin-top: 4px; /* para alinear con input */
}

    .check-toggle.unchecked {
        background-color: #e74c3c; /* rojo */
    }

    .check-toggle.checked {
        background-color: #28a745; /* verde */
    }

    .check-toggle i {
        color: white;
        font-size: 16px;
    }

.folio-wrapper {
    display: flex;
    align-items: flex-start;
}

    .folio-wrapper input {
        flex: 1;
    }

/************ESTILOS PARA LOS SENSORES EN LOS PEDIDOS A LOS QUE SE VA A SURTIR EQUIPOS*****************/
.contenedorSensores {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    width: 100%;
}

.grupo-sensor {
    width: 100%;
}

    .grupo-sensor label {
        display: block;
        margin-bottom: 3px;
    }

    .grupo-sensor .select2-container {
        width: 100% !important;
    }



/*#contenedorSensores {
    display: flex;
    gap: 20px;*/ /* Espacio entre cada grupo */
    /*flex-wrap: wrap; /* Para que bajen si no entran en pantalla */
/*}*/
/* —— Encabezado oscuro para tablas de Servicios Técnicos —— */
/*table.table.table-ttc thead th {
    background: #334A5E !important;*/ /* fondo */
    /*color: #ffffff !important;*/ /* texto blanco */
    /*border-color: #2B3F50 !important;*/ /* bordes   */
/*}

.grupo-sensor {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}*/



/*ESTILOS PARA LA TABLA PARA PODER AGREGAR UN NUEVO SD A UN CLIENTE
*/

#SDTable,
#SDTable tr,
#SDTable td,
#SDTable th {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none;
}

    #SDTable select,
    #SDTable input {
        background-color: white; /* O el color que uses para inputs */
    }


/*ESTILO PARA EL DIV CONTENEDOR DE SD PARA LOS NUEVOS SD*/
.div-sd {
    margin-bottom: 20px; /* o la separación que necesites */
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 30px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
}



/*************************OCULTA LA TABLA EN KARDEX PRODUCTO**************************************/
/*#comprasTable {
    display: none;
}*/


/***********PONE MISMOS ESTILOS A LAS TARIFAS QUE HAY EN SD****************/
#tarifa-extra-container-id {
    display: none;
    transition: opacity 0.3s ease;
    opacity: 0;
}

    #tarifa-extra-container-id:not([hidden]) {
        display: flex;
        opacity: 1;
    }


/**********************ESTILOS PARA LOS TITULOS DE NUEVO SD Y LISTA DE NUEVOS SD DE UN CLIENTE*******************************/
.encabezadoDatosNuevoSD {
    font-size: 19px;
}

.listaNuevosSD {
    font-size: 19px;
    margin-top: 10px;
}

.capsulaDatosSDNuevo {
    background-color: #FFFFF0; /*color amarillo claro*/
    width: 100%;
}

    .capsulaDatosSDNuevo .row.g-3.align-items-end > .col-md-2:nth-child(4),
    .capsulaDatosSDNuevo .row.g-3.align-items-end > .col-md-2:nth-child(5),
    .capsulaDatosSDNuevo .row.g-3.align-items-end > .col-md-1 {
        flex: 0 0 auto;
        width: auto;
        min-width: 120px;
    }




.modal-dialog {
    max-width: fit-content;
}

.modal-header {
    position: relative;
}

.tituloModalCentros {
    font-size: 21px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.oculto {
    display: none;
}

.inputFiltro {
    height: 30px;
}

.bienvenidaUsuario {
    color: white;
}

.encabezadoServicios {
    position: fixed;
    top: 65px;
    left: 10px;
    width: 100%;
    z-index: 1;
    background-color: white;
}

.datosServicio {
    padding-top: 50px;
}

.checkInstalador {
    transform: scale(1.3);
    cursor: pointer;
}

/***************ESTILO PARA MODAL DE ASIGNACION DE UNIDAD EN OPERACIONES******************************************/
.modal-custom {
    max-width: 30% !important;
}

.lblAdvertenciaSolucion {
    color: red;
    font-size: 20px;
    font-weight: bold;
}

/*ESTILOS PARA LA ASIGNACION DE EQUIPOS POR PARTE DE ALMACEN*/
.modal-xl {
    max-width: 90%;
}

.card {
    border-radius: 12px;
}

.card-header {
    font-weight: 600;
}

#tblEquipos tr:hover {
    background-color: #f5f5f5;
}

#imeisNoEncontrados {
    font-size: 13px;
    color: #dc3545;
}

#totalCapturados,
#totalEncontrados,
#totalNoEncontrados {
    margin-left: 5px;
}

#tablaEquiposMiniAlmacen tfoot th {
    position: sticky;
    bottom: 0;
    background: lightgray;
    border: 1px solid black;
    z-index: 2;
}

/*************ESTILOS PARA LOS BOTONES DE ALMACEN EXTERNO**********************/
.btn-asignarEquipo {
    background-color: #1b6ff5; /* Azul */
    border-color: #1b6ff5;
    color: #fff;
}

    .btn-asignarEquipo:hover {
        background-color: #104fd0;
        border-color: #104fd0;
    }

.btn-asignarSim {
    background-color: #d71273; /* Rosa Oscuro */
    border-color: #d71273;
    color: #fff;
}

    .btn-asignarSim:hover {
        background-color: #de128f;
    }


.btn-regresarEquipos {
    background-color: #F59E0B; /* Ámbar */
    border-color: #F59E0B;
    color: #fff;
}

    .btn-regresarEquipos:hover {
        background-color: #D97706;
        border-color: #D97706;
    }

.btn-regresarSims {
    background-color: #F59E0B; /* Ámbar */
    border-color: #F59E0B;
    color: #fff;
}

    .btn-regresarSims:hover {
        background-color: #D97706;
        border-color: #D97706;
    }

.btn-inventario {
    background-color: #a753fa; /* Morado Claro */
    border-color: #a753fa;
    color: #fff;
}

    .btn-inventario:hover {
        background-color: #a126db;
    }

.btn-descargaExcel {
    background-color: #15803D; /* Verde */
    border-color: #15803D;
    color: #fff;
}

    .btn-descargaExcel:hover {
        background-color: #166534;
        border-color: #166534;
    }


/* Escritorio (Desktop) */
@media (min-width: 992px) {
    .dropdown-menu .dropdown-submenu {
        position: relative;
    }
        /* El ul interno se posiciona a la derecha */
        .dropdown-menu .dropdown-submenu > .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -5px;
            display: none; /* Se oculta por defecto */
        }
        /* Mostrar al pasar el mouse solo en escritorio */
        .dropdown-menu .dropdown-submenu:hover > .dropdown-menu {
            display: block;
        }
}

/* Móvil (Responsive) */
@media (max-width: 991px) {
    .dropdown-submenu > .dropdown-menu {
        position: static !important;
        display: none;
        padding-left: 20px;
        border: none;
        background: rgba(0,0,0,0.1) !important; /* Fondo oscuro sutil */
    }

        /* Clase que activa el JS */
        .dropdown-submenu > .dropdown-menu.show {
            display: block !important;
        }

    /* Ajuste para los iconos de flecha en móvil */
    .dropdown-submenu > .dropdown-toggle::after {
        float: right;
        margin-top: 10px;
    }
}
/* === ESTILOS PERSONALIZADOS PARA EL CALENDARIO === */

/* Contenedor principal del calendario con sombra sutil y bordes suaves */
#calendario {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #e9ecef;
}

/* Estilo para el título del mes (Ej. "junio de 2026") */
.fc .fc-toolbar-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #333333;
    text-transform: capitalize;
}

/* Botones superiores del calendario */
.fc .fc-button {
    font-weight: 600 !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease;
}

/* Cambiar el color del botón principal "Hoy" o activos para que combine con "firebrick" de tus radios */
.fc .fc-button-primary {
    background-color: #4a5568 !important;
    border-color: #4a5568 !important;
    color: #fff !important;
}

    .fc .fc-button-primary:hover {
        background-color: firebrick !important;
        border-color: firebrick !important;
    }

/* Botón activo (en el que estás posicionado) */
.fc .fc-button-active {
    background-color: firebrick !important;
    border-color: firebrick !important;
    box-shadow: none !important;
}

/* Cabeceras de los días de la semana (Lu, Ma, Mi...) */
.fc .fc-col-header-cell {
    background-color: #212529;
    padding: 10px 0 !important;
    font-weight: 700;
}

.fc .fc-col-header-cell-cushion {
    color: ghostwhite !important; /* Gris oscuro / Negro Bootstrap */
    text-decoration: none !important; /* Quita el subrayado */
}

/* Estilo de las celdas de los días */
.fc .fc-daygrid-day {
    transition: background-color 0.15s ease;
}

    /* Efecto hover al pasar el ratón sobre un día */
    .fc .fc-daygrid-day:hover {
        background-color: #f1f3f5;
    }

/* Resaltar el día actual (Hoy) */
.fc .fc-day-today {
    background-color: #fff5ee !important; /* Un amarillo muy tenue y elegante */
}

/* Cambia el fondo negro por defecto solo para la cabecera del día de hoy */
.fc th.fc-day-today {
    background-color: #212529 !important;
}

    /* Modifica el texto de hoy para que contraste alto sobre el nuevo fondo claro */
    .fc th.fc-day-today .fc-col-header-cell-cushion {
        color: ghostwhite !important; /* Texto gris oscuro/negro */
        font-weight: 800 !important; /* Letra más gruesa para que resalte */
    }

/* === ESTILO DE LAS BARRAS DE LOS EVENTOS === */
.fc-v-event, .fc-h-event {
    border: none !important;
    padding: 4px 8px !important;
    border-radius: 6px !important; /* Bordes redondeados para los eventos */
    margin-bottom: 2px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
    cursor: pointer;
}

/* Texto dentro del evento */
.fc .fc-event-title {
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500 !important;
}

/* Ajustar el número del día (arriba a la derecha en la celda) */
.fc .fc-daygrid-day-top {
    padding-top: 6px;
    padding-right: 8px;
}

.fc .fc-daygrid-day-number {
    font-weight: 600;
    color: #6c757d;
    text-decoration: none !important;
}

/* === CORRECCIÓN DE COLOR PARA EL TEXTO DE LOS EVENTOS === */

/* Quita el azul y el subrayado del texto del evento en la vista de mes */
.fc-daygrid-event {
    color: #212529 !important; /* Negro/Gris oscuro Bootstrap */
    text-decoration: none !important; /* Quita cualquier subrayado */
}

    /* Asegura que al pasar el mouse por encima del evento tampoco se pinte azul */
    .fc-daygrid-event:hover {
        color: black !important; /* Cambia a tu color firebrick o manténlo en #212529 */
        text-decoration: none !important;
        font-weight: bold;
    }

/* Asegura que el texto dentro del encabezado de 'Hoy' sea completamente visible y oscuro */
.fc-day-today .fc-col-header-cell-cushion {
    color: #212529 !important; /* Texto gris oscuro/negro de alto contraste */
    font-weight: 800 !important; /* Letra más gruesa para que resalte del resto */
    opacity: 1 !important; /* Anula cualquier transparencia que le ponga la librería */
}

    /* Quita cualquier línea o subrayado decorativo que Bootstrap intente meterle al pasar el mouse por encima */
    .fc-day-today .fc-col-header-cell-cushion:hover {
        color: #000000 !important; /* O firebrick si elegiste la opción de arriba */
        text-decoration: none !important;
    }

/* Estilo base del texto '+ X más' */
.fc .fc-daygrid-more-link {
    color: #495057 !important; /* Gris oscuro elegante */
    font-weight: 700 !important; /* Texto en negrita para resaltar */
    font-size: 0.85rem !important;
    text-decoration: none !important;
    padding: 2px 4px;
    display: inline-block;
    transition: color 0.15s ease;
}

    /* Efecto hover: cambia a firebrick cuando el usuario pasa el cursor */
    .fc .fc-daygrid-more-link:hover {
        color: firebrick !important;
        text-decoration: underline !important; /* Agrega un subrayado sutil al interactuar */
    }

/* === UNIFICACIÓN DE ALTURAS Y SIMETRÍA DEL CALENDARIO (CORREGIDO) === */

/* 1. Forzamos una altura mínima uniforme a la celda base (90px es una medida ideal) */
.fc .fc-daygrid-day {
    height: 90px !important;
}

/* 2. Obligamos a que la estructura interna de la celda ocupe siempre el 100% de la altura de la fila */
.fc .fc-daygrid-day-frame {
    height: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
}

/* 3. Aseguramos que el contenedor de eventos use el espacio restante de la celda de forma uniforme */
.fc .fc-daygrid-day-events {
    padding: 2px 5px !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 4. Mantenemos el enlace '+ más' alineado prolijamente en la parte inferior */
.fc .fc-daygrid-more-link {
    margin-top: auto !important;
    margin-bottom: 2px !important;
}

.tooltip-inner {
    white-space: pre-line !important;
    text-align: left !important;
    font-size: 0.85rem !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
}

/* === CORRECCIÓN DE CAPAS (Z-INDEX) PARA TOOLTIPS === */

/* Forzamos a que el Tooltip de Bootstrap se dibuje por encima del Popover de FullCalendar */
body .tooltip {
    z-index: 10050 !important;
}

/* Ajuste opcional para el Popover de FullCalendar (por si acaso) */
.fc-popover {
    z-index: 10040 !important;
}

    /* Darle un estilo más estilizado y limpio a la ventana emergente '+ más' */
    .fc-popover.card {
        box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 10px !important;
    }

.fc-popover-header {
    background-color: #f8f9fa !important;
    font-weight: 700 !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    padding: 8px 12px !important;
}

/* === COLOR DE TEXTO PARA EVENTOS EN VISTAS DE AGENDA (SEMANA/DÍA) === */

/* Aplica a los textos de la hora (ej: 11:40 a.m. - 01:10 p.m.) */
.fc-timegrid-event .fc-event-time {
    color: #212529 !important; /* Texto oscuro de alto contraste */
    font-weight: 700 !important; /* Texto un poco más grueso para leerlo fácil */
}

/* Aplica al título del evento (ej: INSTALACION - CLIENTE) */
.fc-timegrid-event .fc-event-title {
    color: #212529 !important; /* Mismo tono oscuro */
    font-weight: 600 !important;
}

/* Opcional: Si tus bloques de eventos se enciman un poco debido a que comparten horarios similares,
   este ajuste les da un borde sutil para que se distinga dónde termina uno y empieza el otro */
.fc-timegrid-event {
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

/******* CLASES QUE ESTAN EN COBROS ***********/
.buscador-input {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.cliente-infoCobros {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-left: 5px;
}

    .cliente-infoCobros strong {
        white-space: nowrap;
        color: #495057;
    }

    .cliente-infoCobros span {
        font-weight: 500;
        overflow-wrap: anywhere;
    }