/* Kinesiomas · Panel de Pablo. Pensado para el celular: dos pestañas (Por confirmar / Agenda), filas simples
   y una ficha que se abre desde abajo con todas las acciones de esa persona. */
:root {
  color-scheme: light;
  --azul-1: #062A86; --azul-2: #0A3FB8; --azul-3: #0067FF; --azul-suave: #E7F0FF; --teal: #0E7C86; --teal-suave: #E3F4F5;
  --fondo: #EEF2F8; --sup: #FFFFFF; --sup-2: #F5F7FB; --tinta: #0B1B3A; --tinta-2: #44546E; --tinta-3: #6A7A92; --linea: #DFE6F0;
  --ok: #157A3E; --ok-vivo: #18A957; --ok-suave: #E6F6EC; --alerta: #9A4A00; --alerta-suave: #FFF1DC; --peligro: #B42318; --peligro-suave: #FDECEA;
  --r: 20px; --sombra: 0 1px 2px rgba(11, 27, 58, .05), 0 6px 18px rgba(11, 27, 58, .07);
  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100dvh; background: var(--fondo); color: var(--tinta); font-family: var(--font); font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--azul-3); outline-offset: 2px; border-radius: 10px; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Cabecera ---------- */
.cabeza { position: sticky; top: 0; z-index: 20; color: #fff; background: linear-gradient(120deg, var(--azul-1), var(--azul-2) 60%, var(--azul-3)); }
.cabeza-in { max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.cabeza img { height: 34px; width: auto; }
.cabeza-txt { display: grid; line-height: 1.15; min-width: 0; }
.cabeza-txt strong { font-size: 17px; font-weight: 800; }
.cabeza-txt span { font-size: 13px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.der { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.vivo { width: 32px; height: 32px; display: grid; place-items: center; }
.vivo i { width: 10px; height: 10px; border-radius: 50%; background: #7CFFB2; animation: latir 2s infinite; }
.vivo.caido i { background: #FF8A80; animation: none; }
@keyframes latir { 0% { box-shadow: 0 0 0 0 rgba(124, 255, 178, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(124, 255, 178, 0); } }
.btn-sup { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); color: #fff; }

main { max-width: 720px; margin: 0 auto; padding: 14px 16px calc(40px + var(--safe-b)); }

/* ---------- Acceso ---------- */
.acceso { max-width: 400px; margin: 10vh auto 0; padding: 28px 22px; border-radius: 26px; background: var(--sup); box-shadow: var(--sombra); text-align: center; }
.acceso .candado { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px; display: grid; place-items: center; background: var(--azul-suave); color: var(--azul-3); }
.acceso .candado .ico { width: 30px; height: 30px; }
.acceso h1 { margin: 0 0 18px; font-size: 26px; letter-spacing: -.02em; }
.pin { width: 100%; min-height: 66px; border-radius: 16px; border: 1.5px solid var(--linea); background: var(--sup-2); text-align: center; font-family: var(--mono); font-size: 34px; letter-spacing: .5em; padding-left: .5em; }
.pin:focus { outline: none; border-color: var(--azul-3); box-shadow: 0 0 0 4px rgba(0, 103, 255, .15); }
.error { margin: 10px 0 0; color: var(--peligro); font-weight: 700; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 14px; font-weight: 800; font-size: 16px; transition: transform .12s, background-color .2s, opacity .2s; }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .5; cursor: wait; }
.btn-azul { width: 100%; min-height: 58px; margin-top: 14px; border-radius: 16px; background: var(--azul-3); color: #fff; font-size: 18px; }
.btn-ok { background: var(--ok-vivo); color: #fff; box-shadow: 0 6px 16px rgba(24, 169, 87, .28); }
.btn-gris { background: var(--sup-2); border: 1.5px solid var(--linea); color: var(--tinta); }
.btn-wa { background: #E6F6EC; color: var(--ok); }
.btn-texto-peligro { min-height: 48px; color: var(--peligro); font-weight: 700; }

/* ---------- Resumen y pestañas ---------- */
.resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.dato { padding: 12px 12px 10px; border-radius: 16px; background: var(--sup); box-shadow: var(--sombra); text-align: left; }
.dato small { display: block; font-size: 12.5px; font-weight: 700; color: var(--tinta-3); }
.dato strong { display: block; margin-top: 2px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dato.alerta { background: var(--alerta-suave); }
.dato.alerta strong { color: var(--alerta); }
.dato.bien strong { color: var(--ok); }
.pestanas { position: sticky; top: 56px; z-index: 10; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 -2px 14px; border-radius: 16px; background: #DDE5F1; }
.pestanas button { min-height: 46px; border-radius: 12px; font-weight: 800; font-size: 16px; color: var(--tinta-2); display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background-color .2s, color .2s; }
.pestanas button[aria-selected="true"] { background: var(--sup); color: var(--tinta); box-shadow: 0 1px 3px rgba(11, 27, 58, .12); }
.n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px; background: var(--alerta); color: #fff; font-size: 13px; font-weight: 800; }
.n:empty { display: none; }

.grupo { margin: 18px 4px 8px; display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3); }
.grupo:first-child { margin-top: 2px; }

/* ---------- Tarjetas para confirmar ---------- */
.tarjeta { padding: 14px; border-radius: var(--r); background: var(--sup); box-shadow: var(--sombra); animation: entrar .3s var(--ease) both; }
.tarjeta + .tarjeta { margin-top: 10px; }
.tarjeta.nueva { box-shadow: 0 0 0 3px rgba(0, 103, 255, .45), var(--sombra); }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }
.t-arriba { display: flex; align-items: center; gap: 12px; }
.avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--azul-suave); color: var(--azul-2); font-weight: 800; font-size: 16px; }
.avatar[data-s="recuperacion"] { background: var(--teal-suave); color: var(--teal); }
.t-nombre { font-size: 18px; font-weight: 800; line-height: 1.2; }
.t-sub { margin-top: 2px; font-size: 14px; color: var(--tinta-2); }
.t-monto { margin-left: auto; text-align: right; font-size: 20px; font-weight: 800; white-space: nowrap; }
.t-monto small { display: block; font-size: 12px; font-weight: 700; color: var(--tinta-3); }
.t-turnos { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 99px; background: var(--sup-2); border: 1px solid var(--linea); font-size: 13.5px; font-weight: 700; text-transform: capitalize; }
.br { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 99px; background: #009C3B; color: #FFDF00; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-decoration: none; }
.chip.falta { background: var(--alerta-suave); border-color: #F5D7AE; color: var(--alerta); text-transform: none; }
.t-acciones { display: flex; gap: 8px; }
.t-acciones .btn-ok { flex: 1; min-height: 52px; font-size: 17px; }
.t-acciones .btn-gris { flex: 0 0 52px; padding: 0; }
.vacio { padding: 30px 18px; border-radius: var(--r); background: var(--sup); box-shadow: var(--sombra); text-align: center; color: var(--tinta-2); }
.vacio .ok { width: 58px; height: 58px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-suave); color: var(--ok); }
.vacio .ok .ico { width: 30px; height: 30px; }
.vacio strong { display: block; font-size: 19px; color: var(--tinta); margin-bottom: 2px; }

/* ---------- Agenda ---------- */
.dias { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-bottom: 10px; }
.dias button { padding: 8px 6px; border-radius: 14px; background: var(--sup); border: 1.5px solid var(--linea); display: grid; justify-items: center; line-height: 1.15; }
.dias button small { font-size: 12px; font-weight: 800; text-transform: uppercase; color: var(--tinta-3); }
.dias button strong { font-size: 22px; font-weight: 800; }
.dias button span { font-size: 12px; font-weight: 700; color: var(--tinta-3); }
.dias button[aria-selected="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.dias button[aria-selected="true"] small, .dias button[aria-selected="true"] span { color: rgba(255, 255, 255, .75); }
.buscar { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px; margin-bottom: 12px; border-radius: 14px; background: var(--sup); border: 1.5px solid var(--linea); color: var(--tinta-3); }
.buscar:focus-within { border-color: var(--azul-3); box-shadow: 0 0 0 4px rgba(0, 103, 255, .12); }
.buscar input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; color: var(--tinta); }
.bloque { border-radius: var(--r); background: var(--sup); box-shadow: var(--sombra); overflow: hidden; }
.bloque + .bloque { margin-top: 10px; }
.bloque-hora { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--sup-2); border-bottom: 1px solid var(--linea); font-weight: 800; }
.bloque-hora span { font-size: 13px; font-weight: 700; color: var(--tinta-3); }
.bloque-hora.ahora { background: var(--ok-suave); color: var(--ok); }
.fila { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 14px; text-align: left; border-top: 1px solid var(--linea); }
.bloque-hora + .fila { border-top: 0; }
.fila:active { background: var(--sup-2); }
.fila .hora { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--tinta-2); width: 46px; flex: none; }
.fila .s-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--azul-suave); color: var(--azul-3); }
.fila .s-ico[data-s="recuperacion"] { background: var(--teal-suave); color: var(--teal); }
.fila .s-ico .ico { width: 20px; height: 20px; }
.fila .quien { flex: 1; min-width: 0; }
.fila .quien strong { display: block; font-size: 16px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.fila .quien small { display: block; font-size: 13px; color: var(--tinta-3); }
.fila.cancelada .quien strong { text-decoration: line-through; color: var(--tinta-3); }
.estado { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px; border-radius: 99px; font-size: 12.5px; font-weight: 800; }
.estado .ico { width: 14px; height: 14px; stroke-width: 2.6; }
.e-ok { background: var(--ok-suave); color: var(--ok); }
.e-pendiente { background: var(--alerta-suave); color: var(--alerta); }
.e-cancelada { background: var(--peligro-suave); color: var(--peligro); }

/* ---------- Ficha (se abre desde abajo) ---------- */
.hoja { width: 100%; max-width: 560px; max-height: 92dvh; margin: auto auto 0; padding: 0; border: 0; border-radius: 26px 26px 0 0; background: var(--sup); color: var(--tinta); box-shadow: 0 -10px 40px rgba(11, 27, 58, .3); overflow: auto; }
@media (min-width: 640px) { .hoja { margin: auto; border-radius: 26px; } }
.hoja::backdrop { background: rgba(6, 18, 52, .5); backdrop-filter: blur(2px); }
.hoja[open] { animation: subirHoja .3s var(--ease); }
@keyframes subirHoja { from { transform: translateY(40px); opacity: 0; } }
.hoja-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 6px; }
.hoja-cabeza h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; line-height: 1.2; }
.hoja-cabeza p { margin: 3px 0 0; color: var(--tinta-2); font-size: 14.5px; }
.cerrar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--sup-2); flex: none; }
.ficha-cuerpo { padding: 6px 18px calc(18px + var(--safe-b)); display: grid; gap: 12px; }
.f-linea { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--sup-2); }
.f-linea small { display: block; font-size: 12.5px; font-weight: 700; color: var(--tinta-3); }
.f-linea strong { display: block; font-size: 16px; text-transform: capitalize; }
.f-linea .btn { min-height: 42px; padding: 0 12px; font-size: 14.5px; }
.f-pago { padding: 14px; border-radius: 16px; border: 1.5px solid var(--linea); }
.f-pago.pendiente { background: var(--alerta-suave); border-color: #F5D7AE; }
.f-pago.ok { background: var(--ok-suave); border-color: #BFE5CC; }
.f-pago .titulo-pago { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.f-pago p { margin: 4px 0 12px; font-size: 14.5px; color: var(--tinta-2); }
.f-pago .btn { width: 100%; min-height: 54px; font-size: 17px; }
.f-pie { display: flex; gap: 8px; }
.f-pie .btn-wa { flex: 1; }

.dlg-dias { display: flex; gap: 8px; padding: 6px 18px; overflow-x: auto; }
.dlg-dias button { flex: none; min-height: 42px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--linea); background: var(--sup); font-weight: 700; text-transform: capitalize; }
.dlg-dias button[aria-selected="true"] { background: var(--azul-3); border-color: var(--azul-3); color: #fff; }
.dlg-dias button:disabled { opacity: .45; cursor: not-allowed; }
.dlg-horas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 18px calc(20px + var(--safe-b)); }
.dlg-horas button { min-height: 58px; border-radius: 14px; border: 1.5px solid var(--linea); background: var(--sup); display: grid; place-items: center; line-height: 1.15; }
.dlg-horas button strong { font-family: var(--mono); font-size: 18px; }
.dlg-horas button small { font-size: 12px; font-weight: 700; color: var(--ok); }
.dlg-horas button:disabled { background: var(--sup-2); color: var(--tinta-3); cursor: not-allowed; }
.dlg-horas button:disabled small { color: var(--tinta-3); }
.dlg-horas button.actual { border-color: var(--azul-3); background: var(--azul-suave); }
.dlg-horas button.actual small { color: var(--azul-2); }

.toast { position: fixed; left: 50%; bottom: calc(20px + var(--safe-b)); z-index: 60; width: min(92vw, 460px); padding: 14px 16px; border-radius: 14px; background: var(--tinta); color: #fff; font-weight: 700;
  box-shadow: 0 16px 40px rgba(11, 27, 58, .3); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: transform .25s, opacity .2s; }
.toast.visible { transform: translate(-50%, 0); opacity: 1; }
.toast.error { background: var(--peligro); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }

/* ---------- 14/10: lugares por turno, bota de reserva, deshacer ---------- */
.lugares { display: grid; gap: 4px; padding: 8px 14px; border-bottom: 1px solid var(--linea); font-size: 14px; }
.lugares > div { display: flex; align-items: center; gap: 6px; }
.lugares strong { width: 52px; font-variant-numeric: tabular-nums; }
.lugares .ico { width: 16px; height: 16px; color: var(--tinta-2); margin-left: 6px; }
.lugar { min-width: 38px; padding: 2px 8px; border-radius: 999px; background: var(--ok-suave); color: var(--ok); font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.lugar.lleno { background: var(--sup-2); color: var(--tinta-2); }
.interruptor { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 12px 14px; border-radius: var(--r); background: var(--sup); box-shadow: var(--sombra); cursor: pointer; min-height: 44px; }
.interruptor input { position: absolute; opacity: 0; }
.interruptor .pista { flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--linea); position: relative; transition: background .2s; }
.interruptor .pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.interruptor input:checked + .pista { background: var(--ok); }
.interruptor input:checked + .pista::after { transform: translateX(18px); }
.interruptor input:focus-visible + .pista { outline: 2px solid var(--tinta); outline-offset: 2px; }
.interruptor small { display: block; color: var(--tinta-2); font-size: 13px; }
.toast.con-accion { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toast .deshacer { flex: none; min-height: 40px; padding: 0 14px; border-radius: 10px; background: #fff; color: var(--tinta); font-weight: 800; }
.toast.con-accion.visible { pointer-events: auto; }