html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

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

body {
    margin-bottom: 60px;
}

button :not(.dt-button)
input[type="button"],
input[type="submit"],
input[type="reset"] {
    width: 200px;
    display: inline-block; /* Ensures the width property is applied correctly */
    box-sizing: border-box; /* Ensures padding and borders are included in the 150px width */
    padding: 10px 15px;
    text-align: center;
}

/* COLORES*/
:root, [data-bs-theme=light] {
    --bs-primary: #050060;
    --bs-primary-rgb: 5, 0, 96; /* Valores RGB correspondientes */

    --bs-secondary: #0D4AA1;
    --bs-secondary-rgb: 13, 74, 161; /* Valores RGB correspondientes */

    --bs-info: #23A1DB;
    --bs-info-rgb: 35,161,219; /* Valores RGB correspondientes */

    --bs-success: #84808C;
    --bs-success-rgb: 102, 122, 179; /* Valores RGB correspondientes */

    --bs-body: #E1DEE0;
    --bs-body-rgb: 225, 222, 224; /* Valores RGB correspondientes */

    --bs-light: #F9AC31;
    --bs-light-rgb: 249, 172, 49; /* Valores RGB correspondientes */
}
.textoO {
    overflow: hidden;
    text-overflow: ellipsis;
}

.miGrisClaro {
    background-color: #F0F0F0;
}

.miPrimary {
    background-color: var(--bs-primary) !important;
}

.miSecondary {
    background-color: var(--bs-secondary) !important;
}

.miAzul {
    background-color: var(--bs-blue) !important;
}

.miVerde {
    background-color: var(--bs-green) !important;
}

.miAmarillo {
    background-color: var(--bs-yellow) !important;
}

.miRojo {
    background-color: var(--bs-red) !important;
}

.miImg {
    height: 120px; /* Set your desired specific height */
    width: 100%; /* Optional: set desired width or use percentage */
    overflow: hidden;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;
}

.miImg img {
    width: auto;
    height: 100%;
    object-fit: fill; /* Maintains aspect ratio and fills the container */
}


/*INDICADORES*/
.miCard-container {
    display: flex;
    flex-wrap: wrap; /* Allows cards to wrap to the next line */
    gap: 20px; /* Adds space between cards */
    justify-content: center; /* Centers cards in the container */
    padding: 20px;
}

.miCard {
    /* flex: grow shrink basis; This makes the cards flexible */
    flex: 1 1 120px; /* Cards will be at least 300px wide, and grow/shrink to fit */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden; /* Ensures image corners are rounded with card corners */
    background-color: #fff;
    display: flex;
    flex-direction: column; /* Stacks image and text vertically within the card */
    
}

.miCard-Etiqueta {
    color:#fff;
    font-size:2.5rem;
    font-weight:bolder;
}

.miCard-Icono {
    font-size: 3.9rem;
}

.miCard-content {
    padding: 15px;
}

    .card-content h3 {
        margin-top: 0;
    }

.miRequerido::after {
    content: " *"; 
    color: red; 
    font-weight: bold;
}

.miEtiqueta {
    font-weight: bold;
}

    .miEtiqueta::before {
        /* Add a small space after the label */
        content: " ";
        display: inline-block;
        /* Use Bootstrap's icon utility classes to render the SVG icon visually */
        /*font-family: "bootstrap-icons" !important;*/
        vertical-align: text-bottom;
        margin-right: 0.5rem; /* Add some space between label and icon */
    }

.miEtiqueta-Completo::before {
    content: "\1F7E2"; /* Green circle emoji */
}

.miEtiqueta-Proceso::before {
    content: "\1F7E1"; /* Unicode for 'check-circle' icon */
}
.miEtiqueta-ProcesoI::before {
    content: "\1F7E1"; /* Unicode for 'check-circle' icon */
}

.miEtiqueta-Retrasado::before {
    content: "\1F534"; /* Unicode for 'check-circle' icon */
}

.miEtiqueta-Pendiente::before {
    content: "\1F7E0"; /* Unicode for 'check-circle' icon */
}

.miEtiqueta-Completado::before {
    content: "\1F7E2"; /* Green circle emoji */
}

.miEtiqueta-EnEspera::before {
    content: "\1F7E1"; /* Green circle emoji */
}

.miEtiqueta-Cancelado::before {
    content: "\1F534"; /* Green circle emoji */
}

/*#region MENÚ*/
.mi-dropdown-menu {
    padding-top: 0px;
    padding-bottom: 2px;
}

.menu {
    color: var(--bs-light) !important;
}

    .menu:hover,
    .dropdown-item:hover,
    .dropdown-item:focus {
        color: var(--bs-info) !important;
        font-weight: bolder;
        transform: scale(1.1);
        background-color: var(--bs-secondary) !important;
    }


/*#endregion*/

/*#region TABLAS*/
.miTablaDocumentos {
    border-collapse: collapse; /* Collapses borders into a single, removable border */
    border: none; /* Removes the outer border of the table */
    border-spacing: 0; /* Removes space between cells if collapse is not fully supported */
}

.miCeldaDocumentos {
    border: none; /* Removes borders from individual cells */
    padding: 5px; /* Adds some space for content so it's not touching the edge */
}

/*#endregion*/

/*#region GENERALES*/
h3 {
    margin-top: 0.2em !important;
    margin-bottom: 0.1em !important;
    color: var(--bs-secondary) !important;
}

h5 {
    margin-top: 0.1rem !important;
    margin-bottom: 0.1em !important;
    color: var(--bs-secondary) !important;
}

.oculto {
    display: none;
}

.alineadoDerecha {
    text-align: right !important;
}

.alineadoIzquierda {
    text-align: left !important;
}

.centradoAbsoluto {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.centradoHorizontal {
    display: flex;
    justify-content: center;
}

.encabezadoTabla {
    background-color: #FFFFFF !important;
    color: var(--bs-primary) !important;
    text-align: center;
    font-size: 1.2rem;
}

.vertical-grid-table {
    border-collapse: collapse; /* Ensures adjacent borders merge into a single line */
    width: 100%;
    border-radius: 6px;
}

    .vertical-grid-table th {
        text-align: center !important;
        font-weight: bold !important;
        padding: 12px !important;
        border-bottom: 2px solid #000 !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
    }

    .vertical-grid-table td {
        border: none !important;
        border-bottom: 2px solid #AAAAAA !important;
        padding: 10px !important;
        text-align: center !important;
    }




/*#endregion*/

/*#region IMAGEN*/

.logo {
    max-width: 50%;
    max-height: auto;
}

/*#endregion*/

/*#region NUEVA DIRECCION*/
#divNuevaDireccion {
    /* Initially hide the content */
    max-height: 0;
    overflow: hidden;
    /* Add a smooth transition effect */
    transition: max-height 0.9s ease-out, padding 0.5s ease-out;
    padding: 0px; /* Start padding at 0 */
}


    #divNuevaDireccion.visible {
        /* Set a max-height large enough to contain all content */
        max-height: 3000px; /* Adjust this value if your content is taller */
        padding: 0px; /* Animate padding to create a smoother visual effect */
    }

/*#endregion*/