/* =========================================================================
   Calculadora Científica — Design tokens y estilos compartidos
   Se carga en TODAS las páginas junto con el script CDN de Tailwind.
   ========================================================================= */

:root {
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  /* Texto/enlaces: en modo claro es el mismo azul que los botones (ya pasa AA). */
  --color-primary-link: #2563eb;
  --color-accent: #10b981;
  --color-danger: #e11d48;
  --color-warning: #d97706;
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-border: #e2e8f0;
  --color-text: #0f172a;
  --color-text-muted: #64748b;
}

html.dark {
  --color-primary: #3b82f6;
  --color-primary-dark: #60a5fa;
  /* Texto/enlaces: en modo oscuro necesita ser más claro que --color-primary para
     mantener 4.5:1 de contraste sobre tarjetas (WCAG AA) — el azul de los botones
     (pensado para llevar texto blanco encima) queda demasiado apagado como texto. */
  --color-primary-link: #60a5fa;
  --color-accent: #34d399;
  --color-danger: #fb7185;
  --color-warning: #fbbf24;
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-border: #334155;
  --color-text: #f1f5f9;
  --color-text-muted: #94a3b8;
}

* {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.font-display {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

.font-numeric {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* --- Tarjetas y superficies -------------------------------------------- */
.surface {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

/* --- Pantalla de calculadora --------------------------------------------- */
.calc-display {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  word-break: break-all;
}

/* --- Botones tipo calculadora ------------------------------------------- */
.calc-btn {
  min-height: 3rem;
  border-radius: 0.75rem;
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-weight: 600;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  transition: transform 0.05s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}
.calc-btn:hover {
  filter: brightness(0.97);
}
html.dark .calc-btn:hover {
  filter: brightness(1.15);
}
.calc-btn:active {
  transform: scale(0.96);
}
.calc-btn--op {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}
.calc-btn--op:hover {
  filter: brightness(1.08);
}
.calc-btn--accent {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
}
.calc-btn--danger {
  background-color: transparent;
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.calc-btn--muted {
  color: var(--color-text-muted);
}

/* --- Mensajes de error / validación -------------------------------------- */
.field-error {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 1px var(--color-danger);
}
.alert-error {
  background-color: rgb(225 29 72 / 0.08);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
}
html.dark .alert-error {
  background-color: rgb(251 113 133 / 0.12);
}

/* --- Accordion "Ayuda y Fórmulas" ---------------------------------------- */
details.help-accordion > summary {
  cursor: pointer;
  list-style: none;
}
details.help-accordion > summary::-webkit-details-marker {
  display: none;
}
details.help-accordion[open] .chevron {
  transform: rotate(180deg);
}
.chevron {
  transition: transform 0.2s ease;
}

/* --- Badges de categoría -------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border-radius: 9999px;
}

/* Scrollbar sutil para tablas de resultados en mobile */
.scroll-thin::-webkit-scrollbar {
  height: 6px;
}
.scroll-thin::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: 9999px;
}