:root{
  --primary:#5d5dff;
  --primary-600:#4e4ec6;
  --bg:#eef2f8;
  --card:#fff;
  --text:#37383d;
  --muted:#2b2c2e;
  --border:#bdc3c7;
  --ok:#27ae60;
  --warn:#f39c12;
  --info:#004b8d;
  --info-600:#031b30;
  --error:#e74c3c;

  /* Tipografía fluida */
  --step--1: clamp(.9rem, .85rem + .3vw, 1rem);
  --step-0: clamp(1rem, .9rem + .6vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1rem + 1vw, 1.6rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.6vw, 2.2rem);
  --step-3: clamp(2rem, 1.5rem + 2.4vw, 2.8rem);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#ffffff;
    --card:#ffffff;
    --text:#37383d;
    --muted:#37383d;
    --border:#b6bcca;
  }
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  margin:0;
}

/* Accesibilidad */
.skip-link{
  position:absolute; inset-inline-start:1rem; inset-block-start:-40px;
  background:#000; color:#fff; padding:.5rem .75rem; z-index:1000; border-radius:.5rem;
}
.skip-link:focus{ inset-block-start:1rem; }

/* Layout */
.container{ max-inline-size:1100px; margin-inline:auto; padding-inline:1rem; }

.header{
  background: linear-gradient(135deg, var(--info));
  color:#fff; padding:3rem 0 2.5rem; text-align:center;
  border-end-start-radius: 36px; border-end-end-radius: 36px;
  box-shadow:0 8px 30px rgba(0,0,0,.15);
}
.header__title{ font-size:var(--step-3); font-weight:700; margin:0 0 .25rem; }
.header__subtitle{ font-size:var(--step-0); opacity:.95; margin:0; }

.section-title{ font-size:var(--step-1); margin:0 0 .5rem; }

.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; padding:1.25rem 1.25rem; box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.card--input{ margin-block:1.5rem; }

.muted{ color:var(--muted); font-size:var(--step--1); }

.form{ margin-block:1rem 0; }
.fieldset{ border:0; padding:0; margin:0; }
.label{ display:block; font-weight:600; margin-block:.75rem .5rem; }

.input-group{
  position:relative; display:flex; align-items:center; gap:.5rem;
}
.currency-symbol{
  position:absolute; inset-inline-start:1rem; inset-block-start:50%; transform:translateY(-50%);
  color:var(--muted); font-weight:600;
}
.input{
  inline-size:100%;
  padding: .9rem 3rem .9rem 3rem; /* espacio para ícono y botón limpiar */
  border:2px solid var(--border); border-radius:12px;
  font-size:var(--step-0); background:transparent; color:inherit;
  transition:border-color .2s, box-shadow .2s;
}
.input:focus{
  outline:none; border-color:var(--info);
  box-shadow:0 0 0 .25rem color-mix(in oklab, var(--primary) 25%, transparent);
}

.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--info); color:#fff; border:0; border-radius:12px;
  padding:.85rem 1.25rem; font-weight:700; cursor:pointer;
  transition: transform .15s ease, opacity .2s ease, background .2s ease;
}
.btn:hover{ transform:translateY(-1px); background:var(--info-600); }
.btn:disabled{ opacity:.7; cursor:not-allowed; transform:none; }
.btn--ghost{
  background:transparent; color:var(--info-600); border:1px solid var(--border);
}
.btn--ghost:hover{ background:color-mix(in oklab, var(--info-600) 25%, transparent); }

.btn__spinner{
  inline-size:1.1rem; block-size:1.1rem; border-radius:999px;
  border:2px solid currentColor; border-block-start-color:transparent;
  display:none; animation:spin .8s linear infinite;
}
.btn[aria-busy="true"] .btn__spinner{ display:inline-block; }
.btn[aria-busy="true"] .btn__label{ opacity:.75; }

.help{ display:block; color:var(--muted); margin-block:.35rem .25rem; }

.error{
  min-block-size:1.25rem;
  color:var(--error); font-size:var(--step--1); margin-block:.5rem 0;
}

.actions{ margin-block:1rem 0; display:flex; gap:.75rem; }

.grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
}

.results{ margin-block:1.5rem 0; }
.u-hidden{ display:none; }

.result__header{ display:flex; align-items:center; gap:.75rem; margin-block-end:.5rem; }
.icon-bg{ font-size:1.6rem; transform-origin:center; }
#necesarios-card .icon-bg{ color:var(--ok);}
#prescindibles-card .icon-bg{ color:var(--warn);}
#ahorro-card .icon-bg{ color:var(--info);}

#necesarios-card {
  border-top:6px solid var(--rojo);   /* Rojo Justicia */
  background: rgba(234,36,40,.25);
}

#prescindibles-card {
  border-top:6px solid var(--amarillo); /* Amarillo Estrella */
  background: rgba(255,195,27,.28);
}

#ahorro-card {
  border-top:6px solid var(--verde);    /* Verde Olivo */
  background: rgba(46,124,50,.26);
}

.result__title{ font-weight:700; margin:0; }
.result__pct{ margin-inline-start:auto; color:var(--muted); font-weight:600; }
.result__value{ font-size:var(--step-2); font-weight:700; color:var(--info); margin:.35rem 0 .25rem; }
.result__desc{ color:var(--muted); font-size:var(--step--1); }

.tips details{
  margin-block:1rem 0; padding: .75rem 1rem; border-radius:12px;
  background: color-mix(in oklab, var(--card) 80%, var(--bg));
  border:1px dashed var(--border);
}

.to-top{ margin-block:1rem 0; display:flex; justify-content:center; }

.footer-info{
  margin-block:2rem; text-align:center; color:var(--info); font-style:italic;
}

.site-footer{
  text-align:center; padding:1rem; color:var(--muted);
}

/* Controles auxiliares */
#limpiarBtn{
  position:absolute; inset-inline-end:.5rem; inset-block-start:50%; transform:translateY(-50%);
}

/* Estados de error */
.input[aria-invalid="true"]{ border-color:var(--error); }

/* Animaciones y preferencias del usuario */
@keyframes spin{ to{ transform:rotate(360deg)} }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important; scroll-behavior:auto !important; }
}