/*
 * safanet.css
 *
 * Los pocos retoques propios del modulo sobre Metronic 8.3.3 (demo46).
 * Todo lo que tenga clase de Metronic o de Bootstrap se resuelve con ella: esto
 * es solo para lo que la demo trae con un valor fijo y hay que cambiar.
 */

/*
 * Paleta del modulo.
 *
 * demo46 viene en verde (#17C653) y su tema esta COMPILADO dentro de
 * style.bundle.css, asi que no basta con cambiar --bs-primary: el verde esta
 * repartido por una familia entera de variables. Aqui se cambian todas las que
 * se ven; el resto (progress, ribbon, nav-pills) se dejan igualadas por si
 * alguna pantalla las usa mas adelante.
 *
 * Se redefinen los mismos selectores que usa la demo y este archivo se carga
 * despues de style.bundle.css, asi que gana por orden.
 */
:root,
[data-bs-theme="light"] {
    --bs-primary: #389AFF;
    --bs-primary-active: #1B84FF;
    --bs-primary-light: #E8F3FF;
    --bs-primary-inverse: #FFFFFF;
    --bs-primary-clarity: rgba(56, 154, 255, 0.2);
    --bs-primary-rgb: 56, 154, 255;
    --bs-primary-bg-subtle: #D5E9FF;
    --bs-primary-border-subtle: #A6CFFF;

    /* Texto y enlaces.
       Bootstrap 5.3 pinta la etiqueta <a> con rgba(var(--bs-link-color-rgb)),
       NO con --bs-link-color, asi que sin las dos versiones -rgb los enlaces se
       quedan verdes aunque el resto ya sea azul. */
    --bs-text-primary: #389AFF;
    --bs-link-color: #389AFF;
    --bs-link-color-rgb: 56, 154, 255;
    --bs-link-hover-color: #1B84FF;
    --bs-link-hover-color-rgb: 27, 132, 255;

    /* Menus: es lo que pintaba de verde los items del desplegable de Listados */
    --bs-menu-link-color-hover: #389AFF;
    --bs-menu-link-color-here: #389AFF;
    --bs-menu-link-color-show: #389AFF;
    --bs-menu-link-color-active: #389AFF;

    /* Componentes con estado (checks, radios, pills) */
    --bs-component-active-bg: #389AFF;
    --bs-component-checked-bg: #389AFF;
    --bs-component-hover-color: #389AFF;
    --bs-nav-pills-link-active-bg: #389AFF;
    --bs-progress-bar-bg: #389AFF;
    --bs-ribbon-label-bg: #389AFF;
    --bs-scrolltop-bg-color: #389AFF;
    --bs-scrolltop-bg-color-hover: #1B84FF;

    /* Fondos: el de la pagina y el de la banda donde flota la cabecera */
    --bs-app-bg-color: #F9F9F9;
    --bs-app-header-base-bg-color: #F9F9F9;
}

/*
 * El boton primario solido es el unico componente con el verde escrito dentro
 * de su propio bloque, asi que no le llega el cambio de --bs-primary.
 * De paso el texto pasa a blanco: la demo lo tenia en negro porque sobre verde
 * claro se leia, sobre azul no.
 */
.btn.btn-primary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #389AFF;
    --bs-btn-border-color: #389AFF;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #1B84FF;
    --bs-btn-hover-border-color: #1B84FF;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #1B84FF;
    --bs-btn-active-border-color: #1B84FF;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #389AFF;
    --bs-btn-disabled-border-color: #389AFF;
}

/* Mismo caso que el solido: lleva el verde dentro de su propio bloque. */
.btn.btn-outline-primary {
    --bs-btn-color: #389AFF;
    --bs-btn-border-color: #389AFF;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #389AFF;
    --bs-btn-hover-border-color: #389AFF;
    --bs-btn-focus-shadow-rgb: 56, 154, 255;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #389AFF;
    --bs-btn-active-border-color: #389AFF;
    --bs-btn-disabled-color: #389AFF;
    --bs-btn-disabled-border-color: #389AFF;
}

/* Y la fila resaltada de las tablas, para cuando se usen. */
.table-primary {
    --bs-table-bg: #D5E9FF;
    --bs-table-border-color: #A6CFFF;
}

/*
 * La barra flotante de la cabecera.
 *
 * demo46 la trae con el morado escrito a mano dentro de style.bundle.css, asi
 * que no hay variable que tocar: hay que redefinir la regla entera.
 */
