/* Leadeo · tokens del panel de clientes
 *
 * VALORES REALES extraídos del CSS de este repo el 24-ago-2026 (prompt 01-extraer-marca).
 * Cada token cambiado lleva el archivo y la línea de donde sale.
 *
 * ⚠️ DOS DISCREPANCIAS GRANDES CON EL MOCKUP, sin resolver, decisión del dueño:
 *   1. LA MARCA ES AZUL, NO VERDE. El acento real es #0369A1 (web/index.html:2 y
 *      web/portal.html:17). Todo el mockup está construido en verde #0E6B45 / #3EDB92.
 *      Aquí se han puesto los AZULES REALES. Si se quiere el verde del mockup, es un
 *      cambio de marca, no un ajuste de tokens.
 *   2. LAS FUENTES SON OTRAS. Reales: Source Serif 4 + Inter (portal.html:10).
 *      El mockup asume Newsreader + Manrope. La buena noticia: la de titulares SÍ es
 *      una serif, así que la jerarquía del diseño se sostiene tal cual.
 *      ⚠️ El CLAUDE.md del handoff dice "nunca uses Inter". Inter ES la fuente real de
 *      leadeo.es. Esa regla contradice la marca: hay que decidir cuál manda.
 *
 * Importa este archivo ANTES de cualquier otro CSS.
 */

