/* =========================================================================
   Sistema de diseño — Web personal de trading · Pieza 01
   Tokens para trasplante directo a producción.
   Modo claro por defecto (parte pública). Modo oscuro con [data-tema="oscuro"]
   (dashboards privados). Ambos funcionan en cualquier página.
   ========================================================================= */

/* --- Tipografías -----------------------------------------------------------
   En producción, AUTOALOJAR en woff2 (nada de CDN). Sustituir los @font-face
   siguientes por los archivos reales. Familias base:
     · Serif display  → Source Serif 4   (alt. de pago: Tiempos / Freight)
     · Grotesk UI      → IBM Plex Sans     (alt. de pago: Söhne / estilo Inter)
     · Mono datos      → IBM Plex Mono
   Pesos usados: 400 / 500 / 600. Cifras tabulares obligatorias en datos.

@font-face { font-family: "Source Serif 4"; font-weight: 400; font-display: swap;
             src: url("./fuentes/source-serif-4-400.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 600; font-display: swap;
             src: url("./fuentes/source-serif-4-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap;
             src: url("./fuentes/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap;
             src: url("./fuentes/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap;
             src: url("./fuentes/ibm-plex-sans-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap;
             src: url("./fuentes/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap;
             src: url("./fuentes/ibm-plex-mono-500.woff2") format("woff2"); }
--------------------------------------------------------------------------- */

/* Autoalojadas (2026-07-10). Sans y Serif son VARIABLES: un archivo cubre 400-600. */
@font-face { font-family: "Source Serif 4"; font-weight: 400 600; font-display: swap;
             src: url("../fuentes/source-serif-4-var.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400 600; font-display: swap;
             src: url("../fuentes/ibm-plex-sans-var.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap;
             src: url("../fuentes/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap;
             src: url("../fuentes/ibm-plex-mono-500.woff2") format("woff2"); }

:root {
  /* Familias */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Color — modo claro (parte pública) */
  --fondo:        #FAFAF8;
  --superficie-1: #FFFFFF;
  --superficie-2: #F3F2EE;
  --tinta:        #10141A;
  --texto-2:      #5A616B;
  --borde:        #E4E2DC;
  --acento:       #1B3A5B;
  --acento-hover: #24466B;
  --foco:         #24466B;
  --dato-sube:    #1E7F4F; /* verde — SOLO dirección de precio/dato */
  --dato-baja:    #B3362C; /* rojo  — SOLO dirección de precio/dato */
  --dato-neutro:  #5A616B;
  --aviso:        #8A6D1A;
  --error:        #B3362C;
  --sombra: 0 1px 2px rgba(16,20,26,.06), 0 4px 14px rgba(16,20,26,.06);

  /* Escala tipográfica */
  --fs-display: 44px; --lh-display: 1.08;
  --fs-h1: 32px;  --fs-h2: 24px;  --fs-h3: 19px;  --fs-h4: 16px;
  --fs-cuerpo: 16px;  --lh-cuerpo: 1.6;
  --fs-small: 14px;   --fs-micro: 11px;
  --fs-dato-grande: 40px;  --fs-dato-tabla: 14px;

  /* Espaciado */
  --e-4: 4px;  --e-8: 8px;  --e-12: 12px; --e-16: 16px; --e-24: 24px;
  --e-32: 32px; --e-48: 48px; --e-64: 64px; --e-96: 96px;

  /* Forma */
  --r4: 4px; --r6: 6px;
  --borde-w: 1px;
  --pad-celda: 11px 14px;
}

/* Color — modo oscuro (dashboards privados) */
[data-tema="oscuro"] {
  --fondo:        #0C1117;
  --superficie-1: #11161D;
  --superficie-2: #171D26;
  --tinta:        #E6E8EC;
  --texto-2:      #9AA1AC;
  --borde:        #232A34;
  --acento:       #6B97CC;
  --acento-hover: #85ABD8;
  --foco:         #6B97CC;
  --dato-sube:    #4FA875;
  --dato-baja:    #D9635A;
  --dato-neutro:  #9AA1AC;
  --aviso:        #C9A24A;
  --error:        #D9635A;
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.4);
}

/* Densidad de tabla opcional */
[data-densidad="compacta"] { --pad-celda: 6px 10px; }

/* Animaciones base */
@keyframes girar  { to { transform: rotate(360deg); } }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }