@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap");
/*
 * SKA Design Tokens — Petnova (producto hermano sobre pulser-platform).
 *
 * TOKENS ESTRUCTURALES (inmutables entre marcas) + TIPOGRAFÍA de marca.
 * Los tokens dinámicos (brand color, semánticos, surfaces, text, borders) los
 * sirve la Branding API: /api/v1/config-manager/admin-theme.css (driven by
 * modules/settings/design.py → DESIGN_SYSTEM).
 *
 * Cargado por Unfold STYLES ANTES del admin-theme dinámico y de
 * ska-admin-components.css (ver pulser-platform core/settings/unfold.py).
 *
 * REGLA: nunca hex directo en templates/badges. Siempre var(--ska-*).
 * Ver DESIGN_SYSTEM.md §0, §2, §4.
 */

/* ═══════════════════════════════════════════════════
   STRUCTURAL TOKENS (constant across brands)
   ═══════════════════════════════════════════════════ */
:root {
    /* ── Typography ──
       --ska-font-sans (cuerpo) lo provee EXCLUSIVAMENTE el endpoint dinámico
       org-driven (admin-theme.css ← font_family_admin de la org). NO se declara
       en :root acá a propósito: si se declarara, al re-enlazar este estático
       DESPUÉS del dinámico (templates bespoke de /crm/) se pisaría la fuente de
       la org. El display (títulos) sí es decisión de marca del producto. */
    --ska-font-display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --ska-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* ── Contrast tokens (text-on-X) ── */
    --ska-text-on-primary: #ffffff;
    /* Texto/iconos sobre fondo primary — fallback estático; el endpoint
       /api/v1/config-manager/admin-theme.css los sobreescribe dinámicamente. */
    --ska-on-primary-muted: rgba(255, 255, 255, 0.7);
    --ska-on-primary-emphasis: rgba(255, 255, 255, 0.95);
    --ska-on-primary-danger: #fbbf24;

    /* ── Radius scale ── (DESIGN_SYSTEM.md §3: 7px default / 15px large) */
    --ska-radius-xs: 0.25rem;     /* 4px */
    --ska-radius-sm: 0.4375rem;   /* 7px  — BORDER_RADIUS Taller Kids */
    --ska-radius-md: 0.625rem;    /* 10px */
    --ska-radius-lg: 0.9375rem;   /* 15px — BORDER_RADIUS_LARGE Taller Kids */
    --ska-radius-xl: 1.25rem;     /* 20px */
}

/* ═══════════════════════════════════════════════════
   TYPOGRAPHY APPLICATION
   Aplica las fuentes de marca en las superficies propias (cards/hub/detail).
   El chrome de Unfold mantiene su propia cascada; los headings `ska-*`/`tk-*`
   usan --ska-font-display (Poppins) explícitamente.
   ═══════════════════════════════════════════════════ */
.ska-admin-wrap,
.ska-admin-table,
.tk-cards,
.tk-bento {
    font-family: var(--ska-font-sans);
}

.ska-admin-wrap h1,
.ska-admin-header h1,
.tk-card__name,
.tk-bento h1,
.tk-bento h2,
.tk-kpi__value {
    font-family: var(--ska-font-display);
}

/* ═══════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════ */

/* Reset agresivo contra contaminación de Unfold. */
.ska-reset {
    background: var(--ska-surface) !important;
    color: var(--ska-text) !important;
    border-color: var(--ska-border) !important;
}

.ska-surface-alt {
    background: var(--ska-surface-alt) !important;
}