/* ==========================================================================
   Imán Turnos — Sistema de diseño (hereda de la landing Imán)
   Fredoka (display) + Nunito (cuerpo) · crema/tinta · bordes 2.5px · sombras
   duras 3D · pills con press físico · grano SVG · acento re-skineable.
   ========================================================================== */
:root{
  /* base Imán */
  --crema:#FFF6E9;
  --tinta:#33231A;
  --tinta-suave:#7A6A5E;
  --blanco:#FFFDF8;
  --linea:#EADFCB;
  --verde-wa:#25D366;
  --verde-wa-osc:#1FAE54;
  --verde-ok:#35B36B;
  --rojo:#E23D3D;
  --amarillo:#FFC53D;
  --ambar-tinta:#6B4A00;   /* texto AA sobre fondos ámbar (#FFF1D6) */

  /* ACENTO por vertical — barbería (petróleo, masculino-pero-jugado) */
  --acento:#1B7B94;
  --acento-osc:#115161;
  --acento-suave:#D9EAF0;
  --acento-on:#FFFDF8;

  --sombra:0 10px 30px rgba(51,35,26,.10);
  --sombra-dura:0 4px 0 var(--tinta);
  --radio:20px;
  --radio-lg:24px;
  --borde:2.5px solid var(--tinta);
  --resorte:cubic-bezier(.34,1.56,.64,1);
  --display:'Fredoka',system-ui,sans-serif;
  --cuerpo:'Nunito',system-ui,sans-serif;
  --nav-h:66px;
  --top-h:60px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:var(--cuerpo);
  background:var(--crema);
  color:var(--tinta);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4{font-family:var(--display);line-height:1.14;font-weight:600}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px}
:focus-visible{outline:3px solid var(--acento);outline-offset:2px;border-radius:6px}

/* grano sutil global */
body::after{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- layout base ------------------------------------------------- */
.app{max-width:520px;margin:0 auto;min-height:100svh;position:relative;
  background:var(--crema);}
@media(min-width:900px){
  .app{max-width:820px;box-shadow:0 0 0 1px var(--linea);}
}
.pantalla{padding:0 16px calc(var(--nav-h) + 28px);animation:sube .34s var(--resorte) both}
@keyframes sube{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- barra superior --------------------------------------------- */
.top{
  position:sticky;top:0;z-index:20;background:var(--crema);
  padding:12px 16px 10px;
  display:flex;align-items:center;gap:12px;
  border-bottom:2.5px solid var(--tinta);
}
.top .marca{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:1.18rem}
.top .marca small{display:block;font-family:var(--cuerpo);font-weight:700;font-size:.62rem;color:var(--tinta-suave);letter-spacing:.04em;text-transform:uppercase;line-height:1}
.top-sp{flex:1}

/* navegación de fecha */
.fecha-nav{display:flex;align-items:center;gap:6px;justify-content:center;padding:14px 0 6px}
.fecha-nav .nav-btn{
  width:40px;height:40px;border-radius:50%;border:var(--borde);background:var(--blanco);
  display:grid;place-items:center;box-shadow:0 3px 0 var(--tinta);
  transition:transform .15s var(--resorte),box-shadow .15s}
.fecha-nav .nav-btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--tinta)}
.fecha-nav .nav-btn svg{width:18px;height:18px}
.fecha-lbl{min-width:190px;text-align:center;cursor:pointer;border-radius:12px;
  -webkit-tap-highlight-color:transparent}
.fecha-lbl .dia{font-family:var(--display);font-weight:600;font-size:1.16rem;line-height:1.1;
  display:inline-flex;align-items:center;gap:5px}
.fecha-lbl .caret{font-size:.7rem;color:var(--tinta-suave)}
/* toggle Día|Semana — solo escritorio */
.seg{display:none}
.btn-nuevo-dt{display:none!important}
.fecha-lbl .hoy-chip{display:inline-block;font-size:.66rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;background:var(--acento);color:var(--acento-on);padding:.14rem .5rem;border-radius:99px;margin-top:3px}

