/* Puente mínimo de clases heredadas de Bootstrap 3 mientras se migran plantillas a Bootstrap 5. */
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.form-group { margin-bottom: 1rem; }
.control-label { margin-bottom: 0.5rem; }

/*
 * BS5: .container-fluid aplica padding horizontal (gutter). Eso deja una franja blanca
 * a la izquierda del menú lateral. Solo el shell del NestedMaster (bddo-shell-fluid).
 */
.bddo-shell-fluid {
    --bs-gutter-x: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/*
 * BS5: .row usa flexbox. Un hijo con position:fixed (.col-izq menú lateral) deja de ocupar
 * hueco en el flex y .col-der pasa a medir 100% → el contenido se superpone al menú.
 * Esta fila del NestedMaster debe comportarse como el .row en float de BS3.
 */
.bddo-master-row {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}
.bddo-master-row::after {
    content: "";
    display: table;
    clear: both;
}

/* --- Menú lateral (#menuPaginas .menu-lateral): regresiones tras BS5 Reboot / dropdown --- */

/* Reboot BS5 subraya los <a> por defecto; el menú debe verse sin subrayado y en blanco */
.menu-lateral .botonera a,
.menu-lateral .botonera li a {
    text-decoration: none !important;
    color: #fff !important;
}

.menu-lateral .botonera li a:hover,
.menu-lateral .botonera li a:focus,
.menu-lateral .botonera li a:active,
.menu-lateral .botonera li a:visited {
    text-decoration: none !important;
}

/* BS5 añade .dropdown-toggle::after (triángulo); ya existe ícono vía .nombre-usuario … span:after */
.menu-lateral .nombre-usuario .dropdown-toggle::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
    margin-left: 0 !important;
}

.menu-lateral .nombre-usuario .dropdown-toggle {
    text-decoration: none !important;
}

/* Ancla del usuario: contexto para el pseudo-elemento del chevron custom */
.menu-lateral .nombre-usuario li.dropdown > a.dropdown-toggle {
    position: relative;
}

.menu-lateral .nombre-usuario ul {
    padding-left: 0;
    margin-bottom: 0;
}

/*
 * No anular márgenes de .row dentro de #page-content: BS5 usa márgenes negativos en .row
 * para alinear el gutter de .col-*; forzar margin: 0 descompone la grilla (p. ej. bandeja empleador).
 */

.col-der .contenido-central {
    min-width: 0;
    box-sizing: border-box;
}

/* Shell: sin franja entre borde del viewport y el menú fijo */
html {
    margin: 0;
    padding: 0;
}

.col-izq.menu-lateral {
    left: 0 !important;
}

/* Formularios en contenido (p. ej. Subir documento): fieldset y foco acordes al sitio */
.col-der #page-content fieldset {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem 1.25rem 1.25rem;
    margin-bottom: 1rem;
}

.col-der #page-content fieldset > legend {
    float: none;
    width: auto;
    padding: 0 0.35rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #00a69c;
}

.col-der #page-content .form-select,
.col-der #page-content .form-control {
    border-radius: 0.375rem;
}

/*
 * BS5: el chevron del <select> solo viene con .form-select; el sitio usa .form-control en DropDownList.
 * Sin esto, appearance:none (Reboot) deja el select sin flecha nativa ni sustituto.
 */
.col-der #page-content select.form-control:not([multiple]):not([size]) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

.col-der #page-content select.form-control:not([multiple]):not([size]):focus {
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.col-der #page-content select.form-control:not([multiple]):not([size]):disabled {
    background-color: var(--bs-secondary-bg, #e9ecef);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.col-der #page-content .form-control:focus,
.col-der #page-content .form-select:focus {
    border-color: #00a69c;
    box-shadow: 0 0 0 0.2rem rgba(0, 166, 156, 0.22);
}

.col-der #page-content input.btn-primario,
.col-der #page-content .btn.btn-primario {
    border-radius: 0.375rem;
    border: none;
}

/* Botones tipo enlace (.btn) en contenido: quitar subrayado/borde/sombra por defecto de BS5 */
.col-der #page-content a.btn,
.col-der #page-content a.btn:focus,
.col-der #page-content a.btn:focus-visible,
.col-der #page-content a.btn:hover {
    text-decoration: none !important;
}

.col-der #page-content a.btn-primary.bu3,
.col-der #page-content a.btn.bu3 {
    border: none !important;
    box-shadow: none !important;
}

.col-der #page-content a.btn-primary.bu3:focus-visible {
    outline: 2px solid rgba(0, 166, 156, 0.6);
    outline-offset: 2px;
    box-shadow: none !important;
}

