/* ============================================================
   FITNESS TRACKER — Sistema de diseño
   Premium, minimalista, deportivo. Superficies en capas.
   Un único acento (rojo) + neutros — máximo 2 colores en toda la app.
   ============================================================ */

:root {
  /* Superficies — modo claro */
  --bg: #F2F2F5;
  --surface: #FFFFFF;
  --surface-2: #EDEDF1;
  --border: rgba(60, 60, 67, 0.13);
  --overlay: rgba(0, 0, 0, 0.42);

  /* Texto */
  --text: #15151A;
  --text-secondary: rgba(21, 21, 26, 0.62);
  --text-tertiary: rgba(21, 21, 26, 0.35);

  /* Color: un único acento (rojo) + neutros. Máximo 2 "colores" en toda la
     app — el resto es blanco/negro/grises. El aviso (--warn) es gris, no un
     tercer color; se distingue por forma (contorno), no por tono. */
  --accent: #FF3B30;
  --accent-soft: rgba(255, 59, 48, 0.1);
  --accent-contrast: #FFFFFF;
  --warn: #6E6E73;
  --warn-soft: rgba(60, 60, 67, 0.08);
  --warn-contrast: #FFFFFF;
  --danger: #FF3B30;
  --danger-soft: rgba(255, 59, 48, 0.1);
  --danger-contrast: #FFFFFF;

  --nav-bg: rgba(255, 255, 255, 0.78);
  --shadow-card: 0 1px 2px rgba(20, 20, 30, 0.04), 0 6px 16px rgba(20, 20, 30, 0.05);
  --shadow-sheet: 0 -8px 30px rgba(20, 20, 30, 0.12);

  /* Forma */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Movimiento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-medium: 240ms;

  --nav-height: 58px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  color-scheme: light dark;
}

/* El modo oscuro automático del sistema solo aplica al tema "Predeterminado"
   — si el usuario ha elegido a propósito "Blanco" o "Queens" (ver
   js/core/theme.js), esos temas son fijos y no deben competir con el SO. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="white"]):not([data-theme="queens"]) {
    /* Paleta oficial PEGASUS (modo oscuro) */
    --bg: #0B0B0B;
    --surface: #141414;
    --surface-2: #1F1F1F;
    --border: #1F1F1F;
    --overlay: rgba(0, 0, 0, 0.6);

    --text: #FFFFFF;
    --text-secondary: #A1A1AA;
    --text-tertiary: rgba(161, 161, 170, 0.55);

    --accent: #FF3B30;
    --accent-soft: rgba(255, 59, 48, 0.16);
    --accent-contrast: #FFFFFF;
    --warn: #98989D;
    --warn-soft: rgba(255, 255, 255, 0.08);
    --warn-contrast: #000000;
    --danger: #FF3B30;
    --danger-soft: rgba(255, 59, 48, 0.16);
    --danger-contrast: #FFFFFF;

    --nav-bg: rgba(20, 20, 20, 0.78);
    --shadow-card: none;
    --shadow-sheet: 0 -8px 30px rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }

html { background: var(--bg); }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4, p, ul { margin: 0; }

button, input, select, textarea {
  font-family: inherit;
  color: inherit;
}

input, select, textarea {
  background: var(--surface-2);
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 16px;
  width: 100%;
  transition: box-shadow var(--dur-fast) var(--ease);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent);
}

input::placeholder, textarea::placeholder { color: var(--text-tertiary); }

