/*
 * Identidad corporativa sobre Tabler.
 *
 * No se modifica public/assets/vendor/tabler/css/tabler.min.css: este
 * fichero se carga después y sobreescribe únicamente las variables CSS de
 * color/tipografía de Tabler, traduciendo los tokens de marca ya definidos
 * en variables.css (--kme-*, fuente única de verdad de la identidad
 * corporativa, ver docs/BRANDING.md) al vocabulario de variables que usa
 * Tabler (--tblr-*). La mayoría de tonos derivados de Tabler (-lt,
 * -darken, -200) se recalculan solos porque usan color-mix() sobre estas
 * variables; ver la limitación documentada en docs/FRONTEND_VENDOR.md
 * para los tokens "subtle" que no la usan.
 */

:root,
[data-bs-theme="light"] {
    --tblr-primary: var(--kme-blue);
    --tblr-primary-rgb: 0, 98, 194;

    --tblr-success: var(--kme-success);
    --tblr-warning: var(--kme-warning);
    --tblr-danger: var(--kme-danger);
    --tblr-info: var(--kme-info);

    --tblr-body-bg: var(--kme-background);
    --tblr-body-color: var(--kme-text);
    --tblr-border-color: var(--kme-border);
    --tblr-secondary-color: var(--kme-text-muted);

    --tblr-font-sans-serif: var(--kme-font-body);
}

h1, h2, h3, h4, h5, h6,
.kme-heading {
    font-family: var(--kme-font-heading);
}

.kme-brand-logo {
    height: 32px;
    width: auto;
}

/* Login (auth.php): el logo es el unico elemento de marca en la pantalla
   (ya no hay nombre de la app debajo), necesita mas presencia que en la
   cabecera de la app. */
.kme-brand-logo-lg {
    height: 88px;
    width: auto;
}

.kme-version-badge {
    color: var(--tblr-secondary-color);
}

:focus-visible {
    outline: 2px solid var(--kme-blue);
    outline-offset: 2px;
}

/*
 * Tabler pone un box-shadow inset a modo de borde inferior en TODO .navbar,
 * y nuestro layout anida dos (la cabecera y la fila de menu debajo). Eso
 * deja una segunda linea gris justo encima del borde de la propia fila de
 * menu. Se quita solo en la fila interior; el borde de la cabecera basta
 * como unica separacion con el contenido.
 */
.navbar-collapse .navbar {
    box-shadow: none;
}