/* ===================== DESIGN TOKENS ===================== */
/* Tema oscuro premium = default (:root). El toggle de tema aplica
   data-tema="claro" en <html> para pasar a la paleta clara.
   Sin webfonts externas: --font-display usa serif del sistema
   (mismo criterio de assets/fonts.css: cero requests de más). */
:root{
  /* Tipografía */
  --font-sans:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --font-display:ui-serif,Georgia,'Iowan Old Style','Palatino Linotype','Times New Roman',serif;

  /* Radios y espaciado */
  --r-xl:18px; --r-lg:14px; --r-md:10px; --r-sm:8px;

  /* ----- Paleta oscura (default) ----- */
  --fondo:#0A0F1C;
  --fondo-2:#0D1424;
  --panel:#121B2E;
  --panel-2:#182640;
  --texto:#EBEFF8;
  --texto-70:#9AA6BC;
  --texto-40:#5B6780;

  --acento:#6E8CFF;
  --acento-2:#9B7CFF;
  --gradiente-acento:linear-gradient(135deg,#6E8CFF 0%,#9B7CFF 100%);
  --acento-suave:#1C2748;
  --acento-texto:#AFC0FF;

  --ok:#34D399; --ok-suave:#12301F;
  --demora:#F2B84C; --demora-suave:#332711;
  --alerta:#F2726B; --alerta-suave:#3A1D1C;
  /* Caso cerrado por el bot, esperando la respuesta por mail. Celeste separado del verde
     de "Mail enviado" (validado para daltonismo y visión normal contra el fondo del panel). */
  --cerrado:#4FB3F6; --cerrado-suave:#12283D;

  --nav-bg:#101828;

  --linea:rgba(255,255,255,.08);
  /* Un poco más marcada que --linea: la usan las tarjetas de la lista de chats y el anillo
     del avatar. Con .08 sobre el fondo oscuro, la tarjeta casi no se despegaba del fondo. */
  --linea-fuerte:rgba(255,255,255,.16);
  --hover:rgba(255,255,255,.05);

  --burbuja-bot:#1E2C4D; --burbuja-bot-texto:#EBEFF8; --burbuja-bot-meta:#AFC0FF;

  --header-bg:linear-gradient(160deg,#101a30 0%,#0a1120 100%);
  --header-texto:#FFFFFF;

  --login-bg:radial-gradient(120% 140% at 15% -10%,rgba(110,140,255,.20) 0%,rgba(10,15,28,0) 55%),linear-gradient(160deg,#141F38 0%,#080C16 100%);

  --sombra:0 1px 2px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.22);
  --sombra-md:0 12px 32px rgba(0,0,0,.45);
  --sombra-glow:0 0 0 1px rgba(110,140,255,.10),0 24px 60px -16px rgba(6,10,22,.75);
  --glow-acento:0 10px 26px -4px rgba(110,140,255,.45);
}

html[data-tema="claro"]{
  --fondo:#F4F6F9;
  --fondo-2:#EEF1F6;
  --panel:#FFFFFF;
  --panel-2:#F4F6F9;
  --texto:#1A2233;
  --texto-70:#5C6472;
  --texto-40:#98A0AC;

  --acento:#3B6FD9;
  --acento-2:#7A5CE0;
  --gradiente-acento:linear-gradient(135deg,#3B6FD9 0%,#7A5CE0 100%);
  --acento-suave:#E8EFFB;
  --acento-texto:#2B4E8C;

  --ok:#2E9E6B; --ok-suave:#E3F5EC;
  --demora:#C98A1E; --demora-suave:#FBF0DC;
  --alerta:#C4433F; --alerta-suave:#FBEAE9;
  --cerrado:#1E80C8; --cerrado-suave:#E3F1FB;

  --nav-bg:#FFFFFF;

  --linea:#E3E7EC;
  --linea-fuerte:#CFD6E0;
  --hover:#F0F3F7;

  --burbuja-bot:#1A2233; --burbuja-bot-texto:#fff; --burbuja-bot-meta:#8E99AC;

  --header-bg:#152238;
  --header-texto:#FFFFFF;

  --login-bg:linear-gradient(160deg,#1C2B45 0%,#0F1826 100%);

  --sombra:0 1px 3px rgba(20,30,50,.06);
  --sombra-md:0 6px 20px rgba(20,30,50,.12);
  --sombra-glow:0 1px 3px rgba(20,30,50,.08),0 16px 40px -18px rgba(20,30,50,.22);
  --glow-acento:0 8px 20px rgba(59,111,217,.28);
}