/* ============================================================
   ajustes.css – Tiempo, Ajustes (avisos, plan, cuenta), hoja de
   Croptia Pro, aviso del plan en Hoy e Instalaciones (servicios).
   Usa los tokens y componentes de app-shell.css (docs/diseno.md).
   ============================================================ */

.loading-inline { padding: 4px 0; justify-content: flex-start; }

.form-error {
  color: var(--heat);
  font-size: 0.875rem;
  margin: 6px 0 2px;
}

/* ===================== Tiempo ===================== */

.wx-header h1 { margin-bottom: 4px; }
.wx-where { color: var(--stone); font-size: 0.9375rem; margin-bottom: 24px; }

.wx-alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.wx-alert-when { font-weight: 400; color: var(--stone); font-size: 0.875rem; }
.wx-alert-body { font-size: 0.9375rem; line-height: 1.45; margin-top: 2px; }

.wx-now {
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--r-sheet);
  padding: 20px;
  margin-bottom: 28px;
}

.wx-now-main { display: flex; align-items: center; gap: 16px; }

.wx-now-temp {
  font-size: 3.5rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.wx-now-text { font-size: 1.0625rem; font-weight: 500; color: var(--ink); }
.wx-now-emoji { margin-right: 6px; }
.wx-now-range { color: var(--stone); font-size: 0.9375rem; font-variant-numeric: tabular-nums; margin-top: 2px; }

.wx-sun {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--stone);
  font-size: 0.875rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.wx-muted { color: var(--stone); font-size: 0.8125rem; line-height: 1.45; }

.wx-block { margin-bottom: 28px; }

.wx-day {
  position: relative;
  padding: 12px 16px;
}

.wx-day + .wx-day::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  border-top: 1px solid var(--line);
}

.wx-day-top {
  display: grid;
  grid-template-columns: 72px 28px 36px 1fr 36px;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.wx-day-name { font-weight: 500; font-size: 1rem; }
.wx-day.is-today .wx-day-name { color: var(--forest); font-weight: 600; }
.wx-day-emoji { font-size: 1.25rem; text-align: center; }
.wx-day-min { color: var(--stone); text-align: right; font-size: 0.9375rem; }
.wx-day-max { font-weight: 600; font-size: 0.9375rem; }

.wx-range {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: var(--hover);
}

.wx-range span {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 2px;
  background: var(--stone-light);
  min-width: 4px;
}

.wx-day.is-today .wx-range span { background: var(--forest); }

.wx-day-facts {
  margin-top: 4px;
  padding-left: 80px;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--stone);
  font-variant-numeric: tabular-nums;
}

.wx-day-facts .is-rain { color: var(--frost); font-weight: 500; }
.wx-day-facts .is-wind { color: var(--heat); font-weight: 500; }

.wx-past {
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--r-sheet);
  padding: 16px;
}

.wx-balance {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 16px;
}

.wx-balance strong { font-weight: 600; }

.wx-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  height: 104px;
  align-items: end;
}

.wx-bar-day { display: flex; flex-direction: column; align-items: center; height: 100%; gap: 4px; }
.wx-bar-pair { flex: 1; width: 100%; display: flex; justify-content: center; align-items: flex-end; gap: 3px; }
.wx-bar { width: 40%; max-width: 12px; border-radius: 3px 3px 0 0; min-height: 2px; }
.wx-bar-rain { background: var(--frost); }
.wx-bar-et0 { background: var(--soil); opacity: 0.55; }
.wx-bar-label { font-size: 0.75rem; color: var(--stone); }

.wx-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.875rem;
  margin: 12px 0 8px;
  font-variant-numeric: tabular-nums;
}

.wx-legend strong { font-weight: 600; }
.wx-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.wx-dot-rain { background: var(--frost); }
.wx-dot-et0 { background: var(--soil); opacity: 0.55; }

