/*
 * ASCE — hoja de marca, cargada DESPUÉS de Tabler vía CDN.
 *
 * Sin Sass ni build step (RNF-ARQ-01 / convención del proyecto): todo acá es
 * CSS plano que sobreescribe las custom properties de Tabler.
 *
 * Colores de marca confirmados (mismos de siempre, solo cambia el sistema de
 * variables sobre el que se aplican):
 *   Azul-violeta #3f35ff — contraste de texto blanco: 6.64:1 (pasa WCAG AA,
 *     4.5:1). Color PRINCIPAL de interfaz: sidebar activo, botones primarios,
 *     enlaces, foco de formularios, paginación activa.
 *   Verde #5bbd2f — contraste de texto blanco: solo 2.4:1 (NO pasa WCAG AA).
 *     Nunca se usa como fondo con texto blanco encima. Se usa como ACENTO
 *     decorativo (borde superior de tarjetas, el logo) donde no compite con
 *     texto.
 *
 * NOTA IMPORTANTE (verificado empíricamente contra el CSS compilado real de
 * @tabler/core 1.5.1, no de memoria): a diferencia de Bootstrap 5.3 vainilla
 * —donde .btn-primary "horneaba" el color literal y necesitaba su propio
 * override—, Tabler define --tblr-btn-bg: var(--tblr-primary) y deriva
 * --tblr-primary-darken/--tblr-primary-lt con color-mix() a partir de
 * --tblr-primary. Sobreescribir --tblr-primary/--tblr-primary-rgb en :root
 * alcanza para botones, texto, fondos, foco de formularios y paginación —
 * sin overrides component por componente. Mismo criterio para el acento
 * verde: se sobreescribe --tblr-green (no --tblr-success, que es el que
 * usan los badges de estado Activo/Agotado/Confirmada — se deja tal cual
 * para no confundir "éxito" con "marca" en la misma pantalla).
 *
 * CSS que SÍ traía la sesión de modernización anterior (sombra de tarjeta,
 * radio de borde, hover de fila de tabla con transición, transición de
 * botones) se ELIMINÓ de este archivo por quedar redundante: Tabler ya
 * define box-shadow/radio en .card y la transición en .btn de fábrica
 * (mismos valores, verificados en el CSS compilado), y .table-hover viene
 * incluido en el framework — se aplica agregando esa clase a cada tabla en
 * vez de reimplementarla acá.
 */

/* ---- Tipografía: Inter (Google Fonts) ----
 * Elegida por legibilidad en pantallas de datos densas (tablas, formularios
 * con muchas etiquetas/números) — métricas pensadas para UI, buen contraste
 * de números tabulares, amplio soporte de pesos. */
:root {
    --tblr-font-sans-serif: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* ---- Paleta de marca, dentro del sistema de variables propio de Tabler ---- */
:root {
    --tblr-primary: #3f35ff;
    --tblr-primary-rgb: 63, 53, 255;
    --tblr-green: #5bbd2f;
    --tblr-green-rgb: 91, 189, 47;
}

/* ---- Acento de marca (verde) — SOLO en el borde superior de las tarjetas,
 * nunca como fondo con texto blanco encima (ver nota arriba). Tabler no le
 * pone un borde de color a .card por defecto, así que esto no pelea con
 * nada del framework — es una decisión de marca, no una reimplementación. */
.card {
    border-top: 3px solid var(--tblr-green);
}

/* ---- Sidebar claro con ítem activo en color de marca ----
 * El sidebar ya es claro por defecto en Tabler (Sidebar.astro del repo
 * oficial trae dark=false; nuestro <aside> no lleva data-bs-theme="dark").
 * El fondo tenue del ítem activo también es automático: Tabler define
 * --tblr-navbar-active-bg: color-mix(in srgb, var(--tblr-primary) 8%,
 * transparent) en su regla base de .navbar (verificado en el CSS
 * compilado), así que ya usa nuestro azul de marca sin tocar nada acá.
 * Lo único que Tabler NO deriva del primary por defecto es el color de
 * texto/ícono del ítem activo (--tblr-navbar-active-color vale
 * var(--tblr-body-color), un gris neutro) — se sobreescribe para que
 * quede en el azul de marca, como pide el patrón. */
.navbar-vertical {
    --tblr-navbar-active-color: var(--tblr-primary);
}

/* ---- Fondo general de página ----
 * --tblr-body-bg ya resuelve a --tblr-gray-50 (gris muy claro) por
 * defecto dentro de [data-bs-theme=light] (verificado en el CSS
 * compilado) — es el patrón real de Tabler para esto, no un valor que
 * haya que fijar a mano. Con data-bs-theme="light" en <html> (ver
 * layouts/app) ese gris queda garantizado sin importar la preferencia
 * de color del sistema operativo del visitante. */

/* ---- Logo del sidebar: ícono solo cuando el sidebar está plegado ----
 * El logo completo de ASCE (hoja + "ASCE") es apaisado a la altura chica
 * del sidebar y no queda legible recortado a los ~4rem de la franja
 * plegada. Se muestra normalmente y se reemplaza por la versión "solo
 * ícono" (logo-asce-icon.png) únicamente cuando el sidebar está
 * REALMENTE plegado (no mientras el mouse/foco lo mantiene expandido en
 * la variante folded-hover) — mismo selector compuesto que usa el CSS
 * real de Tabler para esa distinción, para no desincronizarse de él. */
.navbar-brand-image-icono {
    display: none;
    /* Tabler resetea todo <img> a max-width:100% — dentro del <a> de ancho
     * automático que queda como único ítem flex al plegarse el sidebar,
     * eso crea una dependencia circular (el ancho automático del <a>
     * depende del ancho de la imagen, que a su vez depende del ancho del
     * <a>) y el navegador la resuelve en 0px. Como ya fijamos un tamaño
     * explícito acá, el max-width del reset no hace falta y hay que
     * anularlo para romper el ciclo. */
    max-width: none;
}
@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg:is(.navbar-folded, .navbar-folded-hover:not(:hover):not(:has(:focus-visible))) .navbar-brand-image-completo,
    :where([data-bs-sidebar="folded"]) .navbar-vertical.navbar-expand-lg .navbar-brand-image-completo,
    :where([data-bs-sidebar="folded-hover"]) .navbar-vertical.navbar-expand-lg:not(:hover):not(:has(:focus-visible)) .navbar-brand-image-completo {
        display: none;
    }
    .navbar-vertical.navbar-expand-lg:is(.navbar-folded, .navbar-folded-hover:not(:hover):not(:has(:focus-visible))) .navbar-brand-image-icono,
    :where([data-bs-sidebar="folded"]) .navbar-vertical.navbar-expand-lg .navbar-brand-image-icono,
    :where([data-bs-sidebar="folded-hover"]) .navbar-vertical.navbar-expand-lg:not(:hover):not(:has(:focus-visible)) .navbar-brand-image-icono {
        display: inline-block;
    }
}

/* ---- Tablas: aire suficiente para que no se vea amontonado ----
 * El padding de celda por defecto de Tabler (0.75rem) alcanza para
 * tablas compactas (table-sm, como los mini-listados de Configuración),
 * pero en los listados principales (card-table) se ve apretado con
 * varias líneas por celda (nombre + descripción, insignias). Se
 * aumenta el padding vertical y se define un encabezado explícito
 * (mayúsculas, gris, chico, con tracking) en vez de depender del
 * <th> por defecto del navegador. Todo esto queda scopeado a
 * .card-table para no afectar las tablas chicas que sí buscan ser
 * compactas. */
.card-table > :not(caption) > * > * {
    padding-block: 1rem;
}
.card-table thead th {
    padding-block: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tblr-secondary-color);
    border-bottom-width: 1px;
}

/* ---- Paginación en píldora, con el color de marca que ya trae por
 * defecto (--tblr-pagination-active-bg deriva de --tblr-primary). Solo
 * se ajusta el radio de borde al real "pill" de Tabler (el mismo que
 * usa su propia utilidad .rounded-pill), no un valor inventado. */
.pagination {
    --tblr-pagination-border-radius: var(--tblr-border-radius-pill);
}

/* ---- Botones en píldora ----
 * Aplica a TODOS los botones de la interfaz (no solo a los de las
 * tablas) para que la app no mezcle botones cuadrados y en píldora en
 * la misma pantalla. Reutiliza el radio real de Tabler para "pill" —
 * el mismo que usa su propia utilidad .rounded-pill —, con nuestros
 * colores de marca ya definidos arriba (--tblr-primary, etc.), sin
 * tocarlos acá. */
.btn {
    border-radius: var(--tblr-border-radius-pill);
}

/* ---- Badge que puede necesitar más de una línea ----
 * Tabler define .badge con white-space:nowrap + overflow:hidden (pensado
 * para una etiqueta corta tipo "Activo") — la etiqueta de Planes Equipos
 * en el catálogo incluye el rango de integrantes ("Planes Equipos (3-4
 * personas)") y con columnas angostas se cortaba a la mitad en vez de
 * bajar de línea. Clase de opt-in, no se toca el .badge global porque el
 * resto sí debe seguir siendo de una sola línea. */
.badge-wrap {
    white-space: normal;
    overflow: visible;
    text-align: left;
}