/* medidor de ocupación */
.ocupa{display:flex;align-items:center;gap:12px;background:var(--blanco);border:var(--borde);
  border-radius:16px;padding:11px 14px;box-shadow:var(--sombra-dura);margin:10px 0 18px}
.ocupa .barra{flex:1;height:12px;border-radius:99px;background:var(--acento-suave);
  border:2px solid var(--tinta);overflow:hidden;position:relative}
.ocupa .barra i{display:block;height:100%;background:var(--acento);border-radius:99px;
  transition:width .6s var(--resorte)}
.ocupa .lbl{font-weight:800;font-size:.9rem;white-space:nowrap}
.ocupa .lbl b{font-family:var(--display);font-size:1.05rem}
.ocupa .huecos-tag{font-weight:800;font-size:.8rem;color:var(--acento-osc);white-space:nowrap}

/* tira de semana (calendario liviano bajo la fecha) */
.semana-strip{display:flex;gap:7px;padding:2px 0 4px}
.dia-mini{flex:1 1 0;min-width:0;background:var(--blanco);border:2px solid var(--tinta);border-radius:14px;
  padding:7px 2px 6px;text-align:center;cursor:pointer;box-shadow:0 2.5px 0 var(--tinta);
  transition:transform .15s var(--resorte),background .15s;-webkit-tap-highlight-color:transparent}
.dia-mini:active{transform:translateY(2px);box-shadow:0 0 0 var(--tinta)}
.dia-mini .dw{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--tinta-suave)}
.dia-mini .dn{font-family:var(--display);font-weight:600;font-size:1.12rem;line-height:1.15}
.dia-mini .dots{display:flex;gap:2.5px;justify-content:center;margin-top:3px;height:5px}
.dia-mini .dots i{width:5px;height:5px;border-radius:50%;background:var(--tinta);opacity:.14}
.dia-mini .dots i.on{opacity:1;background:var(--acento)}
.dia-mini.sel{background:var(--acento);color:var(--acento-on)}
.dia-mini.sel .dw{color:var(--acento-on);opacity:.85}
.dia-mini.sel .dots i{background:var(--acento-on);opacity:.3}
.dia-mini.sel .dots i.on{background:var(--acento-on);opacity:1}
.dia-mini.hoy:not(.sel){border-color:var(--acento);border-width:2.5px}
.dia-mini.cerrado{opacity:.4;box-shadow:none;border-style:dashed}

/* ---------- TIMELINE (pantalla estrella) -------------------------------- */
.tl{position:relative;margin-top:4px}
.tl-item{display:flex;gap:12px;align-items:stretch}
.tl-rail{width:57px;flex:none;text-align:right;position:relative;padding-top:4px}
.tl-rail .h{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--tinta);letter-spacing:.01em}
.tl-rail .m{font-size:.7rem;color:var(--tinta-suave);font-weight:700}
.tl-body{flex:1;padding-bottom:12px;min-width:0}

/* tarjeta de turno ocupado */
.turno{
  background:var(--blanco);border:var(--borde);border-radius:var(--radio);
  padding:13px 14px;box-shadow:var(--sombra-dura);
  display:flex;align-items:center;gap:12px;
  transition:transform .16s var(--resorte),box-shadow .16s;cursor:pointer;
  will-change:transform}
.turno:active{transform:translateY(2px);box-shadow:0 2px 0 var(--tinta)}
.turno .ava{width:44px;height:44px;flex:none;border-radius:14px;border:2.5px solid var(--tinta);
  display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:1.15rem;
  background:var(--acento-suave);color:var(--acento-osc)}
