body {
   
    padding-bottom: 20px;
    font-size: 1.25em;
 /*  padding-top:150px; */
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

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


.push-right {
    float: right;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.myPadding {
    padding: 25px 0px 0px 0px;
}

.rowHeader {
    background-color: #b1d3d5;
   
}


.item {
    padding: 25px 25px 25px 25px;
}

.textSizeMD{
    font-size:medium ;
}

.textRight{
    text-align:right;
}

.textCenter{
    text-align:center;
}

.textJustify {
    text-align: justify;
}


.icon-input-btn {
    display: inline-block;
    position: relative;
}
<!--

    .icon-input-btn input[type="submit"] {
        padding-left: 2em;
        background-color: #808080;
        color: #fff;
    }

    .icon-input-btn .glyphicon {
        color: #fff;
        display: inline-block;
        background-color: #808080;
        position: absolute;
        left: 0.65em;
        top: 30%;
    }

    .icon-input-btn input[type="submit"]:hover {
        color: #fff;
        background-color: #000000;
        border-color: #8c8b8b
    }

table.class-1 {
    border-top: 3px double #b9b9b9;
}

hr.class-1 {
    border-top: 3px solid #d9d9d9;
}

hr.class-2 {
    border-top: 3px double #d9d9d9;
}

hr.class-3 {
    border-top: 1px dashed #d9d9d9;
}

hr.class-4 {
    border-top: 1px dotted #d9d9d9;
}

hr.class-5 {
    background-color: #fff;
    border-top: 2px dashed #d9d9d9;
}

hr.class-6 {
    background-color: #fff;
    border-top: 5px dotted #d9d9d9;
}

.btn-primary-custom {
    /* Tipografía limpia y legible */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.2;
    /* Tamaño y espaciado */
    height: 35px;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Colores */
    color: #ffffff;
    background-color: #4c9595;
    border: none;
    border-radius: 0.25rem;
    /* Sombra sutil del mismo tono */
    box-shadow: 0 0 0 0.1rem rgba(76,149,149, 0.5);
    /* Transiciones */
    transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

    .btn-primary-custom:hover {
        background-color: #3e7a7a; /* Un tono más oscuro */
        color: #ffffff;
    }

    .btn-primary-custom:focus,
    .btn-primary-custom.focus {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(76,149,149, 0.75);
    }

    .btn-primary-custom:active {
        background-color: #367a7a; /* Aún más oscuro al hacer clic */
        box-shadow: inset 0 0.1rem 0.2rem rgba(0,0,0,0.1);
    }



 /*
.btn-primary-custom {
    height: 35px;
    color: #000000;
    background-color: #b1d3d5;
    box-shadow: 0 0 0 .1rem #808080;
    padding: 10px,0,0,10px;
   
}


    .btn-primary-custom:hover {
        color: #b1d3d5;
        background-color: #4d818a;
        border-color: #8c8b8b
    }

    .btn-primary-custom:focus,
    .btn-primary-custom.focus {
        box-shadow: 0 0 0 .2rem rgb(0,0, 0,0.5)
    }*/


/*nav tem*/
 
.navbar {

 
    font-family: Arial;
    /*background-color: #b1d3d5;*/
    background-color: #4c9595;
         padding-left:25px;
    color:white ;
    font-weight:200;
 
   /* padding-right:25px;
   
    padding-bottom:10px;*/
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:focus {
    color: #ffffff !important;
}

/* Ítems del dropdown cuando se hace hover */
.navbar-custom .dropdown-menu .dropdown-item:hover,
.navbar-custom .dropdown-menu .dropdown-item:focus {
    color: #ffffff;
    background-color: rgba(76, 149, 149, 0.8); /* tono semitransparente de tu navbar */
}

/* Para el toggler icon si quisieras que cambie de color */
.navbar-custom .navbar-toggler:hover .navbar-toggler-icon {
    filter: brightness(0) invert(1);
}
Links inside the navbar
.navbar a {
    float: left;
    font-size: 2em;
    color: white;
    text-align: center;
    padding-left: 130px;
    text-decoration: none;
    font-weight: 900;
}


.footer-custom {
    background-color: #b1d3d5;
    padding: 20px 0;
    text-align: center;
    color: black;
}

.nav-item-spacing {
    margin-right: 15px; /* Ajusta este valor según sea necesario */
}

.text-white-custom {
    color: white !important;
}


.black-link {
    color: black !important;
    font-size:1em;
    text-decoration: none; /* Opcional, para quitar el subrayado */
}

    .black-link:hover {
        color: white !important; /* Cambia el color al pasar el mouse */
    }

    .black-link:active {
        color: gray !important; /* Cambia el color cuando se hace clic */
    }

.btn-spacing {
    margin-top: 12px; /* espacio arriba */
    margin-bottom: 12px; /* espacio abajo */
    display: inline-flex; /* o flex si son bloques */
    align-items: center; /* centra verticalmente */
    justify-content: center; /* centra horizontalmente */
    padding: 0.5rem 1rem;
}
 
.btn-custom {
    width: 100%; /* Hace que todos los botones tengan el mismo ancho */
    margin-bottom: 10px; /* Espaciado entre botones */
    padding: 10px; /* Espaciado interno */
    text-align: left; /* Alinea el texto a la izquierda */
    display: flex;
    align-items: center; /* Centra el contenido verticalmente */
}

.btn-custom i,
.btn-custom .glyphicon {
    margin-right: 8px; /* Espaciado entre el ícono y el texto */
}

 
.btn-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 16px;
    width: 220px; /* Tamaño uniforme */
    height: 50px;
    text-align: center;
    transition: all 0.3s ease;
    border: none;
    margin-bottom: 10px; /* Menos espacio entre botones */
    color: black; /* Letras en negro */
}

.btn-modern i {
    font-size: 1.2rem;
}

/* Botón principal basado en #b1d3d5 */
.btn-primary-modern {
    background: linear-gradient(135deg, #b1d3d5, #87b8ba);
    border:  1px solid #000000;
}

    .btn-primary-modern:hover {
        background: linear-gradient(135deg, #87b8ba, #5e9ea1);
        color: white; /* Letras en blanco al pasar el cursor */
    }

/* Botón de SOMETER */
.btn-success-modern {
    background: linear-gradient(135deg, #28a745, #218838);
    border: 1px solid #000000;
}

    .btn-success-modern:hover {
        background: linear-gradient(135deg, #218838, #19692c);
        color: white;
    }

/* Botón de Regresar */
.btn-secondary-modern {
    /*background: linear-gradient(135deg, #218838, #495057);*/
    background: linear-gradient(135deg, #6c757d, #495057);
}

    .btn-secondary-modern:hover {
        background: linear-gradient(135deg, #495057, #343a40);
        color: white;

    }

/* Contenedor con espaciado uniforme */
.btn-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Menos espacio entre botones */
}

 
.form-modern {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Espacio entre label y input */
}

.form-modern label {
    font-weight: bold;
    color: #333;
    font-size: 1em;
}

.form-modern input {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid #b1d3d5;
    border-radius: 8px;
    font-size: 1em;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

    .form-modern input:focus {
        border-color: #87b8ba;
        outline: none;
        background-color: #f8fafa;
        box-shadow: 0px 0px 8px rgba(135, 184, 186, 0.8);
    }

.text-danger {
    font-size: 1em;
    margin-top: 5px;
}


.form-modern select {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid #b1d3d5;
    border-radius: 8px;
    font-size: 1em;
    transition: all 0.3s ease;
    background-color: white;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

    .form-modern select:focus {
        border-color: #87b8ba;
        outline: none;
        background-color: #f8fafa;
        box-shadow: 0px 0px 8px rgba(135, 184, 186, 0.8);
    }
.radio-group {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #f8fafa;
    padding: 10px;
    border-radius: 8px;
    border: 2px solid #b1d3d5;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

    .radio-group label {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 16px;
        color: #333;
        cursor: pointer;
    }

    .radio-group input[type="radio"] {
        accent-color: #87b8ba;
        transform: scale(1.2);
        cursor: pointer;
    }

   

.btn-danger-custom {
    height: 35px;
    color: #fafafa;
    background-color: #ee2525;
    box-shadow: 0 0 0 .1rem #808080;
    padding: 10px,0,0,10px;
}


    .btn-danger-custom:hover {
        color: #b1d3d5;
        background-color: #ee2525;
        border-color: #8c8b8b
    }

    .btn-danger-custom:focus,
    .btn-danger-custom.focus {
        box-shadow: 0 0 0 .2rem rgb(0,0, 0,0.5)
    }

/* ===============================
   ESTILOS PARA LA TABLA DE SOLICITUDES
   =============================== */
.custom-table {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    border-collapse: separate;
    border-spacing: 0 0.35rem;
}

    /* Encabezado */
    .custom-table thead {
        background-color: #4c9595; /* color del navbar */
        display: table-header-group !important; /* aseguramos que se muestre */
    }

        .custom-table thead th {
            color: #000000; /* texto blanco */
            font-size: 1rem; /* tamaño legible */
            font-weight: 600;
            padding: 0.75rem 1rem;
            vertical-align: middle;
        }

    /* Filas */
    .custom-table tbody tr {
        background-color: #f8f9fa;
        transition: background-color 0.2s;
    }

        .custom-table tbody tr:hover {
            background-color: rgba(76,149,149, 0.15);
        }

    /* Celdas */
    .custom-table tbody td {
        font-size: 0.95rem;
        color: #333;
        padding: 0.75rem 1rem;
    }

    /* Etiqueta secundaria (tipo de solicitud) */
    .custom-table .tipo-solicitud {
        display: block;
        font-size: 0.85rem;
        color: #4c9595;
        font-weight: 500;
    }

/* Responsive para móviles pequeños */
@media (max-width: 576px) {
    .custom-table thead th,
    .custom-table tbody td {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }
}


/* de accesibilidad */
 
body.alto-contraste {
    background-color: #000 !important;
    color: #fff !important;
}

body.alto-contraste a {
    color: yellow !important;
}

#menu-accesibilidad button {
    background-color: #f8f9fa;
    border: 1px solid #ccc;
    margin: 2px;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

    #menu-accesibilidad button:hover {
        background-color: #e2e6ea;
    }


.tab-content {
    position: relative;
}

.tab-pane {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    display: none;
}

    .tab-pane.active {
        display: block;
        position: relative;
    }
/* Forzar visibilidad correcta del modal */
.modal.fade.show {
    display: block !important;
    opacity: 1 !important;
}

.modal-backdrop {
    z-index: 1040 !important;
    opacity: 0.5 !important;
}

.modal {
    z-index: 1050 !important;
}

/* Asegurar visibilidad en pantallas pequeñas */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 1rem auto;
    }

    .modal-content {
        font-size: 1rem;
    }
}


 
@media (max-width: 576px) {
    #imagenGrande

{
    max-height: 80vh;
}

}
 
.page-overlay {
    position: fixed;
    inset: 0; /* top:0;right:0;bottom:0;left:0 */
    z-index: 3000; /* por encima de modal (1055) y backdrop (1050) */
    background: rgba(255,255,255,0.92);
    backdrop-filter: saturate(180%) blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.page-overlay.d-none {
    display: none !important;
}

.overlay-content {
    text-align: center;
    padding: 16px;
}
/* Evitar scroll del body mientras está el overlay */
body.overlay-lock {
    overflow: hidden;
}