/* ============================================================
   Risko Cotizador — base.css
   Reset, body, screens, animaciones.
   Idéntico a Blink.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* ── Screens (login / main) ─────────────────────────────────  */
.screen         { display: none; }
.screen.active  { display: block; }

/* ── Utilidades ─────────────────────────────────────────────  */
.hidden { display: none; }

/* ── Toast ──────────────────────────────────────────────────  */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--success); color: white;
  padding: 12px 18px; border-radius: var(--r);
  font-size: 13px; display: none; z-index: 9999;
  max-width: 360px; box-shadow: var(--shadow-lg); font-weight: 500;
}
.toast.show { display: flex; align-items: center; justify-content: space-between; }

/* ── Badges ─────────────────────────────────────────────────  */
.badge        { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 500; }
.badge-green  { background: var(--success-light); color: var(--success); }
.badge-danger { background: var(--danger-light);  color: var(--danger); }
.badge-amber  { background: var(--warning-light); color: var(--warning); }
.badge-gray   { background: var(--gray-light);    color: var(--text-sec); }

/* ── Utilidades de color ────────────────────────────────────  */
.icon-bp      { color: var(--icon); }
.icon-bt      { color: var(--bt); }
.icon-danger  { color: var(--danger); }
.icon-success { color: var(--success); }
.icon-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }
.text-muted   { font-size: 11px; color: var(--text-sec); }

/* ── Utilidades de espaciado ────────────────────────────────  */
.mt-sm { margin-top: .625rem; }
.mt-md { margin-top: 1rem; }
.mt-lg { margin-top: 1.25rem; }
.mt-xl { margin-top: 1.5rem; }
.mb-sm { margin-bottom: .625rem; }
.mb-md { margin-bottom: 1rem; }
.mb-lg { margin-bottom: 1.25rem; }
.mb-xl { margin-bottom: 1.5rem; }

/* ── Animaciones ────────────────────────────────────────────  */
@keyframes slideIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spin { animation: spin 1s linear infinite; display: inline-block; }