/* Agenda · variante A "Clara": fondo claro, tarjetas pastel por familia, esquinas redondeadas, acento café */
:root {
  --bg: #F7F6F9; --surface: #FFFFFF; --surface-2: #F1EFF4; --line: #E7E4EC;
  --text: #1F1B24; --soft: #4F4A57; --muted: #6F6A77; --accent: #6A4A2A; --accent-ink: #FFFFFF; --accent-soft: #EFE6DA;
  --ok: #2E9E5B; --warn: #C98A1E; --warn-dot: #E3A33B; --bad: #C2463A;
  --caracas: #8A6438; --guarenas: #3F7F6A;
  /* Familias de servicio: fondo de tarjeta + color del ícono */
  --alivio: #DDF0DA; --alivio-ink: #2F7D3E;
  --rendimiento: #E7DFFB; --rendimiento-ink: #5B3FB0;
  --desconexion: #D9E9F8; --desconexion-ink: #2C6699;
  --combinados: #FBE2D2; --combinados-ink: #A5532A;
  --display: 'Marcellus', Georgia, serif; --body: 'Manrope', system-ui, -apple-system, sans-serif;
  --r: 16px; --r-sm: 12px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; }
/* El atributo hidden debe ganar a cualquier display de componente (.field, .grid2…) */
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-weight: 400; -webkit-font-smoothing: antialiased; }
body { min-height: 100dvh; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--body); font-weight: 700; margin: 0; letter-spacing: -.01em; }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brand { font-family: var(--display); letter-spacing: .14em; }
.splash { min-height: 100dvh; display: grid; place-content: center; gap: 10px; text-align: center; }

/* Estructura */
.topbar { position: sticky; top: 0; z-index: 10; background: rgba(247,246,249,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topbar h1 { font-size: 17px; flex: 1; text-align: center; }
.logo { display: flex; flex-direction: column; line-height: 1.05; text-decoration: none; color: var(--text); }
.logo b { font-family: var(--display); font-weight: 400; letter-spacing: .14em; font-size: 14px; }
.logo span { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.page { padding: 8px 16px calc(104px + var(--safe-b)); max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.page.wide { max-width: 1240px; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--surface); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); padding-bottom: var(--safe-b); }
.tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 8px; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 500; min-height: 58px; }
.tabbar a[aria-current="page"] { color: var(--accent); font-weight: 700; }
.tabbar svg { width: 22px; height: 22px; }
.tabbar .badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--warn-dot); color: #2A1C08; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
.fab { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(80px + var(--safe-b)); z-index: 11; width: 58px; height: 58px; border-radius: 50%; border: none; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; box-shadow: 0 10px 24px rgba(106,74,42,.35); text-decoration: none; }