.app-header .app-container {
    background-color: var(--bs-primary);
}

/*
 * Margenes laterales del contenido.
 *
 * El hueco de la izquierda lo dejaba el sidebar, que en este modulo esta
 * desactivado porque la navegacion va en la cabecera. Se repone el mismo calculo
 * de la demo y se espeja a la derecha, para que el contenido quede centrado.
 *
 * El valor sale de --bs-app-sidebar-width (70px en :root) mas sus dos gaps, que
 * estan a cero: se deja el calculo entero, y no el 70px a pelo, para que siga a
 * la demo si algun dia cambia. En movil no se aplica, ahi solo estorba.
 */
@media (min-width: 992px) {
    .app-wrapper {
        margin-left: calc(var(--bs-app-sidebar-width, 70px) + var(--bs-app-sidebar-gap-start, 0px) + var(--bs-app-sidebar-gap-end, 0px));
        margin-right: calc(var(--bs-app-sidebar-width, 70px) + var(--bs-app-sidebar-gap-start, 0px) + var(--bs-app-sidebar-gap-end, 0px));
    }
}

/*
 * El menu de la cabecera, sobre el azul de la barra.
 *
 * Los colores por defecto del menu son grises, pensados para una cabecera
 * clara. Aqui van en blanco, incluida la flecha del desplegable, que es un
 * mask-image tenido con --bs-text-muted y sin variable propia que tocar.
 */
@media (min-width: 992px) {
    /*
     * Se tine el .menu-title y no solo el .menu-link: el menu lleva
     * menu-title-gray-700 para que el desplegable salga en gris, y esa clase
     * pinta el span de dentro en TODOS los niveles. Un color en el enlace padre
     * no lo tapa, porque el hijo tiene declaracion propia.
     */
    #kt_app_header_menu > .menu-item > .menu-link,
    #kt_app_header_menu > .menu-item > .menu-link .menu-title {
        color: rgba(255, 255, 255, 0.85);
    }

    /* El icono es una fuente: se tine con color. Si se le pone background-color
       aparece un recuadro solido detras del glifo. */
    #kt_app_header_menu > .menu-item > .menu-link .menu-icon i {
        color: rgba(255, 255, 255, 0.85);
    }

    /* La flecha, en cambio, es un mask-image: se tine con background-color. */
    #kt_app_header_menu > .menu-item > .menu-link .menu-arrow:after {
        background-color: rgba(255, 255, 255, 0.85);
    }

    #kt_app_header_menu > .menu-item:hover > .menu-link,
    #kt_app_header_menu > .menu-item.here > .menu-link,
    #kt_app_header_menu > .menu-item.show > .menu-link,
    #kt_app_header_menu > .menu-item > .menu-link.active {
        background-color: rgba(255, 255, 255, 0.15);
    }

    #kt_app_header_menu > .menu-item:hover > .menu-link,
    #kt_app_header_menu > .menu-item:hover > .menu-link .menu-title,
    #kt_app_header_menu > .menu-item.here > .menu-link,
    #kt_app_header_menu > .menu-item.here > .menu-link .menu-title,
    #kt_app_header_menu > .menu-item.show > .menu-link,
    #kt_app_header_menu > .menu-item.show > .menu-link .menu-title,
    #kt_app_header_menu > .menu-item > .menu-link.active,
    #kt_app_header_menu > .menu-item > .menu-link.active .menu-title,
    #kt_app_header_menu > .menu-item:hover > .menu-link .menu-icon i,
    #kt_app_header_menu > .menu-item.here > .menu-link .menu-icon i,
    #kt_app_header_menu > .menu-item.show > .menu-link .menu-icon i,
    #kt_app_header_menu > .menu-item > .menu-link.active .menu-icon i {
        color: #FFFFFF;
    }

    #kt_app_header_menu > .menu-item:hover > .menu-link .menu-arrow:after,
    #kt_app_header_menu > .menu-item.here > .menu-link .menu-arrow:after,
    #kt_app_header_menu > .menu-item.show > .menu-link .menu-arrow:after {
        background-color: #FFFFFF;
    }
}

/* El menu de la cabecera no debe partirse en dos lineas en pantallas medianas. */
#kt_app_header_menu .menu-title {
    white-space: nowrap;
}