.turno .info{flex:1;min-width:0}
.turno .nom{font-family:var(--display);font-weight:600;font-size:1.06rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.turno .det{font-size:.82rem;color:var(--tinta-suave);font-weight:700;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.turno .det .pto{width:3px;height:3px;border-radius:50%;background:var(--tinta-suave)}
.turno .lado{text-align:right;flex:none}
.turno .dur{font-weight:800;font-size:.78rem;color:var(--tinta-suave)}

/* estados */
.turno.asistio{opacity:.72}
.turno.asistio .ava{background:var(--verde-ok);color:#fff;border-color:var(--tinta)}
.turno.novino{opacity:.72}
.turno.novino .ava{background:#F4D3D3;color:var(--rojo)}
.estado-pill{display:inline-flex;align-items:center;gap:4px;font-size:.66rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.03em;padding:.16rem .46rem;border-radius:99px;border:2px solid var(--tinta)}
.estado-pill.ok{background:var(--verde-ok);color:#fff}
.estado-pill.no{background:#F4D3D3;color:#8f2020;border-color:#8f2020}
.canal-ico{font-size:.8rem}

/* HUECO — el protagonista. Compacto por defecto (toda la tarjeta es tap);
   UN SOLO hueco por día lleva el CTA fuerte: el próximo (.destacado). */
.hueco{
  border:2.5px dashed var(--tinta);border-radius:var(--radio);
  background:var(--acento-suave);
  padding:11px 13px;position:relative;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s var(--resorte),box-shadow .16s}
.hueco:active{transform:translateY(2px)}
.hueco .h-fila{display:flex;align-items:center;gap:11px}
.hueco .h-info{flex:1;min-width:0}
.hueco .h-rango{font-family:var(--display);font-weight:600;font-size:1.08rem;line-height:1.15;
  display:flex;align-items:center;gap:7px;color:var(--tinta);white-space:nowrap}
.hueco .h-rango .z{font-size:1rem;animation:latido 2.4s var(--resorte) infinite}
@keyframes latido{0%,100%{transform:scale(1) rotate(-4deg)}50%{transform:scale(1.14) rotate(4deg)}}
.hueco .h-sub{font-size:.8rem;font-weight:800;color:var(--acento-osc);margin-top:1px}
.hueco .h-ir{width:42px;height:42px;flex:none;border-radius:50%;border:2.5px solid var(--tinta);
  background:var(--acento);color:var(--acento-on);display:grid;place-items:center;
  box-shadow:0 3px 0 var(--tinta)}
.hueco .h-mas{width:44px;height:44px;flex:none;border-radius:50%;border:2.5px solid var(--tinta);
  background:var(--blanco);color:var(--tinta);display:grid;place-items:center;
  box-shadow:0 3px 0 var(--tinta);transition:transform .15s var(--resorte),box-shadow .15s}
.hueco .h-mas:active{transform:translateY(3px);box-shadow:0 0 0 var(--tinta)}
/* prime (tarde-noche): ámbar, texto AA */
.hueco.prime{background:#FFF1D6}
.hueco.prime .h-sub{color:var(--ambar-tinta)}
/* perdido (hueco de hoy que ya pasó): constancia, sin acción */
.hueco.perdido{opacity:.5;cursor:default;background:transparent;box-shadow:none}
.hueco.perdido:active{transform:none}
.hueco.perdido .h-rango .z{animation:none}
/* destacado: el próximo hueco del día — fondo blanco para que el botón
   acento contraste fuerte (nada de acento sobre acento-suave) */
.hueco.destacado{background:var(--blanco);box-shadow:var(--sombra-dura);padding:14px}
.hueco.destacado .prox{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;color:var(--acento-osc);margin-bottom:8px}
.hueco.destacado.prime .prox{color:var(--ambar-tinta)}
.hueco.destacado .h-acciones{display:flex;gap:9px;margin-top:12px}

/* botón llenar hueco */
.btn-llenar{flex:1}

/* ---------- botones ----------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);font-weight:600;font-size:1rem;
  padding:.82rem 1.3rem;border-radius:99px;min-height:48px;
  border:2.5px solid var(--tinta);background:var(--blanco);color:var(--tinta);
  box-shadow:0 4px 0 var(--tinta);
  transition:transform .16s var(--resorte),box-shadow .16s var(--resorte),background .16s;
  user-select:none;-webkit-tap-highlight-color:transparent}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--tinta)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--tinta)}
.btn svg{width:19px;height:19px}
.btn.sm{padding:.6rem 1rem;min-height:42px;font-size:.92rem}
.btn.block{width:100%}
.btn-acento{background:var(--acento);color:var(--acento-on);border-color:var(--tinta);
  box-shadow:0 4px 0 var(--acento-osc)}
.btn-acento:hover{box-shadow:0 6px 0 var(--acento-osc)}
.btn-acento:active{box-shadow:0 0 0 var(--acento-osc)}
.btn-wa{background:var(--verde-wa);color:#fff;box-shadow:0 4px 0 var(--verde-wa-osc)}
.btn-wa:hover{box-shadow:0 6px 0 var(--verde-wa-osc)}
.btn-wa:active{box-shadow:0 0 0 var(--verde-wa-osc)}
.btn-tinta{background:var(--tinta);color:var(--crema);box-shadow:0 4px 0 #1c130d}
.btn-tinta:active{box-shadow:0 0 0 #1c130d}
.btn-fantasma{background:transparent;box-shadow:none;border-color:transparent}
.btn-fantasma:hover{background:rgba(51,35,26,.06);transform:none;box-shadow:none}
.btn-danger{color:var(--rojo);border-color:var(--rojo);box-shadow:0 4px 0 #a72525}
.btn-danger:active{box-shadow:0 0 0 #a72525}
.btn:disabled{opacity:.45;pointer-events:none}
.icon-btn{width:44px;height:44px;border-radius:50%;border:var(--borde);background:var(--blanco);
  display:grid;place-items:center;box-shadow:0 3px 0 var(--tinta);transition:transform .15s var(--resorte),box-shadow .15s}
.icon-btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--tinta)}

/* ---------- chips ------------------------------------------------------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.8rem;
  padding:.32rem .7rem;border-radius:99px;border:2px solid var(--tinta);background:var(--blanco)}
.chip.on{background:var(--acento);color:var(--acento-on)}
.chip.sena{background:var(--amarillo);border-color:var(--tinta)}

/* ---------- bottom sheet ------------------------------------------------ */
.sheet-bg{
  position:fixed;inset:0;z-index:50;background:rgba(51,35,26,.42);
  opacity:0;transition:opacity .28s ease;backdrop-filter:blur(2px)}
.sheet-bg.abierto{opacity:1}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:51;
  max-width:520px;margin:0 auto;
  background:var(--crema);border:2.5px solid var(--tinta);border-bottom:none;
  border-radius:26px 26px 0 0;
  box-shadow:0 -8px 40px rgba(51,35,26,.24);
  transform:translateY(100%);transition:transform .38s var(--resorte);
  max-height:90svh;display:flex;flex-direction:column;
  padding-bottom:max(16px,env(safe-area-inset-bottom))}
@media(min-width:900px){.sheet{max-width:560px}}
.sheet.abierto{transform:translateY(0)}
.sheet .handle{width:44px;height:5px;border-radius:99px;background:var(--linea);margin:11px auto 4px;flex:none}
.sheet .sheet-head,.panel-slot .sheet-head{padding:8px 20px 12px;display:flex;align-items:flex-start;gap:12px;flex:none}
.sheet .sheet-head h3,.panel-slot .sheet-head h3{font-size:1.3rem}
.sheet .sheet-head p,.panel-slot .sheet-head p{font-size:.86rem;color:var(--tinta-suave);font-weight:700;margin-top:2px}
.sheet .sheet-body{padding:0 20px 8px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sheet .sheet-foot{padding:12px 20px 4px;flex:none;display:flex;gap:10px}

/* fila de cliente en sheet de huecos */
.cli-fila{display:flex;align-items:center;gap:12px;background:var(--blanco);border:var(--borde);
  border-radius:16px;padding:11px 12px;box-shadow:var(--sombra-dura);margin-bottom:11px}
.cli-fila .ava{width:42px;height:42px;flex:none;border-radius:12px;border:2.5px solid var(--tinta);
  display:grid;place-items:center;font-family:var(--display);font-weight:600}
.cli-fila .info{flex:1;min-width:0}
.cli-fila .nom{font-family:var(--display);font-weight:600;font-size:1rem}
.cli-fila .por{font-size:.78rem;color:var(--tinta-suave);font-weight:700}
.cli-fila .por b{color:var(--rojo)}

/* ---------- semáforo de recurrencia ------------------------------------ */
.sem{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:.72rem;
  padding:.18rem .5rem;border-radius:99px;border:2px solid var(--tinta)}
.sem .pto{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--tinta)}
.sem.aldia{background:#DFF3E6}.sem.aldia .pto{background:var(--verde-ok)}
.sem.letoca{background:#FFF1D6}.sem.letoca .pto{background:var(--amarillo)}
.sem.vencida{background:#F9DEDE}.sem.vencida .pto{background:var(--rojo)}

/* ---------- clientes ---------------------------------------------------- */
.buscador{display:flex;align-items:center;gap:10px;background:var(--blanco);border:var(--borde);
  border-radius:16px;padding:0 14px;box-shadow:var(--sombra-dura);margin:6px 0 16px;height:50px}
.buscador input{flex:1;border:none;background:none;height:100%;font-weight:700}
.buscador input:focus{outline:none}
.buscador svg{width:20px;height:20px;color:var(--tinta-suave)}
.cli-card{display:flex;align-items:center;gap:12px;background:var(--blanco);border:var(--borde);
  border-radius:16px;padding:12px;box-shadow:var(--sombra-dura);margin-bottom:11px;
  transition:transform .15s var(--resorte);cursor:pointer}
.cli-card:active{transform:translateY(2px)}
.cli-card .ava{width:46px;height:46px;flex:none;border-radius:13px;border:2.5px solid var(--tinta);
  display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:1.15rem;background:var(--acento-suave);color:var(--acento-osc)}
.cli-card .info{flex:1;min-width:0}
.cli-card .nom{font-family:var(--display);font-weight:600;font-size:1.04rem}
.cli-card .sub{font-size:.78rem;color:var(--tinta-suave);font-weight:700}

/* ---------- formularios ------------------------------------------------- */
.campo{margin-bottom:14px}
.campo label{display:block;font-weight:800;font-size:.86rem;margin-bottom:6px}
.campo label .opt{color:var(--tinta-suave);font-weight:700;font-size:.78rem}
.campo input,.campo select,.campo textarea{
  width:100%;background:var(--blanco);border:var(--borde);border-radius:14px;
  padding:.8rem .9rem;font-weight:700;box-shadow:var(--sombra-dura);color:var(--tinta)}
.campo input:focus,.campo select,.campo textarea:focus{outline:none}
.campo .ayuda{font-size:.76rem;color:var(--tinta-suave);font-weight:700;margin-top:5px}
.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---------- tarjetas genéricas / secciones ----------------------------- */
.seccion-tit{display:flex;align-items:center;justify-content:space-between;margin:22px 0 12px}
.seccion-tit h2{font-size:1.24rem}
.seccion-tit .link{font-weight:800;font-size:.84rem;color:var(--acento-osc)}
.tarjeta{background:var(--blanco);border:var(--borde);border-radius:var(--radio);
  padding:16px;box-shadow:var(--sombra-dura);margin-bottom:12px}

/* ---------- estados vacíos (acá vive la energía cartoon) --------------- */
.vacio{text-align:center;padding:34px 20px;border:2.5px dashed var(--linea);border-radius:var(--radio);
  background:rgba(255,253,248,.5)}
.vacio .emo{font-size:2.6rem;margin-bottom:10px;display:inline-block;animation:flotaEmo 4s ease-in-out infinite}
@keyframes flotaEmo{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(4deg)}}
.vacio h3{font-size:1.16rem;margin-bottom:5px}
.vacio p{color:var(--tinta-suave);font-weight:700;font-size:.9rem;max-width:30ch;margin:0 auto 14px}

/* ---------- nav inferior ------------------------------------------------ */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  max-width:520px;margin:0 auto;
  background:var(--blanco);border-top:2.5px solid var(--tinta);
  display:flex;padding:6px 6px max(6px,env(safe-area-inset-bottom));
  height:calc(var(--nav-h) + env(safe-area-inset-bottom))}
@media(min-width:900px){.tabbar{max-width:820px}}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-weight:800;font-size:.66rem;color:var(--tinta-suave);border-radius:14px;
  transition:color .15s,background .15s}
.tabbar a svg{width:23px;height:23px;transition:transform .2s var(--resorte)}
.tabbar a.activo{color:var(--acento-osc)}
.tabbar a.activo svg{transform:translateY(-2px) scale(1.08)}
.tabbar a.activo .pt{background:var(--acento)}
.tabbar a .pt{width:5px;height:5px;border-radius:50%;background:transparent;margin-top:1px}

/* FAB — anclado abajo a la derecha, sobre la tabbar. Solo aparece cuando
   el día NO tiene huecos accionables (cada hueco ya trae su alta). */
.fab{position:fixed;right:16px;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);z-index:29;
  width:58px;height:58px;border-radius:50%;background:var(--acento);color:var(--acento-on);
  border:2.5px solid var(--tinta);box-shadow:0 5px 0 var(--acento-osc),var(--sombra);
  display:grid;place-items:center;transition:transform .16s var(--resorte),box-shadow .16s}
@media(min-width:900px){.fab{right:calc(50vw - 394px)}}
.fab:active{transform:translateY(5px);box-shadow:0 0 0 var(--acento-osc)}
.fab svg{width:28px;height:28px}
/* colchón de scroll: con FAB visible ninguna tarjeta queda debajo */
.pantalla.con-fab{padding-bottom:calc(var(--nav-h) + 110px)}

/* ---------- toast ------------------------------------------------------- */
.toast-zona{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + 20px);z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px}
.toast{background:var(--tinta);color:var(--crema);font-weight:800;font-size:.9rem;
  padding:.7rem 1.1rem;border-radius:99px;box-shadow:var(--sombra);
  display:flex;align-items:center;gap:8px;max-width:100%;
  animation:toastIn .34s var(--resorte)}
.toast.ok{background:var(--verde-ok)}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}

/* ---------- logo imán --------------------------------------------------- */
.iman-logo{width:34px;height:auto;flex:none;animation:imanFlota 5s ease-in-out infinite;transform-origin:50% 62%}
.iman-cuerpo-borde{fill:none;stroke:var(--tinta);stroke-width:34}
.iman-cuerpo{fill:none;stroke:var(--acento);stroke-width:21}
.iman-polo{fill:var(--blanco);stroke:var(--tinta);stroke-width:5}
.iman-chispa{stroke:var(--tinta);stroke-width:5;stroke-linecap:round;fill:none}
@keyframes imanFlota{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
/* partículas atraídas (barbería: tijeras/peines) */
.iman-parts{position:absolute;inset:0;pointer-events:none}
.iman-part{position:absolute;left:50%;top:42%;width:15px;height:15px;margin:-7px 0 0 -7px;opacity:0;
  animation:imanAtrae var(--dur,4.6s) infinite;animation-delay:var(--del,0s)}
@keyframes imanAtrae{
  0%{opacity:0;transform:translate(var(--x0),var(--y0)) scale(.5) rotate(var(--r0,0deg));animation-timing-function:ease-out}
  14%{opacity:1}
  60%{transform:translate(var(--x1),var(--y1)) scale(.8) rotate(0deg);animation-timing-function:cubic-bezier(.6,0,.9,.5)}
  82%{opacity:1;transform:translate(0,0) scale(1.05) rotate(var(--r1,0deg))}
  90%{transform:translate(0,0) scale(1.3) rotate(var(--r1,0deg))}
  100%{opacity:0;transform:translate(0,0) scale(.1) rotate(var(--r1,0deg))}}
.iman-part.p1{--x0:64px;--y0:-24px;--x1:32px;--y1:-18px;--r0:40deg;--r1:-10deg;--dur:4.4s;--del:0s}
.iman-part.p2{--x0:-52px;--y0:-30px;--x1:-26px;--y1:-18px;--r0:-30deg;--r1:8deg;--dur:5.1s;--del:1.6s}
.iman-part.p3{--x0:40px;--y0:-46px;--x1:18px;--y1:-28px;--r0:60deg;--r1:-6deg;--dur:4.8s;--del:3s}

/* ---------- utilidades -------------------------------------------------- */
.ic{width:1.25em;height:1.25em;flex:none;display:inline-block}
.oculto{display:none!important}
.txt-suave{color:var(--tinta-suave)}
.mt{margin-top:14px}.mb{margin-bottom:14px}
.centro{text-align:center}
.pill-precio{font-family:var(--display);font-weight:600}

/* ---------- mes compacto (para saltar de fecha) ------------------------- */
.mes-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.mes-nav .mes-tit{font-family:var(--display);font-weight:600;font-size:1.12rem;text-transform:capitalize}
.mes-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.mes-cab{text-align:center;font-size:.68rem;font-weight:800;color:var(--tinta-suave);padding-bottom:2px}
.mes-dia{aspect-ratio:1;border:2px solid transparent;border-radius:12px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;cursor:pointer;background:var(--blanco);
  border-color:var(--linea);-webkit-tap-highlight-color:transparent;
  transition:transform .13s var(--resorte)}
.mes-dia:active{transform:scale(.93)}
.mes-dia .d{font-family:var(--display);font-weight:600;font-size:.95rem;line-height:1}
.mes-dia .pts{display:flex;gap:2px;height:4px}
.mes-dia .pts i{width:4px;height:4px;border-radius:50%;background:var(--acento)}
.mes-dia.hoy{border-color:var(--acento);border-width:2.5px}
.mes-dia.sel{background:var(--acento);color:var(--acento-on);border-color:var(--tinta)}
.mes-dia.sel .pts i{background:var(--acento-on)}
.mes-dia.cerrado{opacity:.35;background:transparent;border-style:dashed}
.mes-leyenda{font-size:.76rem;font-weight:700;color:var(--tinta-suave);text-align:center;margin-top:12px}

/* ---------- selector de color (tema del comercio) ----------------------- */
.tema-actual{width:46px;height:46px;flex:none;border-radius:14px;border:2.5px solid var(--tinta);
  box-shadow:0 3px 0 var(--tinta)}
.tema-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tema-sw{aspect-ratio:1;border-radius:16px;border:2.5px solid var(--tinta);cursor:pointer;
  box-shadow:0 3px 0 var(--tinta);position:relative;
  transition:transform .14s var(--resorte),box-shadow .14s}
.tema-sw:hover{transform:translateY(-2px)}
.tema-sw:active{transform:translateY(3px);box-shadow:0 0 0 var(--tinta)}
.tema-sw.sel::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;
  color:#fff;font-weight:900;font-size:1.3rem;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.tema-check{margin-top:7px;font-size:.8rem;font-weight:800;min-height:1.3em}
.tema-check .ok-line{color:var(--verde-ok)}
.tema-check .mal-line{color:var(--rojo)}
.tema-check .link-fix{font-weight:800;color:var(--acento-osc);text-decoration:underline;font-size:.8rem}
.tema-prev{margin-top:16px;border:var(--borde);border-radius:16px;overflow:hidden;box-shadow:var(--sombra-dura)}
.tema-prev .tp-hero{background:var(--acento);color:var(--acento-on);padding:12px 14px;
  display:flex;align-items:center;gap:10px}
.tema-prev .tp-hero .tp-foto{width:36px;height:36px;border-radius:11px;background:var(--blanco);
  border:2px solid var(--tinta);display:grid;place-items:center;font-size:1.15rem;flex:none}
.tema-prev .tp-hero b{font-family:var(--display);font-weight:600;display:block;line-height:1.1}
.tema-prev .tp-hero small{font-size:.7rem;font-weight:700;opacity:.9}
.tema-prev .tp-btn{margin:11px 14px 13px;background:var(--acento);color:var(--acento-on);
  border:2.5px solid var(--tinta);border-radius:99px;text-align:center;font-family:var(--display);
  font-weight:600;padding:.6rem;box-shadow:0 3px 0 var(--acento-osc)}

/* ---------- escritorio ≥1024: agenda + panel lateral -------------------- */
.panel{display:none}
@media(min-width:1024px){
  .app{max-width:1120px}
  .tabbar{max-width:1120px}
  .app.con-panel{display:grid;grid-template-columns:minmax(0,1fr) 400px;align-items:start}
  .app.con-panel>.top{grid-column:1/-1}
  .panel{display:block;border-left:2.5px solid var(--tinta);align-self:stretch}
  .panel-slot{position:sticky;top:78px;padding:18px;max-height:calc(100svh - 78px - var(--nav-h));
    overflow-y:auto}
  .panel-slot .sheet-head{padding:0 0 12px}
  .panel-slot .sheet-body{padding:0 0 8px;overflow:visible}
  .panel-slot .sheet-foot{padding:12px 0 0;display:flex;gap:10px}
  .panel-hint{text-align:center;padding:52px 18px;border:2.5px dashed var(--linea);border-radius:var(--radio)}
  .panel-hint .emo{font-size:2.4rem;display:inline-block;margin-bottom:10px;
    animation:flotaEmo 4s ease-in-out infinite}
  .panel-hint h4{font-family:var(--display);font-weight:600;font-size:1.08rem;margin-bottom:4px}
  .panel-hint p{color:var(--tinta-suave);font-weight:700;font-size:.86rem;max-width:24ch;margin:0 auto}
  .fab{display:none}
  .btn-nuevo-dt{display:grid!important}
  .fecha-nav{justify-content:flex-start;gap:8px}
  .seg{display:inline-flex;margin-left:auto;border:2.5px solid var(--tinta);border-radius:99px;
    background:var(--blanco);box-shadow:0 3px 0 var(--tinta);overflow:hidden}
  .seg button{font-family:var(--display);font-weight:600;font-size:.9rem;padding:.42rem 1.05rem;
    border-radius:99px;color:var(--tinta-suave)}
  .seg button.on{background:var(--tinta);color:var(--crema)}
}

/* ---------- grilla semanal (escritorio) --------------------------------- */
.sgrid{display:grid;grid-template-columns:34px repeat(7,1fr);gap:7px;margin-top:8px}
.sg-cab{text-align:center;font-weight:800;font-size:.7rem;text-transform:uppercase;
  color:var(--tinta-suave);padding:4px 0;cursor:pointer;border-radius:10px}
.sg-cab:hover{background:rgba(51,35,26,.05)}
.sg-cab b{display:block;font-family:var(--display);font-weight:600;font-size:1.1rem;color:var(--tinta)}
.sg-cab.hoy b{color:var(--acento-osc)}
.sg-gut{position:relative}
.sg-gut i{position:absolute;right:4px;font-size:.64rem;font-weight:800;color:var(--tinta-suave);
  font-style:normal;transform:translateY(-50%)}
.sg-col{position:relative;background:var(--blanco);border:2px solid var(--linea);border-radius:14px;
  min-height:540px;cursor:pointer;transition:border-color .15s}
.sg-col:hover{border-color:var(--tinta)}
.sg-col.hoy{border:2.5px solid var(--acento)}
.sg-col.cerrado{background:transparent;border-style:dashed;opacity:.45;cursor:default;
  display:grid;place-items:center;font-size:.7rem;font-weight:800;color:var(--tinta-suave);
  text-transform:uppercase}
.sg-ev{position:absolute;left:4px;right:4px;border:2px solid var(--tinta);border-radius:8px;
  background:var(--acento-suave);font-size:.68rem;font-weight:800;padding:1px 6px;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis;box-shadow:0 2px 0 var(--tinta);color:var(--tinta)}
.sg-ev.pasado{opacity:.55;box-shadow:none}
.sg-hu{position:absolute;left:4px;right:4px;border:2px dashed var(--tinta);border-radius:8px;
  opacity:.6;font-size:.62rem;font-weight:800;color:var(--acento-osc);
  display:flex;align-items:center;justify-content:center;overflow:hidden}

/* ---------- accesibilidad ---------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}