/* ═══════════════════════════════════════════════════════════════════════════════
   MORGAN · TOKENS «RELEVO»  (Fase 1 del plan UX/UI, oct-2026)
   Una sola piel para consola, pantalla del equipo, login, precios y conectar.
   · Neutros calmos + UN color de acción accesible (--color-primary, 5:1 con blanco).
   · Dos colores con significado: --agent (pizarra) = responde el agente;
     --human (naranjo) = lo atiende una persona. No se usan para decorar.
   · El cian de MorgansMedia (--color-brand-mm) solo rellena e indica: nunca texto
     ni fondo de texto blanco (2,5:1).
   Regla: ningún hex fuera de este archivo. Los nombres antiguos de cada pantalla
   (--ink, --surface… de la consola; --tinta, --sup… del equipo) quedan como alias
   para migrar sin romper; el código nuevo usa solo los --color-*, --space-*, etc.
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
  /* Fondo y superficies */
  --color-bg: #F4F6F8;
  --color-surface: #FFFFFF;
  --color-surface-2: #F7F9FA;
  --color-sunk: #EEF1F4;
  --color-border: #DCE2E7;
  --color-border-soft: #E8EDF0;
  /* Texto: tres niveles, todos AA sobre blanco (14,9 · 8,1 · 5,6 : 1) */
  --color-text: #141C24;
  --color-text-2: #44545F;
  --color-text-3: #5B6A75;
  /* Acción */
  --color-primary: #0077A6;
  --color-primary-hover: #00668F;
  --color-on-primary: #FFFFFF;
  --color-primary-soft: rgba(0, 119, 166, .10);
  --color-link: #0077A6;
  --color-focus: #0077A6;
  --color-brand-mm: #00AEEF;
  /* Relevo: quién atiende */
  --agent: #3D5566;
  --agent-soft: #E8EEF2;
  --human: #C2410C;
  --human-soft: #FDEDE5;
  /* Estados: siempre punto + palabra, nunca solo color */
  --ok: #1E7D52;
  --ok-soft: #E6F4EC;
  --warn: #B45309;
  --warn-soft: #FDF3E3;
  --bad: #B3261E;
  --bad-soft: #FBE9E7;
  --info: #0077A6;
  /* Marca del cliente: logo, saludo, PDF (se redefine por data-marca) */
  --brand: #0169A7;

  /* Tipografía: una familia de interfaz; mono solo para URLs y código */
  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-ui);
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  /* Escala de 7 pasos (H59) */
  --text-xs: 12px; --text-sm: 13px; --text-md: 14px; --text-lg: 16px;
  --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px;
  /* Espacio base 4 */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  /* Radios */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
  /* Capas (H44) */
  --z-header: 10; --z-drawer: 40; --z-modal: 60; --z-toast: 3000;
  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(20, 28, 36, .05);
  --shadow-pop: 0 12px 40px -12px rgba(20, 28, 36, .28), 0 2px 6px rgba(20, 28, 36, .06);
  /* Alturas de control */
  --control-h: 36px; --control-h-touch: 44px;

  color-scheme: light;

  /* ── Alias de la consola (index.html, conectar.html) ── */
  --ground: var(--color-bg); --surface: var(--color-surface); --surface2: var(--color-surface-2); --sunk: var(--color-sunk);
  --line: var(--color-border); --line-soft: var(--color-border-soft);
  --ink: var(--color-text); --ink-2: var(--color-text-2); --muted: var(--color-text-3);
  --accent: var(--color-brand-mm); --accent-dim: var(--color-primary); --accent-txt: var(--color-primary); --accent-ghost: var(--color-primary-soft);
  --good: var(--ok);
  --shadow: var(--shadow-sm); --pop: var(--shadow-pop);
  --radius: var(--radius-md); --rail: 236px;

  /* ── Alias de la pantalla del equipo (equipo.html, precios.html) ── */
  --fondo: var(--color-bg); --sup: var(--color-surface); --linea: var(--color-border); --linea-2: var(--color-border-soft);
  --tinta: var(--color-text); --sec: var(--color-text-2); --apag: var(--color-text-3);
  --testigo: var(--human); --testigo-suave: var(--human-soft); --agente: var(--agent); --agente-suave: var(--agent-soft);
  --ganado: var(--ok); --alerta: var(--warn); --perdido: var(--bad);
  --f-titulo: var(--font-display); --f-texto: var(--font-ui);
  --r: var(--radius-md); --r-sm: var(--radius-sm);
}

/* Marca del cliente */
:root[data-marca="dry2040"] { --brand: #0169A7; }
:root[data-marca="morgansmedia"] { --brand: #00AEEF; }

/* Modo oscuro: solo la consola (la pantalla del equipo es de día, al sol, en terreno). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-superficie="equipo"]) {
    --color-bg: #0A1015; --color-surface: #10181E; --color-surface-2: #141E25; --color-sunk: #0D141A;
    --color-border: #22303A; --color-border-soft: #1A252D;
    --color-text: #E5EDF2; --color-text-2: #A7B8C3; --color-text-3: #8496A1;
    --color-primary: #3BA7D4; --color-primary-hover: #5BB8DE; --color-on-primary: #06121A; --color-primary-soft: rgba(59, 167, 212, .14);
    --color-link: #5CCBF4; --color-focus: #5CCBF4;
    --agent: #8FA9BA; --agent-soft: #1A2731; --human: #F08A5B; --human-soft: #2A1A12;
    --ok: #3FBF86; --ok-soft: #10261C; --warn: #E3A844; --warn-soft: #2A2010; --bad: #F06A5F; --bad-soft: #2A1412; --info: #5CCBF4;
    --shadow-sm: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px -12px rgba(0, 0, 0, .6);
    --shadow-pop: 0 16px 48px -12px rgba(0, 0, 0, .7);
    --accent-txt: var(--color-link);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]:not([data-superficie="equipo"]) {
  --color-bg: #0A1015; --color-surface: #10181E; --color-surface-2: #141E25; --color-sunk: #0D141A;
  --color-border: #22303A; --color-border-soft: #1A252D;
  --color-text: #E5EDF2; --color-text-2: #A7B8C3; --color-text-3: #8496A1;
  --color-primary: #3BA7D4; --color-primary-hover: #5BB8DE; --color-on-primary: #06121A; --color-primary-soft: rgba(59, 167, 212, .14);
  --color-link: #5CCBF4; --color-focus: #5CCBF4;
  --agent: #8FA9BA; --agent-soft: #1A2731; --human: #F08A5B; --human-soft: #2A1A12;
  --ok: #3FBF86; --ok-soft: #10261C; --warn: #E3A844; --warn-soft: #2A2010; --bad: #F06A5F; --bad-soft: #2A1412; --info: #5CCBF4;
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-pop: 0 16px 48px -12px rgba(0, 0, 0, .7);
  --accent-txt: var(--color-link);
  color-scheme: dark;
}