/* Aspecto de Bootstrap 3 sobre Bootstrap 5, solo en tamanos y distribucion (plan de migracion,
   decision del 2026-10-06): letra (familia, tamano y alto de linea), margenes de titulos,
   parrafos y listas, etiquetas en negrita, links sin subrayado, ancho de .container y tamanos
   de botones y campos. Los colores y el estilo de Bootstrap 5 quedan como vienen. Se carga
   despues de Bootstrap 5. */

/* Bootstrap 3 fijaba la raiz en 10px; con los 16px del navegador, todo lo que el CSS propio mide
   en rem (relleno del pie, menu del encabezado del login) crece. */
html {
    font-size: 10px;
}

/* Bootstrap 5 anima el desplazamiento (los links a "#" y lo que se desplaza por codigo);
   con Bootstrap 3 era instantaneo. */
:root {
    scroll-behavior: auto;
}

:root {
    --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-size: 14px;
    --bs-body-line-height: 1.42857143;
}

a {
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: underline;
}

/* Los botones hechos con <a> no se subrayan (en Bootstrap 3, .btn:hover le ganaba a a:hover). */
.btn:hover,
.btn:focus {
    text-decoration: none;
}

label {
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 10px;
}

h1, h2, h3 {
    margin-top: 20px;
}

h4, h5, h6 {
    margin-top: 10px;
}

h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

p {
    margin: 0 0 10px;
}

.lead {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .lead { font-size: 21px; }
}

ul, ol {
    margin-top: 0;
    margin-bottom: 10px;
    padding-left: 40px;
}

/* .container: los anchos de Bootstrap 3 (750, 970 y 1170px) y 15px de relleno. */
.container {
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 576px) {
    .container { max-width: none; }
}

@media (min-width: 768px) {
    .container { max-width: 750px; }
}

@media (min-width: 992px) {
    .container { max-width: 970px; }
}

@media (min-width: 1200px) {
    .container { max-width: 1170px; }
}

/* Botones y campos: relleno, letra, alto de linea y redondeo de Bootstrap 3. */
.btn {
    --bs-btn-padding-x: 12px;
    --bs-btn-padding-y: 6px;
    --bs-btn-font-size: 14px;
    --bs-btn-line-height: 1.42857143;
    --bs-btn-border-radius: 4px;
}

/* Un boton deshabilitado sigue recibiendo el puntero, como en Bootstrap 3: form-validation.js
   muestra los errores al hacer clic sobre el boton de enviar deshabilitado (pointerdown). Bootstrap
   5 le pone pointer-events: none y el clic lo atraviesa. Igual no dispara click: lo bloquea el
   atributo disabled. */
.btn:disabled {
    pointer-events: auto;
    cursor: not-allowed;
}

.btn-lg {
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 10px;
    --bs-btn-font-size: 18px;
    --bs-btn-line-height: 1.3333333;
    --bs-btn-border-radius: 6px;
}

.form-control {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
}

/* Casillas: la fila, la sangria y la etiqueta como el .checkbox de Bootstrap 3. */
.form-check {
    min-height: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 20px;
}

.form-check .form-check-input {
    margin-left: -20px;
    margin-top: 4px;
}

.form-check .form-check-label {
    margin-bottom: 0;
    font-weight: 400;
}

/* ---- Componentes de Main (bloque 4) ---- */

/* Grilla: 30px entre columnas, como Bootstrap 3 (en Bootstrap 5 son 1.5rem, 15px con la raiz de
   10px). */
.row {
    --bs-gutter-x: 30px;
}

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
}

hr {
    margin: 20px 0;
}

.form-group {
    margin-bottom: 15px;
}

/* Etiqueta al costado del campo (control-label de form-horizontal en Bootstrap 3). */
.col-form-label {
    padding-top: 7px;
    padding-bottom: 0;
    line-height: 1.42857143;
}

.btn-sm {
    --bs-btn-padding-x: 10px;
    --bs-btn-padding-y: 5px;
    --bs-btn-font-size: 12px;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-radius: 3px;
}

/* btn-xs no existe en Bootstrap 5. */
.btn-xs {
    --bs-btn-padding-x: 5px;
    --bs-btn-padding-y: 1px;
    --bs-btn-font-size: 12px;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-radius: 3px;
}