/*
 * La holgura lateral de los dos desplegables se lleva con las clases px-* de los
 * enlaces, no desde aqui: esos utilitarios van con !important y se comerian
 * cualquier padding que se pusiera en este archivo.
 */

/*
 * Barra de desplazamiento de la pagina.
 *
 * Metronic solo estiliza la de main, span, ol, ul, pre y div, asi que la de la
 * pagina se quedaba con la del sistema: pista blanca, que al lado del gris del
 * fondo se veia como una franja. Se tine con la misma paleta de la demo.
 */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--bs-gray-300) var(--bs-app-bg-color);
}

body::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body::-webkit-scrollbar-track {
    background-color: var(--bs-app-bg-color);
}

body::-webkit-scrollbar-thumb {
    background-color: var(--bs-gray-300);
    border: 3px solid var(--bs-app-bg-color);
    border-radius: 6px;
}

body::-webkit-scrollbar-thumb:hover {
    background-color: var(--bs-gray-400);
}

/*
 * Pie pegado al fondo cuando la pantalla no da para scroll.
 *
 * Si el contenido llena la ventana el pie va detras de el, como siempre; si no
 * llega, cae al fondo en vez de quedarse colgando a media pantalla.
 *
 * Metronic ya trae las utilidades de flex, pero nadie fija la altura minima, asi
 * que la cadena no tiene contra que crecer. Se pone en .app-page y no en el
 * body: la cabecera es position:fixed, no ocupa alto en el flujo, y asi el
 * calculo no depende de cuanto mida -- si la demo cambia su altura, esto sigue
 * valiendo.
 */
.app-page {
    min-height: 100vh;
}

.app-wrapper {
    flex-grow: 1;
}

.app-wrapper > .app-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Y el contenido se queda con el hueco sobrante, que es lo que empuja al pie. */
#kt_app_main,
#kt_app_content {
    flex-grow: 1;
}

/*
 * El relleno lateral de las cabeceras.
 *
 * DataTables quita el padding derecho a TODAS las celdas de cabecera —en sus
 * versiones antiguas le hacia sitio a la flecha de orden, que iba posicionada—:
 *
 *     table.dataTable > thead > tr > th:not(.sorting_disabled) { padding-right: 0 }
 *
 * El td conserva el 0.75rem del tema, asi que la cabecera queda 9px corrida
 * respecto al contenido de su columna. Se ve en todas, pero canta en las
 * centradas. Se repone el mismo valor que tienen las celdas.
 *
 * Lleva "table" delante para empatar en especificidad con la regla del vendor
 * (dos clases y cuatro elementos) y ganar por orden de carga.
 */
table.table.dataTable > thead > tr > th,
table.table.dataTable > thead > tr > td {
    padding-right: 0.75rem;
}

/* La primera y la ultima celda llevan 1.5rem por gs-6, tambien en el cuerpo. */
table.table.gs-6.dataTable > thead > tr > th:last-child,
table.table.gs-6.dataTable > thead > tr > td:last-child {
    padding-right: 1.5rem;
}

/*
 * Cabeceras centradas.
 *
 * DataTables 2 envuelve el contenido de cada th en un div.dt-column-header con
 * display: flex y justify-content: space-between —para dejar el titulo a un lado
 * y la flecha de orden al otro—, asi que el text-center del th no le llega al
 * titulo. Hay que centrar el flex.
 */
.table.dataTable thead > tr > th.text-center div.dt-column-header {
    justify-content: center;
}

/*
 * Select2 dentro de un dialogo de SweetAlert.
 *
 * El desplegable se cuelga del <body> con z-index 1051 y el dialogo va en 1060,
 * asi que dentro de un Swal quedaria por detras y no se veria. Se sube por
 * encima solo mientras hay dialogo abierto.
 *
 * No se usa dropdownParent para meterlo en el propio dialogo: su cuerpo lleva
 * overflow para poder desplazarse y recortaria la lista.
 */
body.swal2-shown .select2-container--open .select2-dropdown {
    z-index: 1065;
}

/*
 * El cuerpo de los dialogos de SweetAlert.
 *
 * Metronic lo capa a 200px de alto con overflow: auto, y los dialogos del modulo
 * rondan los 250, asi que salia una barra de scroll que se desplazaba dos dedos
 * y no aportaba nada. Se sube el tope en vez de quitar el desbordamiento, para
 * que uno largo de verdad —la lista de fallos de un reset por grupo— siga
 * pudiendo desplazarse.
 */