.wx-footer { margin-bottom: 12px; }
.wx-link { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.wx-link .icon { color: var(--leaf); }
.wx-credit { font-size: 0.8125rem; color: var(--stone); padding: 0 4px; }
.wx-credit a { color: inherit; }

/* ===================== Ajustes ===================== */

.settings-group { margin-bottom: 28px; }

.settings-subgroup { margin-top: 20px; }

.group-foot {
  margin: 8px 16px 0;
  color: var(--stone);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Fila con texto libre (explicación, botón grande) dentro de una lista */
.list-row.settings-block {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.settings-block p { line-height: 1.5; }
.settings-block .settings-note { margin: 0; }

.settings-cta .btn-pill-primary { align-self: flex-start; }

.list-row.settings-info {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.45;
  font-size: 0.9375rem;
}

.settings-info > .icon { color: var(--stone); margin-top: 1px; }
.settings-info.is-warn > .icon { color: var(--heat); }

/* Fila-acción: un botón de texto a lo ancho */
.list-row.settings-action {
  color: var(--leaf);
  font-weight: 500;
}

.list-row.settings-action.is-muted { color: var(--stone); }
.list-row.settings-action.is-danger { color: var(--heat); }

.settings-on {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--leaf);
}

.settings-on .icon svg { width: 18px; height: 18px; }

.settings-trail { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.settings-zone > .list-row-text { flex-shrink: 0; white-space: nowrap; }

.settings-link { justify-content: flex-start; }
.settings-link > .icon { color: var(--leaf); }
.settings-link .list-row-text { flex: 1; }

.btn-push-big { width: 100%; }

.pref-row { cursor: pointer; }

.pro-chip {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--forest);
  background: var(--leaf-tint);
  border-radius: 999px;
  padding: 1px 8px;
  vertical-align: 1px;
}

/* Interruptor */
.switch {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: var(--line-strong);
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
  margin: 0;
}

.switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sheet);
  box-shadow: 0 1px 2px rgba(28, 33, 25, 0.2);
  transition: transform 0.15s;
}

.switch:checked { background: var(--leaf); }
.switch:checked::after { transform: translateX(18px); }
.switch:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.settings-select {
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  font-family: inherit;
  font-size: 16px;
  background: var(--sheet);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.tz-hint { font-size: 0.875rem; color: var(--stone); }

.btn-link-inline {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--leaf);
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

/* Desplegables (cambiar contraseña, últimos avisos) */
.settings-details > summary {
  cursor: pointer;
  list-style: none;
}

.settings-details > summary::-webkit-details-marker { display: none; }
.settings-details-chevron svg { transition: transform 0.15s; }
.settings-details[open] > summary .settings-details-chevron svg { transform: rotate(180deg); }

.settings-details > summary.list-row:hover { background: var(--hover); }

.settings-history > summary.group-title {
  justify-content: flex-start;
  min-height: 44px;
  align-items: center;
  margin-bottom: 0;
}

.settings-history[open] > summary { margin-bottom: 8px; }

.settings-details .sheet-form {
  padding: 0 16px 16px;
}

.settings-details .sheet-form .btn-pill { margin-top: 12px; align-self: flex-start; }

/* Las filas que siguen a un desplegable conservan el separador */
.settings-details + .list-row::before,
.list-row + .settings-details > summary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  border-top: 1px solid var(--line);
}

.settings-details > summary.list-row { position: relative; }

.notif-row { justify-content: flex-start; align-items: flex-start; gap: 12px; }
.notif-row > .icon { color: var(--stone); margin-top: 2px; }
.notif-title { font-weight: 500; font-size: 0.9375rem; }
.notif-meta { font-size: 0.8125rem; color: var(--stone-light); }

.settings-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 12px 16px 0;
  font-size: 0.875rem;
}

.settings-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--stone);
}

.settings-legal .danger-link { color: var(--heat); }

/* ---- Plan ---- */

.plan-now-badge { color: var(--ink); font-weight: 500; }
.plan-now-badge.is-pro { color: var(--forest); font-weight: 600; }
.plan-now-note { color: var(--soil); }

.plan-warn { margin-top: 12px; }

.plan-opts {
  display: flex;
  flex-direction: column;
  margin: 12px 0 4px;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--r-sheet);
  overflow: hidden;
}

.plan-opt {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'title price' 'sub sub';
  gap: 2px 12px;
  align-items: baseline;
  width: 100%;
  min-height: 60px;
  text-align: left;
  padding: 14px 16px;
  border: none;
  background: var(--sheet);
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s;
}

.plan-opt + .plan-opt::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  border-top: 1px solid var(--line);
}

.plan-opt:hover:not(:disabled) { background: var(--hover); }
.plan-opt:disabled { cursor: not-allowed; opacity: 0.55; }
.plan-opt.is-busy { cursor: wait; opacity: 0.7; }
.plan-opt-title { grid-area: title; font-weight: 500; font-size: 1rem; }
.plan-opt-price { grid-area: price; font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan-opt-sub { grid-area: sub; font-size: 0.875rem; color: var(--stone); }
/* Nota bajo el plan anual («Tu prueba sigue hasta entonces»): fila propia, no encima de sub */
.plan-opt-note { grid-area: auto; grid-column: 1 / -1; color: var(--forest); }

.plan-opt-main { background: var(--leaf-tint); }
.plan-opt-main:hover:not(:disabled) { background: var(--leaf-tint); filter: brightness(0.97); }
.plan-opt-main .plan-opt-title,
.plan-opt-main .plan-opt-price { color: var(--forest); font-weight: 600; }

.plan-opt-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--forest);
  background: var(--sheet);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: 1px;
}

