/* ═══════════════════════════════════════════════════════════════════════════
   tema.css · AleInversor · Estilo común de todas las herramientas
   ---------------------------------------------------------------------------
   Copia de la paleta y las fuentes de index.html (fuente de verdad).
   Cada herramienta enlaza este archivo y tema.js, y en su propio :root
   "traduce" sus variables locales a estas (p. ej. --ink: var(--ale-text)).
   El tema se elige en tema.js: <html class="light"> o <html class="dark">.
   ⚠️ Si cambias la paleta en index.html, cámbiala también aquí.
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Mono:wght@400;500&display=swap');

/* ── Claro (por defecto, como index.html) ── */
:root{
  --ale-font-sans:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ale-font-mono:'DM Mono',ui-monospace,Menlo,Consolas,monospace;

  --ale-bg:#f1f5f9;
  --ale-s1:#ffffff;          /* tarjetas, paneles */
  --ale-s2:#f8fafc;          /* cabeceras de tabla, cajas secundarias */
  --ale-s3:#eef2f7;          /* hover, fondos suaves */
  --ale-border:#cbd5e1;
  --ale-border-soft:#e2e8f0;
  --ale-border-strong:#1e293b;
  --ale-text:#0f172a;
  --ale-muted:#64748b;
  --ale-muted2:#5b6b7f;
  --ale-accent:#2563eb;
  --ale-accent-dim:rgba(37,99,235,.08);
  --ale-accent2:rgba(37,99,235,.16);
  --ale-on-accent:#ffffff;
  --ale-green:#059669;  --ale-green-dim:rgba(5,150,105,.10);
  --ale-red:#dc2626;    --ale-red-dim:rgba(220,38,38,.10);
  --ale-yellow:#d97706; --ale-yellow-dim:rgba(217,119,6,.10);
  --ale-orange:#ea580c; --ale-orange-dim:rgba(234,88,12,.10);
  --ale-purple:#7c3aed; --ale-purple-dim:rgba(124,58,237,.10);
  --ale-teal:#0d9488;   --ale-teal-dim:rgba(13,148,136,.10);
  --ale-shadow:0 1px 3px rgba(15,23,42,.06),0 6px 18px rgba(15,23,42,.06);
  --ale-tip-bg:#0f172a; --ale-tip-text:#e2e8f0;
  --ale-r:8px; --ale-r2:12px; --ale-r3:16px;
  color-scheme:light;
}

/* ── Oscuro (solo en pantalla: al imprimir / PDF siempre se usa la paleta clara) ── */
@media screen{
html.dark{
  --ale-bg:#07090d;
  --ale-s1:#0e1118;
  --ale-s2:#141921;
  --ale-s3:#1b2230;
  --ale-border:rgba(255,255,255,.18);
  --ale-border-soft:rgba(255,255,255,.08);
  --ale-border-strong:rgba(255,255,255,.45);
  --ale-text:#e8eaf0;
  --ale-muted:#abb4c7;
  --ale-muted2:#8b93a7;
  --ale-accent:#4f8fff;
  --ale-accent-dim:rgba(79,143,255,.1);
  --ale-accent2:rgba(79,143,255,.2);
  --ale-on-accent:#ffffff;
  --ale-green:#1fd17a;  --ale-green-dim:rgba(31,209,122,.1);
  --ale-red:#ff4f4f;    --ale-red-dim:rgba(255,79,79,.1);
  --ale-yellow:#f5c542; --ale-yellow-dim:rgba(245,197,66,.1);
  --ale-orange:#ff8c42; --ale-orange-dim:rgba(255,140,66,.1);
  --ale-purple:#a78bfa; --ale-purple-dim:rgba(167,139,250,.1);
  --ale-teal:#2dd4bf;   --ale-teal-dim:rgba(45,212,191,.1);
  --ale-shadow:0 8px 30px rgba(0,0,0,.4);
  --ale-tip-bg:#1b2230; --ale-tip-text:#e8eaf0;
  color-scheme:dark;
}
}

/* ── Botón de tema que inserta tema.js (si la página no trae el suyo) ── */
.ale-tema-btn{position:fixed;right:16px;bottom:16px;z-index:2147482000;width:42px;height:42px;
  border-radius:50%;border:1px solid var(--ale-border);background:var(--ale-s1);color:var(--ale-text);
  box-shadow:var(--ale-shadow);cursor:pointer;font-size:19px;line-height:1;display:flex;
  align-items:center;justify-content:center;transition:transform .12s}
.ale-tema-btn:hover{transform:scale(1.06)}
.ale-tema-btn:focus-visible{outline:2px solid var(--ale-accent);outline-offset:2px}
@media print{.ale-tema-btn{display:none}}