.form-control-sm {
    height: 30px;
    min-height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

/* Selects: el tamano de los de Bootstrap 3, con lugar a la derecha para la flecha de form-select. */
.form-select {
    padding: 6px 30px 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    background-position: right 8px center;
}

.form-select-sm {
    height: 30px;
    padding: 5px 30px 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border-radius: 4px;
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.alert > p,
.alert > ul {
    margin-bottom: 0;
}

/* Links de navegacion (navbar, menus, pestanas) sin subrayado al pasar el mouse, con el foco ni
   al hacer clic: en Bootstrap 3, .nav > li > a y .dropdown-menu > li > a le ganaban a a:hover. */
.nav-link:hover,
.nav-link:focus,
.nav-link:active,
.dropdown-toggle:hover,
.dropdown-toggle:focus,
.dropdown-toggle:active,
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active {
    text-decoration: none;
}

/* Pestanas */
.nav-tabs .nav-link {
    margin-right: 2px;
    padding: 10px 15px;
    line-height: 1.42857143;
    border-radius: 4px 4px 0 0;
}

/* Pestana no seleccionada con el mouse encima o con el foco: el fondo gris de Bootstrap 3. */
.nav-tabs .nav-link:not(.active):hover,
.nav-tabs .nav-link:not(.active):focus {
    background-color: #eee;
    border-color: #eee #eee #ddd;
}

/* Menus desplegables */
.dropdown-menu {
    --bs-dropdown-min-width: 160px;
    --bs-dropdown-padding-y: 5px;
    --bs-dropdown-spacer: 2px;
    --bs-dropdown-font-size: 14px;
    --bs-dropdown-border-radius: 4px;
    --bs-dropdown-item-padding-x: 20px;
    --bs-dropdown-item-padding-y: 3px;
    --bs-dropdown-divider-margin-y: 9px;
}

.dropdown-item {
    line-height: 1.42857143;
}

/* Menus del navbar: pegados al navbar, como en Bootstrap 3. */
.navbar-nav .dropdown-menu {
    --bs-dropdown-spacer: 0;
}

/* Navbar: 50px de alto, links con 15px de relleno y 20px de alto de linea. */
.navbar {
    --bs-navbar-padding-x: 0;
    --bs-navbar-padding-y: 0;
    min-height: 50px;
}

.navbar-brand {
    height: 50px;
    padding: 15px;
    margin-right: 0;
    font-size: 18px;
    line-height: 20px;
}

.navbar-expand-md .navbar-nav .nav-link {
    padding: 15px;
    line-height: 20px;
}

/* El logo y el ultimo menu llegan a los bordes de .container-fluid, como en Bootstrap 3. */
.navbar > .container-fluid .navbar-brand {
    margin-left: -15px;
}

.navbar > .container-fluid .navbar-nav.ms-auto:last-child {
    margin-right: -15px;
}

/* Flecha de los menus: la de Bootstrap 3 (8px de ancho, 2px a la izquierda, centrada). */
.dropdown-toggle::after {
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-bottom: 0;
    border-left: 4px solid transparent;
}

/* Tablas: sin fondo propio en las celdas (Bootstrap 5 las pinta de blanco). */
.table {
    --bs-table-bg: transparent;
    margin-bottom: 20px;
}

.table > :not(caption) > * > * {
    padding: 8px;
    line-height: 1.42857143;
}

.table > thead > tr > th {
    border-bottom-width: 2px;
}

/* Modales: 600px de ancho (900px el grande), 30px de margen arriba, 15px de relleno. */
.modal {
    --bs-modal-width: 600px;
    --bs-modal-margin: 30px;
    --bs-modal-padding: 15px;
    --bs-modal-header-padding: 15px;
    --bs-modal-header-padding-x: 15px;
    --bs-modal-header-padding-y: 15px;
    --bs-modal-title-line-height: 1.42857143;
    --bs-modal-border-radius: 6px;
}

@media (min-width: 992px) {
    .modal-lg {
        --bs-modal-width: 900px;
    }
}

.modal-title {
    margin: 0;
}