/* Al Día · Reservas
   Estilo sobrio inspirado en Airbnb: blanco, líneas finas, un solo acento (el verde del logo). */

:root {
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bg: #FFFFFF;
  --soft: #F7F7F7;
  --line: #DDDDDD;
  --line-strong: #B0B0B0;
  --hair: #EBEBEB;
  --ink: #222222;
  --ink-2: #3F3F3F;
  --muted: #6A6A6A;
  --primary: #2F6B47;
  --primary-2: #245638;
  --primary-soft: #EDF4EF;
  --on-primary: #FFFFFF;
  --gold: #946604;
  --gold-soft: #FBF5E6;
  --sky: #5A9FB5;
  --sky-ink: #2C6E82;
  --ok: #2E7D4B;
  --ok-soft: #EAF5EE;
  --warn: #B26B00;
  --warn-soft: #FFF5E5;
  --danger: #C13515;
  --danger-soft: #FDEEEA;
  --night: #1F3A2B;
  --on-night: #F2D58A;
  --shadow: 0 6px 16px rgba(0, 0, 0, .08);
  --shadow-pill: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .06);
  --shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, .35);
  --r: 16px;
  --r-md: 12px;
  --nav-h: 64px;
  --gutter: 20px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121212;
    --soft: #1D1D1D;
    --line: #3A3A3A;
    --line-strong: #5A5A5A;
    --hair: #2A2A2A;
    --ink: #F2F2F2;
    --ink-2: #D2D2D2;
    --muted: #A3A3A3;
    --primary: #5BAF7E;
    --primary-2: #6EC191;
    --primary-soft: #1A2B20;
    --on-primary: #07130C;
    --gold: #E2B95C;
    --gold-soft: #2A2416;
    --sky: #5FB2C9;
    --sky-ink: #8ACDDD;
    --ok: #5DC489;
    --ok-soft: #15291D;
    --warn: #F0A63A;
    --warn-soft: #2E2311;
    --danger: #FF7A66;
    --danger-soft: #3A1A15;
    --night: #2D4A39;
    --on-night: #F2D58A;
    --shadow: 0 0 0 1px #2A2A2A;
    --shadow-pill: 0 0 0 1px #333;
    --shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}

/* Si la persona eligió modo oscuro a mano (data-theme), también aplica */
:root[data-theme="dark"] {
    --bg: #121212;
    --soft: #1D1D1D;
    --line: #3A3A3A;
    --line-strong: #5A5A5A;
    --hair: #2A2A2A;
    --ink: #F2F2F2;
    --ink-2: #D2D2D2;
    --muted: #A3A3A3;
    --primary: #5BAF7E;
    --primary-2: #6EC191;
    --primary-soft: #1A2B20;
    --on-primary: #07130C;
    --gold: #E2B95C;
    --gold-soft: #2A2416;
    --sky: #5FB2C9;
    --sky-ink: #8ACDDD;
    --ok: #5DC489;
    --ok-soft: #15291D;
    --warn: #F0A63A;
    --warn-soft: #2E2311;
    --danger: #FF7A66;
    --danger-soft: #3A1A15;
    --night: #2D4A39;
    --on-night: #F2D58A;
    --shadow: 0 0 0 1px #2A2A2A;
    --shadow-pill: 0 0 0 1px #333;
    --shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, .8);
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
button, a, label { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
b, strong { font-weight: 700; }
img { display: block; }
.ic { width: 20px; height: 20px; flex: none; }
.ic.fill { fill: currentColor; }
.ic.luna { width: .95em; height: .95em; vertical-align: -.1em; margin-right: 1px; stroke-width: 2.6; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.meta { font-size: 13px; color: var(--muted); }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.bad { color: var(--danger); }
.stack { display: grid; gap: 10px; }

/* ═════════ Estructura ═════════ */
.app { min-height: 100dvh; }
.sidebar { display: none; }
.main {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--gutter) calc(var(--nav-h) + env(safe-area-inset-bottom) + 32px);
}

/* Encabezado de las pestañas principales */
.phead { padding: calc(env(safe-area-inset-top) + 18px) 0 4px; }
.phead-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.phead-logo { height: 46px; width: auto; }
/* Logo que es solo un dibujo: el nombre del negocio va escrito al lado */
.phead-marca { display: flex; align-items: center; gap: 10px; color: var(--ink); min-width: 0; }
.phead-logo.emblema { height: 40px; width: 40px; flex: none; }
.logo-txt { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.logo-txt small { font-size: 10.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.logo-txt b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.phead-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.h-xl { font-size: 30px; font-weight: 750; letter-spacing: -.03em; line-height: 1.12; }
.lead { color: var(--muted); font-size: 16px; margin-top: 6px; }
.user-btn { display: block; border-radius: 50%; }

/* Barra superior de las páginas internas */
.subbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 88px 1fr 88px;
  align-items: center;
  margin: 0 calc(var(--gutter) * -1);
  padding: calc(env(safe-area-inset-top) + 8px) calc(var(--gutter) - 8px) 8px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--hair);
}
.subbar h1 { font-size: 16px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subbar-act { display: flex; justify-content: flex-end; }

.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 40px 0 16px; }
.h-sec { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.link { font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.divider { border: 0; height: 1px; background: var(--hair); margin: 32px 0; }

/* ═════════ Navegación ═════════ */
.tabbar {
  position: fixed;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding: 0 4px env(safe-area-inset-bottom);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--bg);
  border-top: 1px solid var(--hair);
}
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--muted); transition: color .2s; }
.tab .ic { width: 22px; height: 22px; stroke-width: 1.8; }
/* Pestaña activa: píldora verde suave detrás del ícono y texto en negrita */
.tab-ic { width: 54px; height: 30px; border-radius: 999px; display: grid; place-items: center; transition: background-color .2s, width .2s; }
.tab.on { color: var(--primary); font-weight: 750; }
.tab.on .tab-ic { background: var(--primary-soft); }
.tab.on .ic { stroke-width: 2.3; }
.tab:active .tab-ic { background: var(--soft); }
.tab-plus { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; }
.tab-plus .ic { width: 18px; height: 18px; stroke-width: 2.6; }
.tab-new { color: var(--ink); }

/* En las páginas internas no se muestra la barra inferior (como en Airbnb) */
body[data-route="reserva"] .tabbar, body[data-route="nueva"] .tabbar, body[data-route="editar"] .tabbar,
body[data-route="ajustes"] .tabbar, body[data-route="mensajes"] .tabbar { display: none; }
body[data-route="reserva"] .main, body[data-route="nueva"] .main, body[data-route="editar"] .main,
body[data-route="ajustes"] .main, body[data-route="mensajes"] .main { padding-bottom: 0; }

