/* ============================================================
   base.css — reset, design tokens y utilidades
   Swipe & Decide · Prototipo
   ============================================================ */

:root{
  /* ---- Escala de grises (paleta vigente del proyecto) ---- */
  --primary:        #262626;
  --secondary:      #525252;
  --accent:         #A3A3A3;
  --bg:             #F5F5F5;
  --surface:        #FFFFFF;
  --surface-alt:    #EDEDED;
  --text:           #171717;
  --text-secondary: #6B6B6B;
  --border:         rgba(23,23,23,.12);
  --border-strong:  rgba(23,23,23,.28);

  /* ---- Acentos por área de presupuesto ---- */
  --area-alimentacion: #22A45D;
  --area-ocio:         #3B82F6;
  --area-salud:        #E05260;
  --area-transporte:   #8B5CF6;
  --area-educacion:    #D97706;
  --area-otros:        #9CA3AF;

  /* ---- Semánticos ---- */
  --positive: #22A45D;
  --negative: #E05260;

  /* ---- Formas y movimiento ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(23,23,23,.06);
  --shadow-md: 0 6px 20px rgba(23,23,23,.10);
  --shadow-lg: 0 24px 60px rgba(23,23,23,.28);
  --ease: cubic-bezier(.4,0,.2,1);
  --transition: .25s var(--ease);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background: radial-gradient(circle at 50% 0%, #FFFFFF 0%, var(--bg) 70%) var(--bg);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color:var(--text);
  line-height:1.45;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

button, input, textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }
ul, ol{ list-style:none; }

/* ---- Foco visible y accesible ---- */
:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:4px;
}

/* ---- Utilidades ---- */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.muted{
  color:var(--text-secondary);
  font-size:12px;
}

.hint{
  text-align:center;
  font-size:11px;
  color:var(--text-secondary);
  margin:10px 0 8px;
}

.section-title{
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--secondary);
  margin-bottom:8px;
}

.form-error{
  font-size:12px;
  font-weight:600;
  color:var(--negative);
  margin-bottom:8px;
}

/* Oculta el scrollbar sin perder el scroll */
::-webkit-scrollbar{ width:0; height:0; }
*{ scrollbar-width:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}