/* ================================================================================================
   CAPA DE COMPATIBILIDAD BOOTSTRAP 3 -> BOOTSTRAP 4

   La aplicacion se ha pasado a Bootstrap 4, pero hay clases de la 3 repartidas por cientos de
   ficheros que en la 4 ya no existen. En lugar de tocar 300 ficheros de golpe, aqui se vuelven a
   definir. Asi nada de lo viejo se cae y se pueden ir migrando pantallas con calma.

   Se carga DESPUES de bootstrap 4 y ANTES de main.css, que es el tema (Klorofil, escrito para
   Bootstrap 3) y manda sobre esto.

   Lo que cubre, con los ficheros afectados contados el 27/10/2026:
       .panel / .panel-body / .panel-heading / .panel-footer   91 ficheros
       .btn-default                                           237 ficheros
       .img-responsive                                          4 ficheros
       .col-xs-*                                                3 ficheros
       .pull-right / .pull-left                                 1 fichero
       barra superior (.navbar-form, .navbar-right, ...)        1 fichero (comunes/pf_barra_superior)
       .nav en bloque: imprescindible para el menu lateral

   Segun se vayan migrando pantallas se pueden ir borrando bloques de aqui.
   ================================================================================================ */

/* ---------------------------------------------------------------- PANELES ---- */
/* En Bootstrap 4 se llaman .card. El tema les da su aspecto; esto es solo la base. */
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.panel-body {
    padding: 15px;
}

    .panel-body:before,
    .panel-body:after {
        display: table;
        content: " ";
    }

    .panel-body:after {
        clear: both;
    }

.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.panel-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}

.panel-default {
    border-color: #ddd;
}

.panel-group {
    margin-bottom: 20px;
}

/* ---------------------------------------------------------------- BOTONES ---- */
/* .btn-default desaparece en Bootstrap 4 (seria .btn-secondary, con otro aspecto) */
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

    .btn-default:hover,
    .btn-default:focus,
    .btn-default.focus,
    .btn-default:active,
    .btn-default.active {
        color: #333;
        background-color: #e6e6e6;
        border-color: #adadad;
    }

    .btn-default.disabled,
    .btn-default:disabled {
        color: #333;
        background-color: #fff;
        border-color: #ccc;
        opacity: .65;
    }

/* ---------------------------------------------------------------- IMAGENES Y FLOTADOS ---- */
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.img-rounded {
    border-radius: 6px;
}

.img-circle {
    border-radius: 50%;
}

.pull-right {
    float: right !important;
}

.pull-left {
    float: left !important;
}

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.hidden {
    display: none !important;
}

.show {
    display: block !important;
}

/* el triangulito de los desplegables */
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* ---------------------------------------------------------------- REJILLA col-xs-* ---- */
/* En Bootstrap 4 el tramo mas pequeno no lleva prefijo: col-xs-6 pasa a ser col-6 */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    float: left;
}

.col-xs-1 { width: 8.333333%; }
.col-xs-2 { width: 16.666667%; }
.col-xs-3 { width: 25%; }
.col-xs-4 { width: 33.333333%; }
.col-xs-5 { width: 41.666667%; }
.col-xs-6 { width: 50%; }
.col-xs-7 { width: 58.333333%; }
.col-xs-8 { width: 66.666667%; }
.col-xs-9 { width: 75%; }
.col-xs-10 { width: 83.333333%; }
.col-xs-11 { width: 91.666667%; }
.col-xs-12 { width: 100%; }

/* ---------------------------------------------------------------- NAVEGACION ---- */
/* IMPRESCINDIBLE: en Bootstrap 4 .nav es flex, y el menu lateral se pondria en horizontal */
.nav {
    display: block;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

    .nav > li {
        position: relative;
        display: block;
    }

        .nav > li > a {
            position: relative;
            display: block;
            padding: 10px 15px;
        }

            .nav > li > a:hover,
            .nav > li > a:focus {
                text-decoration: none;
            }

/* ---------------------------------------------------------------- BARRA SUPERIOR ---- */
/* El tema dibuja la barra con flotados al estilo Bootstrap 3; la 4 la monta con flex */
.navbar {
    display: block;
    padding: 0;
    flex-wrap: nowrap;
}

/* En Bootstrap 4 el contenedor de dentro de la barra tambien es flex, y eso tiraba el logo
   a una linea propia (la barra pasaba de 50 a 96 px). El tema lo monta con flotados. */
.navbar > .container,
.navbar > .container-fluid {
    display: block;
}

.navbar-fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.navbar-right {
    float: right !important;
}

.navbar-left {
    float: left !important;
}

.navbar-nav {
    display: block;
    float: left;
    margin: 0;
    padding-left: 0;
    list-style: none;
}

    .navbar-nav > li {
        float: left;
        position: relative;
        display: block;
    }

        .navbar-nav > li > a {
            display: block;
        }

.navbar-form {
    display: block;
    float: left;
    padding: 8px 15px;
    margin: 8px 0;
}

.navbar-collapse {
    display: block;
}

/* los desplegables de la barra: Bootstrap 4 los coloca con Popper, pero el tema espera
   posicionamiento clasico colgando del <li> */
.navbar-nav > li > .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    margin-top: 0;
}