.plan-opt-tag-earth { color: var(--soil); background: var(--soil-tint); }

.plan-soon {
  margin: 8px 16px 0;
  color: var(--soil);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* ---- Hoja "Croptia Pro" ---- */

.upgrade-reason {
  background: var(--leaf-tint);
  color: var(--forest);
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 500;
  font-size: 0.9375rem;
  margin-bottom: 12px;
}

.pro-list { list-style: none; margin: 0 0 16px; }

.pro-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
}

.pro-list li + li { border-top: 1px solid var(--line); }
.pro-list li > .icon { color: var(--leaf); margin-top: 2px; }
.pro-list strong { display: block; font-size: 1rem; font-weight: 500; }
.pro-list small { display: block; color: var(--stone); font-size: 0.875rem; line-height: 1.4; }

.upgrade-plans .plan-opts { margin-top: 0; }
.upgrade-plans .plan-soon { margin-left: 0; margin-right: 0; }

/* ---- Aviso del plan en Hoy ---- */

.notice.plan-banner {
  align-items: center;
  padding: 4px 4px 4px 16px;
  margin: -12px 0 24px;
}

.plan-banner p { flex: 1; min-width: 0; color: var(--ink); }
.plan-banner .btn-text { margin: 0; flex-shrink: 0; }

/* ===================== Instalaciones (servicios) ===================== */

.svc-intro { color: var(--stone); line-height: 1.5; margin: -12px 0 20px; }

.svc-coverage { margin-bottom: 28px; }
.svc-coverage a { color: var(--leaf); }

.svc-grid { border: none; padding: 0; margin: 0 0 8px; min-width: 0; }
.svc-grid legend { padding: 0; margin-bottom: 8px; }

.svc-h2 { margin: 24px 0 0; }

/* Filas seleccionables: la casilla redonda a la derecha */
.sheet-form .svc-card {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink);
  justify-content: flex-start;
  gap: 12px;
  cursor: pointer;
}

.svc-card input { position: absolute; opacity: 0; pointer-events: none; width: 1px !important; min-height: 0 !important; }
.svc-card-icon { color: var(--leaf); display: inline-flex; }
.svc-card-text { flex: 1; }
.svc-card-title { font-weight: 500; }

.svc-card-check {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--stone-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sheet);
  transition: background 0.15s, border-color 0.15s;
}

.svc-card-check .icon svg { width: 14px; height: 14px; stroke-width: 2.4; opacity: 0; }

.svc-card input:checked ~ .svc-card-check { background: var(--leaf); border-color: var(--leaf); }
.svc-card input:checked ~ .svc-card-check .icon svg { opacity: 1; }
.svc-card input:focus-visible ~ .svc-card-check { box-shadow: var(--focus-ring); }

.sheet-form .svc-consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 16px;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  cursor: pointer;
}

.svc-consent input { width: 20px !important; height: 20px; min-height: 0 !important; flex-shrink: 0; margin-top: 2px; accent-color: var(--leaf); }
.svc-consent a { color: var(--leaf); }
.svc-submit { margin-top: 16px; align-self: stretch; min-height: 48px; }

/* ---- Accesos en Diseño ---- */

.sidebar-services {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: auto 14px 0;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: var(--r-ctl);
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.85rem;
}

.sidebar-services:hover { background: var(--hover); }
.sidebar-services + .sidebar-plan { margin-top: 0; }
.sidebar-services > .icon { color: var(--leaf); }
.sidebar-services > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.sidebar-services strong { font-weight: 600; }
.sidebar-services small { color: var(--stone); }

@media (min-width: 640px) {
  .btn-push-big { width: auto; align-self: flex-start; }
}

@media (max-width: 480px) {
  .wx-day-top { grid-template-columns: 64px 26px 34px 1fr 34px; }
  .wx-day-facts { padding-left: 72px; }
}

@media (max-width: 380px) {
  .wx-day-top { grid-template-columns: 60px 24px 32px 1fr 32px; gap: 6px; }
  .wx-day-facts { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .switch, .switch::after, .plan-opt, .svc-card-check, .settings-details-chevron svg { transition: none; }
}

/* ---- Beta: acceso anticipado y reserva del precio de fundador ---- */

.plan-early { margin-top: 12px; }
.plan-reserve { width: 100%; margin-top: 12px; }
.plan-reserve + .group-foot { margin-top: 8px; }
.plan-reserved { margin-top: 12px; }
.plan-reserved-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--forest); }
.plan-reserved-title .icon { color: var(--leaf); }
.upgrade-free { margin: -4px 0 16px; }

@media (min-width: 640px) {
  .plan-reserve { width: auto; }
}
.delete-account-confirm { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.sheet-form .delete-account-confirm input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; accent-color: var(--leaf); }