/* Elementos */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); text-decoration: none; color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.danger { border-color: #F1C9C4; color: var(--bad); }
.btn.block { width: 100%; }
.btn.sm { min-height: 40px; padding: 0 12px; font-size: 13px; }
.icon-btn { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); display: grid; place-items: center; cursor: pointer; text-decoration: none; color: var(--text); flex: none; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--soft); }
.field input, .field select, .field textarea { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; min-height: 46px; }
.field textarea { min-height: 90px; resize: vertical; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--soft); white-space: nowrap; }
.chip.pending { background: #FCEFD6; color: #8A5A0B; } .chip.confirmed { background: #DDF0E3; color: #1F6B3D; } .chip.done { color: var(--muted); }
.chip.cancelled, .chip.no_show, .chip.expired { background: #F9E1DE; color: var(--bad); }
.chip.caracas { background: var(--accent-soft); color: var(--caracas); } .chip.guarenas { background: #DDEDE7; color: var(--guarenas); } .chip.free { color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.dot.confirmed, .dot.done { background: var(--ok); } .dot.pending { background: var(--warn-dot); }
.dot.cancelled, .dot.no_show, .dot.expired { background: var(--bad); }
.seg { display: grid; grid-auto-flow: column; background: var(--surface-2); border-radius: var(--r-sm); padding: 4px; gap: 4px; }
.seg button { border: none; background: transparent; min-height: 38px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(31,27,36,.12); }

/* Agenda · tira de días */
.daynav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.daynav h2 { font-size: 16px; text-align: center; flex: 1; }
.daynav h2::first-letter { text-transform: uppercase; }
.strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.strip a { text-decoration: none; color: var(--muted); border-radius: 14px; padding: 8px 0 7px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 66px; font-size: 11px; font-weight: 600; text-transform: capitalize; }
.strip a .num { font-size: 19px; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.strip a .has { width: 6px; height: 6px; border-radius: 50%; background: transparent; margin-top: 2px; }
.strip a .has.on { background: #C9A27A; }
.strip a.today .num { color: var(--accent); }
.strip a[aria-current="date"] { background: var(--accent); color: var(--accent-ink); }
.strip a[aria-current="date"] .num { color: var(--accent-ink); }
.strip a[aria-current="date"] .has.on { background: var(--accent-ink); }
.dayhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.dayhead h2 { font-size: 17px; }
.windows { font-size: 13px; color: var(--muted); margin: 0; }

/* Agenda · línea de tiempo */
.timeline { display: flex; flex-direction: column; gap: 6px; }
.slot { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: stretch; }
.slot .hour { font-size: 13px; font-weight: 700; color: var(--muted); padding-top: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.booking { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; text-decoration: none; color: var(--text); border-radius: var(--r); padding: 12px 12px 12px 12px; background: var(--fam, var(--surface)); border: 1px solid transparent; }
.booking.f-alivio { --fam: var(--alivio); --fam-ink: var(--alivio-ink); }
.booking.f-rendimiento { --fam: var(--rendimiento); --fam-ink: var(--rendimiento-ink); }
.booking.f-desconexion { --fam: var(--desconexion); --fam-ink: var(--desconexion-ink); }
.booking.f-combinados { --fam: var(--combinados); --fam-ink: var(--combinados-ink); }
.booking.inactive { background: var(--surface); border-color: var(--line); opacity: .65; }
.booking .glyph { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.7); color: var(--fam-ink, var(--muted)); display: grid; place-items: center; }
.booking .glyph svg { width: 19px; height: 19px; }
.booking .info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.booking .s { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booking .meta { font-size: 12.5px; color: var(--soft); display: flex; align-items: center; gap: 6px; min-width: 0; font-variant-numeric: tabular-nums; }
.booking .meta .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gap { margin-left: 52px; font-size: 11.5px; color: var(--muted); padding: 4px 12px; border-radius: 999px; background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, transparent 6px 12px); }
.empty { border: 1px dashed var(--line); border-radius: var(--r); padding: 24px; text-align: center; color: var(--muted); background: var(--surface); }

/* Semana: columnas en escritorio, lista en el teléfono */
.weekgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wcol { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; min-width: 0; }
.wcol.today { border-color: var(--accent); }
.wcol header { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.wcol header a { text-decoration: none; color: var(--text); font-weight: 700; text-transform: capitalize; }
.wcol .none { font-size: 13px; color: var(--muted); }
.wcard { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text); border-radius: var(--r-sm); padding: 8px 10px; background: var(--fam, var(--surface-2)); font-size: 13px; min-width: 0; }
.wcard.f-alivio { --fam: var(--alivio); } .wcard.f-rendimiento { --fam: var(--rendimiento); }
.wcard.f-desconexion { --fam: var(--desconexion); } .wcard.f-combinados { --fam: var(--combinados); }
.wcard strong { font-variant-numeric: tabular-nums; }
.wcard span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) {
  .weekgrid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
  .wcol { padding: 10px 8px; min-height: 240px; }
  .wcol header { flex-direction: column; align-items: flex-start; }
}

/* Detalle */
.kv { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px 12px; font-size: 15px; }
.kv dt { color: var(--muted); font-size: 13px; font-weight: 600; padding-top: 2px; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.health { border: 1px solid #F0D49A; background: #FFF8EA; border-radius: var(--r); color: var(--soft); padding: 12px 14px; }
.price { font-size: 26px; font-weight: 700; }

/* Disponibilidad */
.rule { display: grid; grid-template-columns: 1fr 1fr 1.3fr 44px; gap: 6px; align-items: end; }
.rule .field input, .rule .field select { min-height: 42px; padding: 8px; }
.wdblock { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.wdblock h3 { font-size: 15px; }
.ovr { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding: 12px 0; }

/* Login */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 28px 22px; }
.login h1 { font-size: 26px; }

#toast { position: fixed; left: 50%; bottom: calc(150px + var(--safe-b)); transform: translateX(-50%); z-index: 50; background: var(--text); color: var(--surface); border-radius: var(--r-sm); padding: 12px 18px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: 90vw; }
#toast.show { opacity: 1; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { #toast { transition: none; } }

/* Mensajes de WhatsApp por enviar */
.msg { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.msg.due { border-color: #9FD3B0; box-shadow: 0 0 0 3px #E6F5EA; }
.card .msg { background: var(--bg); }
.msg header, .msg summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.msg summary { cursor: pointer; min-height: 32px; list-style: none; }
.msg summary::-webkit-details-marker { display: none; }
details.msg[open] { gap: 10px; }
details.msg[open] > summary { margin-bottom: 10px; }
.msg .when { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.msg.due .when { color: #1F6B3D; }
.msg.sent .label, .msg.missed .label { color: var(--muted); }
.msg.missed .when { color: var(--bad); }
.msg .btn { padding: 0 10px; white-space: nowrap; }
.msg .who { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text); font-size: 14px; }
.msg .to { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.msgtext { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; background: #E7F6E1; color: #1F2A1C; border-radius: 4px var(--r-sm) var(--r-sm) var(--r-sm); padding: 10px 12px; font-size: 14px; line-height: 1.45; }