/*!
 * Kit de diseño del Ecosistema Digital CMP — VARIABLES (tokens)
 * Cámara Marítima de Panamá · versión 1.1.0
 *
 * Única fuente de verdad visual: colores, tipografía, espaciado, bordes, sombras y movimiento.
 * Todo vive dentro de la clase raíz .ecmp: no altera el tema de WordPress ni otros plugins.
 *
 * MODO CLARO / OSCURO (ver ESTANDARES.md, «Kit de diseño»):
 *   <div class="ecmp" data-ecmp-theme="light">   modo por defecto del producto: light | dark | auto
 *   html[data-ecmp-pref="dark"]                  elección del visitante (la pone ecmp.js); manda sobre el defecto
 *   <section data-ecmp-theme="dark"> (anidado)    bloque fijo en otro modo (p. ej. una franja oscura en página clara)
 *
 * Reglas de color (verificadas): textos ≥ 4.5:1 sobre fondo y tarjeta; elementos de interfaz ≥ 3:1.
 * El rojo decorativo (--ecmp-red-deco) NO se usa para texto.
 */

/* ───────────────────────── Tipografía incluida (sin Google Fonts) ───────────────────────── */

@font-face {
  font-family: 'ECMP Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fuentes/ecmp-plex-sans-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'ECMP Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fuentes/ecmp-plex-sans-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'ECMP Plex Sans';
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url('fuentes/ecmp-plex-sans-latin-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'ECMP Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fuentes/ecmp-plex-mono-latin-400.woff2') format('woff2');
}

@font-face {
  font-family: 'ECMP Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fuentes/ecmp-plex-mono-latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'ECMP Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fuentes/ecmp-plex-mono-latin-600.woff2') format('woff2');
}

/* ───────────────────────── Valores comunes a ambos modos ───────────────────────── */

.ecmp {
  /* Familias */
  --ecmp-font-sans: 'ECMP Plex Sans', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ecmp-font-mono: 'ECMP Plex Mono', 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Escala tipográfica fluida: crece con la pantalla, de celular a pantallas grandes */
  --ecmp-text-2xs: 0.6875rem; /* 11px — rótulos técnicos en mayúsculas */
  --ecmp-text-xs: 0.75rem; /* 12px — metadatos, fechas */
  --ecmp-text-sm: 0.875rem; /* 14px — texto secundario */
  --ecmp-text-md: 1rem; /* 16px — texto principal */
  --ecmp-text-lg: 1.125rem; /* 18px — entradilla */
  --ecmp-text-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); /* títulos de tarjeta */
  --ecmp-text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem); /* títulos de sección */
  --ecmp-text-3xl: clamp(2rem, 1.5rem + 2vw, 3rem); /* títulos de página */
  --ecmp-text-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); /* portadas y cifras héroe */

  --ecmp-weight-regular: 400;
  --ecmp-weight-medium: 500;
  --ecmp-weight-semibold: 600;
  --ecmp-weight-bold: 700;

  --ecmp-leading-tight: 1.15;
  --ecmp-leading-snug: 1.3;
  --ecmp-leading-normal: 1.6;

  --ecmp-tracking-tight: -0.015em;
  --ecmp-tracking-label: 0.12em;

  /* Espaciado: múltiplos de 4 px */
  --ecmp-space-1: 0.25rem;
  --ecmp-space-2: 0.5rem;
  --ecmp-space-3: 0.75rem;
  --ecmp-space-4: 1rem;
  --ecmp-space-5: 1.25rem;
  --ecmp-space-6: 1.5rem;
  --ecmp-space-8: 2rem;
  --ecmp-space-10: 2.5rem;
  --ecmp-space-12: 3rem;
  --ecmp-space-16: 4rem;
  --ecmp-space-20: 5rem;

  /* Bordes */
  --ecmp-radius-xs: 4px;
  --ecmp-radius-sm: 8px;
  --ecmp-radius-md: 12px;
  --ecmp-radius-lg: 20px;
  --ecmp-radius-xl: 28px; /* tarjetas de noticia, como CMP Noticias */
  --ecmp-radius-pill: 999px;
  --ecmp-border-width: 1px;

  /* Movimiento */
  --ecmp-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ecmp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ecmp-duration-fast: 140ms;
  --ecmp-duration-base: 240ms;
  --ecmp-duration-slow: 480ms;

  /* Estructura */
  --ecmp-container: 1280px;
  --ecmp-container-wide: 1600px;
  --ecmp-gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  --ecmp-header-height: 4.25rem;
  --ecmp-z-header: 50;
  --ecmp-z-overlay: 60;

  /* Colores de marca fijos (iguales en ambos modos, para logos y usos institucionales) */
  --ecmp-brand-navy: #1e1460; /* marino del logo oficial */
  --ecmp-brand-cyan: #00a0df; /* celeste del logo oficial */
  --ecmp-brand-red: #f5313f; /* rojo del logo oficial */
}

