@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@600;700;800&display=swap');
/* assets/css/temas/taller-pro.css — Tema "Taller Pro" (DOCS/UX-DEMOS/01-taller-pro.html). OSCURO.
   El header pone además data-bs-theme="dark": Bootstrap (cards, tablas, formularios, modales) se
   oscurece solo. El bloque "Puente" cubre las utilidades claras que usan las pantallas sin sanear;
   cuando termine el saneamiento, ese bloque se borra.
   Reglas: solo tokens + capa de personalidad sobre componentes compartidos. Nada de pantallas. */
:root[data-tema="taller-pro"] {
    /* Forma (tanda 22): el CSS de las pantallas usa var(--sm-r-*, valor de Clásico). Escalones: xs ≤5px · sm 6–12 · md 13–20 · lg 21–40 · pill (botones y chips redondos). */
    --sm-r-xs: 6px;  --sm-r-sm: 10px;  --sm-r-md: 14px;  --sm-r-lg: 18px;  --sm-r-pill: 10px;
    --bs-border-radius-sm: 6px;  --bs-border-radius-xl: 18px;  --bs-border-radius-xxl: 18px;  --bs-border-radius-pill: 10px;
    color-scheme: dark;
    --sm-bg: #0b0f17;  --sm-surface: #121826;  --sm-surface-2: #1a2233;
    --sm-line: rgba(255, 255, 255, .08);
    --sm-ink: #f1f5f9;  --sm-ink-2: #cbd5e1;  --sm-muted: #8492a6;
    --sm-primary: #FEBC35;  --sm-primary-ink: #0b0f17;  --sm-dark: #070a10;  --sm-accent: #FEBC35;  --sm-header: #9fb7d9;
    --sm-ok: #22c55e;     --sm-ok-bg: rgba(34, 197, 94, .14);    --sm-ok-ink: #86efac;
    --sm-warn: #f59e0b;   --sm-warn-bg: rgba(245, 158, 11, .14); --sm-warn-ink: #fcd34d;
    --sm-bad: #ef4444;    --sm-bad-bg: rgba(239, 68, 68, .14);   --sm-bad-ink: #fca5a5;
    --sm-info: #38bdf8;   --sm-info-bg: rgba(56, 189, 248, .14); --sm-info-ink: #7dd3fc;
    --sm-neutral-bg: #232d42;  --sm-neutral-ink: #cbd5e1;
    --sm-radius: 14px;  --sm-radius-sm: 10px;
    --sm-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 30px -12px rgba(0, 0, 0, .8);
    --sm-card-ring: 0 0 0 1px var(--sm-line);
    --sm-card-fondo: linear-gradient(180deg, var(--sm-surface-2), var(--sm-surface));
    --sm-font: 'Barlow', system-ui, sans-serif;  --sm-font-display: 'Barlow Condensed', 'Barlow', sans-serif;
    --sm-dur-fast: 140ms;  --sm-dur: 220ms;  --sm-dur-slow: 360ms;
    --sm-ease: cubic-bezier(.2, .8, .2, 1);  --sm-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --sm-nav-bg: #070a10;  --sm-nav-bg-blur: rgba(7, 10, 16, .92);
    --sm-nav-ink: #e2e8f0;  --sm-nav-muted: #8492a6;  --sm-nav-hover: #1a2233;  --sm-nav-line: rgba(255, 255, 255, .06);
    --sm-nav-active-bg: rgba(254, 188, 53, .14);  --sm-nav-active-ink: #FEBC35;
    --sm-scrim: rgba(0, 0, 0, .6);
    /* Bootstrap (encima de data-bs-theme="dark") */
    --bs-body-bg: var(--sm-bg);  --bs-body-color: var(--sm-ink);  --bs-body-font-family: var(--sm-font);
    --bs-secondary-bg: var(--sm-surface);  --bs-tertiary-bg: var(--sm-surface-2);
    --bs-border-color: var(--sm-line);  --bs-emphasis-color: #ffffff;
    --bs-primary: #FEBC35;  --bs-primary-rgb: 254, 188, 53;  --bs-link-color-rgb: 254, 188, 53;
    --bs-border-radius: 10px;  --bs-border-radius-lg: 14px;
}
/* Tarjetas: degradé de superficie en TODAS (token de sm-tarjetas.css, tanda 32) y contorno fino. */
[data-tema="taller-pro"] .sm-card, [data-tema="taller-pro"] .card { border: 1px solid var(--sm-line); }
[data-tema="taller-pro"] h1, [data-tema="taller-pro"] .h1, [data-tema="taller-pro"] .sm-kpi-value, [data-tema="taller-pro"] .sm-display {
    font-family: var(--sm-font-display); text-transform: uppercase; letter-spacing: .02em;
}
[data-tema="taller-pro"] .btn-primary { --bs-btn-bg: #FEBC35; --bs-btn-color: #0b0f17; --bs-btn-border-color: #FEBC35; --bs-btn-hover-bg: #ffcb5c; --bs-btn-hover-color: #0b0f17; --bs-btn-hover-border-color: #ffcb5c; --bs-btn-active-bg: #e5a82e; --bs-btn-active-color: #0b0f17; }
[data-tema="taller-pro"] .btn-primary:hover { box-shadow: 0 0 22px -4px rgba(254, 188, 53, .55); }
[data-tema="taller-pro"] .sm-rail-btn.is-current .material-symbols-outlined { box-shadow: inset 0 -3px 0 var(--sm-accent); }

/* ---- Puente: utilidades claras de pantallas sin sanear (borrar al terminar el saneamiento) ---- */
[data-tema="taller-pro"] .bg-white, [data-tema="taller-pro"] .bg-light, [data-tema="taller-pro"] .bg-body { background-color: var(--sm-surface) !important; }
[data-tema="taller-pro"] .text-dark, [data-tema="taller-pro"] .text-black, [data-tema="taller-pro"] .link-dark { color: var(--sm-ink) !important; }
[data-tema="taller-pro"] .text-muted, [data-tema="taller-pro"] .text-secondary { color: var(--sm-muted) !important; }
[data-tema="taller-pro"] .border, [data-tema="taller-pro"] .border-bottom, [data-tema="taller-pro"] .border-top { border-color: var(--sm-line) !important; }
[data-tema="taller-pro"] .table-light, [data-tema="taller-pro"] thead.table-light th { --bs-table-bg: var(--sm-surface-2); --bs-table-color: var(--sm-ink); }
[data-tema="taller-pro"] .btn-light {
    --bs-btn-bg: var(--sm-surface-2); --bs-btn-color: var(--sm-ink); --bs-btn-border-color: var(--sm-line);
    --bs-btn-hover-bg: var(--sm-surface); --bs-btn-hover-color: var(--sm-ink); --bs-btn-hover-border-color: var(--sm-line);
    --bs-btn-active-bg: var(--sm-surface); --bs-btn-active-color: var(--sm-ink);
}
[data-tema="taller-pro"] img[src*="servicemotors-nav"] { filter: brightness(0) invert(1); }