/* ==========================================================================
   DESIGN TOKENS — Sala de prensa virtual SaaS
   Fuente de verdad para valores exactos (color, tipografía, espaciado).
   Companion del PDF "guia_estilo_visual.pdf" — el PDF explica el porqué,
   este archivo da los valores literales para implementar sin ambigüedad.
   ========================================================================== */

:root {
  /* ---- Paleta base (fija, no configurable) ---- */
  --ink-900: #191B20;         /* Texto principal, iconos activos */
  --ink-700: #3D4148;         /* Texto secundario, labels */
  --ink-400: #8B8F96;         /* Texto terciario, placeholders, bordes fuertes */
  --paper-100: #F4F3F0;       /* Fondo principal de la app */
  --paper-000: #FBFAF8;       /* Fondo de tarjetas y paneles */
  --line-200: #E1DFDA;        /* Bordes, separadores, líneas de tabla */

  /* ---- Acento único de sistema ---- */
  --blue-signal: #2E4C8C;         /* Focus, enlaces, acciones primarias */
  --blue-signal-soft: #E8ECF6;    /* Fondo de estado activo/seleccionado */

  /* ---- Estados semánticos (fijos, nunca usar para color de cliente) ---- */
  --state-success: #3A6B4C;
  --state-success-soft: #E7EFE9;
  --state-warning: #9C6B2E;
  --state-warning-soft: #F5EDE1;
  --state-error: #A13E38;
  --state-error-soft: #F5E6E4;

  /* ---- Tipografía: familias ---- */
  --font-display: 'Fraunces', Georgia, serif;               /* Solo 28px+, pesos 400/600 */
  --font-ui: 'Instrument Sans', -apple-system, sans-serif;  /* Interfaz, pesos 400/500/600 */
  --font-mono: 'IBM Plex Mono', 'SF Mono', monospace;       /* Metadatos, fechas, estados */

  /* ---- Tipografía: escala (base 16px, ratio ~1.25) ---- */
  --text-xs: 12px;    /* Caption / metadatos (font-mono) */
  --text-sm: 14px;    /* Cuerpo secundario, labels */
  --text-base: 16px;  /* Cuerpo base */
  --text-lg: 20px;    /* Subtítulo de sección */
  --text-xl: 25px;    /* Título de tarjeta/módulo */
  --text-2xl: 31px;   /* Título de página (font-display) */
  --text-3xl: 39px;   /* Display / portada pública (font-display) */

  /* ---- Pesos ---- */
  --weight-regular: 400;
  --weight-medium: 500;   /* Solo Instrument Sans */
  --weight-semibold: 600; /* Fraunces e Instrument Sans */

  /* ---- Espaciado (escala de 4px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---- Radios ---- */
  --radius-sm: 4px;   /* Inputs, badges */
  --radius-md: 8px;   /* Tarjetas */
  --radius-lg: 16px;  /* Tarjetas grandes, contenedores de tabla */
  --radius-pill: 999px; /* Botones y badges en píldora */

  /* ---- Sombra (única, sutil, "papel apilado") ---- */
  --shadow-card: 0 1px 2px rgba(25, 27, 32, 0.06), 0 4px 12px rgba(25, 27, 32, 0.04);

  /* ---- Layout: anchos de las 3 columnas (escritorio ≥1280px) ---- */
  --layout-nav: 248px;
  --layout-sidebar-left: 260px;
  --layout-sidebar-right: 300px;
  --layout-topbar: 72px;
  --layout-header-1: 64px;   /* Cabecera módulos principales */
  --layout-header-2: 48px;   /* Cabecera submódulos contextuales */
}

/* ==========================================================================
   BREAKPOINTS
   CSS no permite variables dentro de @media — usar estos valores literales
   directamente en las media queries (o como constantes JS/SCSS si se prefiere
   un preprocesador con soporte de variables en breakpoints).
   ========================================================================== */
/*
  ≥1280px        Escritorio grande — 3 columnas completas
  1024–1279px    Laptop pequeño    — lateral derecho colapsa a icono flotante
  768–1023px     Tablet            — lateral izquierdo colapsa a drawer
  480–767px      Móvil grande      — cabecera 1 compacta con menú hamburguesa
  <480px         Móvil pequeño     — una sola columna, laterales a pantalla completa
*/
@custom-media --bp-desktop (min-width: 1280px);
@custom-media --bp-laptop (min-width: 1024px);
@custom-media --bp-tablet (min-width: 768px);
@custom-media --bp-mobile-l (min-width: 480px);

/* ==========================================================================
   RUEDA DE 24 TONOS — color configurable por cliente
   Uso: la agencia asigna uno de estos 24 valores a --client-accent al cargar
   el contexto de un cliente. Nunca exponer un selector de color libre.
   ========================================================================== */
:root {
  --client-01: #7A4B3A;  --client-02: #6B7A3A;  --client-03: #3A6B5E;  --client-04: #3A5A6B;
  --client-05: #4A3A6B;  --client-06: #6B3A5C;  --client-07: #8C5A2E;  --client-08: #5C6B3A;
  --client-09: #2E6B60;  --client-10: #2E5C6B;  --client-11: #5C2E6B;  --client-12: #6B2E4A;
  --client-13: #9C7A3A;  --client-14: #7A8C3A;  --client-15: #3A8C6B;  --client-16: #3A6B8C;
  --client-17: #6B3A8C;  --client-18: #8C3A5C;  --client-19: #B08C4A;  --client-20: #8C9C4A;
  --client-21: #4A9C7A;  --client-22: #4A7A9C;  --client-23: #7A4A9C;  --client-24: #9C4A6B;
}

/* Aplicación por contexto de cliente (inyectar --client-accent dinámicamente) */
.client-context {
  --client-accent: var(--client-01); /* valor por defecto, sobrescribir por JS al cargar el cliente */
  --client-accent-soft: color-mix(in srgb, var(--client-accent) 12%, var(--paper-000));
}

/* ==========================================================================
   ICONOGRAFÍA
   Librería: lucide-react · npm install lucide-react
   Trazo: 1.5–2px · sin relleno · color por defecto ink-700 · blue-signal solo activo
   ========================================================================== */
/*
  Notas de prensa (módulo)        → Newspaper
  Publicar / enviar nota          → Send
  Marcar como publicado           → CheckCheck
  Embargo / programación          → CalendarClock
  Archivo de fotografías          → Images
  Envío a base de datos externa   → RadioTower
*/