/* ══════════════════════════════════════════════════════════════
   PELAO · sistema de diseño "Aire barbería"
   Cielo claro, tarjetas blancas flotantes, azul de acción y rojo
   de acento (los colores del poste de barbería dominicano).
   ══════════════════════════════════════════════════════════════ */
:root{
  /* marca */
  --azul:#2E6BE6; --azul-hover:#1F55C4; --azul-suave:#E4EEFD;
  --rojo:#E5352B; --rojo-suave:#FDE9E7;
  --cta:linear-gradient(100deg,#2E6BE6 0%,#4A84F0 100%);
  /* cielo y superficies */
  --cielo-1:#D9E9FA; --cielo-2:#EFF6FE; --ground:#E8F1FB;
  --card:#FFFFFF; --muted:#F0F5FA;
  --ink:#16233B; --ink-soft:#66788F; --line:#E3EBF4; --line-2:#D3DEEC;
  --vidrio:rgba(255,255,255,.74);
  /* semánticos */
  --ok:#12934D; --ok-suave:#E1F6EA;
  --warn:#A96A00; --warn-suave:#FDF2DC;
  --oscuro:#101519;
  --sombra:0 6px 24px rgba(35,80,140,.08),0 1px 2px rgba(35,80,140,.05);
  --sombra-alta:0 18px 50px rgba(20,45,85,.22);
  --radius:24px; --radius-s:14px;
  --dur:.22s; --ease:cubic-bezier(.33,1,.68,1);
  --texto:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  /* nombres viejos (versión oscura) que siguen usando las páginas */
  --negro:#FFFFFF; --carbon:#FFFFFF; --carbon-2:#F0F5FA; --carbon-3:#E3EBF4;
  --blanco:#16233B; --gris:#66788F; --gris-2:#A9B4C3;
  --oro:#2E6BE6; --oro-2:#2E6BE6; --oro-suave:#E4EEFD;
  --verde:#12934D; --verde-suave:#E1F6EA; --azul-suave-2:#E4EEFD;
  --linea:#E3EBF4; --linea-2:#D3DEEC;
  --display:var(--texto);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--ground);touch-action:manipulation} /* sin zoom por doble toque (la gente lo hace sin querer) */
body{
  background:var(--ground);
  color:var(--ink);font-family:var(--texto);font-size:16px;line-height:1.5;min-height:100dvh;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
}
/* el cielo va en una capa fija aparte: en iPhone un fondo "fixed" se repinta en cada scroll y traba la pantalla */
body::before{content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,var(--cielo-1) 0%,var(--cielo-2) 42%,var(--ground) 100%);pointer-events:none}
body.sin-nav{padding-bottom:32px}
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation;font-family:inherit}
a{color:var(--azul)}
.display{font-weight:800;letter-spacing:-.5px;line-height:1.05}
h1,h2,h3{font-weight:700;letter-spacing:-.2px;text-wrap:balance}
.num,.money{font-variant-numeric:tabular-nums}
.oro{color:var(--azul)}
.gris{color:var(--ink-soft)}

