/*
 * Ajustes para navegadores antiguos, como el Chrome 49 de Windows Vista.
 *
 * Todo va condicionado a las clases que pone js/deteccion.js en <html>
 * (navegador-antiguo, sin-gap-flex) o a @supports: en un navegador actual este
 * fichero no cambia nada.
 */

/* ------------------------------------------------------------------ */
/* 1. «gap» en filas flexibles                                         */
/*    Se sustituye por un margen a la izquierda (o arriba, en columnas).*/
/*    Nunca se tocan los márgenes verticales del contenedor: hacerlo    */
/*    pisaría la separación bajo los títulos y las cabeceras.           */
/* ------------------------------------------------------------------ */

.sin-gap-flex .d-flex.gap-1:not(.flex-column) > * + *,
.sin-gap-flex .d-inline-flex.gap-1:not(.flex-column) > * + * { margin-left: 0.25rem; }
.sin-gap-flex .d-flex.gap-2:not(.flex-column) > * + *,
.sin-gap-flex .d-inline-flex.gap-2:not(.flex-column) > * + * { margin-left: 0.5rem; }
.sin-gap-flex .d-flex.gap-3:not(.flex-column) > * + *,
.sin-gap-flex .d-inline-flex.gap-3:not(.flex-column) > * + * { margin-left: 1rem; }

.sin-gap-flex .flex-column.gap-1 > * + * { margin-top: 0.25rem; }
.sin-gap-flex .flex-column.gap-2 > * + * { margin-top: 0.5rem; }
.sin-gap-flex .flex-column.gap-3 > * + * { margin-top: 1rem; }

/* Un primer hijo oculto no ocupa sitio: el siguiente no lleva margen */
.sin-gap-flex .d-flex > .visually-hidden-focusable:first-child + *,
.sin-gap-flex .d-flex > .d-none:first-child + *,
.sin-gap-flex .d-inline-flex > .d-none:first-child + * { margin-left: 0; }

@media (min-width: 992px) {
    /* El botón del menú (solo en pantallas estrechas) va el primero */
    .sin-gap-flex .d-flex > .d-lg-none:first-child + * { margin-left: 0; }
}

/* Filas que pueden saltar de línea: el hueco va a la derecha de cada elemento
   (menos el último), así el primero de cada línea nueva no sale desplazado */
.sin-gap-flex .d-flex.flex-wrap.gap-1:not(.flex-column) > * + *,
.sin-gap-flex .d-flex.flex-wrap.gap-2:not(.flex-column) > * + *,
.sin-gap-flex .d-flex.flex-wrap.gap-3:not(.flex-column) > * + * { margin-left: 0; }
.sin-gap-flex .d-flex.flex-wrap.gap-1:not(.flex-column) > *:not(:last-child) { margin-right: 0.25rem; }
.sin-gap-flex .d-flex.flex-wrap.gap-2:not(.flex-column) > *:not(:last-child) { margin-right: 0.5rem; }
.sin-gap-flex .d-flex.flex-wrap.gap-3:not(.flex-column) > *:not(:last-child) { margin-right: 1rem; }

/* Y entre líneas, en las que más saltan: filtros activos y atajos de periodo */
.sin-gap-flex .filtros-activos > *,
.sin-gap-flex .atajos-periodo > * { margin-top: 0.2rem; margin-bottom: 0.2rem; }
.sin-gap-flex .atajos-periodo > .me-1 { margin-right: 0.5rem !important; }

/* Reglas propias de inesa.css que usan gap */
.sin-gap-flex .boton-usuario > * + * { margin-left: 0.5rem; }
.sin-gap-flex .logo > svg { margin-right: 0.55rem; }
.sin-gap-flex .logo-grande > svg { margin-right: 0.75rem; }
.sin-gap-flex .boton-usuario.dropdown-toggle::after { margin-left: 0.5rem; }
.sin-gap-flex .menu-enlace > * + * { margin-left: 0.7rem; }
.sin-gap-flex .filtro-activo > .filtro-quitar { margin-left: 0.3rem; }
.sin-gap-flex .punto-estado { margin-right: 0.4em; }
.sin-gap-flex .pagination > * + * { margin-left: 0.25rem; }
.sin-gap-flex .nav-tabs > * + * { margin-left: 0.15rem; }

/* CSS grid (Chrome 57): los botones de .d-grid ocupan todo el ancho */
@supports not (display: grid) {
    .d-grid > .btn { display: block; width: 100%; }
    .d-grid > * + * { margin-top: 0.5rem; }
}

