/* Global theme variables */
:root {
  --bg: #ffffff;
  --fg: #111827;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-contrast: #ffffff;
  --card: #ffffff;
  --border: #e5e7eb;
  --accent-soft: color-mix(in srgb, var(--accent) 20%, var(--bg));
  --toolbar-bg: var(--accent-soft);
  --toolbar: #f8fafc;
  --hover: #f3f4f6;
  --badge-bg: #eef2ff;
  --badge-border: #c7d2fe;
  --badge-fg: #1e3a8a;
  --footer-h: 56px;

  /* Tipografía y tamaño (controlados por preferencias) */
  --base-pt: 12pt;
  --app-font-fallback: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --app-font: var(--app-font-fallback);

  /* Colores derivados (se reescriben al aplicar preferencias) */
  --header-bg: var(--card);
  --footer-bg: var(--card);
  --header-fg: var(--fg);
  --footer-fg: var(--fg);
  --main-bg: color-mix(in srgb, var(--accent) 3%, var(--bg));
}

html, body { min-height: 100%; }
body {
  margin: 0;
  font: var(--base-pt)/1.5 var(--app-font);
  background: var(--bg);
  color: var(--fg);
  padding-bottom: var(--footer-h);
}

.container { max-width: 100%; margin: 0 auto; padding: 0 16px; }
.logo { font-weight: 700; letter-spacing: .3px; }
.chip { padding: 6px 10px; border: 1px solid var(--border); background: transparent; color: var(--fg); border-radius: 10px; cursor: pointer; }
.chip:hover { border-color: var(--accent); }
.panel { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px; min-height: 240px; }
.panel h3 { margin: 4px 0 8px; font-size: 0.9em; color: var(--muted); }
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.list li:hover { background: var(--hover); }
.badge { display: inline-block; font-size: 0.85em; padding: 2px 6px; border-radius: 6px; background: var(--badge-bg); border: 1px solid var(--badge-border); color: var(--badge-fg); }
a { color: var(--accent); text-decoration: none; }
/* === Overflow-X Guard === */
html, body { max-width: 100%; overflow-x: hidden; }
/* === /Overflow-X Guard === */