/* ==========================================================================
   tokens.css — Sistema de diseño de Facilítame (fuente única de verdad)
   --------------------------------------------------------------------------
   Se carga justo después del bundle de Keen (style_bundle.min.css) y antes
   del resto de hojas propias: así define las variables que usan todas y
   puede corregir la base de Keen (tamaño raíz, colores de Bootstrap).
   Los tamaños de letra van en px a propósito: Keen fija html a 13px (12px
   en móvil) y todo lo que estaba en rem salía a 8–10px.
   ========================================================================== */

:root {
    /* ---- Marca ---- */
    /* Marca: turquesa oscuro (aprobado por Erlantz 26/10). Blanco encima 4,9:1
       y como texto sobre blanco 4,9:1. El turquesa claro #00c2cb solo queda
       en los fondos suaves (--brand-soft). */
    --brand: #007c84;                 /* acento: bordes, iconos, textos */
    --brand-strong: #007c84;          /* rellenos con texto blanco (AA 4.9:1) */
    --brand-strong-hover: #00666d;
    --brand-soft: rgba(0, 194, 203, .10);
    --brand-soft-strong: rgba(0, 194, 203, .18);
    --brand-rgb: 0, 124, 132;
    /* Relleno de botones primarios: turquesa oscuro para que el texto blanco
       se lea (4,9:1). Aprobado por Erlantz el 26/10; para volver al
       turquesa claro basta con revertir este commit. */
    --brand-fill: var(--brand-strong);
    --brand-fill-hover: var(--brand-strong-hover);
    --brand-fill-rgb: 0, 124, 132;
    --focus: #007c84;

    /* ---- Texto y superficies ---- */
    --text-strong: #1e293b;
    --text-body: #475569;
    --text-muted: #64748b;
    --bg-page: #f8fafc;
    --bg-card: #ffffff;
    --bg-subtle: #f1f5f9;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;

    /* ---- Estados: texto (fg) / fondo (bg) / relleno sólido (solid) ---- */
    --status-success-fg: #15803d; --status-success-bg: #dcfce7; --status-success-solid: #15803d;
    --status-warning-fg: #b45309; --status-warning-bg: #fef3c7; --status-warning-solid: #b45309;
    --status-danger-fg:  #b91c1c; --status-danger-bg:  #fee2e2; --status-danger-solid:  #dc2626;
    --status-info-fg:    #0369a1; --status-info-bg:    #e0f2fe; --status-info-solid:    #0369a1;
    --status-neutral-fg: #475569; --status-neutral-bg: #f1f5f9; --status-neutral-solid: #475569;
    --status-primary-fg: #00666d; --status-primary-bg: rgba(0, 194, 203, .12); --status-primary-solid: #007c84;

    /* ---- Tipografía ---- */
    --font-sans: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fs-xs: 11px;    /* etiquetas, badges (mínimo absoluto) */
    --fs-sm: 12px;    /* texto de apoyo, cabeceras de tabla */
    --fs-base: 14px;  /* cuerpo */
    --fs-md: 16px;    /* títulos de tarjeta y de página */
    --fs-lg: 20px;
    --fs-xl: 28px;

    /* ---- Espaciado (base 4) ---- */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
    --page-pad: 24px;
    --card-pad: 20px;
    --grid-gap: 16px;

    /* ---- Radios ---- */
    --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px;

    /* ---- Sombras ---- */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
    --shadow-lg: 0 25px 50px -12px rgba(15, 23, 42, .25);

    /* ---- Controles e iconos ---- */
    --ctl-h: 40px;
    --ctl-h-sm: 32px;
    --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px;

    /* ---- Alias de las variables antiguas (mismo valor, una sola fuente) ---- */
    --color-main-facilitame: var(--brand);
    --color-main-facilitame-active: var(--brand-strong);
    --color-text-dark: var(--text-strong);
    --color-text-muted: var(--text-muted);
    --color-main: var(--brand);
    --color-main-dark: var(--brand-strong);

    /* ---- Bootstrap / Keen → tokens ---- */
    --bs-primary: var(--brand-fill);
    --bs-primary-rgb: var(--brand-fill-rgb);
    --bs-primary-active: var(--brand-fill-hover);
    --bs-primary-light: var(--brand-soft);
    --bs-primary-inverse: #ffffff;
    --bs-primary-text-emphasis: var(--brand-strong);
    --bs-primary-bg-subtle: var(--brand-soft);
    --bs-primary-border-subtle: rgba(0, 194, 203, .35);
    --bs-link-color: var(--brand-strong);
    --bs-link-color-rgb: 0, 124, 132;
    --bs-link-hover-color: var(--brand-strong-hover);
    --bs-link-hover-color-rgb: 0, 102, 109;
    --bs-success: var(--status-success-solid);
    --bs-success-rgb: 21, 128, 61;
    --bs-success-light: var(--status-success-bg);
    --bs-success-active: #166534;
    --bs-warning: var(--status-warning-solid);
    --bs-warning-rgb: 180, 83, 9;
    --bs-warning-light: var(--status-warning-bg);
    --bs-warning-active: #92400e;
    --bs-danger: var(--status-danger-solid);
    --bs-danger-rgb: 220, 38, 38;
    --bs-danger-light: var(--status-danger-bg);
    --bs-danger-active: #b91c1c;
    --bs-info: var(--status-info-solid);
    --bs-info-rgb: 3, 105, 161;
    --bs-info-light: var(--status-info-bg);
    --bs-info-active: #075985;
    --bs-text-primary: var(--brand-strong);
    --bs-text-success: var(--status-success-fg);
    --bs-text-warning: var(--status-warning-fg);
    --bs-text-danger: var(--status-danger-fg);
    --bs-text-info: var(--status-info-fg);
    --bs-text-muted: var(--text-muted);
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--text-strong);
    --bs-border-color: var(--border);
    --bs-focus-ring-color: rgba(0, 124, 132, .25);
}

@media (max-width: 767.98px) {
    :root {
        --page-pad: 16px;
        --card-pad: 16px;
        --ctl-h: 44px;
    }
}

/* Tamaño raíz: 14px en todas las anchuras (Keen pone 13px y 12px en <992px
   con !important; esta hoja va después y gana por orden). */
html, body {
    font-size: 14px !important;
}

/* Utilidades de color de Keen que seguían en el azul #1b84ff / morado */
.text-primary { color: var(--brand-strong) !important; }
.text-hover-primary:hover { color: var(--brand-strong) !important; }
.bg-primary { background-color: var(--brand-fill) !important; }
.text-success { color: var(--status-success-fg) !important; }
.text-warning { color: var(--status-warning-fg) !important; }
.text-danger { color: var(--status-danger-fg) !important; }
.text-info { color: var(--status-info-fg) !important; }
.bg-light-primary { background-color: var(--brand-soft) !important; }
.bg-light-success { background-color: var(--status-success-bg) !important; }
.bg-light-warning { background-color: var(--status-warning-bg) !important; }
.bg-light-danger { background-color: var(--status-danger-bg) !important; }
.bg-light-info { background-color: var(--status-info-bg) !important; }
a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

/* Suelo de tamaños para las utilidades de Keen (fs-8/fs-9 salían a 9–10px) */
.fs-7 { font-size: 13px !important; }
.fs-8 { font-size: var(--fs-sm) !important; }
.fs-9, .fs-10 { font-size: var(--fs-xs) !important; }
.small, small { font-size: max(var(--fs-sm), .875em); }

/* Foco visible y coherente en toda la app */
:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}
.sidebar :focus-visible,
aside.sidebar :focus-visible,
#kt_sidebar :focus-visible {
    outline-color: #ffffff;
}