:root {
    /* 2026-07-27: agregado por paridad con theme-dark.css (ver ese archivo) — en light el valor
       es casi idéntico al #fff que ya traía Bootstrap por default (var(--surface-app) = grey-25,
       #f6f7f9), cambio mínimo, no es el fix real (ese es del lado dark). */
    --bs-body-bg: var(--surface-app);

    /* 2026-07-27: hover de .btn-secondary (custom.css) — en light oscurece (efecto "presionado"
       clásico). No se puede reusar --bs-gray-dark para esto: esa variable también da el color de
       texto fijo de .btn-white (oscuro sobre blanco SIEMPRE, no debe invertir con el tema). Necesita
       su propia variable porque el hover debe invertir dirección en dark (ver theme-dark.css):
       Flor: "si hover oscurece en claro, en oscuro es inverso, se ilumina". */
    --btn-secondary-hover-bg: #343a40;
    --btn-secondary-hover-color: #fff; /* texto claro, el fondo de hover es oscuro en light */

    /* 2026-07-30: hover de .btn-primary/.btn-outline-primary/.sp-icon-btn-primary — mismo bug que
       --btn-secondary-hover-bg (ver arriba): estaba hardcodeado a var(--indigo-800) en custom.css y
       components.css, fijo en los 2 temas. En dark, --bs-primary pasa a pink (#e42d7f) pero el hover
       seguía saltando a indigo — un cambio de tono, no un oscurecido/aclarado del mismo color.
       Reportado por Flor, confirmado contra código real. */
    --btn-primary-hover-bg: var(--indigo-800);

    --bs-assigned: #e1ebff;
    --bs-blue: #0d6efd;
    --bs-cyan: #0dcaf0;
    --bs-danger: #dc3545;
    --bs-dark: #212529;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-light: #abb0c1;
    --bs-green: #198754;
    --bs-indigo: #e1e2fb;
    --bs-info: #0dcaf0;
    --bs-light: #f8f9fa;
    --bs-muted: #797e8f;
    --bs-orange: #fd7e14;
    --bs-pink: #e42d7f;
    --bs-primary: #2e245a;
    --bs-primary-50: rgb(46, 36, 90, 0.5);
    --bs-purple: #6f42c1;
    --bs-red: #dc3545;
    --bs-secondary: #6c757d;
    --bs-success: #28a745;
    --bs-teal: #20c997;
    --bs-warning: #ffc107;
    --bs-white: #fff;
    --bs-yellow: #ffc107;

    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));

    --bs-breakpoint-xs: 0;
    --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 992px;
    --bs-breakpoint-xl: 1200px;

    /* 2026-07-27: bloque --sp-* completo evacuado (era el "bug de base" del tema oscuro que
       motivó retirar el switch en 2b120cbec — estas variables no existían en theme-dark.css).
       De las 24 declaradas acá, solo 3 tenían consumidores reales en todo el repo:
       --sp-text-disabled → var(--text-placeholder), --sp-text-muted → var(--text-muted),
       --sp-bg-subtle → var(--surface-app) — migrados en sus 7 archivos consumidores
       (muro.js, whatsapp.js, faqs.js, ProductosComponent.php, ClientesComponent.php,
       FilterComponent.php, Pages/home.ctp). Las otras 21 (--sp-neutral-*, --sp-bg-default/
       surface/elevated, --sp-text-primary/secondary/inverse/link, --sp-border-*, --sp-action-*,
       --sp-state-*, --sp-shadow-*, --sp-chat-*) no tenían ningún var(--sp-...) apuntándoles en
       ningún .css/.js/.ctp — dead code, ya cubierto por design-system/tokens.css real. */
}