/* ══════════════════════════════════════════════════════════
   IMPULSO · Sistema de diseño neumórfico
   Tokens + primitivas reutilizables (neu, neu-in, neu-btn…)
   ══════════════════════════════════════════════════════════ */

:root{
  /* Superficie y sombras — la base del neumorfismo:
     el mismo color que el fondo + dos luces opuestas */
  --surface-base: #e9edf5;
  --surface-2: #eef1f8;
  --sh-dark:   #c2c9da;
  --sh-light:  #ffffff;

  /* Cuánto tiñe el degradado a la propia interfaz (0% = gris neutro
     clásico). Lo fija el usuario en Ajustes → Colores. */
  --tint: 0%;

  /* El color base se mezcla con el primer color del degradado, así
     las sombras neumórficas siguen funcionando sobre el tinte. */
  --bg:      color-mix(in srgb, var(--accent-1) var(--tint), var(--surface-base));
  --surface: color-mix(in srgb, var(--accent-1) var(--tint), var(--surface-base));

  /* Texto: contraste alto a propósito. El neumorfismo suele
     fallar en accesibilidad; aquí la profundidad la dan las
     sombras, no un texto lavado. */
  --text:      #232838;
  --text-2:    #5c6685;
  --text-3:    #8b94ae;

  /* Acentos — el degradado lo elige el usuario en Ajustes.
     JS reescribe estas tres variables sobre :root, así que todo lo
     que las use (botones, anillos, barras, logo) cambia a la vez. */
  --accent-1:  #12c2c8;
  --accent-2:  #3ff0dc;
  --accent-3:  #0b7fa8;
  --accent:    var(--accent-1);
  /* Color de marca APTO PARA TEXTO. JS lo recalcula contra el fondo
     real: si el degradado elegido es oscuro sobre tema oscuro (o al
     revés) se aclara u oscurece hasta que se lea. */
  --accent-txt: var(--accent-1);
  --grad:      linear-gradient(135deg, var(--accent-1), var(--accent-2), var(--accent-3));
  --grad-soft: linear-gradient(135deg, var(--accent-1), var(--accent-3));

  /* Velo translúcido de dos o tres colores que se superpone a las
     tarjetas y al fondo. Con --tint a 0% es completamente invisible. */
  --veil: linear-gradient(145deg,
            color-mix(in srgb, var(--accent-1) var(--tint), transparent),
            color-mix(in srgb, var(--accent-2) var(--tint), transparent),
            color-mix(in srgb, var(--accent-3) var(--tint), transparent));
  --veil-page: linear-gradient(160deg,
            color-mix(in srgb, var(--accent-1) calc(var(--tint) * 1.4), transparent),
            color-mix(in srgb, var(--accent-2) calc(var(--tint) * 0.7), transparent),
            color-mix(in srgb, var(--accent-3) calc(var(--tint) * 1.4), transparent));

  --ok:        #21b785;
  --warn:      #eaa62c;
  --danger:    #ec5f6e;

  /* Cuadrantes Eisenhower */
  --q1: #ec5f6e;   /* hacer ya */
  --q2: #21b785;   /* planificar */
  --q3: #eaa62c;   /* delegar */
  --q4: #98a1bb;   /* eliminar */

  /* Radios y ritmo */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --gap: 18px;

  --ease: cubic-bezier(.4,.14,.3,1);
}

[data-theme="dark"]{
  --surface-base: #232733;
  --surface-2: #272c3a;
  --sh-dark:   #191c25;
  --sh-light:  #2e3444;

  --text:      #eef1f8;
  --text-2:    #a9b2c9;
  --text-3:    #757f99;

  /* Los acentos NO se redefinen aquí: el degradado que elija el
     usuario debe ser el mismo en claro y en oscuro. */
  --ok:        #35cf9b;
  --warn:      #f0b849;
  --danger:    #ff7383;

  --q1: #ff7383;
  --q2: #35cf9b;
  --q3: #f0b849;
  --q4: #7d87a3;
}

/* ─────────── Primitivas ─────────── */

/* Relieve (extruido) */
.neu{
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow:
     9px  9px 18px var(--sh-dark),
    -9px -9px 18px var(--sh-light);
}
.neu-sm{
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow:
     5px  5px 11px var(--sh-dark),
    -5px -5px 11px var(--sh-light);
}
/* Hundido (inset) */
.neu-in{
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow:
    inset 5px  5px 11px var(--sh-dark),
    inset -5px -5px 11px var(--sh-light);
}

