/* "El mostrador" — panel del dueño. Las variables vienen del nicho (inline en cada página). */
*{box-sizing:border-box}
html{scrollbar-color:var(--acento) var(--fondo)}
body{margin:0;background:var(--fondo);color:var(--tinta);font:16px/1.5 var(--texto);-webkit-font-smoothing:antialiased}
::selection{background:var(--acento);color:var(--sobre)}
:focus-visible{outline:3px solid var(--acento2);outline-offset:2px;border-radius:4px}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{margin:0;line-height:1.05}
.kx-franja{position:sticky;top:0;z-index:50;display:flex;gap:10px 14px;align-items:center;justify-content:center;flex-wrap:wrap;padding:8px 16px;background:#101010;color:#ededed;font:500 13px/1.35 system-ui,sans-serif;text-align:center}
.kx-franja a{flex-shrink:0;background:#fff;color:#101010;border-radius:99px;padding:5px 12px;text-decoration:none;font-weight:700}

.app{width:min(1180px,100%);margin:0 auto;padding:16px 16px 120px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;padding:8px 0 16px}
.top h1{font-family:var(--display);font-size:clamp(20px,3vw,26px)}
.top .fecha{color:var(--suave);font-size:14px;margin-top:2px}
.cifras{display:flex;gap:6px;flex-wrap:wrap}
.cifra{background:var(--sup);border:1px solid var(--linea);border-radius:10px;padding:6px 12px;min-width:92px}
.cifra b{display:block;font:700 18px/1.2 var(--texto);font-variant-numeric:tabular-nums}
.cifra span{font-size:12px;color:var(--suave)}
.top-acc{display:flex;gap:6px}
.chico{border:1px solid var(--linea);background:var(--sup);border-radius:8px;padding:6px 10px;font-size:13px;color:var(--suave)}
.chico:hover{color:var(--tinta);border-color:var(--suave)}

.mostrador{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:start}
.bloque{background:var(--sup);border:1px solid var(--linea);border-radius:14px;padding:18px}
.bloque > header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.bloque > header h2{font:700 13px/1 var(--texto);letter-spacing:.12em;text-transform:uppercase;color:var(--suave)}
.bloque > header small{color:var(--suave);font-size:13px}

/* AHORA */
.ahora{border-width:2px;border-color:var(--acento)}
.ahora .cuerpo{display:grid;grid-template-columns:auto 1fr;gap:14px 20px;align-items:center}
.ahora .quien{font:400 clamp(26px,3.6vw,36px)/1.05 var(--display)}
.ahora .quien.largo{font-size:clamp(20px,2.6vw,27px)}
.ahora .que{font-size:18px;margin-top:6px}
.ahora .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:3px 10px;border-radius:99px;background:var(--fondo);color:var(--tinta)}
.ahora .vacio{color:var(--suave);font-size:18px;padding:24px 0}
.siguiente{margin-top:18px;width:100%;min-height:58px;border:0;border-radius:12px;background:var(--acento);color:var(--sobre);font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .15s,filter .15s}
.siguiente:hover{filter:brightness(1.12)}
.siguiente:active{transform:scale(.99)}
.siguiente:disabled{opacity:.45;cursor:not-allowed}
.extra{display:flex;gap:8px;margin-top:10px}
.extra button{flex:1;min-height:44px;border:1.5px solid var(--linea);border-radius:10px;background:var(--sup);font-weight:600}
.extra button:hover{border-color:var(--acento)}

/* COLA */
.cola ol{list-style:none;margin:0;padding:0}
.cola li{display:grid;grid-template-columns:auto 1fr auto auto;gap:4px 12px;align-items:center;padding:10px 4px;border-top:1px solid var(--linea)}
.cola li:first-child{border-top:0}
.cola .num{font:400 20px/1 var(--display);min-width:2.2ch;color:var(--acento);font-variant-numeric:tabular-nums}
.cola b{display:block;font-size:16px}
.cola small{color:var(--suave);font-size:13px}
.cola .hora{font-size:14px;color:var(--suave);font-variant-numeric:tabular-nums;white-space:nowrap}
.cola .quitar{border:0;background:none;color:var(--suave);font-size:20px;line-height:1;padding:4px 6px;border-radius:6px}
.cola .quitar:hover{color:var(--acento2);background:var(--fondo)}
.cola .vacia{color:var(--suave);padding:12px 4px}
.agregar{margin-top:12px;border-top:1px dashed var(--linea);padding-top:12px}
.agregar summary{cursor:pointer;font-weight:700;color:var(--acento);list-style:none;display:flex;align-items:center;gap:8px;min-height:40px}
.agregar summary::-webkit-details-marker{display:none}
.agregar form{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.agregar label{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--suave);text-transform:uppercase;letter-spacing:.06em}
.agregar input,.agregar select{font:inherit;font-size:16px;color:var(--tinta);background:var(--fondo);border:1.5px solid var(--linea);border-radius:8px;padding:9px 10px;min-height:44px;text-transform:none;letter-spacing:0}
.agregar input:focus,.agregar select:focus{outline:none;border-color:var(--acento)}
.agregar .full{grid-column:1/-1}
.agregar button{grid-column:1/-1;min-height:46px;border:0;border-radius:10px;background:var(--tinta);color:var(--fondo);font-weight:700}
.agregar .error{grid-column:1/-1;color:var(--acento2);font-size:14px;min-height:1.2em;margin:0}

/* PENDIENTES */
.pendientes{grid-column:1/-1}
.pendientes ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.pendientes li{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--linea);border-radius:10px;background:var(--fondo)}
.pendientes li.hecho{opacity:.5}.pendientes li.hecho span{text-decoration:line-through}
.pendientes span{flex:1;font-size:15px;line-height:1.35}
.pendientes a.wa{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:99px;background:#1fa855;color:#fff;text-decoration:none;font-weight:700;font-size:14px}
.pendientes a.wa svg{width:16px;height:16px}
.pendientes .check{flex-shrink:0;width:32px;height:32px;border:2px solid var(--linea);border-radius:8px;background:var(--sup);display:grid;place-items:center}
.pendientes li.hecho .check{background:var(--acento);border-color:var(--acento);color:var(--sobre)}
.hechos{grid-column:1/-1}
.hechos summary{cursor:pointer;color:var(--suave);font-weight:600}
.hechos ul{margin:8px 0 0;padding-left:18px;color:var(--suave);font-size:14px}

/* Movimiento: una sola transición, cuando entra lo nuevo a AHORA */
.entra{animation:entra .45s cubic-bezier(.16,1,.3,1)}
@keyframes entra{from{transform:translateY(10px)}to{transform:none}}

/* ---------- Firmas por nicho (el objeto de su mundo) ---------- */
.firma{display:grid;place-items:center}
/* barbería: contador 7 segmentos */
[data-nicho="barberia"] .firma{background:#140f10;border-radius:12px;padding:12px 14px 10px;gap:4px}
[data-nicho="barberia"] .firma small{font:700 11px/1 var(--display);letter-spacing:.3em;color:#8f6f6f}
.dg-box{display:flex;gap:6px;transform:skewX(-6deg)}
.dg{width:40px;height:auto}.dg polygon{fill:#2c1d1e}.dg polygon.on{fill:#ff4030;filter:drop-shadow(0 0 4px rgba(255,64,48,.5))}
/* restaurante: comanda */
[data-nicho="restaurante"] .firma{background:#fffdf2;border:1px solid #e5dcc3;padding:12px 14px;font:400 26px/1 var(--display);color:var(--acento2);border-radius:2px;-webkit-mask:radial-gradient(circle at 50% 100%,transparent 4px,#000 4.5px) bottom/12px 6px repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - 5px) no-repeat;mask:radial-gradient(circle at 50% 100%,transparent 4px,#000 4.5px) bottom/12px 6px repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - 5px) no-repeat;padding-bottom:16px}
[data-nicho="restaurante"] .firma small{display:block;font:700 11px/1 var(--texto);letter-spacing:.14em;color:var(--suave);text-align:center;margin-bottom:6px}
/* belleza: hora escrita en la agenda */
[data-nicho="belleza"] .firma{font:400 46px/1 var(--mano);color:#3b3fa8;background:linear-gradient(transparent 60%,rgba(255,179,212,.5) 60% 90%,transparent 90%);padding:0 6px}
/* salud: campo de formulario */
[data-nicho="salud"] .firma{border:1.5px solid var(--acento);border-radius:2px;padding:8px 12px;text-align:left;place-items:start}
[data-nicho="salud"] .firma small{font:600 11px/1 var(--texto);font-stretch:72%;letter-spacing:.14em;text-transform:uppercase;color:var(--acento)}
[data-nicho="salud"] .firma b{font-size:24px;color:var(--acento2);font-weight:600}
/* veterinaria: sello */
[data-nicho="veterinaria"] .firma{width:112px;aspect-ratio:1;border-radius:50%;background:var(--acento2);color:#fff;font:400 12px/1.15 var(--display);text-align:center;transform:rotate(-8deg);padding:10px}
/* gimnasio: cupos */
[data-nicho="gimnasio"] .firma{font:400 44px/1 var(--display);color:var(--acento2);gap:6px;min-width:110px}
[data-nicho="gimnasio"] .firma small{font:600 12px/1 var(--texto);letter-spacing:.1em;text-transform:uppercase;color:var(--suave)}
.barra-cupo{width:100%;height:8px;background:var(--fondo);border:1px solid var(--linea)}.barra-cupo i{display:block;height:100%;background:var(--acento2)}
/* taller: placa colombiana */
[data-nicho="taller"] .firma{background:var(--placa);border:3px solid #111;border-radius:8px;padding:6px 14px 4px;font:800 30px/1 var(--display);letter-spacing:.06em;color:#111;gap:2px}
[data-nicho="taller"] .firma small{font:700 10px/1 var(--display);letter-spacing:.2em}
/* panadería: tiquete de encargo */
[data-nicho="panaderia-cafe"] .firma{background:#fff8e1;padding:10px 14px;transform:rotate(-2deg);box-shadow:0 8px 16px -10px rgba(0,0,0,.4);text-align:left;place-items:start}
[data-nicho="panaderia-cafe"] .firma small{font:700 11px/1 var(--texto);letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
[data-nicho="panaderia-cafe"] .firma b{font:900 italic 26px/1.1 var(--display);color:var(--acento)}
/* tienda: cartulina */
[data-nicho="tienda"] .firma{background:var(--acento2);padding:12px 16px;font:400 32px/1 var(--mano);transform:rotate(-3deg);box-shadow:0 10px 18px -12px rgba(0,0,0,.45)}
/* genérico: línea del tablero */
[data-nicho="generico"] .firma{background:#1c1c1e;color:#f4f4f2;padding:10px 14px;font:400 22px/1 var(--display);letter-spacing:.04em;border:6px solid #c9ccd1}

@media (max-width:860px){
  .mostrador{grid-template-columns:1fr}
  .app{padding-bottom:140px}
  .siguiente{position:fixed;left:12px;right:12px;bottom:12px;width:auto;z-index:20;box-shadow:0 12px 30px -10px rgba(0,0,0,.5)}
}
@media (max-width:520px){
  .ahora .cuerpo{grid-template-columns:1fr}
  .firma{justify-self:start}
  .cifra{min-width:0;flex:1}
  .agregar form{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}