:root {
  /* ---- Tipografía [VERIFICAR contra leadeo.es] ---- */
  --lea-font-display: "Source Serif 4", Georgia, serif;   /* portal.html:10, index.html:27 */
  --lea-font-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;  /* index.html:8 */

  --lea-display-xl: 52px;   /* titular editorial */
  --lea-display-l: 44px;    /* saludo */
  --lea-display-m: 30px;    /* titular del hero oscuro */
  --lea-display-s: 24px;    /* títulos de acordeón */
  --lea-figure-xl: 56px;   /* sin equivalente en la web */    /* cifra grande */
  --lea-figure-l: 46px;
  --lea-figure-m: 38px;
  --lea-figure-s: 34px;
  --lea-title: 19px;        /* título de tarjeta */
  --lea-body: 14.5px;
  --lea-body-s: 13.5px;
  --lea-meta: 12.5px;
  --lea-eyebrow: 11.5px;

  --lea-track-display: -0.02em;
  --lea-track-eyebrow: 0.12em;
  --lea-lh-display: 1.12;
  --lea-lh-body: 1.65;

  /* ---- Color: marca [VERIFICAR contra leadeo.es] ---- */
  /* EL ACENTO DE LEADEO ES AZUL. Decision del dueño el 24-ago-2026: manda la marca
   * real, no la paleta verde del mockup. Los nombres --lea-accent* son los BUENOS y son
   * los que hay que escribir en codigo nuevo; los --lea-green* se quedan como alias
   * porque los prompts y el prototipo del handoff los usan, pero una variable que se
   * llama "green" y vale azul acaba pintando algo verde por error. */
  --lea-accent: #0369A1;         /* index.html:2 (--azul), portal.html:17 (--accent) */
  --lea-accent-bright: #38BDF8;  /* index.html:2 (--cielo), solo sobre oscuro */
  --lea-accent-tint: #EEF1F6;    /* index.html:5 (--borde) / portal.html:19 (--paper) */
  --lea-ok: #0a7d43;             /* portal.html:20 (--ok) · verde SOLO de confirmacion */

  /* alias de compatibilidad con el handoff. NO usar en codigo nuevo. */
  --lea-green: var(--lea-accent);
  --lea-green-bright: var(--lea-accent-bright);
  --lea-green-tint: var(--lea-accent-tint);
  --lea-dark: #0A1A2B;           /* index.html:3 (--profundo) */
  --lea-dark-hover: #0284C7;     /* portal.html:17 (--accent-hi), el hover REAL del botón */
  --lea-cta: var(--lea-accent);  /* EL CTA REAL ES AZUL #0369A1 · portal.html:72 (.btn) */

  /* Borde del boton secundario. El CLAUDE.md del handoff decia rgba(16,34,28,.12), que es
   * una tinta VERDOSA del mockup. Aqui va la tinta real de Leadeo (#0E1729) al 14%: sobre
   * papel se ve como borde de boton sin competir con el azul del primario. */
  --lea-btn-line: rgba(14, 23, 41, .14);
  --lea-btn-line-hover: var(--lea-accent);

  /* ---- Color: tinta y texto ---- */
  --lea-ink: #0E1729;            /* index.html:3 (--tinta), portal.html:17 (--ink) */
  --lea-ink-70: #5A6577;         /* index.html:6 (--suave) */
  /* LOS TRES NIVELES BAJOS, SUBIDOS PARA QUE SE LEAN (14-sep-2026).
     Estaban en .50 / .40 / .30 y medidos sobre las cuatro superficies de la casa
     (#FDFDFE, #F7F8FB, #EEF1F6, #FDF6EA) daban 3,32 / 2,50 / 1,93. El minimo AA para
     texto normal es 4,5 y para texto grande o un icono, 3,0: o sea que ink-40 e ink-30
     no pasaban NADA, ni siquiera de icono, y con ellos estaban escritos el sello de
     fecha, el "y N mas", el dia del feed y el destinatario de cada correo.
     Ahora, peor caso: 4,81 / 4,52 / 3,03. ink-30 pasa como icono y texto grande, que es
     para lo unico que se usa (el galon de contacto y la cifra en cero).
     La jerarquia entre niveles se estrecha; se compensa con tamano y peso, que es como
     se distinguen de verdad. Un gris que no se lee no es jerarquia, es texto perdido. */
  --lea-ink-50: rgba(14, 23, 41, .62);   /* 4,81 · AA */
  --lea-ink-40: rgba(14, 23, 41, .60);   /* 4,52 · AA · solo eyebrows (ver CLAUDE.md) */
  --lea-ink-30: rgba(14, 23, 41, .47);   /* 3,03 · AA grande/icono · NUNCA texto normal */
  --lea-hairline: #E6E9EC;       /* portal.html:19 (--line) */
  --lea-hairline-strong: #EEF1F6;  /* index.html:5 (--borde) */

  /* ---- Color: superficies ---- */
  --lea-paper: #FDFDFE;          /* index.html:5 (--superficie) */
  --lea-surface-warm: #F7F8FB;   /* index.html:5 (--papel) · el fondo REAL de la web */
  --lea-surface-cool: #F7F8FB;   /* mismo fondo real; el mockup usaba tres distintos */
  --lea-surface-paper: #F7F8FB;  /* sin equivalente cálido en la web: se usa el real */
  --lea-chip: #EEF1F6;           /* index.html:5 (--borde) */

  /* ---- Color: atención (pendientes). Nunca rojo. ---- */
  --lea-gold: #A05A00;           /* portal.html:20 (--warn) · el ámbar REAL */
  --lea-gold-surface: #FDF6EA;   /* sin equivalente en la web */
  --lea-gold-surface-2: #FDF3E4;   /* sin equivalente en la web */
  --lea-gold-border: rgba(168, 118, 62, .22);   /* sin equivalente en la web */

  /* ---- Sobre oscuro ---- */
  --lea-on-dark: #FFFFFF;
  --lea-on-dark-70: rgba(255, 255, 255, .62);
  --lea-on-dark-50: rgba(255, 255, 255, .50);
  --lea-on-dark-line: rgba(255, 255, 255, .12);
  --lea-on-dark-track: rgba(255, 255, 255, .14);

  /* ---- Espaciado, base 4 ---- */
  --lea-1: 4px;  --lea-2: 8px;  --lea-3: 12px; --lea-4: 16px;
  --lea-5: 20px; --lea-6: 24px; --lea-7: 28px; --lea-8: 34px;
  --lea-9: 40px; --lea-10: 56px;

  /* ---- Radios ---- */
  --lea-r-hero: 18px;   /* sin equivalente en la web */
  --lea-r-card: 16px;
  --lea-r-inner: 12px;
  --lea-r-btn: 11px;             /* portal.html:71 (.btn) */
  --lea-r-chip: 8px;
  --lea-r-badge: 6px;
  --lea-r-paper: 4px;   /* sin equivalente en la web */   /* dirección editorial */

  /* ---- Sombras ---- */
  --lea-shadow-card: 0 1px 2px rgba(14,23,41,.04), 0 12px 32px -18px rgba(14,23,41,.18);  /* portal.html, sombra real de tarjeta */
  --lea-shadow-btn: 0 1px 2px rgba(3,105,161,.25);  /* portal.html:74 (.btn) */

  /* ---- Movimiento ---- */
  --lea-ease: cubic-bezier(.22, 1, .36, 1);
  --lea-dur-fast: 150ms;
  --lea-dur-slow: 900ms;

  /* ---- Layout ---- */
  --lea-max: 1180px;
  --lea-rail: 340px;
  --lea-gutter: 28px;
}

/* Enlaces: definidos siempre, para que nunca salga el azul por defecto */
/* Espacio de trabajo CRM. Extensiones aisladas: no cambian el portal de clientes. */
:root[data-crm] {
  --lea-crm-muted: #626d7e;
  --lea-crm-selected: #edf5fa;
  --lea-crm-selected-line: #c6deed;
  --lea-crm-error: #ac3025;
  --lea-crm-error-surface: #fff1ee;
  --lea-crm-ok-surface: #edf7f1;
  --lea-crm-sidebar: 208px;
  --lea-crm-detail: 440px;
  --lea-crm-bar: 68px;
  --lea-crm-modal-backdrop: rgba(14,23,41,.35);
  --lea-crm-z-nav: 20;
  --lea-crm-z-detail: 30;
  --lea-crm-z-modal: 40;
}

a { color: var(--lea-accent); text-decoration: none; font-weight: 500; }  /* portal.html:81 */
a:hover { text-decoration: underline; }   /* portal.html:82 */

@keyframes lea-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}
@keyframes lea-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(320%); }
}

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