.swal2-container .swal2-html-container {
    max-height: 65vh;
}

/*
 * Tooltips.
 *
 * La demo los trae con 2.1rem de radio, que en un tooltip de una linea pasa por
 * pastilla pero en cuanto son dos las esquinas se comen el texto.
 *
 * OJO: las variables van en .tooltip y NO en :root. Bootstrap 5.3 declara las de
 * cada componente en el propio componente —aqui, ".tooltip { --bs-tooltip-*: }"—
 * y esa declaracion esta mas cerca del elemento que una de :root, asi que gana
 * siempre. Puesto en :root no hace absolutamente nada, y sin avisar.
 */
.tooltip {
    --bs-tooltip-border-radius: 1rem;
    --bs-tooltip-font-size: 0.9rem;
    --bs-tooltip-max-width: 220px;
}

.tooltip-inner {
    padding: 0.55rem 0.85rem;
    line-height: 1.35;
}

/*
 * La fila de controles de las tablas: filtros al principio, buscador y Exportar
 * al final.
 *
 * El reparto NO hay que montarlo: la integracion de DataTables 2 con Bootstrap
 * ya pone la fila como "row justify-content-between" y las celdas como
 * "col-md-auto" con me-auto / ms-auto. Aqui solo van los dos ajustes que faltan.
 *
 * (Ojo con la clase dt-layout-row: con el renderer de Bootstrap NO se aplica a
 * la fila, asi que cualquier regla escrita contra ella no hace nada.)
 */

/* Aire entre la fila de controles y la tabla. */
.dt-container > .row {
    margin-bottom: 0.75rem;
}

/*
 * El radio de las tablas, al valor de itacappv2.
 *
 * El tema va compilado por demo y aqui no coincide: en la 31 —la de itacappv2—
 * .table-rounded vale 0.65rem, y en la 46 2.1rem, cuatro veces mas.
 *
 * Importa porque cada celda pinta su propio fondo opaco ENCIMA de la caja de la
 * tabla (.table > :not(caption) > * > * lleva background-color y un box-shadow
 * inset de 9999px). Ese fondo es un rectangulo y en las esquinas tapa la curva:
 * se desvia hasta 0.29 * radio, o sea ~2px con 0.65rem —que no se ve, por eso
 * las tablas de itacappv2 salen limpias— y ~8px con 2.1rem, que sale como un
 * mordisco y parece que la fila esta por delante de la tabla.
 *
 * No hay clase que sirva: la escala rounded-* de la 46 va de 1.85rem a 2.65rem.
 * Entra por la excepcion de la 3.9.
 *
 * OJO: la tabla no debe llevar ademas la utilidad "rounded". En esta demo es
 * border-radius: 2.1rem !important y pisa a esta regla y a cualquier otra.
 */
.table:not(.table-bordered).table-rounded {
    --safanet-radio-tabla: 0.65rem;

    border-radius: var(--safanet-radio-tabla);
}

/*
 * Y las celdas de las cuatro esquinas, al mismo radio.
 *
 * Con el radio solo en la tabla no basta: cada celda pinta su propio fondo
 * opaco ENCIMA de la caja (.table > :not(caption) > * > * lleva background-color
 * y un box-shadow inset de 9999px). Ese fondo es un rectangulo y en las esquinas
 * tapa la curva del borde, que es lo que se ve como si la fila estuviera por
 * delante de la tabla.
 *
 * OJO con los selectores: DataTables deja el <table> con cuatro hijos —COLGROUP,
 * THEAD, TBODY y un TFOOT vacio—, asi que ":first-child" es el colgroup y
 * ":last-child" el tfoot. Hay que nombrar thead y tbody.
 */
.table.table-rounded > thead > tr:first-child > *:first-child {
    border-top-left-radius: var(--safanet-radio-tabla);
}

.table.table-rounded > thead > tr:first-child > *:last-child {
    border-top-right-radius: var(--safanet-radio-tabla);
}

.table.table-rounded > tbody > tr:last-child > *:first-child {
    border-bottom-left-radius: var(--safanet-radio-tabla);
}

.table.table-rounded > tbody > tr:last-child > *:last-child {
    border-bottom-right-radius: var(--safanet-radio-tabla);
}

