/* ============================================================
   RECORDATORIOS
   ============================================================ */

/* Aviso de reparto de papeles: el navegador configura, el móvil avisa.
   Se dice una vez y en sitio, no en un tooltip que nadie abre. */
.rem-note {
  font-size: var(--fs-caption1);
  letter-spacing: var(--tr-caption1);
  color: var(--text-secondary);
  background: var(--fill-quaternary);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  line-height: var(--lh-callout);
}

/* ---- Lista ---- */
.rem-item {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px; padding: 14px 16px;
}
.rem-info { flex: 1; min-width: 0; }
.rem-title {
  font-size: var(--fs-callout);
  letter-spacing: var(--tr-callout);
  font-weight: 600;
  color: var(--text-primary);
  transition: color var(--dur-base) var(--ease-out);
}
.rem-title.rem-off { color: var(--text-muted); }
.rem-freq {
  font-size: var(--fs-caption1);
  letter-spacing: var(--tr-caption1);
  color: var(--text-secondary);
  margin-top: 2px;
}
.rem-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.rem-link {
  background: color-mix(in srgb, var(--accent-dashboard) 18%, transparent);
  color: var(--accent-dashboard);
}
.rem-next {
  font-size: var(--fs-caption2);
  letter-spacing: var(--tr-caption2);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   FORMULARIO
   Cada decisión es un bloque con su cabecera fuera de la tarjeta,
   como las secciones de un formulario de iOS. Sin esa separación
   todo se leía como una única lista de controles sueltos.
   ============================================================ */
/* Medida cómoda: a todo el ancho de un monitor, la etiqueta y su control
   acaban en extremos opuestos de la pantalla y dejan de leerse como pareja. */
.rem-form, .rem-list { max-width: 680px; }

.rem-form-title {
  font-size: var(--fs-title3);
  line-height: var(--lh-title3);
  letter-spacing: var(--tr-title3);
  font-weight: 700;
  margin-bottom: 20px;
}

.rem-group + .rem-group { margin-top: 22px; }
.rem-group-title {
  font-size: var(--fs-caption1);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px 2px;
}
.rem-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
[data-theme="light"] .rem-card { border-color: transparent; }

/* Fila: etiqueta a la izquierda, control a la derecha. En `.stack` el
   control baja debajo, que es lo que necesitan las pastillas. */
.rem-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.rem-row:last-child { border-bottom: none; }
.rem-row.stack { flex-direction: column; align-items: stretch; gap: 10px; }
.rem-row-label {
  font-size: var(--fs-body);
  letter-spacing: var(--tr-body);
  color: var(--text-primary);
  flex-shrink: 0;
}
.rem-row.stack .rem-row-label {
  font-size: var(--fs-caption1);
  letter-spacing: var(--tr-caption1);
  color: var(--text-secondary);
}
/* El campo de texto a solas ocupa toda la fila. */
.rem-row > input[type=text] { width: 100%; }

.rem-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
/* `input[type=number]` de components.css pone width:100% y su especificidad es
   mayor que la de una clase suelta: hay que igualarla para poder estrecharlos. */
input.rem-num { width: 76px; text-align: center; font-variant-numeric: tabular-nums; }
input.rem-time { width: 124px; font-variant-numeric: tabular-nums; }
input.rem-date { width: 160px; }

/* ============================================================
   SEGMENTADO
   Una sola barra con el elegido en relieve: la forma continua ya
   dice que la elección es excluyente. No se puede confundir con
   las pastillas sueltas de debajo.
   ============================================================ */
.seg {
  display: flex; gap: 2px; padding: 2px;
  background: var(--fill-quaternary);
  border-radius: var(--radius-sm);
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.seg::-webkit-scrollbar { display: none; }
.seg-btn {
  flex: 1 1 auto; min-width: max-content;
  padding: 8px 12px;
  border-radius: calc(var(--radius-sm) - 3px);
  color: var(--text-secondary);
  font-size: var(--fs-footnote); letter-spacing: var(--tr-footnote); font-weight: 500;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.seg-btn:active { transform: scale(0.97); }
/* El elegido se eleva. En oscuro aclarando; en claro, con la tarjeta
   blanca y sombra, que es como se separa del carril gris. */
.seg-btn.on { background: var(--bg-card-hover); color: var(--text-primary); font-weight: 600; }
[data-theme="light"] .seg-btn.on { background: var(--bg-card); box-shadow: var(--shadow-chip); }

/* En pantallas estrechas los cinco segmentos no caben y el último quedaba
   cortado. Se aprietan antes de recurrir al scroll. */
@media (max-width: 560px) {
  .seg-btn { padding: 8px 8px; font-size: var(--fs-caption1); letter-spacing: var(--tr-caption1); }
}

/* ============================================================
   PASTILLAS
   Lista abierta de elementos: contorno cuando no, y acento con
   marca de verificación cuando sí. El check es lo que hace que
   «elegido» no dependa solo de un tono de gris.
   ============================================================ */
.rem-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rem-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: transparent; border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--fs-footnote); letter-spacing: var(--tr-footnote);
  max-width: 100%;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.rem-chip:active { transform: scale(0.96); }
.rem-chip.on {
  background: color-mix(in srgb, var(--accent-dashboard) 16%, transparent);
  border-color: var(--accent-dashboard);
  color: var(--accent-dashboard);
  font-weight: 600;
}
.rem-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rem-chip-check { display: inline-flex; flex-shrink: 0; }
.rem-chip-check svg { width: 12px; height: 12px; display: block; }

/* Día de la semana: cuadrado, para que los siete quepan en una fila. */
.rem-day {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--fs-footnote); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.rem-day:active { transform: scale(0.92); }
.rem-day.on { background: var(--accent-dashboard); border-color: var(--accent-dashboard); color: var(--on-accent); }

/* ---- Explicación inicial ---- */
.rem-tip-title {
  font-size: var(--fs-headline);
  line-height: var(--lh-headline);
  letter-spacing: var(--tr-headline);
  font-weight: 700;
  margin-bottom: 10px;
}
.rem-tip-text {
  font-size: var(--fs-body);
  letter-spacing: var(--tr-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* ============================================================
   INTERRUPTOR
   El pomo se desliza de un extremo al otro; el estado no parpadea.
   Al pulsarlo se estira, como el del sistema: es un elemento
   absoluto y sin hijos, así que animar su ancho no relayouta nada.
   ============================================================ */
.switch {
  position: relative; flex-shrink: 0;
  width: 51px; height: 31px; padding: 0; border: none;
  border-radius: var(--radius-pill);
  background: var(--fill-secondary);
  transition: background var(--dur-base) var(--ease-out);
}
.switch.on { background: var(--sys-green); }
.switch-knob {
  position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25), 0 1px 1px rgba(0,0,0,0.16);
  transition: transform var(--dur-base) var(--ease-out), width var(--dur-fast) var(--ease-out);
}
.switch.on .switch-knob { transform: translateX(20px); }
.switch:active .switch-knob { width: 31px; }
/* Encendido y pulsado: el pomo crece hacia dentro, su borde derecho no se mueve. */
.switch.on:active .switch-knob { transform: translateX(16px); }

/* ============================================================
   CAMPANA
   ============================================================ */
.rem-bell { color: var(--text-muted); }
.rem-bell.on { color: var(--bell-accent, var(--accent-dashboard)); }
.rem-bell svg { width: 17px; height: 17px; display: block; }

@media (hover: hover) and (pointer: fine) {
  .rem-chip:hover:not(.on) { background: var(--fill-tertiary); border-color: var(--border-hover); }
  .rem-day:hover:not(.on) { background: var(--fill-tertiary); border-color: var(--border-hover); }
  .seg-btn:hover:not(.on) { color: var(--text-primary); }
  .switch:hover { filter: brightness(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .switch-knob { transition: transform 140ms linear; }
  .switch:active .switch-knob { width: 27px; }
}