/* Cuetzalan Mío — la aplicación: reservar (teléfono), panel de la sucursal (tableta), tarjeta de regalo y encuesta.
   Comparte los tokens del sitio (estilos.css). Sin frameworks. */
body.app{background:var(--crema);min-height:100vh;display:flex;flex-direction:column}
.app-top{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--nata);border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:20}
.app-top .logo svg{height:44px}
.app-tit b{display:block;font-family:var(--serif);font-size:18px;line-height:1.1}
.app-tit span{display:block;font-size:12.5px;color:var(--suave)}
.app-top .salir{margin-left:auto;font-size:13px;font-weight:700;text-decoration:none;color:var(--cacao-2);padding:8px 12px;border-radius:999px;border:1.5px solid var(--linea)}
main#app{flex:1;width:100%}
.hoja{max-width:520px;margin:0 auto;padding:18px 16px 110px}
.pasos{display:flex;gap:6px;margin:4px 0 18px}
.pasos i{flex:1;height:5px;border-radius:999px;background:var(--linea)}
.pasos i.on{background:var(--teja)}
.preg{font-family:var(--serif);font-size:clamp(1.5rem,6vw,1.9rem);font-weight:600;letter-spacing:-.01em;line-height:1.12;text-wrap:balance}
.ayuda{color:var(--suave);font-size:14.5px;margin-top:6px}
.opciones{display:grid;gap:10px;margin-top:18px}
.op{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;text-align:left;background:var(--nata);border:1.5px solid var(--linea);border-radius:16px;padding:14px 16px;cursor:pointer;min-height:64px;width:100%}
.op b{font-size:16px;font-weight:700}
.op span{font-size:13px;color:var(--suave);grid-column:1}
.op em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--hoja);grid-column:2;grid-row:1/3}
.op[aria-pressed=true]{border-color:var(--cacao);background:#fff;box-shadow:0 0 0 2px var(--cacao)}
.personas{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:18px}
.personas button{height:58px;border-radius:14px;border:1.5px solid var(--linea);background:var(--nata);font-family:var(--serif);font-size:22px;font-weight:600;cursor:pointer}
.personas button[aria-pressed=true]{background:var(--cacao);color:#fff;border-color:var(--cacao)}
.dias{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;margin-top:16px;scrollbar-width:none}
.dias::-webkit-scrollbar{display:none}
.dia{flex:none;width:64px;padding:10px 6px;border-radius:14px;border:1.5px solid var(--linea);background:var(--nata);text-align:center;cursor:pointer}
.dia small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
.dia b{display:block;font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.1;margin-top:2px}
.dia[aria-pressed=true]{background:var(--cacao);border-color:var(--cacao);color:#fff}
.dia[aria-pressed=true] small{color:#EADFCF}
.horas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.hora{padding:10px 6px;border-radius:12px;border:1.5px solid var(--linea);background:var(--nata);cursor:pointer;display:grid;gap:2px;text-align:center}
.hora b{font-size:16px}
.hora small{font-size:11.5px;color:var(--hoja);font-weight:700}
.hora[disabled]{opacity:.45;cursor:not-allowed}
.hora[disabled] small{color:var(--suave)}
.hora[aria-pressed=true]{background:var(--teja);border-color:var(--teja);color:#fff}
.hora[aria-pressed=true] small{color:#FBE8DF}
.campo{display:grid;gap:6px;margin-top:14px}
.campo label{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teja)}
.campo input,.campo textarea,.campo select{font:inherit;font-size:16px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--linea);background:var(--nata);color:var(--tinta);width:100%}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:2px solid var(--cacao);outline-offset:1px}
.resumen{background:var(--nata);border:1.5px solid var(--linea);border-radius:16px;padding:14px 16px;margin-top:16px;display:grid;gap:6px;font-size:14.5px}
.resumen b{font-family:var(--serif);font-size:1.25rem;font-weight:600}
.resumen .cod{font-family:var(--serif);color:var(--teja);font-size:1.5rem;letter-spacing:.02em}
.pie-fijo{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,var(--crema) 35%);z-index:15}
.pie-fijo .in{max-width:520px;margin:0 auto;display:flex;gap:10px}
.pie-fijo .btn{flex:1}
.btn[disabled]{opacity:.45;pointer-events:none}
.listo{display:grid;place-items:center;text-align:center;gap:10px;padding:22px 0 8px}
.listo .sello{width:84px;height:84px;border-radius:50%;background:var(--hoja);display:grid;place-items:center;color:#fff}
.listo .sello svg{width:44px;height:44px}
.wa{margin-top:16px;background:#E6F3DC;border-radius:16px;padding:12px 14px;display:grid;gap:4px}
.wa small{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#3E6A2B}
.wa p{font-size:14px;line-height:1.5}
.wa .motivo{font-size:12.5px;color:var(--suave)}
.acc2{display:grid;gap:8px;grid-template-columns:1fr 1fr;margin-top:16px}
.acc2.una{grid-template-columns:1fr}
.acc2 .btn{width:100%;padding-inline:10px;font-size:14px}
.nota-demo{font-size:12.5px;color:var(--suave);text-align:center;margin-top:16px}
.enlace{font-size:13px;word-break:break-all;color:var(--cacao-2);margin-top:8px}
/* tarjeta de regalo y encuesta */
.barra-equipo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;background:var(--cacao-2);color:var(--nata);padding:9px 16px;font-size:13.5px}
.barra-equipo b{font-weight:800}
.barra-equipo select{flex:1 1 140px;min-width:0;font:inherit;font-size:13.5px;font-weight:700;padding:6px 28px 6px 10px;border-radius:999px;border:1px solid rgba(255,251,244,.3);background:rgba(255,251,244,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FFFBF4' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center;color:var(--nata);appearance:none}
.barra-equipo button{margin-left:auto;font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,251,244,.35);background:transparent;color:var(--nata);cursor:pointer;min-height:34px}
.montos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.montos button{height:54px;border-radius:14px;border:1.5px solid var(--linea);background:var(--nata);font-family:var(--serif);font-size:19px;font-weight:600;cursor:pointer}
.montos button[aria-pressed=true]{background:var(--cacao);color:#fff;border-color:var(--cacao)}
.movs{background:var(--nata);border:1.5px solid var(--linea);border-radius:16px;overflow:hidden;margin-top:14px}
.mov{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:11px 14px;border-bottom:1px solid var(--linea);font-size:14px;align-items:center}
.mov:last-child{border-bottom:0}
.mov b{font-weight:600;grid-column:1}
.mov span{font-size:12.5px;color:var(--suave);grid-column:1}
.mov .monto{font-family:var(--serif);font-weight:600;font-size:1.05rem;text-align:right;grid-column:2;grid-row:1/3}
.mov .monto.menos{color:var(--teja)}
.mov .monto.mas{color:var(--hoja)}
.qr{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:var(--nata);border:1.5px solid var(--linea);border-radius:16px;padding:14px;margin-top:14px}
.qr svg{width:112px;height:112px;display:block}
.qr b{font-family:var(--serif);font-size:1.15rem;letter-spacing:.06em;font-weight:600}
.qr small{display:block;font-size:12.5px;color:var(--suave);margin-top:4px}
.fila-cod{display:flex;gap:8px;flex-wrap:wrap}
.fila-cod input{flex:1;min-width:150px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.chips-e{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chips-e button{padding:9px 14px;border-radius:999px;border:1.5px solid var(--linea);background:var(--nata);font-weight:700;font-size:14px;cursor:pointer;min-height:40px}
.chips-e button[aria-pressed=true]{background:var(--cacao);border-color:var(--cacao);color:#fff}
.calif{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:18px}
.calif button{height:62px;border-radius:14px;border:1.5px solid var(--linea);background:var(--nata);font-family:var(--serif);font-size:24px;font-weight:600;cursor:pointer}
.calif button[aria-pressed=true]{background:var(--teja);color:#fff;border-color:var(--teja)}
.calif-txt{margin-top:10px;font-family:var(--serif);font-size:1.25rem;font-weight:600;min-height:1.5em;color:var(--cacao)}
.sw{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.sw input{appearance:none;width:40px;height:22px;border-radius:999px;background:var(--linea);position:relative;cursor:pointer;flex:none}
.sw input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s}
.sw input:checked{background:var(--hoja)}
.sw input:checked::after{left:21px}
/* panel */
.panel{max-width:1120px;margin:0 auto;padding:14px 16px 60px;display:grid;gap:14px}
.panel>*{min-width:0}
.barra{display:flex;flex-wrap:wrap;gap:10px;align-items:center;min-width:0}
.barra h2{font-family:var(--serif);font-weight:600;font-size:1.4rem}
.barra select{font:inherit;font-size:15px;font-weight:700;padding:10px 36px 10px 14px;border-radius:12px;border:1.5px solid var(--linea);background:var(--nata) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A2A1C' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;appearance:none}
.tabs{display:flex;gap:4px;background:var(--arena);padding:4px;border-radius:999px;margin-left:auto;max-width:100%;min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:transparent;padding:8px 14px;border-radius:999px;font-weight:700;font-size:14px;cursor:pointer;color:var(--cacao-2);white-space:nowrap;flex:none}
.tabs button[aria-pressed=true]{background:var(--nata);box-shadow:0 2px 6px -2px rgba(0,0,0,.25)}
.seg{display:inline-flex;background:var(--arena);padding:4px;border-radius:999px;gap:4px;max-width:100%}
.seg button{border:0;background:transparent;padding:7px 12px;border-radius:999px;font-weight:700;font-size:13px;cursor:pointer;color:var(--cacao-2);white-space:nowrap}
.seg button[aria-pressed=true]{background:var(--nata);box-shadow:0 2px 6px -2px rgba(0,0,0,.25)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpis.k3{grid-template-columns:repeat(3,1fr)}
@media(max-width:620px){.kpis,.kpis.k3{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--nata);border:1px solid var(--linea);border-radius:14px;padding:12px 14px}
.kpi b{display:block;font-family:var(--serif);font-size:1.7rem;font-weight:600;line-height:1;color:var(--cacao)}
.kpi span{font-size:12.5px;color:var(--suave)}
.turno{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--linea)}
.turno .h{font-family:var(--serif);font-size:1.2rem;font-weight:600}
.turno .h small{display:block;font-family:var(--sans);font-size:11.5px;color:var(--suave)}
.cupo{height:6px;border-radius:999px;background:var(--arena);overflow:hidden;margin-top:6px}
.cupo i{display:block;height:100%;background:var(--hoja);border-radius:999px}
.cupo i.alto{background:var(--teja)}
.res{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;background:var(--nata);border:1px solid var(--linea);border-radius:12px;padding:10px 12px;margin-top:8px}
.res b{font-size:15px;display:inline-block}
.res span{font-size:12.5px;color:var(--suave)}
.res .acc{display:flex;gap:6px;flex-wrap:wrap;justify-content:end}
.res .acc button{font-size:12.5px;font-weight:700;padding:7px 10px;border-radius:999px;border:1.5px solid var(--linea);background:var(--nata);cursor:pointer;min-height:34px}
.res .acc button.ok{background:var(--hoja);border-color:var(--hoja);color:#fff}
.res .acc button.no{color:var(--teja)}
.res.llego{border-color:#B7D3A3;background:#F3F9EE}
.res.no-llego,.res.cancelada{opacity:.55}
.res.no-llego b,.res.cancelada b{text-decoration:line-through}
.pill{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--arena);color:var(--suave);margin-left:6px;vertical-align:middle}
.pill.web{background:#E6F3DC;color:#3E6A2B}
.vacio{color:var(--suave);font-size:13.5px;margin-top:8px}
.tarj{background:var(--nata);border:1px solid var(--linea);border-radius:16px;padding:16px 18px}
.tarj h3{font-family:var(--serif);font-size:1.25rem;font-weight:600;margin-bottom:8px}
.nueva{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media(max-width:560px){.nueva{grid-template-columns:1fr}}
.nueva .campo{margin-top:0}
.nueva .campo.ancha{grid-column:1/-1}
.cat-p{margin-top:8px}
.cat-p h4{font-family:var(--serif);font-size:1.1rem;font-weight:600;padding:10px 0 6px;border-bottom:1px solid var(--linea)}
.fila-p{display:grid;grid-template-columns:1fr 110px auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--linea);font-size:14.5px}
.fila-p input[type=number]{font:inherit;padding:8px 10px;border-radius:10px;border:1.5px solid var(--linea);background:var(--nata);width:100%}
.ajustes{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.ajustes>*{min-width:0}
.ajustes .sw{white-space:normal}
@media(max-width:700px){.ajustes{grid-template-columns:1fr}}
.dist{display:grid;gap:7px;margin-top:10px}
.dist div{display:grid;grid-template-columns:22px 1fr 36px;gap:10px;align-items:center;font-size:13.5px}
.dist .b{height:10px;border-radius:999px;background:var(--arena);overflow:hidden}
.dist .b i{display:block;height:100%;background:var(--hoja);border-radius:999px}
.dist .b i.mal{background:var(--teja)}
.sem{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px}
.sem div{background:var(--crema);border-radius:10px;padding:8px 4px;text-align:center}
.sem b{display:block;font-family:var(--serif);font-size:1.2rem;font-weight:600}
.sem span{font-size:11.5px;color:var(--suave)}
.chipc{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chipc span{font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:#E6F3DC;color:#3E6A2B}
.chipc span b{font-weight:800;margin-left:4px;opacity:.7}
.chipc.mal span{background:#F7E3DA;color:var(--teja-2)}
.pend{background:#FBF1EC;border:1px solid #EFCFC0;border-radius:12px;padding:10px 12px;margin-top:8px;display:grid;gap:6px;font-size:14px}
.pend p{font-size:14px}
.pend .acc{display:flex;gap:6px;flex-wrap:wrap}
.pend .acc a,.pend .acc button{font-size:12.5px;font-weight:700;padding:7px 10px;border-radius:999px;border:1.5px solid var(--linea);background:var(--nata);cursor:pointer;text-decoration:none;min-height:34px;display:inline-flex;align-items:center;color:var(--cacao-2)}
.estrellas{font-family:var(--serif);font-weight:600;color:var(--cacao);font-size:1.05rem}
.estrellas small{font-size:.7em;color:var(--suave)}
.tabla{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.tabla td,.tabla th{padding:8px 6px;border-bottom:1px solid var(--linea);text-align:left}
.tabla th{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.tabla td.n,.tabla th.n{text-align:right}
.tabla td.n{font-family:var(--serif);font-weight:600}
.fila-t{display:grid;grid-template-columns:1fr auto auto;gap:4px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--linea);font-size:14px}
.fila-t:last-child{border-bottom:0}
.fila-t b{font-weight:600}
.fila-t b.bloque{display:block;margin-top:2px}
.fila-t span{font-size:12.5px;color:var(--suave)}
.fila-t .saldo{font-family:var(--serif);font-weight:600;font-size:1.05rem;text-align:right}
.fila-t .acc{display:flex;gap:6px;justify-content:end}
.fila-t .acc button,.blanca button{font-size:12px;font-weight:700;padding:6px 10px;border-radius:999px;border:1.5px solid var(--linea);background:var(--nata);cursor:pointer;min-height:32px}
@media(max-width:620px){.fila-t{grid-template-columns:1fr auto}.fila-t .acc{grid-column:1/-1}}
.blancas{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;margin-top:10px}
.blanca{display:flex;align-items:center;gap:6px;background:var(--crema);border-radius:12px;padding:8px 8px 8px 12px;font-size:14px}
.blanca b{font-weight:700;letter-spacing:.06em;flex:1;min-width:0}
.modal .wa{margin-top:12px}
.modal .acc2{margin-top:12px}
.toast{position:fixed;left:50%;bottom:100px;transform:translate(-50%,20px);background:var(--cacao-2);color:#fff;padding:11px 16px;border-radius:999px;font-size:14px;font-weight:600;opacity:0;transition:.25s;z-index:50;pointer-events:none;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.clave{max-width:380px;margin:40px auto;text-align:center}
.clave input{font-size:28px;letter-spacing:.4em;text-align:center}