/* ---------------------------------------------------------------- MODALES ---- */
/* En Bootstrap 3 la clase .modal-dialog-centered NO hacia nada, asi que los modales salian
   pegados arriba y la ventana hacia scroll. En la 4 si centra, y los modales altos (hay varios
   de casi 1000 px) se salian por arriba: no se llegaba ni a la cabecera ni al boton de cerrar.
   Se mantiene el centrado, pero el contenido nunca pasa del alto de la pantalla y hace scroll
   por dentro. */
.modal-dialog-centered .modal-content {
    max-height: calc(100vh - 3.5rem);
    overflow-y: auto;
}

/* El ancho: Bootstrap 3 lo daba con width y Bootstrap 4 lo da con max-width. Hay 61 modales
   en la aplicacion que traen su propio ancho puesto a mano (style="width:85%", 95%, 840px...)
   y la 4 se los recortaba a 800 px los .modal-lg y a 500 px el resto: por eso la ventana de
   Gestion de Tarifas, que pide el 95 %, se quedaba corta. Se vuelven a poner los anchos tal y
   como los daba la 3, asi el ancho de cada modal manda otra vez. */
.modal-dialog {
    max-width: none;
    width: auto;
}

@media (min-width: 768px) {
    .modal-dialog {
        width: 600px;
        margin: 30px auto;
    }

    .modal-sm {
        width: 300px;
    }
}

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

/* ---------------------------------------------------------------- FONDOS DE AVISO ---- */
/* En Bootstrap 3 estas clases pintaban un fondo PALIDO pensado para leer texto oscuro encima
   (.bg-info era un azul clarito, #d9edf7). En la 4 son los colores corporativos a saturacion
   completa: .bg-info pasa a ser un turquesa fuerte (#17a2b8) y el texto que lleva dentro, que
   sigue siendo oscuro, se vuelve ilegible. Pasaba por ejemplo en Trazabilidad, donde el bloque
   de incurridos de cada consulta va sobre .bg-info y no habia quien leyera la linea.

   Estan puestas 225 veces en 77 pantallas, todas escritas para el tono palido de la 3, asi que
   se devuelven los colores de siempre. La unica que en la 3 ya era oscura con letra blanca es
   .bg-primary, y asi se deja.

   Llevan !important porque en la 4 estas utilidades vienen asi declaradas
   (.bg-info{background-color:#17a2b8!important}) y si no, no hay forma de ganarles. */
.bg-success {
    background-color: #dff0d8 !important;
}

.bg-info {
    background-color: #d9edf7 !important;
}

.bg-warning {
    background-color: #fcf8e3 !important;
}

.bg-danger {
    background-color: #f2dede !important;
}

.bg-primary {
    color: #fff !important;
    background-color: #337ab7 !important;
}

/* .bg-secondary NO existe en Bootstrap 3: en las 3 pantallas que la llevan (Movimientos de
   Gasoil y las dos ventanas de impresion) no pintaba nada y la caja se veia blanca, con su
   texto oscuro encima. En la 4 pasa a ser un gris medio (#6c757d) y ahi el texto de color deja
   de leerse: las cifras de Existencias y Precio/Litro se volvieron invisibles. Se le quita el
   fondo y vuelve a verse como se veia. */
.bg-secondary {
    background-color: transparent !important;
}

/* Al devolver los fondos a los tonos palidos de la 3 quedo un cabo suelto: hay 85 sitios en 20
   pantallas escritos para la 4 que ponen "bg-info text-white" (o success/warning/danger), porque
   con el turquesa fuerte de la 4 la letra blanca si se leia. Sobre el azul palido desaparecen.
   Pasaba en Gestion de Horas de Empleados y en la barra de totales de la ventana de tarifas.

   En vez de repasar las 20 pantallas, aqui se le quita el blanco a la letra cuando cae sobre uno
   de esos fondos claros. .bg-primary no entra: en la 3 ya era oscuro con letra blanca. */
.bg-success.text-white,
.bg-info.text-white,
.bg-warning.text-white,
.bg-danger.text-white,
.bg-success .text-white,
.bg-info .text-white,
.bg-warning .text-white,
.bg-danger .text-white {
    color: #212529 !important;
}

