/* ============================================================================
   opodata-overrides.css — Adaptador de marca OpoData sobre base tweakeo
   Versión: 1.1.1 · 2026-07-17 · disenor
   Derivado de: dominios/micronixing/OpoData/marca/design-tokens.css v1.1
   ----------------------------------------------------------------------------
   Propósito: cargado DESPUÉS de tokens.css (tweakeo base), este archivo
   define la identidad visual de opodata.es. Usa namespace --opd-* para
   evitar colisiones con WordPress core, Elementor y plugins.

   Uso (cualquier superficie):
     <link rel="stylesheet" href="/assets/tokens.css">           ← tweakeo base
     <link rel="stylesheet" href="/assets/opodata-overrides.css"> ← este archivo

   Uso en WordPress (wp_enqueue_scripts):
     wp_enqueue_style('tweakeo-base', 'URL/tokens.css');
     wp_enqueue_style('opodata-brand', 'URL/opodata-overrides.css', ['tweakeo-base']);

   Modo standalone (WP sin tweakeo base cargado):
     Los var() con fallback aseguran que el archivo funcione solo.
     Cargarlo directamente en snippet #92 o Additional CSS.

   Identidad: navy oscuro + amber dorado + Space Grotesk. Información densa,
   accessible, institucional. Máxima legibilidad para usuarios de oposición.

   Accesibilidad: WCAG AA verificado. Contraste texto/fondo ≥4.5:1 siempre.
   Cifras de datos: IBM Plex Mono obligatorio (distinción 0/O, 1/l).

   CHANGELOG:

     v1.1.1 (2026-07-17) — Tipografía corregida a escala aprobada (hero 36px, h1 30px, h2 24px).
                         Revierte el bump no autorizado de v1.1.0 (40/32/25 sin aprobación).
     v1.1.0 (2026-07-17) — Fix contraste AA: texto sobre navy usa --opd-cloud (#CFE0E3, 9:1)
                         en lugar de --opd-sky (#9DB4BB, 1.73:1 en prod). NOTA: los tamaños
                         tipográficos de esta versión (40/32/25) NO estaban aprobados.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* =========================================================================
     CAPA 1 · PRIMITIVOS DE MARCA OpoData
     ========================================================================= */

  /* Navy (primario) */
  --opd-c-navy-900: #0A2C36;
  --opd-c-navy-800: #0E3A46;  /* COLOR PRIMARIO */
  --opd-c-navy-700: #14505E;
  --opd-c-navy-600: #1D6878;
  --opd-c-navy-200: #CFE0E3;
  --opd-c-navy-100: #9DB4BB;

  /* Amber (acento) */
  --opd-c-amber-500: #FFC534;  /* ACENTO — CTAs, oportunidades */
  --opd-c-amber-bg:  #FFF3D6;
  --opd-c-amber-ink: #7A5B0A;  /* texto sobre amber-bg: 7.1:1 AA */

  /* Neutros */
  --opd-c-neutral-50:  #F2F5F4;
  --opd-c-neutral-100: #E4EAE9;
  --opd-c-neutral-150: #DDE5E4;
  --opd-c-neutral-200: #E7EDEC;
  --opd-c-neutral-400: #8A9A9E;
  --opd-c-neutral-600: #4A5B60;  /* muted: 5.2:1 AA */
  --opd-c-neutral-900: #0A1F26;  /* ink: 17.5:1 AAA */

  /* Estados semánticos */
  --opd-c-ok:       #0F6E56;   /* 5.8:1 AA */
  --opd-c-ok-bg:    #E1F0E9;
  --opd-c-warn-ink: #7A5B0A;   /* 7.1:1 AA */
  --opd-c-warn-bg:  #FFF3D6;
  --opd-c-danger:   #A3352D;   /* 5.5:1 AA */

  /* =========================================================================
     CAPA 2 · TIPOGRAFÍA
     ========================================================================= */

  --opd-font-title: "Space Grotesk", system-ui, sans-serif;
  --opd-font-body:  "Inter", system-ui, sans-serif;
  --opd-font-mono:  "IBM Plex Mono", ui-monospace, monospace;

  --opd-weight-reg:      400;
  --opd-weight-med:      500;
  --opd-weight-semibold: 600;
  --opd-weight-bold:     700;

  /* Escala aprobada (propuesta original, pendiente revisión Paco para bump a 40/32/25) */
  --opd-fs-hero: 2.25rem;     /* 36px — home hero h1 */
  --opd-fs-h1:   1.875rem;    /* 30px — títulos de ficha */
  --opd-fs-h2:   1.5rem;      /* 24px — secciones */
  --opd-fs-h3:   1.25rem;     /* 20px — sin cambio */
  --opd-fs-body: 1rem;        /* 16px — sin cambio */
  --opd-fs-sm:   0.875rem;    /* 14px — sin cambio */
  --opd-fs-xs:   0.75rem;     /* 12px — sin cambio */
  --opd-fs-xxs:  0.6875rem;   /* 11px — sin cambio */

  --opd-lh-tight:  var(--leading-tight, 1.15);
  --opd-lh-body:   var(--leading-relaxed, 1.65);
  --opd-lh-normal: var(--leading-normal, 1.5);

  /* =========================================================================
     CAPA 2 · ESPACIADO (consume tweakeo --space-* con fallback)
     ========================================================================= */

  --opd-space-xs: var(--space-1, 0.25rem);
  --opd-space-sm: var(--space-2, 0.5rem);
  --opd-space-md: var(--space-4, 1rem);
  --opd-space-lg: var(--space-5, 1.5rem);
  --opd-space-xl: var(--space-7, 3rem);

  --opd-maxw:      72rem;   /* 1152px */
  --opd-maxw-read: 42rem;   /* ~672px */

  /* =========================================================================
     CAPA 2 · RADIOS (consume tweakeo con fallback)
     ========================================================================= */

  --opd-radius-sm:   var(--radius-md, 0.5rem);
  --opd-radius:      var(--radius-lg, 0.75rem);
  --opd-radius-lg:   var(--radius-xl, 1rem);
  --opd-radius-pill: var(--radius-pill, 999px);

  /* =========================================================================
     CAPA 2 · MOVIMIENTO (consume tweakeo con fallback)
     ========================================================================= */

  --opd-dur-fast:   var(--dur-fast, 150ms);
  --opd-dur-base:   var(--dur, 250ms);
  --opd-dur-slow:   var(--dur-slow, 400ms);
  --opd-ease:       var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  --opd-ease-inout: var(--ease-in-out, cubic-bezier(0.65, 0, 0.35, 1));

  /* =========================================================================
     CAPA 2 · Z-INDEX (consume tweakeo con fallback)
     ========================================================================= */

  --opd-z-base:    var(--z-base, 0);
  --opd-z-sticky:  var(--z-sticky, 1100);
  --opd-z-overlay: var(--z-overlay, 1300);
  --opd-z-modal:   var(--z-modal, 1400);
  --opd-z-toast:   var(--z-toast, 1600);

  /* =========================================================================
     CAPA 3 · SEMÁNTICOS OpoData
     Solo estos tokens en los componentes. Nunca --opd-c-* directamente.
     ========================================================================= */

  /* Superficies */
  --opd-bg:           #FFFFFF;
  --opd-paper:        var(--opd-c-neutral-50);
  --opd-surface-dark: var(--opd-c-navy-800);

  /* Texto */
  --opd-ink:   var(--opd-c-neutral-900);  /* 17.5:1 AAA */
  --opd-muted: var(--opd-c-neutral-600);  /* 5.2:1 AA */
  --opd-faint: var(--opd-c-neutral-600);  /* v1.2.0: era neutral-400 (#8A9A9E, 3.7:1),
                                              ahora neutral-600 (#4A5B60, 5.2:1 AA) —
                                              fix footer en todas las superficies */
  --opd-sky:   var(--opd-c-navy-200);     /* sobre navy — CORREGIDO: era navy-100 (#9DB4BB) pero
                                              producía #4a5b60 en prod (1.73:1); navy-200 = #CFE0E3 9:1 ✓ */
  --opd-cloud: var(--opd-c-navy-200);     /* sobre navy (cuerpo): #CFE0E3 9:1 */

  /* Marca */
  --opd-navy:       var(--opd-c-navy-800);
  --opd-navy-soft:  var(--opd-c-navy-700);
  --opd-navy-deep:  var(--opd-c-navy-900);
  --opd-amber:      var(--opd-c-amber-500);
  --opd-amber-bg:   var(--opd-c-amber-bg);
  --opd-amber-ink:  var(--opd-c-amber-ink);

  /* Bordes */
  --opd-line:  var(--opd-c-neutral-100);
  --opd-track: var(--opd-c-neutral-150);
  --opd-chip:  var(--opd-c-neutral-200);

  /* Estados */
  --opd-ok:      var(--opd-c-ok);
  --opd-ok-bg:   var(--opd-c-ok-bg);
  --opd-warn:    var(--opd-c-warn-ink);
  --opd-warn-bg: var(--opd-c-warn-bg);
  --opd-danger:  var(--opd-c-danger);

  /* Estética */
  --opd-border:     0.5px solid var(--opd-line);
  --opd-shadow:     none;
  --opd-focus-ring: 0 0 0 3px rgba(255, 197, 52, 0.40);
}

/* =========================================================================
   CAPA 4 · COMPONENTES — utilidades y overrides de layout
   ========================================================================= */

.opd-mono  { font-family: var(--opd-font-mono); }
.opd-title { font-family: var(--opd-font-title); font-weight: var(--opd-weight-med); }
.opd-body  { font-family: var(--opd-font-body); }

/* ── Badges ──────────────────────────────────────────────────────────── */
.opd-badge-ok {
  background: var(--opd-ok-bg);
  color: var(--opd-ok);
  font-family: var(--opd-font-mono);
  font-size: var(--opd-fs-xxs);
  font-weight: var(--opd-weight-med);
  padding: 1px 7px;
  border-radius: var(--opd-radius-pill);
  white-space: nowrap;
}

.opd-badge-warn {
  background: var(--opd-warn-bg);
  color: var(--opd-warn);
  font-family: var(--opd-font-mono);
  font-size: var(--opd-fs-xxs);
  font-weight: var(--opd-weight-med);
  padding: 1px 7px;
  border-radius: var(--opd-radius-pill);
  white-space: nowrap;
}

/* ── Fix WCAG AA: texto sobre navy ───────────────────────────────────── */
/* v1.2.0: .opd-hero-cta-note usa --opd-muted en el tema WP (no --opd-sky).
   --opd-muted = #4A5B60 sobre navy #0E3A46 = 1.72:1 (FALLA AA).
   El adapter no puede cambiar --opd-muted globalmente (rompería texto muted
   sobre fondo blanco). Solución: regla de componente explícita. */
.opd-hero-cta-note {
  color: var(--opd-cloud); /* #CFE0E3, 9:1 AA */
}

/* ── Fix footer: --opd-faint ─────────────────────────────────────────── */
/* v1.2.0: --opd-faint se movió de neutral-400 (#8A9A9E, 3.7:1) a
   neutral-600 (#4A5B60, 5.2:1 AA). Esto corrige el texto del footer
   sin afectar a otros usos legítimos de texto tenue. */
.opd-footer,
footer .opd-muted,
footer [class*="footer"] {
  color: var(--opd-ink);
}

/* ── Focus visible ───────────────────────────────────────────────────── */
:focus-visible {
  outline: none;
  box-shadow: var(--opd-focus-ring);
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ⚡ /* ⚡ red-dev 2026-07-24: UX mobile quick wins v3 — buscador, top3, CTA, cookie bar, gaps */
@media (max-width: 768px) {
  /* CTA compacto */
  .opd-hero-cta { margin: 0; }
  .opd-hero-cta .opd-cta { padding: 8px 16px; font-size: 13px; }
  .opd-hero-cta-note { font-size: 11px; margin-top: 2px; }
  
  /* Buscador prominente */
  .opd-search--hero { margin-bottom: 8px; }
  .opd-search--hero input[type="search"] { font-size: 14px; padding: 10px 12px; }
  
  /* Top 3 compacto above-the-fold */
  .opd-top3-atf h2 { font-size: 15px; margin-bottom: 6px; }
  .opd-top3-atf { padding: 12px 16px; margin-top: 4px !important; }
  .opd-rank--compact { gap: 4px; }
  .opd-rank-row--compact { padding: 8px 12px; }

  /* CookieAdmin: bottom box → bottom bar */
  .cookieadmin_law_container { max-height: 80px !important; overflow: hidden !important; padding: 8px 12px !important; }
  .cookieadmin_consent_inside { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; }
  .cookieadmin_notice_con { display: none !important; }
  #cookieadmin_notice_title { font-size: 12px !important; margin: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 160px !important; }
  #cookieadmin_notice { font-size: 11px !important; display: none !important; }
  .cookieadmin_consent_btns { display: flex !important; flex-direction: row !important; gap: 4px !important; margin-left: auto !important; }
  .cookieadmin_btn { padding: 4px 10px !important; font-size: 11px !important; min-height: 32px !important; }
  .cookieadmin_customize_btn { display: none !important; }

  /* Header compacto */
  .opd-header { padding: 8px 16px !important; min-height: 60px !important; }
  .opd-logo { gap: 6px; }
  .opd-logo span.opd-wordmark { font-size: 18px !important; }
  .opd-header .opd-wrap { height: auto !important; }

  /* Hero: matar gaps (L58-68 en style.css) */
  .opd-hero-home { padding: 20px 16px !important; margin: 12px 0 !important; }
  .opd-hero-home .sub { margin: 0 0 6px !important; font-size: 13px !important; }
  .opd-hero-home h1 { font-size: 20px !important; line-height: 1.2 !important; margin: 6px 0 !important; }
  .opd-hero-chips { margin-top: 6px !important; gap: 4px !important; }
  .opd-hero-chips a { padding: 4px 8px !important; font-size: 11px !important; }
  
  /* Secciones: matar margin-bottom (L68: 36px 0) */
  .opd-section { margin: 16px 0 !important; }
  .opd-section h2 { font-size: 16px !important; }
  .opd-section .lead { font-size: 12px !important; margin: 0 0 8px !important; }
}