/* =========================================================================
   FullEc · Tokens de diseño
   -------------------------------------------------------------------------
   Única fuente de colores, tipografía, radios, sombras y medidas.
   La usan el panel (admin.css) y las páginas públicas/login (site.css).

   Para cambiar la identidad visual (por ejemplo, adoptar los colores de
   Link Sistemas) se editan SOLO los valores de este bloque.
   ========================================================================= */

:root {
    /* ---- Marca (colores del logo FullEc) -------------------------------- */
    --fx-primary: #085fad;          /* azul del logo */
    --fx-primary-rgb: 8, 95, 173;
    --fx-primary-hover: #084a8c;
    --fx-primary-soft: #e8f1fb;
    --fx-primary-line: #bcd5f0;

    /* ---- Neutros -------------------------------------------------------- */
    --fx-ink: #1c2430;          /* texto principal */
    --fx-ink-2: #3d4655;        /* texto secundario fuerte */
    --fx-muted: #5d6675;        /* texto atenuado (AA sobre canvas y blanco) */
    --fx-subtle: #98a1ae;       /* deshabilitado, separadores de texto */
    --fx-line: #e3e7ee;         /* bordes */
    --fx-line-strong: #cfd6e0;  /* bordes de controles */
    --fx-surface: #ffffff;      /* tarjetas, tablas, modales, menú */
    --fx-surface-2: #f7f9fc;    /* zonas internas, hover de filas */
    --fx-canvas: #f1f4f8;       /* fondo de la aplicación */

    /* ---- Navegación ----------------------------------------------------- */
    /* Menú claro: el logo (azul, verde y naranja sobre transparente) se lee
       con sus colores reales, cosa que no pasaba sobre el gris oscuro. */
    --fx-sidebar-bg: var(--fx-surface);
    --fx-sidebar-ink: var(--fx-ink-2);
    --fx-sidebar-hover: var(--fx-surface-2);
    --fx-table-head: #eef2f7;
    --fx-table-head-ink: var(--fx-ink-2);

    /* ---- Estados (el color se reserva para comunicar estado) ------------ */
    --fx-success: #17803a;          /* verde del logo, oscurecido para AA */
    --fx-success-rgb: 23, 128, 58;
    --fx-success-soft: #e6f4ea;
    --fx-danger: #dc2626;
    --fx-danger-rgb: 220, 38, 38;
    --fx-danger-soft: #fee2e2;
    --fx-warning: #f07010;          /* naranja del carrito del logo */
    --fx-warning-rgb: 240, 112, 16;
    --fx-warning-soft: #fff1e3;
    --fx-info: #0284c7;
    --fx-info-rgb: 2, 132, 199;
    --fx-info-soft: #e0f2fe;

    /* tonos fuertes (texto sobre fondo suave) y bordes de estado */
    --fx-success-strong: #166534;
    --fx-success-hover: #126b30;
    --fx-success-line: #b7dfc3;
    --fx-danger-strong: #991b1b;
    --fx-danger-hover: #b91c1c;
    --fx-danger-line: #fecaca;
    --fx-warning-strong: #9a4a06;
    --fx-warning-line: #fcd3a8;
    --fx-accent: #7c3aed;       /* acción secundaria distintiva (contraseña) */

    /* ---- Tipografía ----------------------------------------------------- */
    --fx-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --fx-text-sm: .8125rem;   /* 13px */
    --fx-text: .9375rem;      /* 15px */
    --fx-text-lg: 1.125rem;   /* 18px */
    --fx-title: 1.375rem;     /* 22px */

    /* ---- Forma ---------------------------------------------------------- */
    --fx-radius-sm: 8px;      /* controles, botones, badges cuadrados */
    --fx-radius: 12px;        /* tarjetas, tablas, modales */
    --fx-radius-pill: 999px;
    --fx-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --fx-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    --fx-focus: 0 0 0 3px rgba(var(--fx-primary-rgb), .25);

    /* ---- Medidas -------------------------------------------------------- */
    --fx-control-h: 44px;
    --fx-sidebar-w: 248px;
    --fx-sidebar-w-collapsed: 72px;
    --fx-topbar-h: 60px;
    --fx-speed: .15s;

    /* ---- Puente con Bootstrap 5 ----------------------------------------- */
    --bs-body-font-family: var(--fx-font);
    --bs-body-font-size: var(--fx-text);
    --bs-body-color: var(--fx-ink);
    /* --bs-body-bg queda blanco: Bootstrap lo usa de fondo en inputs, tarjetas y modales.
       El gris de fondo de la aplicación se aplica directamente al body. */
    --bs-secondary-color: var(--fx-muted);
    --bs-border-color: var(--fx-line);
    --bs-border-radius: var(--fx-radius-sm);
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: var(--fx-radius);
    --bs-primary: var(--fx-primary);
    --bs-primary-rgb: var(--fx-primary-rgb);
    --bs-success-rgb: var(--fx-success-rgb);
    --bs-danger-rgb: var(--fx-danger-rgb);
    --bs-warning-rgb: var(--fx-warning-rgb);
    --bs-info-rgb: var(--fx-info-rgb);
    --bs-link-color: var(--fx-primary);
    --bs-link-color-rgb: var(--fx-primary-rgb);
    --bs-link-hover-color: var(--fx-primary-hover);
    --bs-focus-ring-color: rgba(var(--fx-primary-rgb), .25);

    /* ---- Alias de las variables anteriores (no usar en código nuevo) ---- */
    --primary: var(--fx-primary);
    --primary-hover: var(--fx-primary-hover);
    --secondary: var(--fx-ink);
    --success: var(--fx-success);
    --danger: var(--fx-danger);
    --light: var(--fx-surface-2);
    --border: var(--fx-line);
    --text: var(--fx-ink);
}

/* Botón primario de Bootstrap con los colores de la marca */
.btn-primary {
    --bs-btn-bg: var(--fx-primary);
    --bs-btn-border-color: var(--fx-primary);
    --bs-btn-hover-bg: var(--fx-primary-hover);
    --bs-btn-hover-border-color: var(--fx-primary-hover);
    --bs-btn-active-bg: var(--fx-primary-hover);
    --bs-btn-active-border-color: var(--fx-primary-hover);
    --bs-btn-disabled-bg: var(--fx-primary);
    --bs-btn-disabled-border-color: var(--fx-primary);
    --bs-btn-focus-shadow-rgb: var(--fx-primary-rgb);
}

/* Importes y cantidades: cifras del mismo ancho para que las columnas alineen */
.num,
td.num,
th.num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0s !important;
        animation-duration: 0s !important;
    }
}