/* ------------------------------------------------------------------ */
/* 2. Reglas de Bootstrap que Chrome 49 descarta enteras               */
/* ------------------------------------------------------------------ */

/* Van en la misma lista que :focus-within (Chrome 60), así que se pierden
   también .visually-hidden y los botones que solo se ven con el teclado. */
.navegador-antiguo .visually-hidden,
.navegador-antiguo .visually-hidden-focusable:not(:focus) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Los botones de un grupo comparten borde con un :not() compuesto (Chrome 88) */
.navegador-antiguo .btn-group > .btn + .btn { margin-left: -1px; }

/* ::placeholder sin prefijo llega en Chrome 57 */
.navegador-antiguo .form-control::-webkit-input-placeholder { color: var(--inesa-gris-claro); opacity: 1; }

/* clamp() llega en Chrome 79 */
@supports not (font-size: clamp(1rem, 1vw, 2rem)) {
    .kpi-valor { font-size: 1.5rem; }
}

/* El aspa blanca del menú lateral: Chrome 49 solo entiende -webkit-filter */
.navegador-antiguo .btn-close-white {
    -webkit-filter: invert(1) grayscale(100%) brightness(200%);
}

/* Subrayado punteado de los títulos con ayuda: text-decoration con estilo y
   color llega en Chrome 57, y sin él se pierde la señal de que hay explicación */
.navegador-antiguo .kpi-titulo[data-ayuda] {
    display: table; /* tan ancho como el texto, sin añadir alto como inline-block */
    text-decoration: none;
    border-bottom: 1px dotted #98A2B3;
}

/* Bootstrap quita el recuadro de foco a lo pulsado con el ratón con
   :focus-visible (Chrome 86), que Chrome 49 no tiene: aquí se usa :focus.
   El recuadro tiene que verse (WCAG 2.4.7): azul sobre fondo claro y blanco
   en la barra superior y el menú. */
.navegador-antiguo .btn:focus,
.navegador-antiguo .nav-link:focus,
.navegador-antiguo .page-link:focus,
.navegador-antiguo a:focus {
    outline: 2px solid #1B5E9E;
    outline-offset: 2px;
    box-shadow: none;
}

.navegador-antiguo .barra-superior :focus,
.navegador-antiguo .menu-lateral :focus {
    outline-color: #fff;
}

/* ------------------------------------------------------------------ */
/* 3. Ayudas al pasar el ratón (js/antiguo.js)                         */
/*    Usan el mismo marcado y los mismos estilos que las de Bootstrap;  */
/*    solo hay que colocar la flecha, que allí coloca Popper.           */
/* ------------------------------------------------------------------ */

.tooltip.tooltip-antiguo { position: absolute; pointer-events: none; }
.tooltip.tooltip-antiguo .tooltip-arrow { position: absolute; }

/* ------------------------------------------------------------------ */
/* 4. Gráficos dibujados sin Chart.js (js/graficos-antiguos.js)        */
/* ------------------------------------------------------------------ */

.grafico-antiguo {
    position: relative;
    width: 100%;
    height: 100%;
    font-size: 12px;
    color: #6C757D;
    -webkit-user-select: none;
    user-select: none;
}

.grafico-antiguo .ga-zona {
    position: absolute;
    border-left: 1px solid rgba(33, 37, 41, 0.18);
    border-bottom: 1px solid rgba(33, 37, 41, 0.18);
}

.grafico-antiguo .ga-linea {
    position: absolute;
    background: rgba(33, 37, 41, 0.07);
}

.grafico-antiguo .ga-cero {
    position: absolute;
    background: rgba(33, 37, 41, 0.35);
}

.grafico-antiguo .ga-barra {
    position: absolute;
    min-width: 1px;
    min-height: 1px;
    cursor: default;
}

.grafico-antiguo .ga-franja:hover .ga-barra { opacity: 0.8; }

.grafico-antiguo .ga-marca,
.grafico-antiguo .ga-etiqueta {
    position: absolute;
    line-height: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------------------ */
/* 5. Solo para probar en un navegador actual (?navegador=antiguo)     */
/*    Imita lo que Chrome 49 no tiene: gap y fuentes variables.        */
/* ------------------------------------------------------------------ */

html.simular-chrome49 * { gap: 0 !important; }
html.simular-chrome49 body { font-family: 'Segoe UI', Tahoma, Arial, sans-serif !important; }