:root {
  --tinta: #2F4156;
  --tinta-2: #3a5069;
  --hueso: #F6F2EA;
  --papel: #FFFFFF;
  --verde: #4C7A5A;
  --texto: #24303C;
  --suave: #5C6B7A;
  --linea: #E4DED2;
  --ambar: #B9791F;
  --rojo: #B23B2E;
  --sombra: 0 1px 3px rgba(20,30,45,.08), 0 4px 16px rgba(20,30,45,.06);
  --r: 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --hueso: #161B22; --papel: #1D242D; --texto: #E8EDF2; --suave: #9AA7B4;
    --linea: #2C353F; --tinta: #C8D6E5; --tinta-2: #A9BCD0;
    --sombra: 0 1px 3px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.3);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--hueso); color: var(--texto);
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Barra superior */
.barra {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: calc(env(safe-area-inset-top) + 14px) 18px 14px;
  background: var(--tinta); color: #fff;
}
.marca { display: flex; align-items: center; gap: 12px; }
.logo { font-size: 26px; line-height: 1; }
.titulo { font-size: 20px; font-weight: 700; }
.sub { font-size: 12px; opacity: .8; }
.estado { display: flex; align-items: center; gap: 10px; }
.badge {
  font-size: 12px; font-weight: 600; background: rgba(255,255,255,.16);
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}
.icono {
  background: rgba(255,255,255,.14); color: #fff; border: 0; cursor: pointer;
  width: 38px; height: 38px; border-radius: 10px; font-size: 18px;
}
.icono:active { transform: scale(.96); }

/* Tabs */
.tabs {
  display: flex; gap: 4px; padding: 10px 14px 0;
  position: sticky; top: 0; background: var(--hueso);
}
.tab {
  flex: 1; border: 0; background: transparent; color: var(--suave);
  font-size: 15px; font-weight: 600; padding: 12px 8px; cursor: pointer;
  border-bottom: 3px solid transparent;
}
.tab.activa { color: var(--tinta); border-bottom-color: var(--tinta); }

main { padding: 14px; max-width: 940px; margin: 0 auto; }

/* ── Barra de día (agenda) ─────────────────────────────────────────────── */
.dia-barra {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r);
  padding: 10px 12px; box-shadow: var(--sombra);
}
.dia-info { flex: 1; min-width: 0; }
.dia-titulo { font-size: 18px; font-weight: 700; color: var(--tinta); }
.dia-resumen { font-size: 13px; color: var(--suave); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-dia, .nav-hoy {
  border: 1px solid var(--linea); background: var(--hueso); color: var(--texto);
  border-radius: 10px; cursor: pointer; font: inherit;
}
.nav-dia { width: 42px; height: 42px; font-size: 22px; line-height: 1; }
.nav-hoy { padding: 0 14px; height: 42px; font-weight: 600; }
.nav-dia:active, .nav-hoy:active { transform: scale(.96); }

/* ── Línea de tiempo ───────────────────────────────────────────────────── */
.agenda-scroll {
  position: relative; overflow-y: auto; -webkit-overflow-scrolling: touch;
  height: calc(100dvh - 218px); min-height: 300px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r);
  box-shadow: var(--sombra);
}
.timeline { position: relative; }
.hlinea { position: absolute; left: 52px; right: 8px; height: 1px; background: var(--linea); }
.hlabel { position: absolute; left: 6px; width: 42px; text-align: right; transform: translateY(-8px);
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--suave); }

.bloque {
  position: absolute; overflow: hidden; box-sizing: border-box;
  background: var(--hueso); border: 1px solid var(--linea);
  border-left: 4px solid var(--tinta); border-radius: 9px;
  padding: 5px 9px; cursor: default;
}
.bloque .b-hora { font-size: 11px; font-weight: 700; color: var(--suave);
  font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; }