/* ───────────────────────── Modo claro (base CMP Noticias) ───────────────────────── */

.ecmp,
.ecmp [data-ecmp-theme='light'],
html[data-ecmp-pref='light'] .ecmp {
  --ecmp-scheme: light;
  color-scheme: light;

  /* Superficies */
  --ecmp-bg: #f6f6fc;
  --ecmp-bg-subtle: #ecebf6;
  --ecmp-surface: #ffffff;
  --ecmp-surface-raised: #ffffff;
  --ecmp-surface-sunken: #ecebf6;
  --ecmp-surface-inverse: #0d0b2e;
  --ecmp-glass: rgb(255 255 255 / 0.8);
  --ecmp-scrim: rgb(22 18 61 / 0.55);

  /* Líneas */
  --ecmp-line: rgb(30 20 96 / 0.1);
  --ecmp-line-strong: rgb(30 20 96 / 0.2);

  /* Texto */
  --ecmp-text: #16123d;
  --ecmp-text-muted: #4a4775;
  --ecmp-text-faint: #5f5c88;
  --ecmp-text-inverse: #f3f2fc;
  --ecmp-title: #1e1460; /* títulos enlazados: marino del logo en claro */

  /* Marca (marino del logo): títulos, enlaces, botón principal */
  --ecmp-brand: #1e1460;
  --ecmp-brand-hover: #2f2494;
  --ecmp-brand-soft: #e9e8f4;
  --ecmp-on-brand: #ffffff;

  /* Rojo del logo: destacados y estado activo (versión legible para texto) */
  --ecmp-accent: #cc1f36;
  --ecmp-accent-hover: #ad172c;
  --ecmp-accent-soft: #fde8eb;
  --ecmp-on-accent: #ffffff;
  --ecmp-red-deco: #f5313f; /* solo decoración: barras, subrayados, puntos */

  /* Señal (celeste del logo): datos, foco, «en vivo» */
  --ecmp-signal: #0072a3;
  --ecmp-signal-soft: #e0f2fa;

  /* Botón principal */
  --ecmp-primary: var(--ecmp-brand);
  --ecmp-primary-hover: var(--ecmp-brand-hover);
  --ecmp-on-primary: var(--ecmp-on-brand);

  /* Estados (siempre con ícono y texto, nunca solo color) */
  --ecmp-positive: #1d7a45;
  --ecmp-positive-soft: #e3f1e8;
  --ecmp-warning: #8a5a00;
  --ecmp-warning-soft: #fbf0d9;
  --ecmp-critical: #b42318;
  --ecmp-critical-soft: #fdeceb;
  --ecmp-info: #0072a3;
  --ecmp-info-soft: #e0f2fa;

  /* Foco del teclado */
  --ecmp-focus: 0 0 0 2px var(--ecmp-surface), 0 0 0 4px var(--ecmp-signal);

  /* Sombras: suaves y teñidas del marino del logo */
  --ecmp-shadow-xs: 0 1px 2px rgb(22 18 61 / 0.06);
  --ecmp-shadow-sm: 0 1px 2px rgb(22 18 61 / 0.05), 0 4px 12px rgb(22 18 61 / 0.06);
  --ecmp-shadow-md: 0 2px 4px rgb(22 18 61 / 0.04), 0 12px 30px rgb(30 20 96 / 0.08);
  --ecmp-shadow-lg: 0 4px 8px rgb(22 18 61 / 0.04), 0 22px 48px rgb(30 20 96 / 0.14);
  --ecmp-glow: 0 0 0 1px rgb(0 114 163 / 0.25), 0 8px 24px rgb(0 114 163 / 0.12);

  /* Marco elegante para fotos pendientes */
  --ecmp-photo-placeholder: linear-gradient(135deg, #e9e8f4 0%, #f6f6fc 55%, #e0f2fa 100%);
}

/* ───────────────────────── Modo oscuro (base Atlas: sala de control) ───────────────────────── */

.ecmp[data-ecmp-theme='dark'],
.ecmp [data-ecmp-theme='dark'],
html[data-ecmp-pref='dark'] .ecmp {
  --ecmp-scheme: dark;
  color-scheme: dark;

  --ecmp-bg: #06071a;
  --ecmp-bg-subtle: #0a0b22;
  --ecmp-surface: #0d0f27;
  --ecmp-surface-raised: #131535;
  --ecmp-surface-sunken: #080920;
  --ecmp-surface-inverse: #f3f2fc;
  --ecmp-glass: rgb(10 11 34 / 0.74);
  --ecmp-scrim: rgb(3 3 14 / 0.7);

  --ecmp-line: rgb(160 158 220 / 0.13);
  --ecmp-line-strong: rgb(160 158 220 / 0.26);

  --ecmp-text: #ebeaf7;
  --ecmp-text-muted: #acaacb;
  --ecmp-text-faint: #8d8bb1;
  --ecmp-text-inverse: #16123d;
  --ecmp-title: #ebeaf7; /* títulos enlazados: blanco en la sala de control */

  --ecmp-brand: #b1a9f5;
  --ecmp-brand-hover: #cbc5fa;
  --ecmp-brand-soft: #1b1a40;
  --ecmp-on-brand: #06071a;

  --ecmp-accent: #ff7d88;
  --ecmp-accent-hover: #ff9aa3;
  --ecmp-accent-soft: #321320;
  --ecmp-on-accent: #06071a;
  --ecmp-red-deco: #f5313f;

  --ecmp-signal: #4ccbf2;
  --ecmp-signal-soft: #0b2a3a;

  /* En la sala de control, el botón principal es el celeste del logo (como en el Atlas) */
  --ecmp-primary: var(--ecmp-signal);
  --ecmp-primary-hover: #86dcf6;
  --ecmp-on-primary: #06071a;

  --ecmp-positive: #6ee7a0;
  --ecmp-positive-soft: #12301f;
  --ecmp-warning: #f6c453;
  --ecmp-warning-soft: #33260a;
  --ecmp-critical: #ff8a80;
  --ecmp-critical-soft: #3a1414;
  --ecmp-info: #4ccbf2;
  --ecmp-info-soft: #0b2a3a;

  --ecmp-focus: 0 0 0 2px var(--ecmp-bg), 0 0 0 4px var(--ecmp-signal);

  --ecmp-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --ecmp-shadow-sm: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 4px 14px rgb(0 0 0 / 0.35);
  --ecmp-shadow-md: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 14px 34px rgb(0 0 0 / 0.45);
  --ecmp-shadow-lg: 0 1px 0 rgb(255 255 255 / 0.05) inset, 0 24px 60px rgb(0 0 0 / 0.55);
  --ecmp-glow: 0 0 0 1px rgb(76 203 242 / 0.35), 0 0 22px rgb(76 203 242 / 0.22);

  --ecmp-photo-placeholder: linear-gradient(135deg, #15163a 0%, #0d0f27 55%, #0b2a3a 100%);
}

/* «auto»: sigue la preferencia del sistema, salvo que el visitante haya elegido */
@media (prefers-color-scheme: dark) {
  html:not([data-ecmp-pref]) .ecmp[data-ecmp-theme='auto'] {
    --ecmp-scheme: dark;
    color-scheme: dark;

    --ecmp-bg: #06071a;
    --ecmp-bg-subtle: #0a0b22;
    --ecmp-surface: #0d0f27;
    --ecmp-surface-raised: #131535;
    --ecmp-surface-sunken: #080920;
    --ecmp-surface-inverse: #f3f2fc;
    --ecmp-glass: rgb(10 11 34 / 0.74);
    --ecmp-scrim: rgb(3 3 14 / 0.7);
    --ecmp-line: rgb(160 158 220 / 0.13);
    --ecmp-line-strong: rgb(160 158 220 / 0.26);
    --ecmp-text: #ebeaf7;
    --ecmp-text-muted: #acaacb;
    --ecmp-text-faint: #8d8bb1;
    --ecmp-text-inverse: #16123d;
    --ecmp-title: #ebeaf7;
    --ecmp-brand: #b1a9f5;
    --ecmp-brand-hover: #cbc5fa;
    --ecmp-brand-soft: #1b1a40;
    --ecmp-on-brand: #06071a;
    --ecmp-accent: #ff7d88;
    --ecmp-accent-hover: #ff9aa3;
    --ecmp-accent-soft: #321320;
    --ecmp-on-accent: #06071a;
    --ecmp-red-deco: #f5313f;
    --ecmp-signal: #4ccbf2;
    --ecmp-signal-soft: #0b2a3a;
    --ecmp-primary: var(--ecmp-signal);
    --ecmp-primary-hover: #86dcf6;
    --ecmp-on-primary: #06071a;
    --ecmp-positive: #6ee7a0;
    --ecmp-positive-soft: #12301f;
    --ecmp-warning: #f6c453;
    --ecmp-warning-soft: #33260a;
    --ecmp-critical: #ff8a80;
    --ecmp-critical-soft: #3a1414;
    --ecmp-info: #4ccbf2;
    --ecmp-info-soft: #0b2a3a;
    --ecmp-focus: 0 0 0 2px var(--ecmp-bg), 0 0 0 4px var(--ecmp-signal);
    --ecmp-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
    --ecmp-shadow-sm: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 4px 14px rgb(0 0 0 / 0.35);
    --ecmp-shadow-md: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 14px 34px rgb(0 0 0 / 0.45);
    --ecmp-shadow-lg: 0 1px 0 rgb(255 255 255 / 0.05) inset, 0 24px 60px rgb(0 0 0 / 0.55);
    --ecmp-glow: 0 0 0 1px rgb(76 203 242 / 0.35), 0 0 22px rgb(76 203 242 / 0.22);
    --ecmp-photo-placeholder: linear-gradient(135deg, #15163a 0%, #0d0f27 55%, #0b2a3a 100%);
  }
}