/* Islagenda v3.2 · pantallas de la app: reserva del cliente, alta del local y panel «Mi local».
   Mismo mundo visual que la web: azul marino, turquesa, coral y arena; Poppins para títulos, Inter para texto. */
:root{
  --navy:#0B3C5D;--navy-deep:#08314D;--navy-2:#0F4568;--teal:#17B3A6;--teal-ink:#107D74;--teal-light:#3FCBBE;
  --coral:#E8573A;--coral-ink:#C93A1C;--coral-hover:#B8301A;--sand:#F4EBDD;--sand-2:#EADFCB;--sand-3:#FBF7F0;
  --ink:#1D2329;--muted:#55606B;--line:#E1D6C4;--error:#B42318;--ok:#0E7A5F;--white:#fff;
  --r-sm:10px;--r-md:16px;--r-lg:22px;--ease:cubic-bezier(0.23,1,0.32,1);
  --sombra:0 1px 2px rgba(8,49,77,.06),0 8px 24px -12px rgba(8,49,77,.18);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-padding-top:72px}
body{margin:0;background:var(--sand);min-height:100dvh;font-size:16px;line-height:1.5;caret-color:var(--coral-ink);scrollbar-color:var(--navy) var(--sand)}
::selection{background:var(--teal-light);color:var(--navy-deep)}
h1,h2,h3{font-family:Poppins,Inter,Arial,sans-serif;color:var(--navy);line-height:1.2;text-wrap:balance;margin:0}
p{text-wrap:pretty;margin:0}
a{color:var(--navy);text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
/* Títulos que reciben el foco por programa (cambio de pantalla): el lector lo anuncia, sin anillo visual */
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,main[tabindex="-1"]:focus,[role=tabpanel]:focus{outline:none}
.tnum{font-variant-numeric:tabular-nums}
.oculto{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:12px;top:-60px;background:var(--navy);color:#fff;padding:10px 14px;border-radius:var(--r-sm);z-index:50}
.saltar:focus{top:12px}

/* ── Botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px;border-radius:999px;border:0;
  font:600 16px/1.2 Poppins,Inter,Arial,sans-serif;text-decoration:none;cursor:pointer;touch-action:manipulation;user-select:none;
  transition:background-color .18s ease,transform .16s var(--ease),box-shadow .18s ease}
.btn:active{transform:scale(.97)}
.btn svg{width:20px;height:20px;flex:0 0 auto}
.btn-coral{background:var(--coral-ink);color:#fff}
.btn-coral:hover{background:var(--coral-hover)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-deep)}
.btn-wa{background:#0F7A4B;color:#fff}
.btn-wa:hover{background:#0B6239}
.btn-suave{background:var(--white);color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-suave:hover{box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn-texto{background:transparent;color:var(--navy);min-height:44px;padding:10px 6px;text-decoration:underline;text-underline-offset:4px;font-weight:500}
.btn-ancho{width:100%}
.btn[disabled],.btn[aria-busy=true]{opacity:.6;cursor:progress}
.btn-gigante{min-height:64px;font-size:19px}

/* ── Formularios ── */
.campo{display:grid;gap:6px;margin-bottom:16px}
.campo label,.etq{font:600 15px/1.3 Inter,Arial,sans-serif;color:var(--navy)}
.campo .ayuda{font-size:14px;color:var(--muted)}
input[type=text],input[type=tel],input[type=email],input[type=password],input[type=number],input[type=url],input[type=date],input[type=time],select{
  width:100%;min-height:50px;padding:12px 14px;border:1.5px solid #C9BBA4;border-radius:var(--r-sm);background:#fff;color:var(--ink);font:400 16px/1.3 Inter,Arial,sans-serif}
input:focus-visible,select:focus-visible{outline:3px solid var(--teal);outline-offset:1px;border-color:var(--navy)}
input[aria-invalid=true],select[aria-invalid=true]{border-color:var(--error)}
.error{color:var(--error);font-size:14px;font-weight:500}
.marca{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink);cursor:pointer;padding:6px 0}
.marca input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--navy);flex:0 0 auto}
.aviso{padding:12px 14px;border-radius:var(--r-sm);background:#FDECEA;color:var(--error);font-weight:500}
.aviso-ok{background:#E3F4EE;color:var(--ok)}

/* ── Chips de elección (servicio, profesional, día, hora) ── */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:48px;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--navy);font:500 16px/1.2 Inter,Arial,sans-serif;cursor:pointer;touch-action:manipulation;transition:border-color .15s ease,background-color .15s ease}
.chip:hover{border-color:var(--navy)}
.chip[aria-pressed=true],.chip[aria-checked=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.chip small{display:block;font-size:13px;opacity:.8;font-weight:400}
.lista-opc{display:grid;gap:8px}
.opc{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:60px;padding:12px 16px;border-radius:var(--r-md);border:1.5px solid var(--line);background:#fff;text-align:left;cursor:pointer;font:500 17px/1.3 Inter,Arial,sans-serif;color:var(--ink);touch-action:manipulation}
.opc:hover{border-color:var(--navy)}
.opc[aria-checked=true]{border-color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy);background:var(--sand-3)}
.opc .dato{color:var(--muted);font-size:15px;font-weight:400;white-space:nowrap}
.dias{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.dia{flex:0 0 64px;scroll-snap-align:start;min-height:72px;border-radius:var(--r-md);border:1.5px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;font:500 14px/1.2 Inter,Arial,sans-serif;display:grid;place-items:center;padding:8px 4px}
.dia b{font:600 22px/1 Poppins,Arial,sans-serif}
.dia[aria-checked=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.horas{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.hora{min-height:48px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:#fff;color:var(--navy);font:600 16px/1 Inter,Arial,sans-serif;font-variant-numeric:tabular-nums;cursor:pointer}
.hora[aria-checked=true]{background:var(--coral-ink);border-color:var(--coral-ink);color:#fff}

/* ═══ Reserva del cliente ═══ */
.reserva{max-width:520px;margin:0 auto;padding:0 16px 140px}
.cab-local{padding:22px 0 18px}
.cab-local h1{font-size:28px;font-weight:700}
.cab-local p{color:var(--muted);margin-top:4px}
.paso{background:#fff;border-radius:var(--r-lg);padding:20px 18px;margin-bottom:14px;box-shadow:var(--sombra)}
.paso h2{font-size:19px;font-weight:600;margin-bottom:14px}
.paso .cambiar{float:right;font-size:15px}
.resumen-paso{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--ink)}
.barra-accion{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--sand) 70%,rgba(244,235,221,0))}
.barra-accion .dentro{max-width:520px;margin:0 auto}

/* Tarjeta «¿Lo de siempre?»: lo único que grita en la página */
.siempre{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:26px 22px 22px;margin:8px 0 14px;box-shadow:0 18px 40px -20px rgba(8,49,77,.6);position:relative;overflow:hidden}
.siempre::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(63,203,190,.35),rgba(63,203,190,0) 70%);pointer-events:none}
.siempre h2{color:#fff;font-size:30px;font-weight:700}
.siempre .pregunta{font:500 21px/1.35 Poppins,Inter,Arial,sans-serif;margin:12px 0 22px;color:#E8F6F4}
.siempre .pregunta strong{color:#fff;font-weight:600}
.siempre .btn-coral{box-shadow:0 10px 24px -10px rgba(232,87,58,.9)}
.siempre .otra{display:block;margin:14px auto 0;color:#fff;text-align:center}
.ya-tienes{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);font-size:15px;color:#CFE7EC}

/* Ticket de confirmación: borde troquelado y el tiempo real medido */
.ticket{position:relative;background:#fff;border-radius:var(--r-lg);margin:22px 0 16px;box-shadow:var(--sombra);
  -webkit-mask:radial-gradient(circle 13px at 0 62%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% 62%,transparent 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 13px at 0 62%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% 62%,transparent 98%,#000) right/51% 100% no-repeat}
.ticket .arriba{padding:26px 22px 22px}
.ticket .sello{display:inline-flex;align-items:center;gap:8px;color:var(--ok);font-weight:600}
.ticket .sello svg{width:22px;height:22px}
.ticket h1{font-size:26px;margin:10px 0 4px}
.ticket .cuando{font:600 21px/1.3 Poppins,Arial,sans-serif;color:var(--ink)}
.ticket .quien{color:var(--muted);margin-top:2px}
.ticket .corte{border-top:2px dashed var(--line);margin:0 18px}
.ticket .abajo{padding:16px 22px 22px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.crono{font:700 44px/1 Poppins,Arial,sans-serif;color:var(--teal-ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.crono-txt{color:var(--muted);font-size:15px}
.acciones{display:grid;gap:10px;margin-bottom:18px}

/* Insignia viral: discreta, con datos reales */
.insignia{display:flex;gap:10px;align-items:flex-start;margin:26px 0 8px;padding:14px 4px 0;border-top:1px solid var(--line);color:var(--muted);font-size:14px;line-height:1.45}
.insignia svg{width:18px;height:18px;flex:0 0 auto;margin-top:1px;color:var(--teal-ink)}
.insignia a{color:var(--navy);font-weight:600}

.espera{background:var(--sand-3);border:1.5px dashed #C9BBA4;border-radius:var(--r-md);padding:16px;margin-top:12px}
.espera p{margin-bottom:10px}
.cargando{display:flex;gap:6px;padding:20px 0;justify-content:center}
.cargando i{width:8px;height:8px;border-radius:50%;background:var(--navy);opacity:.25;animation:pulso 1s infinite}
.cargando i:nth-child(2){animation-delay:.15s}.cargando i:nth-child(3){animation-delay:.3s}
@keyframes pulso{50%{opacity:1}}
.vacio{color:var(--muted);padding:6px 0}

/* ═══ Alta del local ═══ */
.alta{max-width:640px;margin:0 auto;padding:24px 16px 120px}
.alta-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.logo{display:inline-flex;align-items:center;gap:10px;font:700 20px/1 Poppins,Arial,sans-serif;color:var(--navy);text-decoration:none}
.logo svg{width:30px;height:30px}
.progreso{display:flex;gap:6px;margin:18px 0 22px;list-style:none;padding:0}
.progreso li{flex:1;height:6px;border-radius:6px;background:var(--sand-2)}
.progreso li[aria-current=step],.progreso li.hecho{background:var(--navy)}
.tarjeta{background:#fff;border-radius:var(--r-lg);padding:24px 20px;box-shadow:var(--sombra)}
.tarjeta h1{font-size:26px;margin-bottom:6px}
.tarjeta .sub{color:var(--muted);margin-bottom:22px}
.fila-serv{display:grid;grid-template-columns:1fr 92px 92px 44px;gap:8px;align-items:end;margin-bottom:10px}
.fila-serv label{font-size:13px;color:var(--muted);font-weight:500}
.quitar{width:44px;height:50px;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:var(--r-sm)}
.quitar:hover{color:var(--error);background:#FDECEA}
.quitar svg{width:20px;height:20px}
.horario-fila{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--sand-2)}
.horario-fila .tramos{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.horario-fila input[type=time]{width:112px;min-height:44px;padding:8px 6px}
.tramo{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.horario-fila .cerrado{color:var(--muted)}
.pie-alta{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
.ventaja{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:15px;margin-top:14px}
.ventaja svg{width:18px;height:18px;color:var(--teal-ink)}

/* ═══ Panel «Mi local» ═══ */
.panel{min-height:100dvh;background:var(--sand-3)}
.barra{position:sticky;top:0;z-index:30;background:var(--navy);color:#fff}
.barra .dentro{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.barra .logo{color:#fff}
.barra .nom-local{font-weight:600;opacity:.9;margin-right:auto}
.pestanas{display:flex;gap:4px;overflow-x:auto;max-width:1100px;margin:0 auto;padding:0 12px;scrollbar-width:none}
.pestanas button{flex:0 0 auto;min-height:48px;padding:10px 16px;border:0;background:transparent;color:#CFE0EA;font:500 15px/1 Poppins,Arial,sans-serif;cursor:pointer;border-bottom:3px solid transparent}
.pestanas button[aria-selected=true]{color:#fff;border-bottom-color:var(--teal-light)}
.contenido{max-width:1100px;margin:0 auto;padding:20px 16px 80px}
.franja-prueba{background:#FFF4D6;color:#6B4E00;padding:10px 16px;text-align:center;font-size:15px}
.cab-seccion{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.cab-seccion h2{font-size:22px}
.selector-dia{display:flex;align-items:center;gap:6px}
.selector-dia button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--navy);cursor:pointer}
.selector-dia button svg{width:18px;height:18px}
.citas{display:grid;gap:8px}
.cita{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;background:#fff;border-radius:var(--r-md);padding:12px 14px;box-shadow:var(--sombra)}
.cita .h{font:600 18px/1 Poppins,Arial,sans-serif;color:var(--navy);font-variant-numeric:tabular-nums}
.cita .q{font-weight:600}
.cita .d{color:var(--muted);font-size:14px}
.cita.estado-cancelada,.cita.estado-no_show{opacity:.6}
.cita.estado-cancelada .q{text-decoration:line-through}
.etiqueta{display:inline-block;font-size:12px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--sand);color:var(--navy);margin-left:6px;vertical-align:1px}
.etiqueta.coral{background:#FDE5DF;color:var(--coral-ink)}
.etiqueta.verde{background:#DDF3EC;color:var(--ok)}
.menu-cita{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.menu-cita .btn{min-height:40px;padding:8px 12px;font-size:14px}
.hueco-libre{background:#E7F6F4;border:1.5px solid #A8E0D9;border-radius:var(--r-md);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hueco-libre strong{color:var(--teal-ink)}
.lista-avisos{display:grid;gap:8px;margin-top:12px}
.aviso-fila{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border-radius:var(--r-sm);padding:10px 12px;flex-wrap:wrap}
.aviso-fila .hecho{color:var(--ok);font-size:14px;font-weight:600}
.rejilla{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.caja{background:#fff;border-radius:var(--r-lg);padding:20px;box-shadow:var(--sombra)}
.caja h3{font-size:18px;margin-bottom:10px}
.cifra{font:700 34px/1 Poppins,Arial,sans-serif;color:var(--navy);font-variant-numeric:tabular-nums}
.cifra-txt{color:var(--muted);font-size:14px;margin-top:4px}
.copiable{display:flex;gap:8px;align-items:center}
.copiable input{font-size:15px}
.qr{display:grid;place-items:center;background:#fff;padding:16px;border-radius:var(--r-md);border:1.5px solid var(--line)}
.qr svg{width:220px;height:220px}
.codigo{font:500 13px/1.5 ui-monospace,Menlo,Consolas,monospace;background:var(--sand-3);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px;width:100%;min-height:96px;resize:vertical;color:var(--ink)}
.login{max-width:420px;margin:0 auto;padding:48px 16px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--navy-deep);color:#fff;padding:12px 18px;border-radius:999px;font-weight:500;z-index:60;box-shadow:var(--sombra)}
dialog{border:0;border-radius:var(--r-lg);padding:22px;max-width:min(520px,calc(100vw - 24px));width:100%;box-shadow:0 24px 60px -20px rgba(8,49,77,.5)}
dialog::backdrop{background:rgba(8,49,77,.45)}
table.tabla{width:100%;border-collapse:collapse;font-size:15px;background:#fff;border-radius:var(--r-md);overflow:hidden}
.tabla th,.tabla td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--sand-2);vertical-align:top}
.tabla th{font-weight:600;color:var(--navy);background:var(--sand-3)}
.desliza{overflow-x:auto}

@media (min-width:760px){
  .cab-local h1{font-size:34px}
  .siempre h2{font-size:34px}
}
@media (max-width:520px){
  .fila-serv{grid-template-columns:1fr 1fr 44px;padding-bottom:12px;border-bottom:1px solid var(--sand-2)}
  .fila-serv>div:first-child{grid-column:1/-1}
  .fila-serv[style]>div:first-child{grid-column:auto}
  .horario-fila{grid-template-columns:1fr}
  .cita{grid-template-columns:52px 1fr}
  .cita .menu-cita{grid-column:1/-1;justify-content:flex-start}
}
@media (prefers-reduced-motion:no-preference){
  .entra{animation:entra .42s var(--ease) both}
  @keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .ticket.entra{animation:ticket .55s var(--ease) both}
  @keyframes ticket{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.barra,.pestanas,.no-imprimir{display:none!important}body,.panel{background:#fff}.caja{box-shadow:none}}