.bloque .b-nombre { font-size: 15px; font-weight: 600; color: var(--texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloque .b-serv { font-size: 12px; color: var(--suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-pill { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }

/* Colores por estado (borde + acento) */
.bloque.confirmada { border-left-color: var(--verde); background: #EEF5EF; }
.bloque.programada { border-left-color: #3E6C99; background: #EDF3F9; }
.bloque.completada { border-left-color: #7C8B99; background: #F1F3F5; }
.bloque.cancelada, .bloque.no_asistio { border-left-color: #B9B9B9; background: #F4F4F4; opacity: .7; }
.bloque.cancelada .b-nombre, .bloque.no_asistio .b-nombre { text-decoration: line-through; }
.bloque.proxima { box-shadow: 0 0 0 2px var(--tinta); }
.b-pill.confirmada { background: #DCEEDF; color: #1E7D34; }
.b-pill.programada { background: #DEEAF6; color: #2F4156; }
.b-pill.completada { background: #E4E8EB; color: #5C6B7A; }
.b-pill.cancelada, .b-pill.no_asistio { background: #E6E6E6; color: #71797E; }

.ahora { position: absolute; left: 52px; right: 8px; height: 2px; background: var(--rojo); z-index: 3; }
.ahora-pt { position: absolute; left: -5px; top: -4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--rojo); }

.vacio-dia { text-align: center; color: var(--suave); padding: 48px 20px; }
.vacio-dia b { display: block; color: var(--texto); font-size: 17px; margin-bottom: 6px; }

@media (prefers-color-scheme: dark) {
  .bloque.confirmada { background: #17301c; }
  .bloque.programada { background: #16283a; }
  .bloque.completada { background: #22282e; }
  .bloque.cancelada, .bloque.no_asistio { background: #242424; }
  .b-pill.confirmada { background: #1c3b25; color: #6fc389; }
  .b-pill.programada { background: #1d2f42; color: #9cc0e6; }
}
.vista.oculto, .oculto { display: none; }
.meta { color: var(--suave); font-size: 13px; margin: 4px 2px 12px; }

/* Aviso */
.aviso {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r);
  padding: 22px; text-align: center; color: var(--suave); box-shadow: var(--sombra);
}
.aviso b { color: var(--texto); display: block; margin-bottom: 6px; font-size: 16px; }

/* Listas y tarjetas */
.lista { display: flex; flex-direction: column; gap: 10px; }
.card {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r);
  padding: 14px 16px; box-shadow: var(--sombra);
  display: flex; align-items: center; gap: 14px;
}
.hora {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 17px;
  color: var(--tinta); min-width: 62px; text-align: center;
}
.card .cuerpo { flex: 1; min-width: 0; }
.card .nombre { font-size: 16px; font-weight: 600; }
.card .detalle { font-size: 13px; color: var(--suave); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .lado { text-align: right; white-space: nowrap; }
.monto { font-weight: 700; font-variant-numeric: tabular-nums; }
.saldo { font-size: 12px; color: var(--ambar); }

.pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.pill.confirmada, .pill.Pagado { background: #E4F2E8; color: #1E7D34; }
.pill.programada { background: #EAF1F8; color: #2F4156; }
.pill.Parcial { background: #FBF0DE; color: var(--ambar); }
.pill.Pendiente { background: #FBE9E6; color: var(--rojo); }
.pill.cancelada, .pill.no_asistio, .pill.Cancelado { background: #ECECEC; color: #71797E; }
.chip-fact { font-size: 11px; font-weight: 700; color: var(--verde); }

@media (prefers-color-scheme: dark) {
  .pill.confirmada, .pill.Pagado { background: #16351f; color: #67c187; }
  .pill.programada { background: #1c2b3b; color: #9cc0e6; }
  .pill.Parcial { background: #3a2c12; color: #e0a955; }
  .pill.Pendiente { background: #3a1c18; color: #e08a80; }
}

/* Diálogo de configuración */
dialog {
  border: 0; border-radius: 16px; padding: 0; max-width: 480px; width: 92%;
  background: var(--papel); color: var(--texto); box-shadow: var(--sombra);
}
dialog::backdrop { background: rgba(20,30,45,.45); }
.config { padding: 22px; }
.config h2 { margin: 0 0 14px; font-size: 20px; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.campo span { font-weight: 600; font-size: 14px; }
.campo small { color: var(--suave); font-size: 12px; line-height: 1.35; }
.campo input {
  font: inherit; padding: 11px 12px; border: 1px solid var(--linea);
  border-radius: 10px; background: var(--hueso); color: var(--texto);
}
.ayuda-txt { color: var(--suave); font-size: 13px; line-height: 1.4; margin: 0 0 14px; }
.msg { font-size: 13px; font-weight: 600; color: var(--verde); min-height: 18px; margin: 6px 2px 0; }
.avanzado { margin: 8px 0 14px; }
.avanzado summary { cursor: pointer; color: var(--suave); font-size: 13px; font-weight: 600; padding: 6px 0; }
.avanzado[open] summary { margin-bottom: 10px; }
.botones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.btn-pri, .btn-sec { font: inherit; font-weight: 600; padding: 10px 18px;
  border-radius: 10px; cursor: pointer; border: 1px solid var(--linea); }
.btn-pri { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.btn-sec { background: transparent; color: var(--texto); }