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

.container, .container-fluid {
    max-width: 95%;
    width: 100%;
    margin: 0 auto;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.btn-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-toggler {
    border-color: white !important; /* Cambia el color del borde del botón */
    border-width: 3px;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

h1 {
    color: darkorange;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}

h2 {
    color: darkorange;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}

h3 {
    color: darkorange;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}

h4 {
    color: darkorange;
    border: 0px solid red;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}

h5 {
    color: darkorange;
    border: 0px solid red;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}

html {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: bold;
    position: relative;
    min-height: 100%;
}

header {
    background-color: #262944;
}

body-header {
    background-color: #262944;
}

body {
    margin-bottom: 60px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    margin: 8px 0 16px;
    background-color: #F3F1E6;
}

p {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: black;
}

li {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: black;
}

footer {
    background-color: #9A410E;
}

navbar {
    background-color: #262944; /* Cambia este valor al color que desees */
    color: #ffffff; /* Cambia el color del texto si es necesario */
}

select {
    width: 200px;
    height: 40px;
}

label {
    width: 200px;
    color: white;
}

input {
    width: 200px;
    height: 40px;
    color: white;
}

div {
    /* margin: 5px; */
}

button {
    height: 40px;
}

.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* CHECKBOX - VERTICAL */
/* =================== */
.checkbox-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

    .checkbox-vertical label {
        margin-bottom: 2px;
        font-weight: 400;
        max-width: 100%; /* se ajusta a la columna */
        white-space: nowrap; /* una sola línea */
        overflow: hidden; /* oculta el exceso */
        text-overflow: ellipsis; /* muestra "..." */
        display: block; /* necesario para ellipsis */
        text-align: center;
    }

    .checkbox-vertical input[type="checkbox"] {
        width: 25px;
        height: 25px;
    }

/* PRIVACY CONSENT */
/* =================== */
.privacy-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
    margin-bottom: 0.75rem;
    padding-left: 0.75rem;
}

    .privacy-consent.form-check {
        padding-left: 0.75rem;
    }

    .privacy-consent .form-check-input {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
        margin-left: -0.75rem;
        margin-top: 0.15rem;
    }

    .privacy-consent .form-check-label {
        width: auto;
        margin: 0;
        white-space: normal;
        min-width: 0;
        max-width: 100%;
        flex: 1 1 auto;
        overflow-wrap: anywhere;
    }

    .privacy-consent .form-check-label a {
        margin-left: 4px;
    }

/* BUTTON - VERTICAL */
/* =================== */
.button-vertical {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

    .button-vertical label {
        margin-bottom: 0px;
        font-weight: 400;
        max-width: 100%; /* se ajusta a la columna */
        white-space: nowrap; /* una sola línea */
        overflow: hidden; /* oculta el exceso */
        text-overflow: ellipsis; /* muestra "..." */
        display: block; /* necesario para ellipsis */
        text-align: left;
    }

.invisible {
    visibility: hidden; /* ocupa espacio pero no se ve */
}


/* ICONOS */
/* ============== */
.icon-btn {
    border: none;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

td {
    white-space: nowrap;
}

.icon-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.icon-btn:hover {
    opacity: 0.7;
}

.icon-btn:focus {
    outline: 1px solid #6c757d;
    border-radius: 2px;
}


/* TABLA DE COLOR   */
/* ===============  */
.table_Color {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    white-space: nowrap; /* Evita saltos raros */
    overflow: hidden;
    text-overflow: ellipsis; /* ... cuando no cabe */
    vertical-align: middle;
}

    .table_Color thead {
        background: #FF8C00;
        color: #fff;
        font-size: 14px;
    }

        /* Estilo para enlaces del cabecero de tablas (ordenación) */
        .table_Color thead a {
            color: #fff !important;
            text-decoration: none;
            font-weight: bold;
        }

            .table_Color thead a:hover {
                color: #dddddd !important; /* Color al pasar el ratón (opcional) */
            }

    .table_Color th {
        height: 40px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .table_Color tbody tr:nth-child(odd) {
        background: #ffedd5;
        height: 40px;
    }

    .table_Color tbody tr:nth-child(even) {
        background: #FFFFFF;
        height: 40px;
    }

    .table_Color td {
        height: 40px;
        text-align: left;
        padding: 0 8px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        /* Última columna (acciones) centrada */
        .table_Color td:last-child,
        .table_Color th:last-child {
            text-align: center;
            white-space: nowrap;
        }

    .table_Color tfoot {
        background: #262944;
        color: #fff;
        font-size: 14px;
    }


.table_White {
    border-collapse: collapse;
    width: 100%;
}

    .table_White tbody tr:nth-child(odd) {
        background: white;
    }

    .table_White tbody tr:nth-child(even) {
        background: white;
    }


/* =====================================
   TEXTO OSCURO EN TABLAS DEL ACORDEÓN
   ===================================== */

.accordion-body .table_Color,
.accordion-body .table_Color td {
    color: #000 !important;
}


/* MENU DE NAVEGACIÓN */
/* BOCADILLO */
/* ================== */

/* Estilos del botón del menú */
.menu-container {
    position: relative;
    display: inline-block;
}

.menu-button {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600; /* Bold */
    background-color: #262944;
    border: 3px solid darkorange;
    color: white;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 2px;
}

/* Estilos para el contenido desplegable */
.menu-content {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600; /* Bold */
    display: none;
    position: absolute;
    background-color: #516A90;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    padding: 10px;
    margin-top: 5px;
    z-index: 1;
    min-width: 255px;
}

    .menu-content a {
        color: white;
        padding: 8px 12px;
        text-decoration: none;
        display: block;
        border-radius: 2px;
    }

        .menu-content a.linea {
            padding: 0px 12px;
        }

        .menu-content a:hover {
            background-color: #FF7D2C;
            text-transform: uppercase;
            font-weight: bold;
        }

    /* Triángulo del bocadillo */
    .menu-content::before {
        content: "";
        position: absolute;
        top: -10px;
        left: 20px;
        border-width: 10px;
        border-style: solid;
        border-color: transparent transparent white transparent;
    }

.uppercase-text {
    text-transform: uppercase;
}

.uppercase-text-centrado {
    text-transform: uppercase;
    display: block; /* Hace que el enlace ocupe toda la línea */
    text-align: center; /* Centra el texto */
}

.centrado {
    display: block; /* Hace que el enlace ocupe toda la línea */
    text-align: center; /* Centra el texto */
}

.search_header_frame {
    font: 300;
    width: 100%;
    color: white;
    background-color: #262944;
    text-align: left;
    border: solid;
    border-width: 2px;
    border-color: darkorange;
    padding: 5px 5px 5px 5px;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.single_frame {
    display: block;
    width: 100%;
    height: auto;
    color: white;
    background-color: #262944;
    align-items: center;
    overflow-y: auto;
    border: solid;
    border-width: 2px;
    border-color: darkorange;
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    border-top-left-radius: 1px;
    border-top-right-radius: 1px;
    padding: 5px 5px 5px 5px;
}

    .single_frame select {
        width: 400px;
        height: 40px;
    }

    .single_frame ul {
        list-style: none;
        padding: 0px;
    }

    .single_frame li {
        padding: 0px;
    }

    .single_frame a {
        text-decoration: none;
        color: blue;
    }


.double_top_frame {
    display: block;
    width: 100%;
    height: 325px;
    color: white;
    background-color: #262944;
    align-items: center;
    overflow-y: auto;
    border: solid;
    border-width: 2px;
    border-color: darkorange;
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    border-top-left-radius: 1px;
    border-top-right-radius: 1px;
    padding-inline-start: 5px;
    padding-inline-end: 5px;
    padding: 5px 5px 5px 5px;
    margin-bottom: 5px;
}

    .double_top_frame ul {
        list-style: none;
    }

    .double_top_frame li {
    }

    .double_top_frame a {
        text-decoration: none;
        color: blue;
    }

    .double_top_frame dl {
        list-style: none;
    }

    .double_top_frame dt {
        padding: 5px;
    }


.double_bottom_frame {
    display: block;
    width: 100%;
    height: 325px;
    color: white;
    background-color: #262944;
    align-items: center;
    overflow-y: auto;
    border: solid;
    border-width: 2px;
    border-color: darkorange;
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    border-top-left-radius: 1px;
    border-top-right-radius: 1px;
    padding-inline-start: 5px;
    padding-inline-end: 5px;
    padding: 5px 5px 5px 5px;
}

    .double_bottom_frame ul {
        list-style: none;
    }

    .double_bottom_frame li {
    }

    .double_bottom_frame a {
        text-decoration: none;
        color: blue;
    }

    .double_bottom_frame td {
        padding: 5px;
    }



.header_frame {
    font: 300;
    width: 99%;
    background-color: #262944;
    color: white;
    height: 40px;
    text-align: left;
    border: none;
}


.data_frame .form-group {
    margin-bottom: 5px;
}

.data_frame .form-control {
    padding: 5px;
    box-sizing: border-box;
}

.data_frame .btn {
    margin: 5px 0;
}

.data_frame table td, .data_frame table th {
    padding: 1px 5px;
    vertical-align: central;
}

.data_frame .header_frame {
    padding: 5px 5px;
}