/**
 * CC20-972 — tokens de marca HiperMe (Manual de Marca).
 * Cargar antes de style.css / sidebar-v2.css.
 *
 * Docs: docs/BRAND_COLORS.md
 */
:root {
	/* ——— Paleta principal ——— */
	--brand-deep-green: #033939; /* --hm-deep — brand, headings, dark bg, text on light */
	--brand-field-label: var(--brand-deep-green); /* labels de campo en modales Stitch (12px/600) */
	--brand-mint: #87d49e; /* --hm-mint — CTAs, active, actionable accents */

	/* ——— Formulario Stitch (cc-af + cc-qf comparten valores) ——— */
	--stitch-primary: var(--brand-deep-green);
	--stitch-outline: rgba(188, 202, 189, 0.55);
	--stitch-outline-soft: rgba(188, 202, 189, 0.35);
	--stitch-muted: #6d7b6f;
	--stitch-surface: #f2f4f6;
	--stitch-error: var(--brand-error, #c04848);
	--stitch-input-min-h: 42px;
	--stitch-input-pad: 8px 12px;
	--stitch-input-radius: 8px;
	--stitch-section-gap: 28px;
	--stitch-focus-ring: 0 0 0 3px rgba(3, 57, 57, 0.12);
	--brand-surface: #e6e3dc; /* --hm-sand — page bg, calm surfaces (Arena) */
	--brand-ink: #0c0c0c; /* --hm-ink — body text on very light surfaces */

	/* ——— Paleta secundaria (un acento por composición) ——— */
	--brand-forest: #174f44; /* --hm-forest — deep layers, pressed, italics */
	--brand-lavender: #c797df; /* --hm-lavender — info, notes, avatars, AI hints */
	--brand-lime: #dff3ab; /* --hm-lime — soft success, editorial highlights */
	--brand-white: #ffffff; /* --hm-white — elevated surfaces, cards, modals */

	/* ——— Visualización de datos ———
	   Paleta categórica: no representa estados funcionales y no debe usar
	   --brand-success / --brand-warning / --brand-error / --brand-info. */
	/* Orden oficial: núcleo 1–6, expansión 7–12. */
	--chart-series-1: #033939; /* Verde profundo */
	--chart-series-2: #87d49e; /* Menta */
	--chart-series-3: #4c7a86; /* Azul petróleo */
	--chart-series-4: #c797df; /* Lavanda */
	--chart-series-5: #d66e63; /* Coral */
	--chart-series-6: #d89a2e; /* Ámbar */
	--chart-series-7: #174f44; /* Bosque */
	--chart-series-8: #eaf77a; /* Lima */
	--chart-series-9: #7fafa4; /* Salvia */
	--chart-series-10: #6d9bc8; /* Azul niebla */
	--chart-series-11: #8e6fb5; /* Ciruela suave */
	--chart-series-12: #c9898f; /* Terracota suave */

	/* Semántica de llamadas: mantener estos significados en toda la app. */
	--chart-call-incoming: var(--chart-series-7);
	--chart-call-outgoing: var(--chart-series-11);
	--chart-call-unique: var(--chart-series-3);
	--chart-call-attended: var(--chart-series-2);
	--chart-call-transferred: var(--chart-series-4);
	--chart-call-lost: var(--chart-series-6);
	--chart-call-abandoned: var(--chart-series-5);
	--chart-call-total: var(--chart-series-8);
	--chart-call-late-attention: rgba(135, 212, 158, 0.55);
	--chart-call-short: var(--chart-series-10);

	/* ——— Color funcional ——— */
	--brand-success: #2f9e63;
	--brand-warning: #d49f3b;
	--brand-error: #c04848;
	--brand-info: #c797df; /* same as lavender — advisory / AI hints */

	/* ——— Transparencias: verde profundo rgba(3, 57, 57, α) ——— */
	--brand-deep-green-08: rgba(3, 57, 57, 0.08);
	--brand-deep-green-16: rgba(3, 57, 57, 0.16);
	--brand-deep-green-32: rgba(3, 57, 57, 0.32);
	--brand-deep-green-50: rgba(3, 57, 57, 0.5);
	--brand-deep-green-75: rgba(3, 57, 57, 0.75);

	/* ——— Transparencias: menta rgba(135, 212, 158, α) ——— */
	--brand-mint-16: rgba(135, 212, 158, 0.16);
	--brand-mint-32: rgba(135, 212, 158, 0.32);
	--brand-mint-50: rgba(135, 212, 158, 0.5);
	--brand-mint-70: rgba(135, 212, 158, 0.7);
	--brand-mint-85: rgba(135, 212, 158, 0.85);
	--brand-switch-on: var(--brand-mint); /* track ON de switches */
	--brand-switch-focus: var(--brand-mint-50);

	/* ——— Transparencias: lavanda rgba(199, 151, 223, α) ——— */
	--brand-lavender-24: rgba(199, 151, 223, 0.24);
	--brand-lavender-32: rgba(199, 151, 223, 0.32);
	--brand-lavender-50: rgba(199, 151, 223, 0.5);

	/* ——— Avatar sin foto (iniciales) — regla global ——— */
	--brand-avatar-bg: var(--brand-lavender-32);
	--brand-avatar-color: var(--brand-deep-green);
	--brand-avatar-font-weight: 700;

	/* ——— Acciones de fila (Ver / Editar / Borrar) — regla global ——— */
	--brand-row-action-bg: var(--brand-lime);
	--brand-row-action-bg-hover: #d4ec9a;
	--brand-row-action-border: rgba(3, 57, 57, 0.1);
	--brand-row-action-danger-hover-bg: #fef2f2;
	--brand-row-action-danger-hover-border: rgba(185, 28, 28, 0.28);

	/* ——— Tooltips (ayudas breves y labels flotantes) ——— */
	--brand-tooltip-bg: var(--brand-forest);
	--brand-tooltip-color: var(--brand-white);

	/* Aliases manual (--hm-*) */
	--hm-deep: var(--brand-deep-green);
	--hm-mint: var(--brand-mint);
	--hm-sand: var(--brand-surface);
	--hm-ink: var(--brand-ink);
	--hm-forest: var(--brand-forest);
	--hm-lavender: var(--brand-lavender);
	--hm-lime: var(--brand-lime);
	--hm-white: var(--brand-white);

	/* Aliases legacy → nueva paleta (migración gradual) */
	--pbx-dark-green: var(--brand-deep-green);
	/* Acentos UI sobre fondo claro (CTAs, títulos, chips): deep green.
	   El mint queda solo para contraste sobre sidebar oscuro (--sb2-selected). */
	--pbx-green: var(--brand-deep-green);
	--accent-color: var(--brand-deep-green);
	--brand-accent-hover: var(--brand-forest);

	/* Tipografía */
	--font-brand: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Título de página (h2 de sección) + hueco header → contenido */
	--brand-page-title-size: 28px;
	--brand-page-title-weight: 700;
	--brand-page-gap-header: 28px;
}