/* ══ EL POSTE DE BARBERÍA (domos cromados, tubo de vidrio, rayas que suben como cuando gira) ══ */
.poste{display:inline-block;position:relative;width:44px;height:160px;flex-shrink:0;--p:26px;
  --cromo:linear-gradient(90deg,#262B34 0%,#7F8896 16%,#F3F6F9 34%,#C6CED8 48%,#646C7A 70%,#262B34 100%)}
.poste>*{position:absolute;left:0;right:0}
.poste .domo{height:13%;border-radius:50% 50% 14% 14% / 100% 100% 24% 24%;
  background:radial-gradient(ellipse at 38% 28%,#FFFFFF 0%,#C2CAD5 18%,#5E6674 55%,#1F242C 100%);box-shadow:0 3px 7px rgba(0,0,0,.35)}
.poste .domo.arriba{top:0}
.poste .domo.abajo{bottom:0;border-radius:14% 14% 50% 50% / 24% 24% 100% 100%;
  background:radial-gradient(ellipse at 38% 72%,#FFFFFF 0%,#C2CAD5 18%,#5E6674 55%,#1F242C 100%)}
.poste .aro{height:7%;left:-9%;right:-9%;border-radius:20%/50%;background:var(--cromo);box-shadow:0 2px 5px rgba(0,0,0,.35)}
.poste .aro.arriba{top:12%}
.poste .aro.abajo{bottom:12%}
.poste .tubo{top:18%;bottom:18%;left:7%;right:7%;border-radius:24%/7%;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
/* la tira de rayas es más alta que el tubo y se desplaza exactamente un periodo: nunca se ve la costura */
.poste .rayas{position:absolute;left:0;right:0;top:calc(var(--p) * -7);bottom:calc(var(--p) * -7);
  background:repeating-linear-gradient(135deg,#E5352B 0,#E5352B var(--p),#FFFFFF var(--p),#FFFFFF calc(var(--p)*2),#2E6BE6 calc(var(--p)*2),#2E6BE6 calc(var(--p)*3),#FFFFFF calc(var(--p)*3),#FFFFFF calc(var(--p)*4));
  animation:posteGira 2.4s linear infinite;will-change:transform}
/* un periodo de rayas a 135° mide P·4·√2 = 5.657·P en vertical */
@keyframes posteGira{from{transform:translateY(0)}to{transform:translateY(calc(var(--p) * -5.657))}}
/* el vidrio: sombra en los bordes, brillo a la izquierda */
.poste .tubo::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.08) 18%,rgba(255,255,255,0) 26%,rgba(255,255,255,.55) 36%,rgba(255,255,255,0) 48%,rgba(0,0,0,.06) 70%,rgba(0,0,0,.45) 100%)}
.poste.mini{width:18px;height:64px;--p:11px}
.poste.chico{width:30px;height:110px;--p:18px}
.poste.grande{width:66px;height:240px;--p:38px}
/* .quieto: poste sin animación (para la barra de arriba de la app, que es fija) */
.poste.quieto .rayas{animation:none}
@media(prefers-reduced-motion:reduce){.poste .rayas{animation:none}}

/* ── cabecera ── */
.appbar{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid rgba(255,255,255,.6);box-shadow:0 4px 24px rgba(35,80,140,.06);
  padding:calc(12px + env(safe-area-inset-top)) 16px 10px;
}
.appbar .fila{display:flex;align-items:center;gap:12px;max-width:980px;margin:0 auto}
.appbar .logo{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:var(--sombra)}
.appbar .marca{font-weight:800;font-size:17px;letter-spacing:-.3px;line-height:1.1}
.appbar .marca small{display:block;font-size:11px;font-weight:600;letter-spacing:.6px;color:var(--ink-soft);text-transform:uppercase;margin-top:2px}
.appbar .rol{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;background:#fff;border:0;border-radius:999px;padding:5px 12px 5px 5px;cursor:pointer;color:var(--ink);box-shadow:var(--sombra)}
.appbar .rol .punto{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--azul),#6FA6F5);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;object-fit:cover}
.appbar .sub{max-width:980px;margin:6px auto 0;font-size:13.5px;color:var(--ink-soft)}
.appbar .link-barra{max-width:980px;margin:10px auto 0;display:flex;gap:8px}
.appbar .link-barra .btn{min-height:44px;padding:10px 14px;font-size:14px}
.appbar .link-barra .btn.oro{flex:1}
.appbar .link-txt{max-width:980px;margin:6px auto 0;font-size:11.5px;color:var(--ink-soft);font-weight:600;word-break:break-all}

/* ── contenedor ── */
.wrap{max-width:720px;margin:0 auto;padding:18px 16px}
@media(min-width:768px){.wrap{padding:24px 20px}}

/* ── barra de abajo: pastilla oscura flotante ── */
.bottomnav{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom));z-index:50;
  background:rgba(16,21,25,.96);
  border-radius:999px;display:flex;gap:2px;padding:7px;box-shadow:var(--sombra-alta);max-width:calc(100vw - 24px);
}
.bottomnav button{
  border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:10.5px;font-weight:600;color:rgba(255,255,255,.55);padding:8px 12px;border-radius:999px;min-height:50px;min-width:58px;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease),transform .12s var(--ease);position:relative;
}
.bottomnav button svg{width:22px;height:22px}
.bottomnav button.on{color:#fff;background:rgba(255,255,255,.16)}
.bottomnav button:active{transform:scale(.92)}

section.pantalla{display:none}
section.pantalla.on{display:block;animation:pantallaEntra .3s var(--ease)}
@keyframes pantallaEntra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── tarjetas ── */
.card{background:var(--card);border:0;border-radius:var(--radius);padding:20px;margin-bottom:14px;box-shadow:var(--sombra)}
.card h2{font-size:17.5px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.card h2 svg{width:20px;height:20px;stroke:var(--azul)}
.card h2 .lado{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.nota{font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.nota b{color:var(--ink)}
.vacio{color:var(--ink-soft);font-size:14px;padding:8px 2px}
.reveal{opacity:0;transform:translateY(14px);animation:revela .5s var(--ease) forwards}
.reveal:nth-child(2){animation-delay:.06s}.reveal:nth-child(3){animation-delay:.12s}.reveal:nth-child(4){animation-delay:.18s}.reveal:nth-child(5){animation-delay:.24s}
@keyframes revela{to{opacity:1;transform:none}}

/* héroe con número grande (azul marino como Republic) */
.hero{
  background:linear-gradient(135deg,#14213A 0%,#1D3A6B 60%,#2E6BE6 140%);color:#fff;
  border-radius:28px;padding:24px 20px 20px;margin-bottom:14px;position:relative;overflow:hidden;text-align:center;
  box-shadow:0 18px 44px rgba(20,45,85,.35);
}
.hero::before{content:'';position:absolute;top:-70px;right:-40px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%)}
.hero::after{content:'';position:absolute;bottom:-90px;left:-50px;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,rgba(229,53,43,.3),transparent 70%)}
.hero>*{position:relative;z-index:1}
.hero .lbl{font-size:13px;font-weight:600;color:rgba(255,255,255,.72)}
.hero .numero{font-weight:800;font-size:46px;letter-spacing:-1.5px;line-height:1.05;margin:4px 0 2px;color:#fff}
.hero .sub{font-size:13px;color:rgba(255,255,255,.7)}
.hero .chips{margin-top:14px}
.hero .chip{background:rgba(255,255,255,.16);color:#fff;border:0;box-shadow:none;backdrop-filter:blur(8px)}
.hero .chip.oro{background:rgba(255,255,255,.22);color:#fff}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:0;border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:700;color:var(--ink);box-shadow:var(--sombra)}
.chip.ok{background:var(--ok-suave);color:var(--ok);box-shadow:none}
.chip.oro{background:var(--azul-suave);color:var(--azul);box-shadow:none}
.chip.rojo{background:var(--rojo-suave);color:var(--rojo);box-shadow:none}
.chip.azul{background:var(--azul-suave);color:var(--azul);box-shadow:none}

/* cuadrícula de números */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.kpi{background:#fff;border-radius:22px;box-shadow:var(--sombra);padding:16px}
.kpi .ic{width:36px;height:36px;border-radius:13px;background:linear-gradient(135deg,var(--azul),#6FA6F5);color:#fff;display:grid;place-items:center;margin-bottom:10px}
.kpi .ic svg{width:18px;height:18px}
.kpi.verde .ic{background:linear-gradient(135deg,#12934D,#4CC78A)}
.kpi.azul .ic{background:linear-gradient(135deg,#1A2430,#37455A)}
.kpi.rojo .ic{background:linear-gradient(135deg,#E5352B,#FF7A5C)}
.kpi .v{font-weight:800;font-size:24px;letter-spacing:-.5px;line-height:1.1}
.kpi .l{font-size:12px;color:var(--ink-soft);font-weight:600;margin-top:4px}

/* gráfica de barras */
.grafica{display:flex;align-items:flex-end;gap:8px;height:130px;padding:6px 2px 0}
.grafica .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.grafica .palo{width:100%;max-width:38px;border-radius:9px 9px 4px 4px;background:linear-gradient(180deg,#6FA6F5,var(--azul));transition:height .8s var(--ease);height:0;min-height:3px}
.grafica .col.hoy .palo{background:linear-gradient(180deg,#FF7A5C,var(--rojo))}
.grafica .col .v{font-size:9.5px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.grafica .col .d{font-size:11px;font-weight:700;color:var(--ink-soft)}
.grafica .col.hoy .d{color:var(--rojo)}

/* filas de lista */
.fila-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.fila-item:last-child{border-bottom:0}
.fila-item .icono{width:42px;height:42px;border-radius:14px;background:var(--azul-suave);display:grid;place-items:center;flex-shrink:0;color:var(--azul)}
.fila-item .icono svg{width:20px;height:20px}
.fila-item .hora{width:64px;flex-shrink:0;text-align:center}
.fila-item .hora b{display:block;font-weight:800;font-size:18px;line-height:1;letter-spacing:-.3px}
.fila-item .hora span{font-size:10.5px;color:var(--ink-soft);font-weight:600}
.fila-item .cuerpo{flex:1;min-width:0}
.fila-item .titulo{font-weight:700;font-size:15px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fila-item .detalle{font-size:13px;color:var(--ink-soft);margin-top:2px}
.fila-item .lado{text-align:right;flex-shrink:0}
.fila-item .lado .mini{font-size:11px;color:var(--ink-soft)}
.fila-item.apagado{opacity:.5}
.tag{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;border-radius:999px;padding:2px 8px;background:var(--muted);color:var(--ink-soft)}
.tag.oro{background:var(--azul-suave);color:var(--azul)} .tag.ok{background:var(--ok-suave);color:var(--ok)} .tag.rojo{background:var(--rojo-suave);color:var(--rojo)} .tag.azul{background:var(--azul-suave);color:var(--azul)}
.avatar{display:grid;place-items:center;background:linear-gradient(135deg,var(--azul),#6FA6F5);color:#fff;font-weight:700}
.foto-cli{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;font-size:14px}
.acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* ── botones ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  font-size:15px;font-weight:700;border-radius:999px;padding:13px 20px;min-height:48px;color:var(--ink);background:var(--muted);
  transition:transform .12s var(--ease),filter var(--dur),opacity var(--dur),box-shadow var(--dur);text-decoration:none;
}
.btn svg{width:18px;height:18px}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn.oro{background:var(--azul);color:#fff;box-shadow:0 8px 22px rgba(46,107,230,.32)}
.btn.oro:hover{background:var(--azul-hover)}
.btn.linea{background:#fff;border:1.5px solid var(--line-2);color:var(--ink)}
.btn.verde{background:#22B457;color:#fff}
.btn.rojo{background:var(--rojo-suave);color:var(--rojo)}
.btn.suave{background:var(--muted)}
.btn.oscuro{background:var(--oscuro);color:#fff}
.btn.bloque{display:flex;width:100%}
.btn.mini{font-size:13px;padding:8px 14px;min-height:38px}
.btn.grande{font-size:17px;padding:16px 24px;min-height:56px}

/* ── formularios ── */
label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin:16px 0 6px}
input,select,textarea{
  width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;
  background:var(--muted);color:var(--ink);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur);
}
input::placeholder,textarea::placeholder{color:#A9B4C3}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul);background:#fff;box-shadow:0 0 0 4px rgba(46,107,230,.14)}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2366788F' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
textarea{min-height:80px;resize:vertical}
input[type=file]{padding:9px;font-size:14px}
input.pin{font-size:26px;letter-spacing:10px;text-align:center}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.switch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px;font-weight:600}
.switch:last-child{border-bottom:0}
.switch input{width:22px;height:22px;accent-color:var(--azul)}
.err{color:var(--rojo);font-size:13.5px;font-weight:600;min-height:20px;margin-top:8px}
.toggle-dias{display:flex;gap:6px;flex-wrap:wrap}
.toggle-dias button{flex:1;min-width:42px;border:2px solid var(--line);background:#fff;border-radius:12px;padding:10px 2px;cursor:pointer;font-size:12px;font-weight:800;color:var(--ink-soft)}
.toggle-dias button.on{border-color:var(--ok);background:var(--ok-suave);color:var(--ok)}
.foto-edit{display:flex;align-items:center;gap:12px;margin-top:6px}
.foto-edit img,.foto-edit .avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;font-size:20px;flex-shrink:0;box-shadow:var(--sombra)}
.foto-edit img.ancha{width:110px;height:64px;border-radius:12px}
.link-caja{display:flex;align-items:center;gap:10px;background:var(--muted);border-radius:14px;padding:10px 12px;margin-top:8px}
.link-caja code{flex:1;font-size:13px;word-break:break-all;color:var(--azul);font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ── ventanas (modal) ── */
.velo{position:fixed;inset:0;z-index:90;background:rgba(16,35,59,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:flex-end;justify-content:center;padding:0}
.velo.on{display:flex;animation:veloEntra .2s var(--ease)}
@keyframes veloEntra{from{opacity:0}to{opacity:1}}
.ventana{background:#fff;border-radius:26px 26px 0 0;width:100%;max-width:560px;max-height:92dvh;overflow-y:auto;padding:18px 18px calc(22px + env(safe-area-inset-bottom));animation:ventanaSube .3s var(--ease);box-shadow:var(--sombra-alta)}
@keyframes ventanaSube{from{transform:translateY(40px)}to{transform:none}}
@media(min-width:600px){.velo{align-items:center;padding:20px}.ventana{border-radius:26px}}
.ventana-cab{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.ventana-cab h2{font-size:19px;font-weight:800;letter-spacing:-.3px}
.ventana-cab p{font-size:13px;color:var(--ink-soft)}
.ventana .cerrar{margin-left:auto;width:38px;height:38px;border-radius:50%;border:0;background:var(--muted);color:var(--ink);display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.ventana .cerrar svg{width:18px;height:18px}
.burbuja{width:44px;height:44px;border-radius:15px;background:linear-gradient(135deg,var(--azul),#6FA6F5);color:#fff;display:grid;place-items:center;flex-shrink:0}
.burbuja svg{width:22px;height:22px}
.burbuja.roja{background:linear-gradient(135deg,var(--rojo),#FF7A5C)}
.burbuja.oscura{background:linear-gradient(135deg,#1A2430,#37455A)}

/* ── PIN ── */
#pin-velo{position:fixed;inset:0;z-index:200;background:linear-gradient(180deg,var(--cielo-1),var(--ground));overflow-y:auto;padding:calc(36px + env(safe-area-inset-top)) 18px 30px;font-family:var(--texto);color:var(--ink)}
#pin-velo .pin-caja{max-width:380px;margin:0 auto;text-align:center}
#pin-velo .pin-foto{display:flex;align-items:flex-end;justify-content:center;gap:16px;margin-bottom:14px}
#pin-velo .pin-foto img,#pin-velo .pin-foto .avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;display:grid;font-size:30px;border:4px solid #fff;box-shadow:var(--sombra-alta)}
#pin-velo h1{font-size:28px;font-weight:800;letter-spacing:-.5px}
#pin-velo .sub{font-size:13.5px;color:var(--ink-soft);margin:6px 0 18px}
#pin-velo .pin-tarjeta{background:#fff;border-radius:22px;padding:18px;box-shadow:var(--sombra)}
#pin-velo input{font-size:28px;letter-spacing:12px;text-align:center;padding:14px}
#pin-velo .btn{margin-top:12px}
#pin-velo .pie{font-size:12.5px;color:var(--ink-soft);margin-top:22px;line-height:1.9}
.pantalla-error{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,var(--cielo-1),var(--ground));color:var(--ink);text-align:center}
.pantalla-error>div{max-width:380px}
.pantalla-error .ico{margin-bottom:12px;display:flex;justify-content:center}
.pantalla-error h1{font-size:24px;font-weight:800;margin-bottom:8px}
.pantalla-error p{color:var(--ink-soft);font-size:14.5px;line-height:1.5;margin-bottom:16px}

/* ── toast ── */
#toast{
  position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:120;
  transform:translateX(-50%) translateY(30px);opacity:0;pointer-events:none;
  background:var(--oscuro);color:#fff;font-size:13.5px;font-weight:600;padding:13px 22px;border-radius:999px;max-width:92vw;text-align:center;
  box-shadow:var(--sombra-alta);transition:transform .3s var(--ease),opacity .3s var(--ease);
}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ── aviso de reserva nueva ── */
.aviso{display:none;align-items:center;gap:13px;background:linear-gradient(120deg,#12934D,#4CC78A);color:#fff;border-radius:22px;padding:15px 17px;margin-bottom:14px;box-shadow:0 14px 36px rgba(18,147,77,.4);animation:avisoEntra .5s var(--ease)}
.aviso.on{display:flex}
@keyframes avisoEntra{0%{transform:translateY(-18px) scale(.96);opacity:0}100%{transform:none;opacity:1}}
.aviso .camp{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.2);flex-shrink:0;display:grid;place-items:center;animation:campanea 1.6s var(--ease) 2;transform-origin:top center}
.aviso .camp svg{width:22px;height:22px}
@keyframes campanea{0%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-11deg)}45%{transform:rotate(7deg)}60%{transform:rotate(-4deg)}}
.aviso b{display:block;font-size:14.5px}
.aviso span{font-size:12.5px;color:rgba(255,255,255,.85)}

/* ── barra del plan (prueba / vencido) ── */
.plan-barra{border-radius:18px;padding:12px 14px;margin-bottom:14px;background:#fff;box-shadow:var(--sombra);border-left:5px solid var(--azul)}
.plan-barra .t{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;font-weight:800;color:var(--azul);letter-spacing:.4px;text-transform:uppercase}
.plan-barra .b{height:6px;border-radius:3px;background:var(--muted);margin:8px 0 6px;overflow:hidden}
.plan-barra .b i{display:block;height:100%;background:var(--cta);border-radius:3px;transition:width .8s var(--ease)}
.plan-barra .s{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-soft)}
.plan-barra .s b{color:var(--ink)}
.plan-barra.vencido{border-left-color:var(--rojo)}
.plan-barra.vencido .t{color:var(--rojo)}
.plan-barra .btn{margin-top:10px}

/* ── estrellas ── */
.stars span{color:#D3DEEC;font-size:14px}
.stars span.on{color:#F5A623}
.stars-pick{display:flex;gap:6px;justify-content:center;margin:10px 0}
.stars-pick button{border:0;background:none;font-size:38px;color:#D3DEEC;cursor:pointer;line-height:1}
.stars-pick button.on{color:#F5A623}

/* ── galería ── */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.galeria .f{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--muted);box-shadow:var(--sombra)}
.galeria .f img{width:100%;height:100%;object-fit:cover;display:block}
.galeria .f .t{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 6px;font-size:11px;font-weight:700;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff}
.galeria .f .x{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;border:0;display:grid;place-items:center;cursor:pointer}
.galeria .f .x svg{width:14px;height:14px}
@media(min-width:600px){.galeria{grid-template-columns:repeat(4,1fr);gap:8px}}

/* ── tabla ── */
.tbl-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-soft);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
td{padding:10px 8px;border-bottom:1px solid var(--line)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ── cabecera de pantalla ── */
.pant-cab{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.pant-cab h1{font-size:24px;font-weight:800;letter-spacing:-.5px}
.pant-cab p{font-size:13px;color:var(--ink-soft)}

/* ── selector de días (agenda / reservas) ── */
.semana{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.semana::-webkit-scrollbar{display:none}
.dia-pick{flex:0 0 52px;border:0;background:none;cursor:pointer;text-align:center;color:var(--ink);min-width:52px}
.dia-pick .d{font-size:11px;font-weight:800;color:var(--ink-soft);letter-spacing:.5px;margin-bottom:8px;text-transform:uppercase}
.dia-pick .n{width:42px;height:42px;margin:0 auto;border-radius:50%;border:2px dashed var(--line-2);display:grid;place-items:center;font-size:15px;font-weight:800;position:relative;transition:all var(--dur) var(--ease);background:#fff}
.dia-pick.pick .n{border:2px solid transparent;background:var(--azul);color:#fff;box-shadow:0 8px 22px rgba(46,107,230,.35)}
.dia-pick.off{opacity:.32;pointer-events:none}
.dia-pick .off-lbl{font-size:8.5px;font-weight:800;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.5px;margin-top:5px;display:block}
.horas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:9px;margin-top:14px}
.hora-pick{border:1.5px solid var(--line);background:#fff;border-radius:13px;padding:12px 6px;cursor:pointer;font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);transition:all var(--dur) var(--ease)}
.hora-pick:active{transform:scale(.94)}
.hora-pick.pick{background:var(--azul);border-color:transparent;color:#fff;box-shadow:0 8px 22px rgba(46,107,230,.35)}
.nota-hueca{grid-column:1/-1;font-size:12.5px;color:var(--ink-soft);border:1.5px dashed var(--line-2);border-radius:14px;padding:12px 14px;background:#fff}