/* Centro de ayuda (.bu3): reglas locales en la página pueden chocar; refuerzo BS5 */
.col-der #page-content a.btn.btn-primary.bu3 {
    --bs-btn-color: #fff;
    --bs-btn-bg: #004451;
    --bs-btn-border-color: #004451;
    --bs-btn-hover-bg: #011b20;
    --bs-btn-hover-border-color: #011b20;
    --bs-btn-active-bg: #011b20;
    --bs-btn-active-border-color: #011b20;
    --bs-btn-focus-shadow: 0 0 0 0.2rem rgba(0, 68, 81, 0.35);
    background: #004451 !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
}

.col-der #page-content a.btn.btn-primary.bu3:hover,
.col-der #page-content a.btn.btn-primary.bu3:focus {
    background: #011b20 !important;
    color: #fff !important;
}

/* Ancho máximo al contenedor — solo enlaces ayuda (no otros .bu3) */
.col-der #page-content a.btn.bu3 {
    max-width: min(520px, 100%) !important;
    box-sizing: border-box;
}

/*
 * Bandeja de documentos: BS5 deja “fantasma” a los .btn sin variante (solo borde transparente).
 * Antes dependían de estilos viejos / tema; unificamos secundarios (Eliminar, Visualizar, etc.).
 */
/* Gris claro secundario (Eliminar / Visualizar) — texto oscuro para contraste */
.btn.btndelete,
.col-der #page-content .btn.btndelete {
    background-color: #e8e8e8 !important;
    color: #3a3a3a !important;
    border: 1px solid #d0d0d0 !important;
}

.btn.btndelete:hover,
.btn.btndelete:focus {
    background-color: #dcdcdc !important;
    color: #222 !important;
}

/*
 * BS5: .btn-info usa fondo claro y texto oscuro. En contenido interno se conserva el aspecto
 * tipo BS3 (cian #5bc0de, texto blanco), p. ej. Usuarios > Modificar / Actualizar estado.
 */
.col-der #page-content .btn.btn-info,
.col-der #page-content a.btn.btn-info,
.col-der #page-content button.btn.btn-info,
.col-der #page-content input.btn.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: #5bc0de;
    --bs-btn-border-color: #46b8da;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #39b3d7;
    --bs-btn-hover-border-color: #269abc;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #269abc;
    --bs-btn-active-border-color: #1b6d85;
    background-color: #5bc0de !important;
    border-color: #46b8da !important;
    color: #fff !important;
}

.col-der #page-content .btn.btn-info:hover,
.col-der #page-content .btn.btn-info:focus,
.col-der #page-content a.btn.btn-info:hover,
.col-der #page-content a.btn.btn-info:focus,
.col-der #page-content button.btn.btn-info:hover,
.col-der #page-content button.btn.btn-info:focus,
.col-der #page-content input.btn.btn-info:hover,
.col-der #page-content input.btn.btn-info:focus {
    background-color: #39b3d7 !important;
    border-color: #269abc !important;
    color: #fff !important;
}

/* Visualizar (empleado): .btn.btn-100-xs sin .btn-success */
.col-der #page-content .buttons .btn.btn-100-xs:not(.btn-success),
.col-der #page-content .buttons input.btn.btn-100-xs:not(.btn-success) {
    background-color: #e8e8e8 !important;
    color: #3a3a3a !important;
    border: 1px solid #d0d0d0 !important;
    width: auto !important;
    min-width: 5.5rem;
}

.col-der #page-content .buttons .btn.btn-100-xs:not(.btn-success):hover,
.col-der #page-content .buttons .btn.btn-100-xs:not(.btn-success):focus {
    background-color: #dcdcdc !important;
    color: #222 !important;
}

/* Empleador: botones con solo .btn (Eliminar, Visualizar), sin variante BS5 */
.col-der #page-content .pull-right > .btn:not(.btn-primario):not(.btn-success):not(.btn-neutro):not(.btn-secundario):not(.btn-secundary):not(.btn-primary):not(.btn-secondary):not(.btn-mail) {
    background-color: #e8e8e8 !important;
    color: #3a3a3a !important;
    border: 1px solid #d0d0d0 !important;
}

.col-der #page-content .pull-right > .btn:not(.btn-primario):not(.btn-success):not(.btn-neutro):not(.btn-secundario):not(.btn-secundary):not(.btn-primary):not(.btn-secondary):not(.btn-mail):hover,
.col-der #page-content .pull-right > .btn:not(.btn-primario):not(.btn-success):not(.btn-neutro):not(.btn-secundario):not(.btn-secundary):not(.btn-primary):not(.btn-secondary):not(.btn-mail):focus {
    background-color: #dcdcdc !important;
    color: #222 !important;
}

/* Typo en EmployerTray.ascx: class="btn btn-secundary" */
.btn-secundary {
    background-color: #3bbeb0 !important;
    color: #fff !important;
    border: 1px solid transparent !important;
}

.btn-secundary:hover,
.btn-secundary:focus {
    background-color: #39aa99 !important;
    color: #fff !important;
}