/* Botón neumórfico: relieve en reposo, hundido al pulsar */
.neu-btn{
  --btn-fg: var(--text);
  appearance:none;
  border:0;
  cursor:pointer;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  color: var(--btn-fg);
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 10px 16px;
  line-height: 1.1;
  box-shadow:
     5px  5px 11px var(--sh-dark),
    -5px -5px 11px var(--sh-light);
  transition: box-shadow .18s var(--ease), transform .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.neu-btn:hover{ color: var(--accent-txt); }
.neu-btn:active,
.neu-btn.is-on{
  box-shadow:
    inset 4px  4px 9px var(--sh-dark),
    inset -4px -4px 9px var(--sh-light);
  transform: translateY(1px);
  color: var(--accent-txt);
}
.neu-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

.neu-btn.icon{ padding: 9px 13px; font-size: 16px; }
.neu-btn.tiny{ padding: 7px 11px; font-size: 12px; border-radius: var(--r-sm); box-shadow: 3px 3px 7px var(--sh-dark), -3px -3px 7px var(--sh-light); }
.neu-btn.big{ padding: 13px 18px; font-size: 14px; }
.neu-btn.primary{ --btn-fg: var(--accent-txt); }
.neu-btn.accent{ --btn-fg: var(--accent-txt); }
.neu-btn.danger{ --btn-fg: var(--danger); }
.neu-btn.danger:hover{ color: var(--danger); }

/* Campos de formulario hundidos */
input[type="text"], input[type="time"], input[type="date"],
input[type="number"], select, textarea{
  appearance:none;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 0;
  border-radius: var(--r-sm);
  padding: 11px 13px;
  width: 100%;
  box-shadow:
    inset 3px  3px 7px var(--sh-dark),
    inset -3px -3px 7px var(--sh-light);
  transition: box-shadow .18s var(--ease);
}
input:focus, select:focus, textarea:focus{
  outline: none;
  box-shadow:
    inset 3px 3px 7px var(--sh-dark),
    inset -3px -3px 7px var(--sh-light),
    0 0 0 2px var(--accent);
}
textarea{ resize: vertical; }
select{ cursor: pointer; }
input[type="color"].color{ padding: 4px; height: 40px; cursor: pointer; }

/* Interruptor neumórfico */
.switch{
  appearance:none;
  width: 46px; height: 26px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 3px 3px 6px var(--sh-dark), inset -3px -3px 6px var(--sh-light);
  position: relative; cursor: pointer; flex: 0 0 auto;
  transition: box-shadow .2s var(--ease);
}
.switch::after{
  content:""; position:absolute; top:4px; left:4px;
  width:18px; height:18px; border-radius:50%;
  background: var(--surface);
  box-shadow: 2px 2px 5px var(--sh-dark), -2px -2px 5px var(--sh-light);
  transition: transform .22s var(--ease), background .22s var(--ease);
}
.switch:checked::after{ transform: translateX(20px); background: var(--accent); }

/* Chip / píldora */
.chip{
  appearance:none; border:0; cursor:pointer; font:inherit;
  font-size:11px; font-weight:700; letter-spacing:.03em;
  color: var(--text-2);
  background: var(--surface);
  border-radius: 999px;
  padding: 6px 12px;
  box-shadow: 3px 3px 7px var(--sh-dark), -3px -3px 7px var(--sh-light);
  transition: all .18s var(--ease);
}
.chip.is-on{
  color: var(--accent-txt);
  box-shadow: inset 3px 3px 6px var(--sh-dark), inset -3px -3px 6px var(--sh-light);
}

.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 26px; height: 24px; padding: 0 8px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--text-2);
}

/* ─────────── Velo de color sobre la interfaz ───────────
   Se aplica DESPUÉS de las primitivas: éstas usan el atajo
   `background`, que reinicia background-image, así que el velo
   tiene que llegar más tarde en la hoja para sobrevivir. */
.neu, .neu-sm, .neu-in,
.sidebar, .panel, .composer, .quad, .drawer, .auth-card,
.alarm-box, .toast, .focus-dial, .guide-head, .date-nav{
  background-image: var(--veil);
}