/* =============================================================
   Sistema de diseño — paleta y tipografía tomadas de la página
   corporativa de referencia (anfibio.cl/starparts): acero azulado
   (ink), cian de plano técnico (blueprint) y cobre (copper), con
   Big Shoulders Display / IBM Plex Sans / IBM Plex Mono.
   ============================================================= */

:root {
    --ink: #0b1420;
    --ink-2: #101d2d;
    --blueprint: #2c93a8;
    --blueprint-light: #6bc4d6;
    --copper: #c9772f;
    --copper-light: #f0a878;
    --fog: #e7ebef;
    --graphite: #4a5560;
    --paper: #f7f8f9;
    --white: #ffffff;
    --line: rgba(74, 85, 96, 0.18);
    --line-on-ink: rgba(255, 255, 255, 0.12);

    --font-display: "Big Shoulders Display", sans-serif;
    --font-body: "IBM Plex Sans", sans-serif;
    --font-mono: "IBM Plex Mono", monospace;

    /* Bootstrap 5 expone estas variables a nivel de :root; se
       sobrescriben aquí para retemar sin recompilar Sass. */
    --bs-body-font-family: var(--font-body);
    --bs-body-bg: var(--paper);
    --bs-body-color: var(--ink);
    --bs-border-radius: 4px;
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: 4px;
    --bs-emphasis-color: var(--ink);
    --bs-link-color: var(--blueprint);
    --bs-link-color-rgb: 44, 147, 168;
    --bs-link-hover-color: var(--ink);
    --bs-link-hover-color-rgb: 11, 20, 32;
    --bs-primary: var(--copper);
    --bs-primary-rgb: 201, 119, 47;
}

body {
    font-family: var(--font-body);
}

h1 {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.05;
}

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

/* ---------- botones: la acción principal es cobre, no azul ---------- */
.btn {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--copper);
    --bs-btn-border-color: var(--copper);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b3661f;
    --bs-btn-hover-border-color: #b3661f;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #a15c1b;
    --bs-btn-active-border-color: #a15c1b;
    --bs-btn-focus-shadow-rgb: 201, 119, 47;
    --bs-btn-disabled-bg: var(--copper-light);
    --bs-btn-disabled-border-color: var(--copper-light);
}

.btn-outline-secondary {
    --bs-btn-color: var(--graphite);
    --bs-btn-border-color: var(--graphite);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--graphite);
    --bs-btn-hover-border-color: var(--graphite);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--graphite);
    --bs-btn-active-border-color: var(--graphite);
    --bs-btn-focus-shadow-rgb: 74, 85, 96;
}

/* ---------- navbar: acero (ink), no azul Bootstrap ---------- */
.app-navbar {
    background-color: var(--ink);
    border-bottom: 1px solid var(--line-on-ink);
}

.app-navbar .navbar-brand {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 1.15rem;
    font-weight: 700;
}

.app-navbar .nav-link {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(231, 235, 239, 0.75);
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus-visible {
    color: var(--blueprint-light);
}

.app-navbar .navbar-text {
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

/* ---------- eyebrow: etiqueta técnica reutilizada del sitio de referencia ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blueprint);
    margin-bottom: 0.5rem;
}

.eyebrow::before {
    content: "//";
    opacity: 0.6;
}

/* ---------- pestañas del datatable: mismos colores que el navbar ---------- */
.tabs-bar {
    background-color: var(--ink);
    border-bottom: 1px solid var(--line-on-ink);
}

.tabs-bar .nav-tabs {
    border-bottom: 0;
    gap: 0.25rem;
    /* el botón "Exportar" ocupa el lado derecho de la barra: no pegar
       los tabs al borde derecho como hace .card-header-tabs por defecto */
    margin-right: 0;
    flex-wrap: nowrap;
}

.tabs-bar #btn-exportar {
    flex-shrink: 0;
    margin-left: 0.75rem;
}

.tabs-bar .nav-link {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(231, 235, 239, 0.75);
    background-color: transparent;
    border: 0;
    border-radius: var(--bs-border-radius);
    padding: 0.85rem 1.1rem;
    transition: background-color 200ms ease, color 200ms ease;
}

.tabs-bar .nav-link .badge {
    transition: background-color 200ms ease, color 200ms ease;
}

.tabs-bar .nav-link:hover,
.tabs-bar .nav-link:focus-visible {
    color: var(--blueprint-light);
    background-color: rgba(255, 255, 255, 0.06);
}

.tabs-bar .nav-link.active {
    color: #fff;
    background-color: var(--copper);
    box-shadow: 0 2px 10px rgba(201, 119, 47, 0.35);
}

.tabs-bar .nav-link.active:hover {
    color: #fff;
}

.tabs-bar .nav-link.active .badge {
    background-color: rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
}

/* ---------- login ---------- */
.pantalla-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ink);
    background-image: radial-gradient(circle at 15% 20%, rgba(44, 147, 168, 0.16), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(201, 119, 47, 0.12), transparent 45%);
    padding: var(--space-3, 1.5rem);
}

.tarjeta-login {
    width: 100%;
    max-width: 380px;
    border: 1px solid var(--line-on-ink);
    border-top: 3px solid var(--copper);
}

.tarjeta-login .logo {
    display: block;
    margin: 0 auto 1rem;
}

.tarjeta-login .eyebrow {
    display: flex;
    justify-content: center;
}

.grafico-torta {
    width: 100%;
    height: 320px;
}

/* ---------- alarma "vence hoy": no se toca el semáforo verde/amarillo/rojo
   (regla de negocio, no de marca), pero el estado más urgente sí necesita
   destacar por sobre los demás con parpadeo.
   El naranja va como valor ESTÁTICO de --bs-table-bg (mismo mecanismo que
   .table-success/warning/danger de Bootstrap, probado cross-browser) y el
   parpadeo anima `filter`, una propiedad estándar: animar directamente una
   custom property sin registrar vía `@property` (--bs-table-bg) no es
   confiable entre navegadores — funciona en Chrome pero Firefox no la
   interpola/aplica, dejando la fila sin color alguno. */
@keyframes parpadeo-alarma {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.6);
    }
}

.table-vence-hoy {
    --bs-table-color: #7a3d00;
    --bs-table-bg: rgba(253, 126, 20, 0.4);
    animation: parpadeo-alarma 1s steps(1, end) infinite;
}

.badge.text-bg-vence-hoy {
    background-color: #fd7e14;
    color: #fff;
    animation: parpadeo-alarma 1s steps(1, end) infinite;
}