.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.brand img { height: 52px; width: auto; }
.brand img.emblema { height: 44px; }
.brand b { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; }
.brand span { font-size: 13px; color: var(--muted); }
.side-nav { display: grid; gap: 2px; }
.side-link { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 14px; border-radius: 12px; font-weight: 600; color: var(--ink-2); }
.side-link:hover { background: var(--soft); }
.side-link.on { background: var(--soft); color: var(--ink); font-weight: 700; }
.side-link.on .ic { color: var(--primary); }
.side-user { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--hair); }
.side-user:hover { background: var(--soft); }
.side-user b { display: block; font-size: 15px; }
.side-user small { color: var(--muted); font-size: 13px; }

@media (min-width: 1000px) {
  :root { --gutter: 48px; }
  .app { display: grid; grid-template-columns: 272px minmax(0, 1fr); }
  .sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 0;
    height: 100dvh;
    padding: 28px 20px 20px;
    border-right: 1px solid var(--hair);
  }
  .tabbar { display: none; }
  .main { width: 100%; max-width: 1040px; padding-bottom: 64px; }
  body[data-route="reserva"] .main, body[data-route="nueva"] .main, body[data-route="editar"] .main,
  body[data-route="ajustes"] .main, body[data-route="mensajes"] .main { max-width: 780px; }
  .phead { padding-top: 40px; }
  .phead-top { display: none; }
  .user-btn { display: none; }
  .h-xl { font-size: 34px; }
}

/* ═════════ Botones ═════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  user-select: none;
  transition: transform .1s ease, background-color .15s, opacity .15s;
}
.btn:hover { background: var(--soft); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-2); }
.btn.dark { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.ghost { border-color: transparent; text-decoration: underline; text-underline-offset: 3px; padding: 0 8px; }
.btn.ghost:hover { background: var(--soft); }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: 14px; border-radius: 8px; }
.btn.lg { min-height: 54px; font-size: 16px; }
.btn.block { display: flex; width: 100%; }
.btn.is-disabled { opacity: .45; }
.btn .ic { width: 19px; height: 19px; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); flex: none; }
.icon-btn:hover { background: var(--soft); }
.icon-btn .ic { width: 20px; height: 20px; }
.icon-btn.sm { width: 38px; height: 38px; color: var(--muted); }
.icon-btn.sm .ic { width: 17px; height: 17px; }

.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; flex: none; }
.avatar.lg { width: 48px; height: 48px; font-size: 17px; }
.avatar.xs { width: 26px; height: 26px; font-size: 10.5px; }
.av-m { background: var(--primary); }
.av-jp { background: #8E6A1F; }
.av-x { background: #717171; }

/* Estado de pago: punto + texto */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.st-pagado { color: var(--ok); }
.st-abonado { color: var(--warn); }
.st-pendiente { color: var(--danger); }
.st-sinvalor { color: var(--muted); }
.tg { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.tg .ic { width: 12px; height: 12px; }
.tg-excl { color: var(--gold); }
.tg-pend { color: var(--sky-ink); }
.tg-cancel { color: var(--muted); }

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 48px 20px; color: var(--muted); }
.empty > .ic { width: 34px; height: 34px; color: var(--line-strong); margin-bottom: 6px; stroke-width: 1.6; }
.empty b { color: var(--ink); font-size: 17px; }
.empty p { font-size: 15px; max-width: 32ch; }
.empty .btn { margin-top: 14px; }

.banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); font-size: 14.5px; }
.banner > span { flex: 1; }
.banner.info { background: var(--soft); }
.banner.bad { background: var(--danger-soft); color: var(--danger); }
.banner.excl { background: var(--gold-soft); color: var(--gold); }
.banner.warn { background: var(--warn-soft); color: var(--warn); align-items: flex-start; margin-bottom: 10px; }
.banner.warn b { color: var(--ink); font-weight: 600; }
.banner.warn span { color: var(--ink-2); }

.bar { display: block; height: 6px; border-radius: 99px; background: var(--hair); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 99px; background: var(--sky); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.l4 .bar i, .bar.l4 i { background: var(--warn); }
.full .bar i, .bar.full i { background: var(--danger); }
.excl .bar i, .bar.excl i { background: var(--night); }
.bar.ok i { background: var(--ok); }

/* ═════════ Hoy ═════════ */
/* Accesos rápidos: dos botones lado a lado, al alcance del pulgar y sin ocupar media pantalla */
.atajos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.atajo {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 62px;
  padding: 10px;
  border-radius: var(--r);
  border: 1px solid var(--hair);
  background: var(--bg);
  box-shadow: var(--shadow-pill);
  text-align: left;
  transition: box-shadow .2s, transform .1s;
}
.atajo:hover { box-shadow: var(--shadow); }
.atajo:active { transform: scale(.98); }
.atajo b { font-size: 15px; font-weight: 650; line-height: 1.25; min-width: 0; text-wrap: balance; }
.atajo-ic { width: 38px; height: 38px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; flex: none; }
.atajo-ic.fuerte { background: var(--primary); color: var(--on-primary); }
.atajo-ic .ic { width: 18px; height: 18px; stroke-width: 2.2; }

.today {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 20px;
  border-radius: var(--r);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow);
  text-align: left;
}
.today-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.today-top .muted { font-size: 14px; display: block; }
.today-num { font-size: 15px; color: var(--muted); }
.today-num b { font-size: 34px; font-weight: 750; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.today-free { text-align: right; display: grid; }
.today-free b { font-size: 20px; font-variant-numeric: tabular-nums; }
.today-free span { font-size: 13px; color: var(--muted); }
.today-excl { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--gold); }
.today-excl .ic { width: 16px; height: 16px; }
.today-night { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 14.5px; color: var(--muted); }
.today-night b { color: var(--ink); font-weight: 600; }
.today-night .ic { width: 16px; height: 16px; }

.pills { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pill {
  flex: none;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color .15s, color .15s, border-color .15s;
}
.pill:hover { border-color: var(--ink); }
.pill .n { color: var(--muted); font-weight: 600; }
.pill.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pill.on .n { color: inherit; opacity: .7; }
.pills.dim { opacity: .35; }

.hcards { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin: 10px calc(var(--gutter) * -1) 0; padding: 4px var(--gutter) 18px; scrollbar-width: none; }
.hcards::-webkit-scrollbar { display: none; }
.hcard {
  flex: 0 0 80%;
  max-width: 310px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px;
  border-radius: var(--r);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow);
  background: var(--bg);
  transition: transform .1s;
}
.hcard:active { transform: scale(.985); }
.hcard-status { font-size: 13.5px; font-weight: 700; margin-bottom: 8px; }
.s-ok { color: var(--ok); }
.s-info { color: var(--sky-ink); }
.s-bad { color: var(--danger); }
.hcard-title { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcard-sub { font-size: 14.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcard-line { height: 1px; background: var(--hair); margin: 14px 0 12px; }
.hcard-meta { font-size: 14px; color: var(--ink-2); }
.hcard-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.hempty { margin-top: 10px; padding: 28px 20px; border-radius: var(--r); border: 1px dashed var(--line); text-align: center; color: var(--muted); font-size: 15px; }
@media (min-width: 1000px) {
  .hcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); overflow: visible; margin: 10px 0 0; padding: 4px 0 8px; }
  .hcard { max-width: none; }
}