a.bg-success:hover, a.bg-success:focus { background-color: #c1e2b3 !important; }
a.bg-info:hover, a.bg-info:focus { background-color: #afd9ee !important; }
a.bg-warning:hover, a.bg-warning:focus { background-color: #f7ecb5 !important; }
a.bg-danger:hover, a.bg-danger:focus { background-color: #e4b9b9 !important; }
a.bg-primary:hover, a.bg-primary:focus { background-color: #286090 !important; }

/* ---------------------------------------------------------------- COLORES DE TEXTO ---- */
/* Lo mismo que con los fondos, pero al reves: en la 3 estas clases eran tonos oscuros pensados
   para leerse sobre blanco y en la 4 son los colores corporativos, mucho mas claros. El peor es
   .text-warning, que pasa a ser amarillo (#ffc107): sobre blanco se queda en 1,63 de contraste
   y practicamente no se ve, cuando lo recomendado son 4,5. Asi quedaban:

       clase           la 4       contraste      la 3       contraste
       .text-warning   #ffc107      1,63         #8a6d3b      4,85
       .text-info      #17a2b8      3,04         #31708f      5,46
       .text-success   #28a745      3,13         #3c763d      5,45
       .text-primary   #007bff      3,98         #337ab7      4,56
       .text-danger    #dc3545      4,53         #a94442      5,85

   (contraste sobre blanco, medido en la pantalla de Pedidos; lo recomendado son 4,5)

   Son 614 apariciones en 224 pantallas, todas escritas para los tonos de la 3. Al volver a
   ellos cambia tambien el color de bastantes iconos (los muñecos de "operarios necesarios" de
   Pedidos, por ejemplo, vuelven de amarillo a marron), que es como estaban antes de migrar.

   .text-muted se deja como viene en la 4 (#6c757d, 4,69), que es mejor que el #777 de la 3.

   Llevan !important porque en la 4 vienen asi declaradas y si no, no hay forma de ganarles. */
.text-primary { color: #337ab7 !important; }
a.text-primary:hover, a.text-primary:focus { color: #286090 !important; }

.text-success { color: #3c763d !important; }
a.text-success:hover, a.text-success:focus { color: #2b542c !important; }

.text-info { color: #31708f !important; }
a.text-info:hover, a.text-info:focus { color: #245269 !important; }

.text-warning { color: #8a6d3b !important; }
a.text-warning:hover, a.text-warning:focus { color: #66512c !important; }

.text-danger { color: #a94442 !important; }
a.text-danger:hover, a.text-danger:focus { color: #843534 !important; }

/* Misma idea que la excepcion del menu lateral de abajo, pero para los fondos oscuros que
   aparecen sueltos por las pantallas: .bg-dark y .bg-primary. Sobre
   ellos los tonos apagados de la 3 no se leen, asi que ahi se mantienen los vivos de la 4.
   Ahora mismo no hay ninguno asi, pero la regla queda puesta para los que salgan. */
.bg-dark.text-primary, .bg-primary.text-primary,
.bg-dark .text-primary, .bg-primary .text-primary {
    color: #6cb2eb !important;
}

.bg-dark.text-success, .bg-primary.text-success,
.bg-dark .text-success, .bg-primary .text-success {
    color: #28a745 !important;
}

.bg-dark.text-info, .bg-primary.text-info,
.bg-dark .text-info, .bg-primary .text-info {
    color: #5bc0de !important;
}

.bg-dark.text-warning, .bg-primary.text-warning,
.bg-dark .text-warning, .bg-primary .text-warning {
    color: #ffc107 !important;
}

.bg-dark.text-danger, .bg-primary.text-danger,
.bg-dark .text-danger, .bg-primary .text-danger {
    color: #ff8a80 !important;
}

/* Excepcion: el menu lateral tiene el fondo oscuro, y ahi lo que se lee es justo lo contrario.
   Los dos iconos que lleva ("Mis Pedidos" y "Mis Visitas") se quedaban en 2,9 y 2,6 de contraste
   con los tonos de la 3; con los de la 4 estan en 8,9 y 5,3. */
.sidebar .text-primary { color: #007bff !important; }
.sidebar .text-success { color: #28a745 !important; }
.sidebar .text-info { color: #17a2b8 !important; }
.sidebar .text-warning { color: #ffc107 !important; }
.sidebar .text-danger { color: #dc3545 !important; }

/* ---------------------------------------------------------------- GRUPOS DE CAMPOS ---- */
/* .input-group-btn se llama .input-group-append en Bootstrap 4 */
.input-group-btn {
    position: relative;
    display: table-cell;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}

    .input-group-btn > .btn {
        position: relative;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }