/* =========================================================================
   Chief of Sniff · Design tokens
   Versión: 1.1.0 · 2026-10-10
   FUENTE DE VERDAD: repo del website (design-system/tokens.css).
   El repo de la app tiene una COPIA EXACTA. No edites la copia: cambia aquí,
   sube la versión y copia el archivo entero al otro repo (ver SYNC.md).
   ========================================================================= */

/* Desde v1.1.0 este archivo no carga la fuente. Cada repo sirve Plus Jakarta Sans
   desde su propio dominio (en Next.js, next/font) y expone la familia en la
   variable --font-jakarta. Ver SYNC.md. */

:root {
  /* ---------- Marca ---------- */
  --ink: #16181D;            /* texto principal, bloques oscuros, sidebar admin */
  --ink-2: #20232A;          /* tarjetas dentro de bloques oscuros */
  --ink-3: #2A2E37;          /* ítem activo sobre fondo oscuro */
  --blue: #2563EB;           /* CTA, enlaces, palabra destacada, burbuja del usuario */
  --blue-dark: #1D4ED8;      /* hover del CTA, texto sobre --blue-soft */
  --blue-soft: #EEF4FF;      /* ítem activo de navegación, cajas suaves */
  --blue-on-dark: #9CC0FF;   /* texto destacado sobre fondo oscuro, etiqueta ADMIN */
  --sky: #5B9BF5;            /* ilustraciones, aro del logo */
  --blue-soft-on-dark: #2A3245; /* avatares y cajas suaves sobre fondo oscuro */

  /* ---------- Superficies y texto ---------- */
  --page: #FFFFFF;           /* fondo de la web */
  --panel: #F5F5F7;          /* paneles grandes; fondo de app y admin */
  --line: #EEEEF0;           /* bordes y divisores */
  --line-strong: #DCDEE3;    /* bordes de inputs y botones secundarios */
  --line-on-dark: #2C3038;   /* divisores dentro de bloques oscuros */
  --text: var(--ink);
  --muted: #565C69;          /* texto secundario */
  --muted-2: #6B7180;        /* texto terciario */
  --muted-3: #8A8F9C;        /* etiquetas, metadatos */

  /* ---------- Estados (fondo / texto) ---------- */
  --success-soft: #E7F6EC;  --success: #15803D;   /* confirmada, al día */
  --success-strong: #137638;                        /* texto pequeño sobre --success-soft (5,1:1) */
  --success-on-dark: #4ADE80;                       /* check sobre fondo oscuro */
  --info-soft: #EEF4FF;     --info: #1D4ED8;      /* gestionando */
  --warning-soft: #FFF1E7;  --warning: #C2410C;   /* pendiente, vence pronto */
  --attention-bg: #FFF8EF;                          /* bloque «necesita tu respuesta» */
  --neutral-soft: #F5F5F7;  --neutral: #3D4250;   /* recordatorio */
  --review-soft: #F3EEFF;   --review: #6D28D9;    /* admin: revisar resultado */
  --caution-soft: #FEF3C7;  --caution: #B45309;   /* admin: baja confianza */
  --danger-soft: #FEE2E2;   --danger: #B91C1C;    /* error, rechazar */

  /* ---------- Mascotas (avatares por inicial) ---------- */
  --pet-1-bg: #EEF4FF; --pet-1: #2563EB;
  --pet-2-bg: #F3EEFF; --pet-2: #7C3AED;
  --pet-3-bg: #EAF8EF; --pet-3: #16A34A;
  --pet-4-bg: #FFF1E7; --pet-4: #C2410C;

  /* ---------- WhatsApp, llamada, calendario (solo en mockups/iPhone) ---------- */
  --chat-bg: #EFE7DE;
  --bubble-in: #FFFFFF;
  --bubble-out: #DCF8C6;
  --wa-ui: #0A84FF;
  --call-bg: #16191D;
  --call-hangup: #EB4D3D;
  --cal-red: #FF3B30;
  --wa-meta: #8696A0;        /* hora de los mensajes, puntos de «escribiendo…» */
  --wa-meta-out: #6B8E5A;    /* hora dentro de la burbuja del usuario */
  --wa-tick: #34B7F1;        /* doble check de leído */
  --wa-text-2: #54656F;      /* texto secundario dentro del chat */
  --device-ink: #111111;     /* barra de estado y barra de inicio del iPhone */
  --wave-clinic: #86EFAC;    /* onda de voz cuando habla la clínica (Chief: --blue-on-dark) */

  /* ---------- Tipografía ---------- */
  --font: var(--font-jakarta, "Plus Jakarta Sans"), system-ui, -apple-system, sans-serif;
  --font-device: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --tracking-display: -0.04em;
  --tracking-title: -0.02em;

  --fs-hero: clamp(2.875rem, 5.8vw, 5.25rem);      /* 46 → 84px */
  --fs-section: clamp(2.25rem, 3.8vw, 3.375rem);   /* 36 → 54px */
  --fs-page-title: 2rem;      /* títulos de pantalla en app/admin (30–34px) */
  --fs-card-title: 1.1875rem; /* 19px */
  --fs-lead: 1.25rem;         /* 20px */
  --fs-body: 1rem;            /* 16px */
  --fs-ui: 0.9375rem;         /* 15px */
  --fs-small: 0.84375rem;     /* 13.5px */
  --fs-eyebrow: 0.8125rem;    /* 13px, mayúsculas, +0.1em */

  /* ---------- Radios ---------- */
  --radius-pill: 999px;
  --radius-sm: 12px;          /* ítems de navegación, iconos en cuadrado */
  --radius-md: 20px;          /* KPIs, tarjetas pequeñas */
  --radius-card: 24px;        /* tarjetas */
  --radius-xl: 36px;          /* paneles grandes, bloques oscuros */

  /* ---------- Sombras ---------- */
  --shadow-card: 0 0 0 1px var(--line), 0 24px 48px -36px rgba(16, 24, 40, 0.30);
  --shadow-float: 0 24px 48px -28px rgba(16, 24, 40, 0.35), 0 0 0 1px rgba(16, 24, 40, 0.04);
  --shadow-phone: inset 0 0 0 1.5px #6B6E75, inset 0 0 0 4px #2A2C30, 0 60px 100px -40px rgba(16, 24, 40, 0.45), 0 24px 44px -24px rgba(16, 24, 40, 0.3);
  --ring-focus: 0 0 0 4px var(--blue-soft);

  /* ---------- Layout ---------- */
  --container-web: 1200px;
  --container-app: 1240px;
  --sidebar-app: 248px;
  --sidebar-admin: 232px;
  --section-y: 112px;         /* 72px en móvil */
  --gutter: 40px;             /* 16px en móvil */
}

@media (max-width: 980px) {
  :root { --section-y: 72px; --gutter: 16px; }
}

/* ---------- Movimiento ---------- */
@keyframes cos-pop   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cos-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes cos-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes cos-talk  { 0% { transform: scaleY(.25); } 18% { transform: scaleY(.9); } 34% { transform: scaleY(.45); } 52% { transform: scaleY(1); } 70% { transform: scaleY(.35); } 86% { transform: scaleY(.75); } 100% { transform: scaleY(.25); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}