.strip { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 8px; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.sday {
  flex: none;
  width: 58px;
  padding: 10px 0 9px;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: transform .1s;
}
.sday:active { transform: scale(.95); }
.sday-w { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: capitalize; }
.sday-n { font-size: 18px; font-weight: 700; line-height: 1.1; }
.sday-bar { width: 6px; height: 32px; border-radius: 3px; background: var(--hair); display: flex; align-items: flex-end; overflow: hidden; }
.sday-bar i { display: block; width: 100%; background: var(--sky); border-radius: 3px; }
.sday-c { font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sday.is-today { border: 2px solid var(--ink); }
.sday.l4 .sday-bar i { background: var(--warn); }
.sday.full .sday-bar i { background: var(--danger); }
.sday.full .sday-c { color: var(--danger); }
.sday.excl { background: var(--night); border-color: var(--night); color: var(--on-night); }
.sday.excl .sday-w, .sday.excl .sday-c { color: var(--on-night); }
.sday.excl .sday-bar { background: color-mix(in srgb, var(--on-night) 30%, transparent); }
.sday.excl .sday-bar i { background: var(--on-night); }
@media (min-width: 1000px) {
  .strip { display: grid; grid-template-columns: repeat(7, 1fr); overflow: visible; margin: 0; padding: 0; }
  .sday { width: auto; }
}

.stats { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; }
.stat { padding: 16px 18px; border-bottom: 1px solid var(--hair); min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.stat:nth-child(odd) { border-right: 1px solid var(--hair); }
.stat:nth-last-child(-n+2) { border-bottom: 0; }
.stat span { font-size: 13.5px; color: var(--muted); line-height: 1.3; }
.stat b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1000px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat { border-bottom: 0; border-right: 1px solid var(--hair); }
  .stat:last-child { border-right: 0; }
}

.empty-hero { text-align: center; padding: 40px 8px 8px; }
.empty-hero .empty-art { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; }
.empty-hero .empty-art .ic { width: 28px; height: 28px; }
.empty-hero h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.empty-hero p { color: var(--muted); margin: 8px auto 24px; max-width: 36ch; }

/* ═════════ Filas de reservas ═════════ */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hair);
  min-width: 0;
}
.rows > .row:last-child { border-bottom: 0; }
.row:active { background: var(--soft); }
.row-date { width: 44px; flex: none; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.row-date small { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.row-date b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.row-ic { width: 42px; height: 42px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; flex: none; color: var(--ink-2); }
.row-ic .ic { width: 19px; height: 19px; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-title, .row-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.row-title { font-size: 16px; font-weight: 650; line-height: 1.3; }
.row-sub { font-size: 14px; color: var(--muted); line-height: 1.35; margin-top: 1px; }
.row-tags { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; }
.row-end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; font-variant-numeric: tabular-nums; }
.row-end small { font-size: 13px; color: var(--muted); }
.row-end b { font-size: 16px; font-weight: 700; }
.row.is-cancel .row-title { text-decoration: line-through; color: var(--muted); }
.row.is-cancel .row-date { opacity: .5; }

.mhead { display: flex; align-items: baseline; justify-content: space-between; margin: 28px 0 2px; font-size: 15px; font-weight: 700; }
.mhead:first-child { margin-top: 12px; }
.mhead span { font-size: 13.5px; color: var(--muted); font-weight: 500; }
/* En "Todas": separa lo que viene de lo que ya pasó */
.lista-corte { display: flex; align-items: center; gap: 12px; margin: 40px 0 -14px; font-size: 13px; font-weight: 600; color: var(--muted); }
.lista-corte::after { content: ''; flex: 1; height: 1px; background: var(--hair); }

.search { position: relative; margin-top: 20px; }
.search > .ic { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.search .input { padding-left: 52px; border-radius: 999px; border: 1px solid var(--hair); box-shadow: var(--shadow-pill); min-height: 54px; }
.search .input:focus { box-shadow: var(--shadow-pill), inset 0 0 0 1px var(--ink); border-color: var(--ink); }
.page-pills { margin-top: 16px; }

/* ═════════ Calendario ═════════ */
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 6px; }
.cal-nav h2 { font-size: 18px; font-weight: 700; }
.cal-nav h2 span { color: var(--muted); font-weight: 500; }
.cal-today { display: flex; justify-content: center; margin-bottom: 8px; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 10px 0 6px; }
.cal-week span { text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; touch-action: pan-y; }
.cday {
  min-height: 58px;
  min-width: 0;
  border-radius: 12px;
  background: var(--soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 5px 2px 6px;
  transition: transform .1s;
}
.cday:active { transform: scale(.93); }
.cday-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 14.5px; font-weight: 600; }
.cday-c { font-size: 11px; font-weight: 700; color: var(--ink-2); line-height: 1; min-height: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cday-nt { font-size: 10px; font-weight: 600; color: var(--muted); line-height: 1; min-height: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cday.l1 { background: color-mix(in srgb, var(--sky) 12%, var(--bg)); }
.cday.l2 { background: color-mix(in srgb, var(--sky) 20%, var(--bg)); }
.cday.l3 { background: color-mix(in srgb, var(--sky) 32%, var(--bg)); }
.cday.l4 { background: var(--warn-soft); }
.cday.full { background: var(--danger-soft); }
.cday.full .cday-c { color: var(--danger); }
.cday.excl { background: var(--night); color: var(--on-night); }
.cday.excl .cday-c, .cday.excl .cday-nt { color: var(--on-night); }
.cday.out { opacity: .32; }
.cday.past:not(.out) .cday-n { color: var(--muted); }
.cday.excl.past .cday-n { color: var(--on-night); }
.cday.is-today .cday-n { background: var(--ink); color: var(--bg); }
@media (min-width: 600px) {
  .cday { min-height: 80px; padding: 8px 4px; }
  .cday-c { font-size: 12.5px; min-height: 13px; }
  .cday-nt { font-size: 11.5px; min-height: 12px; }
}
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.legend b { color: var(--ink); font-weight: 700; }

/* Hoja de un día: jornada de día y de noche */
.jornada { margin-bottom: 24px; }
.jornada-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.jornada-head > .ic { width: 22px; height: 22px; color: var(--ink-2); }
.jornada-head > span { flex: 1; display: grid; line-height: 1.25; }
.jornada-head small { font-size: 13px; color: var(--muted); }
.jornada-head em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.jornada.full .jornada-head em { color: var(--danger); }
.jornada.excl .jornada-head em { color: var(--gold); }
.jornada-nota { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-top: 10px; }
.jornada-nota .ic { width: 15px; height: 15px; color: var(--gold); }
.sheet .jornada .rows { margin: 4px 0 0; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

/* ═════════ Cobros ═════════ */
.utabs { display: flex; gap: 28px; border-bottom: 1px solid var(--hair); margin-top: 32px; }
.utab { padding: 12px 0; font-size: 15px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.utab:hover { color: var(--ink); }
.utab.on { color: var(--ink); border-color: var(--ink); }

/* Cobros: lo recibido y lo que falta, lado a lado también en el computador */
.stats.dos { margin-top: 22px; }
.stats.dos .stat { justify-content: flex-start; }
.stat small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.stat small.bad { color: var(--danger); font-weight: 600; }
@media (min-width: 1000px) {
  .stats.dos { grid-template-columns: 1fr 1fr; }
  .stats.dos .stat b { font-size: 26px; }
}

/* Abonos de un mes: resumen arriba y la lista por día. Un color por medio de pago */
.m-trans { --mc: var(--sky-ink); --mcs: color-mix(in srgb, var(--sky) 16%, var(--bg)); }
.m-efec { --mc: var(--ok); --mcs: var(--ok-soft); }
.m-tarj { --mc: var(--gold); --mcs: var(--gold-soft); }
.m-otro { --mc: var(--muted); --mcs: var(--soft); }
.row-ic[class*="m-"] { background: var(--mcs); color: var(--mc); }
.cal-nav.mes-abonos { margin-top: 14px; }
.mes-card { margin: 8px 0 6px; padding: 20px; border: 1px solid var(--hair); border-radius: var(--r); box-shadow: var(--shadow); }
.mes-card-lbl { display: block; font-size: 14px; color: var(--muted); }
.mes-card-total { display: block; margin-top: 2px; font-size: 34px; font-weight: 750; letter-spacing: -.03em; line-height: 1.15; color: var(--ok); font-variant-numeric: tabular-nums; }
.mes-card-sub { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-2); }
.medios-bar { display: flex; gap: 3px; height: 8px; margin: 16px 0 12px; border-radius: 99px; overflow: hidden; }
.medios-bar i { display: block; min-width: 6px; background: var(--mc); }
.medios { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.medios li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.medios li > i { width: 10px; height: 10px; border-radius: 50%; background: var(--mc); flex: none; }
.medios b { margin-left: auto; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.dia-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--hair); font-size: 14px; font-weight: 700; color: var(--ink-2); }
.dia-head span { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.dia-head + .rows .row { padding: 14px 0; }

/* Cobrado por mes */
.cal-nav.anio { margin-top: 18px; }
.meses-cobro { display: flex; flex-direction: column; }
.mrow { display: grid; grid-template-columns: minmax(96px, 1fr) minmax(60px, 1.4fr) auto; align-items: center; gap: 14px; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--hair); text-align: left; }
button.mrow { border-radius: 0; }
button.mrow:active { background: var(--soft); }
@media (hover: hover) { button.mrow:hover .mrow-mes { text-decoration: underline; text-underline-offset: 3px; } }
.mrow-mes { display: grid; font-weight: 600; line-height: 1.25; }
.mrow-mes small { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.mrow b { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.mrow.cero b, .mrow.cero .mrow-mes { color: var(--muted); font-weight: 500; }
.mrow.cero .bar { visibility: hidden; }
.mrow.hoy .mrow-mes { color: var(--primary); }
.mrow.total { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: -1px; padding-top: 14px; }
.mrow.total .mrow-mes, .mrow.total b { font-weight: 750; font-size: 17px; }

/* ═════════ Detalle de reserva ═════════ */
.detail { padding-top: 24px; }
.d-kicker { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.d-kicker .ic { width: 16px; height: 16px; }
.d-title { font-size: 28px; font-weight: 750; letter-spacing: -.03em; line-height: 1.15; margin-top: 8px; overflow-wrap: anywhere; }
.d-contact { font-size: 16px; color: var(--ink-2); margin-top: 4px; }
.d-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 12px; }
.d-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.trip { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.trip-fechas { display: grid; grid-template-columns: 1fr 1fr; }
.trip-fechas > div { display: grid; padding: 12px 14px; min-width: 0; }
.trip-fechas > div + div { border-left: 1px solid var(--line); }
.trip small { font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.trip b { font-size: 16px; font-weight: 600; margin-top: 3px; line-height: 1.25; }
.trip-fechas span { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.trip-pers { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); font-size: 15px; }
.trip-pers .ic { width: 18px; height: 18px; color: var(--ink-2); }
.trip + .d-actions { margin-top: 12px; }
.detail .banner { margin-top: 20px; }
.dl { display: flex; flex-direction: column; margin-top: 4px; }
.dl-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.dl-row:last-child { border-bottom: 0; }
.dl-row span { color: var(--muted); font-size: 15px; flex: none; }
.dl-row b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
/* De dónde sale el monto: una parte por línea, a lo ancho de la fila para que no se corte */
.dl-row { flex-wrap: wrap; row-gap: 2px; }
.dl-sub { flex-basis: 100%; display: grid; justify-items: end; text-align: right; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.dl-sub i { font-style: normal; }
.pay-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 14px; }
.pay-sum span { display: block; font-size: 13.5px; color: var(--muted); }
.pay-sum b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pagos { list-style: none; margin: 18px 0 0; padding: 0; }
.pago { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hair); }
.pago-main { flex: 1; min-width: 0; }
.pago-main b { font-size: 16px; font-variant-numeric: tabular-nums; }
.pago-main small { display: block; color: var(--muted); font-size: 13.5px; }
.pago-main em { display: block; font-style: normal; font-size: 13.5px; color: var(--ink-2); }
.notas { white-space: pre-wrap; color: var(--ink-2); overflow-wrap: anywhere; margin-top: 4px; }
.timeline { list-style: none; margin: 4px 0 0; padding: 0; }
.timeline li { display: flex; gap: 12px; padding: 9px 0; font-size: 14.5px; }
.timeline li > div { min-width: 0; overflow-wrap: anywhere; }
.timeline small { display: block; color: var(--muted); font-size: 12.5px; }

/* Barra inferior fija: total a la izquierda, acción a la derecha */
.bottombar {
  position: sticky;
  bottom: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 32px calc(var(--gutter) * -1) 0;
  padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--hair);
}
.bb-info { min-width: 0; display: grid; }
.bb-info span { font-size: 13px; color: var(--muted); }
.bb-info b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bb-info small { font-size: 13px; line-height: 1.3; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.bb-info small.err { color: var(--danger); }
.bottombar .btn { flex: none; }

/* ═════════ Formulario ═════════ */
.fsec { padding: 28px 0; border-bottom: 1px solid var(--hair); }
.fsec:last-child { border-bottom: 0; padding-bottom: 8px; }
.fsec > h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 18px; }
.form > .banner { margin-top: 20px; }
.field { display: block; margin-bottom: 16px; min-width: 0; }
.lbl { display: block; font-size: 14px; font-weight: 600; margin: 0 0 8px 2px; }
.lbl em { font-style: normal; font-weight: 400; color: var(--muted); }
.input {
  display: block;
  width: 100%;
  min-height: 54px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--bg);
  padding: 0 16px;
  font-size: 16px;
  font-weight: 500;
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  transition: border-color .15s, box-shadow .15s;
  scroll-margin: 90px 0 150px; /* que el teclado y la barra inferior no tapen el campo */
}
.input::placeholder { color: var(--muted); opacity: .8; font-weight: 400; }
.input:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.input.big-num { font-size: 20px; font-weight: 700; }
/* Fecha: se escribe con el teclado o se elige tocando el ícono del calendario */
.fecha { position: relative; }
.fecha .input { padding-right: 56px; font-variant-numeric: tabular-nums; }
.fecha-ic { position: absolute; top: 0; right: 0; bottom: 0; width: 56px; display: grid; place-items: center; color: var(--ink-2); border-radius: 0 var(--r-md) var(--r-md) 0; }
.fecha-ic .ic { width: 21px; height: 21px; pointer-events: none; }
.fecha-nativa { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.fecha-nativa::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
/* Día, mes y año en casillas: la que se toca se pinta y se reemplaza entera al escribir */
.fecha .fecha-campo { display: flex; align-items: center; padding: 0 52px 0 10px; cursor: text; }
.fecha-campo:focus-within { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.fseg {
  width: calc(2ch + 10px);
  height: 36px;
  min-width: 0;
  padding: 0 5px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--ink);
  caret-color: transparent;
  outline: none;
  scroll-margin: 90px 0 150px;
  transition: background-color .15s, color .15s;
}
.fseg.anio { width: calc(4ch + 10px); }
.fseg::placeholder { color: var(--muted); opacity: .8; font-weight: 400; }
.fseg:focus { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.fseg::selection { background: transparent; }
.fsep { color: var(--muted); user-select: none; }
textarea.input { padding: 14px 16px; min-height: 100px; resize: vertical; line-height: 1.45; }
input[type="number"] { -moz-appearance: textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
@media (max-width: 480px) { .row2.wrap { grid-template-columns: 1fr; gap: 0; } }
@media (max-width: 359px) { .row2 { grid-template-columns: 1fr; gap: 0; } }

.money { position: relative; }
.money > span { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-weight: 500; color: var(--muted); pointer-events: none; }
.money .input { padding-left: 32px; font-variant-numeric: tabular-nums; }
.money.tel .input { padding-left: 56px; }
.money.big .input { min-height: 64px; font-size: 28px; font-weight: 700; padding-left: 40px; letter-spacing: -.02em; }
.money.big > span { font-size: 24px; left: 18px; }
.readonly { display: flex; align-items: center; min-height: 54px; padding: 0 16px; border-radius: var(--r-md); background: var(--soft); font-weight: 700; font-variant-numeric: tabular-nums; }

.hint { font-size: 14px; color: var(--muted); margin: -6px 2px 16px; }
.hint:empty { display: none; }
.hint .ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.hint b { color: var(--ink); font-weight: 600; }
.hint.bad, .hint.bad b { color: var(--danger); }
.hint.good, .hint.good b { color: var(--ok); }
.note { font-size: 14px; color: var(--muted); margin: 4px 2px 0; display: flex; gap: 8px; align-items: center; }
.note .ic { width: 17px; height: 17px; }

/* Opciones (tipo, días, abono): borde negro al elegir, como en Airbnb */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.tile {
  min-height: 78px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.tile .ic { width: 22px; height: 22px; stroke-width: 1.7; }
.tile:hover { border-color: var(--ink); }
.tile.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--soft); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.seg button {
  min-height: 50px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  padding: 4px 6px;
  line-height: 1.15;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.seg button .ic { width: 17px; height: 17px; }
.seg button:hover { border-color: var(--ink); }
.seg button.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--soft); }
.seg-plan button { flex-direction: column; gap: 3px; min-height: 66px; padding: 8px; }
.seg-plan small { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.seg-plan b { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

/* Casilla con ✓ ("Vienen solo por el día") */
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  cursor: pointer;
  margin-bottom: 16px;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.check-row:hover { border-color: var(--ink); }
.check-row:has(.check:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--soft); }
.check {
  appearance: none;
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin: 0;
  flex: none;
  border-radius: 8px;
  border: 1.5px solid var(--line-strong);
  background: var(--bg);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.check:checked { background: var(--ink); border-color: var(--ink); }
.check:checked::after {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 2.5px solid var(--bg);
  border-bottom: 2.5px solid var(--bg);
  transform: translateY(-2px) rotate(-45deg);
}
.estadia { margin: -4px 0 16px 12px; padding: 2px 0 0 18px; border-left: 2px solid var(--hair); }
.estadia .field { margin-bottom: 8px; }
.estadia .hint { margin-bottom: 4px; }

/* Contador de noches, como el selector de huéspedes de Airbnb */
.counter-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0 18px; }
.counter { display: flex; align-items: center; gap: 14px; flex: none; }
.counter b { min-width: 22px; text-align: center; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cbtn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-2);
  transition: border-color .15s, opacity .15s;
}
.cbtn:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.cbtn:disabled { opacity: .3; cursor: not-allowed; }
[hidden] { display: none !important; }

/* Días y noches de una estadía, cada uno con su contador */
.conteo { border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 16px; margin-bottom: 16px; }
.conteo .counter-row { padding: 14px 0; }
.conteo .counter-row + .counter-row { border-top: 1px solid var(--hair); }

/* Planes: uno debajo del otro, nombre a la izquierda y horario a la derecha */
.seg.seg-lista { grid-auto-flow: row; grid-template-columns: 1fr; gap: 8px; }
.seg.seg-lista button { flex-direction: row; justify-content: space-between; min-height: 56px; padding: 8px 16px; text-align: left; }

/* Personas adicionales */
.adicionales { padding: 16px 16px 2px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--r-md); }
.adicionales > .lbl { margin-bottom: 12px; }
.adicionales .field { margin-bottom: 14px; }
.adicionales .hint { margin-top: -6px; }
.lbl-sm { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); margin: 0 0 6px 2px; }
.lbl-sm .ic { width: 14px; height: 14px; }
.row2.arriba { align-items: start; }
.row2.fecha-pers { grid-template-columns: 1.5fr 1fr; }
#f-plan-hint .btn { display: flex; margin-top: 10px; }

/* Lista desplegable (sitio), con la flecha dibujada para que se vea igual en claro y oscuro */
.select { position: relative; display: block; }
.select select { padding-right: 48px; cursor: pointer; }
.select > .ic { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink-2); pointer-events: none; }

/* Sitio asignado: en las listas va bajo lo que falta por pagar, para verlo de un vistazo */
.sitio { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.sitio .ic { width: 13px; height: 13px; stroke-width: 2.2; }
/* En la lista de reservas el sitio se toca para asignarlo; el área de toque es más grande que la píldora */
button.sitio { position: relative; border: 1px solid transparent; cursor: pointer; }
button.sitio::after { content: ""; position: absolute; inset: -10px -8px; }
button.sitio:hover { border-color: var(--primary); }
.sitio.vacio { background: transparent; color: var(--muted); border: 1px dashed var(--line-strong); }
.sitio.vacio:hover { color: var(--ink); border-color: var(--ink); }
/* Ya se revisó y no va a tener sitio: gris, para distinguirlo de "Asignar sitio" (pendiente) */
.sitio.nada { background: var(--soft); color: var(--ink-2); }
button.sitio.nada:hover { border-color: var(--line-strong); }

/* Hoja para elegir el sitio: el principal arriba y los números en grilla */
.sitios { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 4px 0 16px; }
.sitio-op { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg); font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.sitio-op.ancho { grid-column: 1 / -1; gap: 8px; font-size: 16px; }
.sitio-op.ancho .ic { width: 17px; height: 17px; color: var(--primary); }
.sitio-op.nada { font-weight: 600; color: var(--ink-2); background: var(--soft); border-style: dashed; }
.sitio-op.nada.on { border-style: solid; color: var(--ink); }
.sitio-op:hover { border-color: var(--ink); }
.sitio-op.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--soft); }
/* Volver a dejarlo pendiente ("Asignar sitio"), separado de la grilla */
.sitio-pendiente { margin-top: 18px; border-style: dashed; }

/* Detalle: la línea del sitio se toca para asignarlo o cambiarlo */
.trip-sitio { width: 100%; background: none; border: 0; border-top: 1px solid var(--line); text-align: left; cursor: pointer; }
.trip-sitio em { margin-left: auto; font-style: normal; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Fecha escrita a mano que no existe (ej. 15/15/2026) */
.fecha.mal .fecha-campo { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.fecha-error { display: block; margin: 6px 2px 0; font-size: 14px; font-weight: 500; color: var(--danger); }
.fecha-error:empty { display: none; }

/* Mensajes abiertos desde una reserva: a quién se le envía */
.para { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); background: var(--primary-soft); }
.para > .ic { color: var(--primary); margin-top: 2px; }
.para > div { min-width: 0; overflow-wrap: anywhere; }
.para p { font-size: 15px; }
.para small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.msg { position: relative; }
.msg-edit { position: absolute; top: 8px; right: 8px; }
.msg.editable h3 { padding-right: 34px; }
.para small b { color: var(--ink-2); }
.msg-acc { flex-wrap: wrap; }
.msg-acc .btn.hecho { border-color: var(--ok); color: var(--ok); }

/* Teléfono: chileno con +56 fijo o extranjero escrito completo */
.money.tel.ext .input { padding-left: 16px; }
.tel-pais { margin: 8px 2px 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.link-btn { display: inline-block; margin: 0 2px 18px; padding: 6px 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

#f-cuando > .check-row { align-items: center; margin-bottom: 20px; }
#f-cuando > .note { margin-bottom: 16px; }

/* Llegada y salida: mañana o noche en un selector delgado, justo bajo cada fecha */
.turno { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: -6px 0 20px; background: var(--soft); border-radius: 14px; }
.turno button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 11px; color: var(--muted); transition: background-color .15s, box-shadow .15s, color .15s; }
.turno button .ic { width: 18px; height: 18px; flex: none; }
.turno-txt { display: grid; text-align: left; line-height: 1.2; }
.turno-txt b { font-size: 14.5px; font-weight: 600; }
.turno-txt small { font-size: 12px; font-weight: 500; color: var(--muted); }
.turno button.on { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 3px 10px rgba(0, 0, 0, .07); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .turno button.on { background: #2C2C2C; } }
:root[data-theme="dark"] .turno button.on { background: #2C2C2C; }

/* La estadía como un calendario chico: un día por columna, sol = de día, luna = se quedan a dormir */
.tira { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 4px; margin: 0 0 8px; scroll-snap-type: x proximity; scrollbar-width: none; }
.tira::-webkit-scrollbar { display: none; }
.tira-dia { flex: 1 0 50px; max-width: 76px; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 10px 0 9px; border-radius: 14px; border: 1px solid transparent; background: var(--soft); color: var(--ink); scroll-snap-align: start; }
.tira-dia small { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.tira-dia b { font-size: 18px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tira-sol, .tira-luna { display: grid; place-items: center; height: 18px; }
.tira-sol .ic { width: 17px; height: 17px; }
.tira-luna .ic { width: 15px; height: 15px; color: var(--muted); }
.tira-dia em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .02em; color: var(--gold); }
.tira-dia.finde, .tira-dia.feriado { background: var(--gold-soft); }
.tira-dia.finde .tira-sol, .tira-dia.feriado .tira-sol { color: var(--gold); }
.tira-dia.feriado { border-color: var(--gold); }
button.tira-dia { cursor: pointer; transition: border-color .15s; }
button.tira-dia:hover { border-color: var(--line-strong); }
button.tira-dia.feriado:hover { border-color: var(--gold); }
#f-salida b { color: var(--ink); }

/* Valor por persona como una boleta: cuántos × valor (editable) = subtotal */
.precios { border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 16px; margin-bottom: 16px; }
.pr-fila { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; padding: 14px 0; }
.pr-fila + .pr-fila { border-top: 1px solid var(--hair); }
.pr-nombre { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.pr-nombre .ic { width: 17px; height: 17px; flex: none; color: var(--muted); }
#f-pr-finde .pr-nombre .ic { color: var(--gold); }
.pr-sub { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pr-calc { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding-left: 25px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pr-input { position: relative; display: block; width: 124px; }
.pr-input > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-weight: 500; color: var(--muted); pointer-events: none; }
.pr-input .input { min-height: 42px; padding-left: 26px; border-radius: 10px; font-size: 16px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.pr-calc > span:first-child { flex: none; width: 76px; }
.pr-fila.cero .pr-nombre, .pr-fila.cero .pr-sub { color: var(--muted); font-weight: 500; }
.pr-total { display: grid; gap: 6px; padding: 12px 0 14px; border-top: 1px solid var(--line); }
.pr-cada, .pr-todos { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pr-cada { font-size: 14.5px; color: var(--muted); }
.pr-cada b { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pr-todos { font-size: 16px; font-weight: 700; }
.pr-todos b { font-size: 21px; font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pr-todos b.falta { font-size: 14.5px; font-weight: 500; color: var(--muted); }

/* Precios del plan Fin de semana por mes (Ajustes) */
.meses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 12px; margin-top: 4px; }
.mes > span { display: block; font-size: 13px; color: var(--muted); margin: 0 0 4px 2px; }
.mes .input { min-height: 46px; }
.mas-meses { margin-top: 6px; }
.mas-meses summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none; }
.mas-meses summary::-webkit-details-marker { display: none; }
.mas-meses summary .ic { width: 17px; height: 17px; transition: transform .2s; }
.mas-meses[open] summary .ic { transform: rotate(180deg); }
.mas-meses .meses { margin-top: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.chip .ic { width: 17px; height: 17px; stroke-width: 1.8; }
.chip:hover { border-color: var(--ink); }
.chip.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--soft); font-weight: 600; }

/* Filas con interruptor, separadas por líneas finas */
.switch-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--hair); cursor: pointer; }
.fsec .switch-row:last-child { padding-bottom: 0; }
.sheet .switch-row { border-bottom: 1px solid var(--hair); margin-bottom: 16px; }
.sw-text { flex: 1; display: grid; gap: 2px; }
.sw-text strong { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.sw-text strong .ic { width: 16px; height: 16px; color: var(--gold); }
.sw-text span { font-size: 14px; color: var(--muted); line-height: 1.35; }
.switch {
  appearance: none;
  -webkit-appearance: none;
  width: 48px;
  height: 32px;
  border-radius: 999px;
  background: var(--line-strong);
  position: relative;
  flex: none;
  cursor: pointer;
  transition: background-color .2s;
  margin: 0;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.switch:checked { background: var(--ink); }
.switch:checked::after { transform: translateX(16px); }

.total-box { display: grid; gap: 2px; padding: 16px 18px; border-radius: var(--r-md); background: var(--soft); margin-bottom: 16px; }
.total-box span { font-size: 14px; color: var(--muted); }
.total-box b { font-size: 30px; font-weight: 750; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.total-box small { font-size: 14px; color: var(--ink-2); }
.total-box.vacio b { color: var(--muted); }
/* Desglose cuando hay más de un valor (días de fin de semana, de semana y noches) */

.dispo { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); margin-bottom: 4px; font-size: 14.5px; }
.dispo > .ic { margin-top: 1px; }
.dispo > div { flex: 1; min-width: 0; }
.dispo strong { display: block; font-weight: 700; font-size: 15px; }
.dispo span { color: var(--ink-2); }
.dispo.ok { background: var(--ok-soft); color: var(--ok); }
.dispo.excl { background: var(--gold-soft); color: var(--gold); }
.dispo.bad { background: var(--danger-soft); color: var(--danger); }
.dispo ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink); }
.dispo li + li { margin-top: 2px; }
.dday-list { display: grid; gap: 6px; margin-top: 12px; }
.dday { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(40px, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-2); }
.dday > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dday .ic { width: 14px; height: 14px; vertical-align: -2px; }
.dday b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.dday.bad, .dday.bad b { color: var(--danger); }
.dday.bad .bar i { background: var(--danger); }

.abono-campos { margin-top: 18px; }
.abono-campos:empty { display: none; }
.sum { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--hair); border-radius: var(--r-md); margin-top: 18px; }
.sum > div { padding: 12px 14px; min-width: 0; }
.sum > div + div { border-left: 1px solid var(--hair); }
.sum span { display: block; font-size: 12.5px; color: var(--muted); }
.sum b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum .warn b { color: var(--warn); }
.sum .ok b { color: var(--ok); }

/* ═════════ Ajustes ═════════ */
.cuenta { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 14px; border-radius: var(--r-md); border: 1px solid var(--line); }
.cuenta-txt { flex: 1; min-width: 0; }
.cuenta-txt b { display: block; font-size: 17px; font-weight: 700; }
.cuenta-txt small { display: block; font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ajustes .fsec > p.muted { font-size: 15px; margin: -10px 0 16px; }
.ajustes .cuenta + p.muted { margin: 0 2px 16px; }
.ajustes .input:disabled { opacity: .6; cursor: not-allowed; }
.h-sub { font-size: 15px; font-weight: 700; margin: 4px 0 12px; }
.h-sub em { font-style: normal; font-weight: 400; color: var(--muted); }
.ajustes .row2 + .h-sub { margin-top: 12px; }
.info-card { display: flex; gap: 14px; padding: 18px; border-radius: var(--r-md); background: var(--soft); }

/* ═════════ Mensajes y cuentas para copiar ═════════ */
.mensajes { padding: 12px 0 40px; }
.mensajes .utabs { margin: 0 0 20px; }
.mensajes .para { margin-top: 8px; }
.mensajes .para + .utabs { margin-top: 16px; }
.mensajes .lead { font-size: 15px; margin: 0 0 16px; }
.mensajes > .btn { margin-top: 4px; }

/* Cuentas: agrupadas por titular, una fila por cuenta */
.cuentas-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.cuentas-head .lead { margin: 0; }
.titular { margin-bottom: 26px; }
.titular-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.titular-head b { font-size: 16px; font-weight: 700; line-height: 1.25; min-width: 0; }
.ctas { border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-pill); }
.cta { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; }
.cta + .cta { border-top: 1px solid var(--hair); }
.cta-sigla { width: 40px; height: 40px; border-radius: 10px; background: var(--soft); color: var(--ink-2); display: grid; place-items: center; flex: none; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; }
.cta-ver { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; border-radius: 10px; transition: opacity .15s; }
.cta-ver:active { opacity: .55; }
.cta:has(> .cta-ver:hover) { background: var(--soft); }
.cta-main { flex: 1; min-width: 0; display: grid; }
.cta-main b { font-size: 15px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.cta-main span { font-size: 14px; color: var(--ink-2); line-height: 1.3; }
.cta-main span i { font-style: normal; white-space: nowrap; }
.cta-main small { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cta-acc { display: flex; gap: 8px; flex: none; }
.editando .cta-sigla { display: none; }
.editando .cta-acc { gap: 6px; }
.editando .cta-acc .icon-btn { width: 36px; height: 36px; }
.icon-btn.borde { border: 1px solid var(--line); }
.icon-btn.wa { background: var(--primary); color: var(--on-primary); }
.icon-btn.wa:hover { background: var(--primary-2); }
.icon-btn:disabled { opacity: .25; cursor: default; }
.icon-btn.hecho { border-color: var(--ok); color: var(--ok); }
.msg { padding: 16px 18px; margin-bottom: 12px; border: 1px solid var(--hair); border-radius: var(--r); box-shadow: var(--shadow-pill); }
.msg h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
/* Vista previa de una cuenta: el texto exacto que recibe el cliente */
.cta-prev { margin: 2px 0 20px; }
.cta-prev small { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 8px; }
.cta-prev p { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--soft); border-radius: var(--r-md); padding: 16px 18px; font-size: 16px; line-height: 1.55; font-variant-numeric: tabular-nums; user-select: text; -webkit-user-select: text; }
.msg-txt { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.msg-acc { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
textarea.input.texto-largo { min-height: 220px; }
.info-card .ic { margin-top: 2px; flex: none; }
.info-card p { color: var(--muted); font-size: 14.5px; margin-top: 4px; }

/* Avisos chicos: sin señal, solo lectura, demostración */
.phead-end { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pill-mini { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pill-mini .ic { width: 14px; height: 14px; }
.pill-mini.warn { background: var(--warn-soft); color: var(--warn); }
.tabbar.sin-nueva { grid-template-columns: repeat(4, 1fr); }

/* ═════════ Acceso: carga e inicio de sesión ═════════ */
body.no-user .tabbar, body.no-user .sidebar { display: none; }
body.no-user .app { display: block; }
body.no-user .main { padding-bottom: 0; }
.welcome:has(.login) .welcome-logo { width: 168px; }
.welcome { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 0; max-width: 400px; margin: 0 auto; }
.welcome-logo { width: 220px; height: auto; }
.welcome-logo.emblema { width: 104px; }
.welcome h1 { font-size: 26px; font-weight: 750; letter-spacing: -.03em; margin-top: 24px; }
.welcome-sub { color: var(--muted); margin-top: 4px; }
.welcome-sub.cargando { margin-top: 28px; animation: latido 1.6s ease-in-out infinite; }
.login { width: 100%; margin-top: 36px; text-align: left; }
.login .hint { margin: -4px 2px 14px; }
.login .btn { margin-top: 4px; }
.link-btn { margin-top: 20px; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.acceso-msg { width: 100%; margin: 36px 0 20px; padding: 18px; border-radius: var(--r-md); background: var(--soft); text-align: left; }
.acceso-msg p { color: var(--muted); font-size: 15px; margin-top: 6px; overflow-wrap: anywhere; }
.acceso-msg p b { color: var(--ink); font-weight: 600; }
.demora { margin-top: 28px; animation: fade .3s ease; }
.demora p { color: var(--muted); font-size: 15px; margin-bottom: 14px; }
@keyframes latido { 50% { opacity: .45; } }

/* ═════════ Hojas, diálogos y avisos ═════════ */
body.sheet-open { overflow: hidden; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .45); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s ease; }
.sheet {
  background: var(--bg);
  width: 100%;
  max-width: 568px;
  max-height: 92dvh;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 20px 20px 0 0;
  padding: 0 var(--gutter) calc(20px + env(safe-area-inset-bottom));
  animation: up .3s cubic-bezier(.2, .8, .2, 1);
  box-shadow: var(--shadow-lg);
}
.sheet-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  margin: 0 calc(var(--gutter) * -1) 20px;
  padding: 10px calc(var(--gutter) - 8px);
  background: var(--bg);
  border-bottom: 1px solid var(--hair);
}
.sheet-head h2 { font-size: 16px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-sub { color: var(--muted); font-size: 15px; margin: -6px 0 18px; }
.sheet .rows { margin-bottom: 18px; }
.sheet .chips { margin-bottom: 16px; }
.sheet .sum { margin: 0 0 20px; }
@media (min-width: 720px) {
  .sheet-backdrop { align-items: center; padding: 24px; }
  .sheet { border-radius: 20px; padding-bottom: 24px; }
}
.cap { margin-bottom: 18px; }
.cap-nums { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cap-nums b { font-size: 28px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cap-nums span { color: var(--muted); }
.cap-nums em { margin-left: auto; font-style: normal; font-weight: 600; font-size: 14.5px; color: var(--ok); }
.cap.full em { color: var(--danger); }
.cap.excl em { color: var(--gold); }

.menu { display: grid; }
.menu-item { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 0 4px; font-weight: 500; text-align: left; width: 100%; border-bottom: 1px solid var(--hair); }
.menu-item:last-child { border-bottom: 0; }
.menu-item:hover { background: var(--soft); }
.menu-item.warn { color: var(--warn); }
.menu-item.danger { color: var(--danger); }

.dlg-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .45); display: grid; place-items: center; padding: 20px; animation: fade .15s ease; }
.dlg { width: 100%; max-width: 400px; background: var(--bg); border-radius: 18px; padding: 24px; box-shadow: var(--shadow-lg); animation: pop .2s cubic-bezier(.2, .8, .2, 1); }
.dlg h3 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.dlg p { color: var(--muted); margin-top: 8px; font-size: 15px; }
.dlg-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--hair); }

#toast-root {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);
  display: flex;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
  padding: 0 16px;
}
body[data-route="reserva"] #toast-root, body[data-route="nueva"] #toast-root, body[data-route="editar"] #toast-root,
body[data-route="ajustes"] #toast-root { bottom: calc(96px + env(safe-area-inset-bottom)); }
body[data-route="mensajes"] #toast-root { bottom: calc(24px + env(safe-area-inset-bottom)); }
body.sheet-open #toast-root { bottom: calc(24px + env(safe-area-inset-bottom)); }
@media (min-width: 1000px) { #toast-root { bottom: 28px !important; } }
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  font-size: 15px;
  box-shadow: var(--shadow-lg);
  animation: toastIn .3s cubic-bezier(.2, .8, .2, 1);
  max-width: 480px;
}
.toast.t-error { background: var(--danger); color: #fff; }

@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(100%); } }
@keyframes pop { from { transform: scale(.95); opacity: 0; } }
@keyframes toastIn { from { transform: translateY(14px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Demo de la página de venta: invitación a escribir después de las reservas de prueba */
.demo-fin { padding-top: 48px; }
.demo-fin .empty-art { width: 72px; height: 72px; }
.demo-fin .hint { margin-top: 16px; text-align: center; }