/* La Nona · estilos. Colores tomados del logo: verde salvia, rosa antiguo, crema y café */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);--bg:#FFF6ED;--card:#fff;--ink:#3B2A20;--mute:#7A6656;--pink:#B84C62;--sun:#F6CFCB;--mint:#A9C199;--vio:#5E7A4E;--line:#EADBCB}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*:before,*:after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 Nunito,system-ui,sans-serif}
.w{max-width:480px;margin:0 auto;padding:16px 16px 40px}
h1,h2,h3{font-family:Lora,system-ui,sans-serif;margin:0}
.logo{display:flex;align-items:center;gap:12px;margin:4px 0 14px}
.blob{width:52px;height:52px;border-radius:58% 42% 55% 45%;background:var(--sun);display:grid;place-items:center;font-size:28px;transform:rotate(-8deg);flex:none}
.logo h1{font-size:34px;line-height:1;font-style:italic}
.logo p{margin:2px 0 0;color:var(--mute);font-size:13px}
.tabs{display:flex;gap:6px;background:var(--card);padding:5px;border-radius:999px;border:2px solid var(--line);margin-bottom:16px;position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.tabs button{flex:1;border:0;background:none;color:var(--mute);font:700 13px Lora,sans-serif;padding:10px 2px;border-radius:999px;cursor:pointer}
.tabs button.on{background:var(--vio);color:#fff}
.card{background:var(--card);border:2px solid var(--line);border-radius:24px;padding:18px;margin-bottom:14px}
.card h2{font-size:22px;margin-bottom:4px}
.mute{color:var(--mute);font-size:14px;margin:0 0 12px}
label{display:block;font-weight:800;font-size:14px;margin:10px 0 4px}
input[type=text],input[type=tel]{width:100%;font:inherit;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:var(--bg);color:var(--ink)}
input:focus,button:focus-visible,a:focus-visible{outline:3px solid var(--vio);outline-offset:2px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--mute);margin:12px 0}
.chk input{margin-top:3px;width:18px;height:18px;accent-color:var(--vio)}
.btn{display:inline-block;border:0;border-radius:16px;padding:13px 18px;font:700 16px Lora,sans-serif;cursor:pointer;text-decoration:none;text-align:center;color:#fff;background:var(--pink);width:100%}
.btn.s{width:auto;padding:9px 14px;font-size:14px;border-radius:12px}
.btn.m{background:var(--mint);color:#0B3B2E}.btn.v{background:var(--vio)}.btn.y{background:var(--sun);color:#3A2A00}
.err{color:var(--pink);font-weight:800;font-size:14px;min-height:20px;margin:6px 0 0}
.sc{background:var(--vio);color:#fff;border-radius:28px;padding:20px;margin-bottom:14px;position:relative;overflow:hidden}
.sc:after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--pink);opacity:.9}
.sc h2{font-size:26px;position:relative;z-index:1}.sc p{margin:2px 0 14px;opacity:.9;position:relative;z-index:1}
.row{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:2px solid var(--line)}
.row:first-of-type{border-top:0}
.row .i{flex:1;min-width:0}.row b{display:block}.row small{color:var(--mute)}
.dots{display:inline-flex;gap:3px;margin-top:3px}.dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}.dots i.on{background:var(--pink)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.stat{border-radius:20px;padding:14px 10px;text-align:center;color:#1D1340}
.stat b{display:block;font:700 30px/1 Lora,sans-serif}.stat span{font-size:12px;font-weight:800}
.rank{width:30px;height:30px;border-radius:50%;background:var(--sun);color:#3A2A00;display:grid;place-items:center;font:700 15px Lora;flex:none}
#t{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,30px);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:999px;font-weight:800;opacity:0;pointer-events:none;transition:.25s;z-index:9}
#t.on{opacity:1;transform:translate(-50%,0)}
.hint{font-size:13px;color:var(--mute);text-align:center;margin-top:10px}
.menu{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.it{border:2px solid var(--line);background:var(--bg);color:var(--ink);border-radius:18px;padding:12px;text-align:left;font:inherit;cursor:pointer}
.it b{display:block;font:700 16px Lora,sans-serif}.it span{color:var(--mute);font-size:13px}.it em{float:right;font-style:normal;font-size:22px}
.it.q{border-color:var(--pink)}
.seg{display:flex;gap:6px;margin:8px 0}.seg button{flex:1;border:2px solid var(--line);background:none;color:var(--ink);border-radius:12px;padding:9px 2px;font:700 14px Lora,sans-serif;cursor:pointer}.seg button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tot{display:flex;justify-content:space-between;font:700 22px Lora,sans-serif;margin:12px 0}
select{width:100%;font:inherit;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:var(--bg);color:var(--ink)}
.neg{color:var(--pink)}.kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:2px solid var(--line)}
.tabs:empty{display:none}
.bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;background:var(--mint)}.bar.low i{background:var(--pink)}
.tag{background:var(--pink);color:#fff;border-radius:99px;padding:2px 8px;font-size:12px;font-weight:800;margin-left:6px}
textarea{width:100%;font:inherit;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:var(--bg);color:var(--ink);resize:vertical}
textarea:focus{outline:3px solid var(--vio);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.chips span{background:var(--bg);border:2px solid var(--line);border-radius:99px;padding:4px 12px;font-size:14px;font-weight:700}
.seg{flex-wrap:wrap}.seg button{min-width:72px}
.pr{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px;margin-top:6px}.pr small{color:var(--mute);display:block;font-size:12px}.pr input{padding:8px 10px}.pr .mg b{font-size:14px;display:block;padding-top:8px}
.chp{border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:99px;padding:7px 12px;font:700 14px Nunito,sans-serif;cursor:pointer}.chp.on{background:var(--vio);color:#fff;border-color:var(--vio)}
/* Aviso de "sin internet" fijo arriba */
.aviso{position:sticky;top:0;z-index:10;background:var(--pink);color:#fff;font-weight:800;text-align:center;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0px))}
[hidden]{display:none!important}
/* Etapa 1: barra de sesión, clave y pestañas desplazables */
input[type=password]{width:100%;font:inherit;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:var(--bg);color:var(--ink)}
.sesion{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-4px 0 12px;font-weight:800;color:var(--mute);font-size:14px}
.tabs{overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:1 0 auto;padding-left:12px;padding-right:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.logo-img{width:64px;height:64px;border-radius:50%;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.clave-caja{position:relative}.clave-caja input{padding-right:52px}
.ver-clave{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;font-size:20px;padding:8px;cursor:pointer;opacity:.6}
.ver-clave[aria-pressed=true]{opacity:1}
/* Etapa 2: caja y catálogo */
.chips-filtro{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none}.chips-filtro::-webkit-scrollbar{display:none}
.chips-filtro .chp{flex:none}
.it{position:relative;min-height:72px}
.it .cant{position:absolute;top:-8px;right:-6px;float:none;background:var(--pink);color:#fff;border-radius:99px;min-width:28px;height:28px;display:grid;place-items:center;font:700 15px Nunito,sans-serif;padding:0 6px}
.cantidad{display:flex;align-items:center;gap:8px}.cantidad .btn.s{width:40px;height:40px;padding:0;font-size:20px}.cantidad b{min-width:20px;text-align:center}
.subtotal{min-width:76px;text-align:right}
.cambio-ok{background:var(--mint);color:#1f3317;border-radius:14px;padding:10px 14px}
.vaciar{display:block;margin:10px auto 0}
input[type=number],input[inputmode=numeric]{width:100%;font:inherit;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:var(--bg);color:var(--ink)}
.encabezado{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cat-titulo{font-size:17px;margin:16px 0 4px;color:var(--vio)}
.fila-producto{width:100%;background:none;border:0;border-top:2px solid var(--line);font:inherit;color:inherit;text-align:left;cursor:pointer}
.fila-producto .der{text-align:right}.fila-producto .der small{display:block}
.fila-producto.inactivo{opacity:.55}
.destacado{border-color:var(--vio)}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fila-form-campos{display:flex;gap:8px}.fila-form-campos input{flex:1}
select{font:inherit}
.fila-producto .der small.neg{color:var(--pink);font-weight:800}
/* Barra fija con el total de la cuenta (caja) */
.barra-cuenta{position:fixed;left:0;right:0;bottom:0;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--card);border-top:2px solid var(--line);box-shadow:0 -4px 14px rgba(59,42,32,.12);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
.barra-cuenta b{font:700 20px Lora,serif}
body.con-barra .w{padding-bottom:96px}
@media (min-width:520px){.barra-cuenta{left:50%;right:auto;width:480px;transform:translateX(-50%);border:2px solid var(--line);border-bottom:0;border-radius:20px 20px 0 0}}
.ayuda-billetes{margin:0 0 2px;font-size:13px}
#caja-cuenta .chips-filtro{flex-wrap:wrap;overflow:visible}
/* Etapa 3: mesas y cuentas */
.chips-filtro.envolver{flex-wrap:wrap;overflow:visible}
.contador{background:var(--vio);color:#fff;border-radius:99px;padding:2px 12px;font-weight:800;font-size:14px}
.fila-cuenta{width:100%;background:none;border:0;border-top:2px solid var(--line);font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:0}
.fila-cuenta.on{background:var(--bg);box-shadow:inset 4px 0 0 var(--vio)}
.mesa-num{width:44px;height:44px;flex:none;border-radius:50%;background:var(--sun);color:var(--ink);display:grid;place-items:center;font:700 17px Lora,serif;text-align:center;line-height:1;font-size:15px;overflow:hidden}
.directa{display:block;margin:12px auto 0}
.mesas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.mesa-btn{border:2px solid var(--line);background:var(--bg);color:var(--ink);border-radius:18px;padding:14px 6px;font:inherit;cursor:pointer;min-height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.mesa-btn b{font:700 16px Lora,serif}.mesa-btn small{font-size:12px;color:var(--mute)}
.mesa-btn.ocupada{background:var(--sun);border-color:var(--pink)}.mesa-btn.ocupada small{color:var(--ink);font-weight:800}
.mesa-btn.on{outline:3px solid var(--vio);outline-offset:2px}
.barra-acciones{display:flex;gap:8px}
/* Categorías del mesero y precio libre */
.categorias-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cat-btn{position:relative;border:2px solid var(--line);background:var(--bg);color:var(--ink);border-radius:18px;padding:18px 12px;min-height:84px;font:inherit;cursor:pointer;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:4px}
.cat-btn b{font:700 18px Lora,serif}.cat-btn small{color:var(--mute);font-size:13px}
.cat-btn.q{border-color:var(--pink)}
.cat-btn .cant{position:absolute;top:-8px;right:-6px;background:var(--pink);color:#fff;border-radius:99px;min-width:28px;height:28px;display:grid;place-items:center;font:700 15px Nunito,sans-serif;padding:0 6px;font-style:normal}
.precio-libre{border:2px solid var(--vio);border-radius:18px;padding:14px;margin-bottom:12px;background:var(--bg)}
.precio-libre input{background:var(--card)}
.mesa-num.llevar{background:var(--mint);font-size:13px}
.mesa-btn.llevar{grid-column:span 3}