button {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

/* Tipografía */
.type-hero {
  font-size: 40px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.type-title { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.type-headline { font-size: 17px; line-height: 1.3; font-weight: 600; }
.type-body { font-size: 16px; line-height: 1.4; font-weight: 400; }
.type-caption { font-size: 13px; line-height: 1.3; font-weight: 500; }
.type-micro {
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.num { font-variant-numeric: tabular-nums; }

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 13px 20px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 16px;
  min-height: 48px;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.btn:active { transform: scale(0.96); opacity: 0.88; }

.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-secondary { background: var(--surface-2); color: var(--text); }
.btn-danger { background: var(--danger); color: var(--danger-contrast); }
.btn-ghost { background: transparent; color: var(--accent); padding-left: 10px; padding-right: 10px; }
.btn-ghost-danger { background: transparent; color: var(--danger); padding-left: 10px; padding-right: 10px; }
.btn-block { width: 100%; border-radius: var(--radius-lg); min-height: 54px; font-size: 17px; }
.btn-sm { min-height: 36px; padding: 8px 16px; font-size: 14px; }
.btn:disabled { opacity: 0.4; }

.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-4);
  box-shadow: var(--shadow-card);
}

.label {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  font-weight: 500;
}

.field { margin-bottom: var(--space-4); }

.text-dim { color: var(--text-secondary); }
.text-faint { color: var(--text-tertiary); }
.text-good { color: var(--accent); }
.text-warn { color: var(--warn); }
.text-danger { color: var(--danger); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-weight: 600;
}
.badge-good { background: var(--accent-soft); color: var(--accent); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-neutral { background: var(--surface-2); color: var(--text-secondary); }

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.view-enter { animation: fadeSlideUp var(--dur-medium) var(--ease); }

/* Red de seguridad global de accesibilidad: acorta toda transición/animación
   a prácticamente instantánea en vez de quitarla — el cambio de estado final
   (color, posición activa, etc.) sigue produciéndose, solo que sin recorrido
   visual. Cubre toda la app (sheets, toasts, nav, swipes...) sin tener que
   tocar cada selector uno a uno. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Tema "Blanco" — premium, claro, fijo (ignora el modo oscuro del
   sistema a propósito, ver el guard de arriba). Mismo acento rojo que
   el tema Predeterminado, pero con neutros más cálidos/diferenciados
   y sombras más suaves — para no leerse como "el claro de siempre".
   Aplicado por js/core/theme.js vía [data-theme] en <html>.
   ============================================================ */
:root[data-theme="white"] {
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --surface-2: #F2F2F1;
  --border: rgba(20, 20, 20, 0.08);
  --overlay: rgba(0, 0, 0, 0.35);

  --text: #1A1A1A;
  --text-secondary: rgba(26, 26, 26, 0.58);
  --text-tertiary: rgba(26, 26, 26, 0.32);

  --accent: #FF3B30;
  --accent-soft: rgba(255, 59, 48, 0.08);
  --accent-contrast: #FFFFFF;
  --warn: #6E6E73;
  --warn-soft: rgba(20, 20, 20, 0.06);
  --warn-contrast: #FFFFFF;
  --danger: #FF3B30;
  --danger-soft: rgba(255, 59, 48, 0.08);
  --danger-contrast: #FFFFFF;

  --nav-bg: rgba(255, 255, 255, 0.82);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.03), 0 10px 24px rgba(0, 0, 0, 0.045);
  --shadow-sheet: 0 -10px 34px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   Tema "4 the Queens" — blanco predominante + rosa como acento
   estratégico (botones, estados activos, progreso, iconos). Los
   neutros llevan solo un WHISPER de tinte cálido/rosado (nunca gris
   puro) para dar cohesión sin que "todo sea rosa". --danger se
   mantiene un rojo diferenciable del rosa de --accent, para que un
   error nunca se confunda con un botón/acento de marca; --warn sigue
   siendo neutro (gris-malva apagado), no un tercer color saturado —
   mismo principio de "máximo 2 colores" que ya sigue el Predeterminado.
   ============================================================ */
:root[data-theme="queens"] {
  --bg: #FDFBFC;
  --surface: #FFFFFF;
  --surface-2: #F7EEF2;
  --border: rgba(120, 30, 70, 0.1);
  --overlay: rgba(40, 10, 25, 0.35);

  --text: #1F1418;
  --text-secondary: rgba(31, 20, 24, 0.58);
  --text-tertiary: rgba(31, 20, 24, 0.32);

  --accent: #D6336C;
  --accent-soft: rgba(214, 51, 108, 0.1);
  --accent-contrast: #FFFFFF;
  --warn: #6E545B;
  --warn-soft: rgba(110, 84, 91, 0.08);
  --warn-contrast: #FFFFFF;
  --danger: #D63A3A;
  --danger-soft: rgba(214, 58, 58, 0.08);
  --danger-contrast: #FFFFFF;

  --nav-bg: rgba(255, 255, 255, 0.84);
  --shadow-card: 0 1px 3px rgba(90, 20, 50, 0.04), 0 10px 24px rgba(90, 20, 50, 0.05);
  --shadow-sheet: 0 -10px 34px rgba(90, 20, 50, 0.12);
}