/*
 * Metronic estiliza el recuento de filas colgandolo de ".dt-toolbar .dt-info",
 * una clase que solo existe si esta activo su "dom" antiguo. Como safanet.js lo
 * anula para que funcione la API layout, esas reglas dejan de aplicar y hay que
 * reponerlas contra la celda que si pinta el renderer de Bootstrap.
 */
.dt-layout-start > div {
    display: flex;
    align-items: center;
}

.dt-layout-start .dt-info {
    margin-left: 0.75rem;
    padding-top: 0 !important;
    font-size: 1rem;
    font-weight: 500;
    color: var(--bs-text-gray-700);
}

/* Los dos filtros, en linea y con separacion entre ellos. */
#zona_filtros {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

@media (max-width: 767.98px) {
    /*
     * Cada filtro en su linea. align-items: flex-start y no stretch: con stretch
     * el interruptor se estira a todo el ancho y su contenido queda centrado en
     * medio de la nada.
     */
    #zona_filtros {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    /*
     * La celda de la derecha es "d-md-flex", asi que por debajo de md deja de ser
     * flex y el buscador y Exportar caen en lineas distintas. Se fuerza a que
     * sigan juntos, con el buscador quedandose el hueco sobrante.
     */
    .dt-layout-end {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .dt-layout-end .dt-search {
        flex: 1 1 auto;
        min-width: 0;
    }

    .dt-layout-end .dt-search input {
        width: 100% !important;
        min-width: 0;
    }
}

/*
 * El desplegable de exportar de DataTables.
 *
 * Buttons pinta su propio .dt-button-collection, que Metronic no estiliza. Se le
 * da el aspecto del desplegable de Listados, pero sin el azul: aqui no hay
 * ninguna opcion "activa" que marcar, son cuatro acciones sueltas.
 */
/*
 * La estructura que pinta Buttons en esta build es de tres capas:
 *
 *   <div class="dt-button-collection">      <- solo posiciona, no se ve
 *       <ul class="dropdown-menu show">     <- el panel blanco
 *           <li class="dt-button">          <- la franja de la fila
 *               <a class="dropdown-item">   <- lo que se pincha y se tine
 *
 * Es facil equivocarse de capa: el .dt-button NO es el elemento pinchable, y
 * estilar el div de fuera no pinta nada porque queda tapado por el <ul>.
 *
 * Los selectores llevan "div" delante a proposito: DataTables escribe los suyos
 * asi, y sin el elemento pierden por especificidad aunque safanet.css cargue
 * despues.
 */

/* El contenedor de fuera solo coloca: se le quita todo lo que pueda doblarse
   con el panel de dentro. */
div.dt-button-collection {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;

    /*
     * OJO: no tocar el z-index. Buttons pone un velo a pantalla completa
     * (.dt-button-background, z-index 999) mientras el desplegable esta abierto,
     * y el panel tiene que quedar por encima —el vendor le da 2002—. Bajarlo
     * mete el velo delante: se sigue viendo todo porque es transparente, pero el
     * raton no llega y parece que el desplegable no responde ni al pasar por
     * encima ni al pinchar.
     */

    /*
     * El ancho se manda desde aqui. Este es el bloque posicionado en absoluto, y
     * el <ul> de dentro no puede ensancharlo: con el max-content puesto solo en
     * el <ul>, el panel se quedaba clavado en los 200px de min-width del vendor
     * y «Copiar al portapapeles» salia cortado.
     */
    width: max-content;
    min-width: 240px;
    max-width: min(90vw, 320px);
}

/* El panel, con el aspecto del desplegable de Listados. */
div.dt-button-collection > ul.dropdown-menu {
    position: static;
    margin: 0;
    padding: 0.5rem 0;
    border: 0;
    border-radius: 0.65rem;
    background-color: var(--bs-body-bg);
    box-shadow: var(--bs-menu-dropdown-box-shadow);

    /* El ancho lo fija el contenedor de fuera; aqui solo hay que dejar de
       estorbar con el min-width de Bootstrap. */
    width: auto;
    min-width: 0;
    max-width: none;
}

/* La franja de la fila hace de .menu-item: solo pone el aire lateral. */
div.dt-button-collection li.dt-button {
    display: block;
    width: auto;
    margin: 0;
    padding: 0 0.5rem;
    border: 0;
    background: none;

    /* Buttons recorta sus botones con puntos suspensivos porque en la barra el
       sitio es el que es. Dentro del panel sobra: ya se adapta al texto. */
    overflow: visible;
    text-overflow: clip;
}

/*
 * El elemento pinchable hace de .menu-link.
 *
 * El gris del hover es gray-200 (#F1F1F4) y NO el --bs-menu-link-bg-color-hover
 * del desplegable de Listados: ese es #F9F9F9, un 2% por debajo del blanco, y
 * sobre este panel —que si es blanco puro— no se distingue. Al ponerlo se perdia
 * el hover propio de Bootstrap y parecia que el desplegable no respondia.
 *
 * El texto se queda gris tambien en hover: aqui no hay ninguna opcion «activa»
 * que marcar en azul, son cuatro acciones sueltas.
 */
div.dt-button-collection .dropdown-item {
    padding: 0.65rem 0.9rem;
    border-radius: 0.475rem;
    color: var(--bs-gray-800);
    font-size: 0.925rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

div.dt-button-collection .dropdown-item:hover,
div.dt-button-collection .dropdown-item:focus,
div.dt-button-collection .dropdown-item:active {
    color: var(--bs-gray-800);
    background-color: var(--bs-gray-200);
}

/* El velo que Buttons pone detras del desplegable no tiene que oscurecer. */
.dt-button-background {
    background: transparent !important;
}

/* Las tarjetas de acceso del inicio se levantan al pasar por encima. */
.hover-elevate-up {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-elevate-up:hover {
    transform: translateY(-4px);
}


/* -----------------------------------------------------------------------------
   success, que en esta demo es AZUL

   demo46 viene con --bs-success: #1B84FF, asi que "text-success" y
   "badge-light-success" salen azules y no se distinguen de primary. Un estado
   correcto tiene que leerse como correcto, y para eso tiene que ser verde.

   No hay clase que lo arregle: es la paleta del tema, asi que se redefine la
   familia entera igual que se hizo con primary (§4.3). Los valores son los
   verdes propios de la demo —era su color original antes de pasarla a azul—,
   no inventados.
----------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
    --bs-success: #17C653;
    --bs-success-active: #04B440;
    --bs-success-light: #DFFFEA;
    --bs-success-inverse: #FFFFFF;
    --bs-success-clarity: rgba(23, 198, 83, 0.2);
    --bs-success-rgb: 23, 198, 83;

    /* Y esta aparte: Metronic pinta .text-success con --bs-text-success, que es
       una variable propia suya y NO deriva de --bs-success. Su regla va despues
       que la de Bootstrap y lleva !important, asi que sin esto el texto seguiria
       saliendo azul aunque el badge ya fuera verde. */
    --bs-text-success: #17C653;
}

/*
 * El check de "marcar todas" de la cabecera, a la altura del titulo de al lado.
 *
 * DataTables envuelve el contenido de cada th en un .dt-column-header en linea.
 * En una columna ordenable ese envoltorio lleva ademas el control de ordenar y
 * acaba 12px mas abajo dentro de la misma celda; en la del check, que no es
 * ordenable, se queda arriba. Medido: el centro del check caia en 131,1 y el del
 * titulo en 143,9, aunque el valor bueno sobre las tablas de verdad son 4px.
 *
 * Va con position/top y NO con margin ni padding a proposito: con esos dos la
 * cabecera se hace mas alta, el titulo baja con ella y el desajuste se queda
 * igual. Comprobado con las dos formas.
 *
 * Por el check y no por una clase de la columna: errores.php la marca como
 * no_ordenar y borrado.php como no_exportar, y lo que las une es justo esto.
 */
.table thead th .form-check {
    position: relative;
    top: 4px;
}

/* -----------------------------------------------------------------------------
   Selector de centro: la flecha de la provincia, a la izquierda
   -----------------------------------------------------------------------------

   Su submenu se abre hacia la izquierda —el selector vive pegado al borde derecho
   de la pantalla y ahi es donde hay sitio—, asi que la flecha va delante del
   nombre y mirando a ese lado.

   Ponerla delante lo hace el HTML; lo que no da ninguna clase es voltearla. El
   tema pinta el glifo con un mask-image de un chevron hacia la derecha, y la
   unica alternativa a este scaleX seria repetir el SVG entero aqui. El margen se
   cambia de lado porque .menu-arrow trae margin-left: 5px de fabrica. */
#menu_centros .menu-item .menu-link .menu-arrow {
    margin-left: 0;
    margin-right: 5px;
    transform: scaleX(-1);
}