:root{
  --fondo:#FBF5E9; --papel:#fff; --tinta:#1B2420; --suave:#56605A; --linea:#EADFCB; --linea2:#D6C8AE;
  --verde:#1D4B3A; --verde2:#2A6450; --verde-claro:#E1EFE6; --ladrillo:#C0392B; --ladrillo-osc:#9E2C21;
  --rojo:#B02F23; --ambar:#FCEBC4; --ambar-t:#7A4A05; --mango:#F2B632; --mar:#178A8C; --mar-claro:#D9F0EE;
  --r:12px; --sombra:0 1px 2px rgba(27,36,32,.06);
  --display:'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --texto:'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --marca:'Pacifico', 'Bricolage Grotesque', cursive;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fondo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40'%3E%3Cpath d='M0 20 Q20 8 40 20 T80 20 T120 20 T160 20' fill='none' stroke='%23F0E4CC' stroke-width='1.1'/%3E%3C/svg%3E");color:var(--tinta);font-family:var(--texto);font-size:15px;line-height:1.4}
a{color:var(--verde)} a:hover{color:var(--ladrillo)}
h1,h2,h3{font-family:var(--display);letter-spacing:-.3px;margin:0}
h1{font-size:28px} h2{font-size:20px} h3{font-size:17px}
button,input,select,textarea{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--suave)}
.small{font-size:13px}

/* encabezado */
.top{background:var(--verde);color:#F4F2EE;display:flex;align-items:center;gap:14px;padding:0 16px;min-height:60px;flex-shrink:0;position:relative;border-bottom:5px solid transparent;border-image:linear-gradient(90deg,var(--ladrillo) 0 33.3%,var(--mango) 33.3% 66.6%,#2E8B57 66.6% 100%) 1}
.marca{font-family:var(--marca);font-weight:400;font-size:24px;color:var(--mango);text-decoration:none;flex-shrink:0;display:flex;align-items:center;gap:8px;line-height:1}
.marca svg{width:30px;height:30px;transform-origin:50% 95%;animation:mecer 5s ease-in-out infinite}
.marca:hover{color:#FFD36B}
.nav{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{color:#C9D6CF;text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:500;font-size:14px;white-space:nowrap}
.nav a:hover{color:#fff}
.nav a.on{background:var(--verde2);color:#fff}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--verde2);padding:7px 13px;border-radius:999px;font-size:13px;font-weight:600;color:#fff;text-decoration:none;white-space:nowrap;flex-shrink:0}
.pill:hover{color:#fff}
.quien{font-size:13px;color:#C9D6CF;display:flex;gap:12px;align-items:center;white-space:nowrap;flex-shrink:0}
@media (max-width:700px){
  .top{flex-wrap:wrap;padding:8px 12px;gap:8px}
  .nav{order:3;flex-basis:100%}
  .pill{font-size:12px;padding:5px 10px}
}
.quien a{color:#C9D6CF}
.quien a:hover{color:#fff}

/* layout */
.wrap{margin:0;padding:22px 24px 60px}
.cab{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.card{background:var(--papel);border:1px solid var(--linea);border-radius:14px;box-shadow:var(--sombra)}
.pad{padding:18px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g2{grid-template-columns:1fr}}
@media (max-width:520px){.g3,.g4{grid-template-columns:1fr}}
.fila{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.esp{flex:1}
.stack{display:flex;flex-direction:column;gap:12px}

/* avisos */
.flashes{max-width:1280px;margin:14px auto 0;padding:0 20px;display:flex;flex-direction:column;gap:8px}
.flash{padding:12px 16px;border-radius:10px;font-weight:500}
.flash.ok{background:var(--verde-claro);color:var(--verde)}
.flash.error{background:#F8E1DB;color:#7E2A18}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--linea2);background:#fff;font-weight:600;font-size:15px;cursor:pointer;text-decoration:none;color:var(--tinta);white-space:nowrap}
.btn:hover{border-color:var(--verde);color:var(--tinta)}
.btn.prim{background:var(--verde);border-color:var(--verde);color:#fff}
.btn.prim:hover{background:var(--verde2);color:#fff}
.btn.cobrar{background:var(--ladrillo);border-color:var(--ladrillo);color:#fff}
.btn.cobrar:hover{background:var(--ladrillo-osc);color:#fff}
.btn.peligro{color:var(--rojo);border-color:#E3B8AD}
.btn.chico{min-height:36px;padding:0 12px;font-size:14px}
.btn.grande{min-height:58px;font-size:18px;border-radius:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.sel{background:var(--tinta);border-color:var(--tinta);color:#fff}
.link{background:none;border:none;color:var(--verde);text-decoration:underline;cursor:pointer;padding:0;font-size:14px}

/* formularios */
label.lbl,.lbl{font-size:13px;font-weight:600;color:var(--suave);display:block;margin-bottom:6px}
.in,select.in,textarea.in{width:100%;min-height:44px;border:1px solid var(--linea2);border-radius:10px;padding:8px 12px;background:#fff;font-size:15px}
textarea.in{min-height:80px;resize:vertical}
.in:focus,.btn:focus-visible{outline:2px solid var(--verde);outline-offset:1px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--verde);flex-shrink:0}
.filtros{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.filtros .in{min-height:40px;width:auto}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--linea2);background:#fff;font-size:14px;font-weight:600;color:var(--tinta);text-decoration:none}
.chip.on{background:var(--tinta);border-color:var(--tinta);color:#fff}

/* tablas */
.tabla-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse}
table.t th,table.t td{padding:11px 14px;text-align:left;border-bottom:1px solid #EEEBE5;font-size:14px;vertical-align:top}
table.t th{font-size:12px;color:var(--suave);font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:#FAF9F6}
table.t td.r,table.t th.r{text-align:right}
table.t tr:last-child td{border-bottom:none}
table.t tr.tachada td{color:var(--suave);text-decoration:line-through}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:3px 8px;border-radius:6px;background:var(--verde-claro);color:var(--verde)}
.tag.gris{background:#EEEBE5;color:var(--suave)}
.tag.ambar{background:var(--ambar);color:var(--ambar-t)}
.tag.rojo{background:#F8E1DB;color:#7E2A18}

/* KPIs y barras */
.kpi{padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.kpi .v{font-family:var(--display);font-size:28px;font-weight:700;font-variant-numeric:tabular-nums}
.kpi .k{font-size:12px;font-weight:700;color:var(--suave);text-transform:uppercase;letter-spacing:.05em}
.barras{display:flex;align-items:flex-end;gap:6px;height:220px;border-bottom:1px solid var(--linea2);padding-top:18px}
.barras .b{flex:1;min-width:6px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative}
.barras .b span.bar{width:100%;background:var(--verde);border-radius:4px 4px 0 0;min-height:2px}
.barras .b span.vv{font-size:10px;color:var(--suave);margin-bottom:3px;white-space:nowrap}
.etqs{display:flex;gap:6px}
.etqs span{flex:1;min-width:6px;text-align:center;font-size:11px;color:var(--suave)}
.hbar{display:flex;flex-direction:column;gap:4px}
.hbar .f{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.hbar .p{height:8px;background:#EEEBE5;border-radius:4px;overflow:hidden}
.hbar .p span{display:block;height:100%;background:var(--verde);border-radius:4px}
.split{display:flex;height:18px;border-radius:6px;overflow:hidden;gap:2px;background:#EEEBE5}
.ley{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
.ley i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}

/* login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--verde)}
.login .card{width:100%;max-width:380px;padding:28px;display:flex;flex-direction:column;gap:16px}

/* ===== CAJA ===== */
body.modo-caja{height:100vh;overflow:hidden;display:flex;flex-direction:column}
body.modo-caja .flashes{position:fixed;bottom:20px;left:20px;margin:0;z-index:60;width:min(480px,92vw);padding:0}
body.modo-caja .flash{box-shadow:0 4px 14px rgba(0,0,0,.12)}
.caja{flex:1;display:flex;min-height:0}
.caja-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px;padding:16px 20px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}
.tabs button{min-height:46px;padding:0 20px;border-radius:999px;font-size:15px;font-weight:600;cursor:pointer;background:#fff;border:1px solid var(--linea2)}
.tabs button.on{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.productos{flex:1;min-height:0;overflow-y:auto;padding-bottom:16px;scroll-behavior:smooth}
.productos{--tw:150px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:14px 24px}
.grupo{flex:1 1 auto;min-width:0;max-width:100%;border-radius:14px;transition:background .3s}
.grupo-tit{font-family:var(--display);font-size:17px;color:var(--verde);margin:4px 2px 8px;display:flex;align-items:center;gap:10px}
.grupo-tit::after{content:"";flex:1;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--mango),transparent)}
.grupo.destello{animation:destello 1.2s ease-out}
@keyframes destello{0%{background:rgba(242,182,50,.28)}100%{background:transparent}}
.rejilla{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:12px}

.productos .tile .nom{font-size:clamp(13px,calc(var(--tw) * .105),26px);line-height:1.2}
.productos .tile .pre{font-size:clamp(14px,calc(var(--tw) * .115),28px)}
@media (max-width:520px){.rejilla{gap:8px}}
.tile{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:9px;display:flex;flex-direction:column;gap:8px;cursor:pointer;text-align:left;min-height:44px;transition:border-color .1s, transform .05s}
.tile:hover{border-color:var(--ladrillo)}
.tile:active{transform:scale(.98)}
.tile .foto{position:relative;height:92px;border-radius:10px;background:repeating-linear-gradient(135deg,#EDE7DC 0 10px,#E5DED1 10px 20px);display:flex;align-items:center;justify-content:center;overflow:hidden}
.tile .foto img{width:100%;height:100%;object-fit:cover}
.tile .foto b{font-family:var(--display);font-size:34px;color:#B9AF9E}
.tile .pie{display:flex;justify-content:space-between;align-items:flex-end;gap:6px}
.tile .nom{font-weight:700;font-size:15px;line-height:1.25}
.tile .pre{font-weight:700;font-size:16px;color:var(--rojo)}
.tile .eleg{position:absolute;right:6px;top:6px;font-size:12px;font-weight:700;padding:4px 8px;border-radius:6px;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.orden{width:390px;flex-shrink:0;background:#fff;border-left:1px solid var(--linea);display:flex;flex-direction:column;min-height:0}
.orden-cab{padding:16px 20px 8px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.orden-lista{flex:1;overflow-y:auto;padding:0 20px}
.linea{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #EEEBE5}
.linea .d{flex:1;min-width:0;display:flex;flex-direction:column}
.linea .d b{font-weight:600}
.linea .d span{font-size:13px;color:var(--suave)}
.qb{width:38px;height:38px;border-radius:9px;border:1px solid var(--linea2);background:#fff;font-size:20px;cursor:pointer;line-height:1}
.linea .c{width:20px;text-align:center;font-weight:700}
.linea .m{width:78px;text-align:right;font-weight:700}
.vacio{padding:50px 10px;text-align:center;color:var(--suave)}
.orden-pie{padding:14px 20px 18px;border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:12px}
.total{display:flex;justify-content:space-between;align-items:baseline}
.total b{font-family:var(--display);font-size:34px;font-variant-numeric:tabular-nums}
.ver-orden{display:none}
@media (max-width:900px){
  .orden{position:fixed;left:0;right:0;bottom:0;width:auto;height:auto;max-height:82vh;border-left:none;border-top:1px solid var(--linea);box-shadow:0 -6px 20px rgba(0,0,0,.08);z-index:20}
  .orden .orden-lista,.orden .orden-cab{display:none}
  .orden.abierta .orden-lista,.orden.abierta .orden-cab{display:flex}
  .orden.abierta .orden-lista{display:block;max-height:45vh}
  .ver-orden{display:inline-flex}
  .caja-main{padding-bottom:190px}
}

/* modal */
.modal{position:fixed;inset:0;background:rgba(24,32,28,.55);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal.on{display:flex}
.modal .caja-m{background:#fff;border-radius:18px;width:min(620px,100%);max-height:92vh;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:16px}
.modal .caja-m.ancha{width:min(900px,100%)}
.modal-cab{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cerrar{width:44px;height:44px;border-radius:10px;border:1px solid var(--linea2);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pago-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:760px){.pago-grid{grid-template-columns:1fr}}
.opciones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:520px){.opciones{grid-template-columns:repeat(2,minmax(0,1fr))}}
.opciones button{min-height:64px;border-radius:12px;border:1px solid var(--linea2);background:#FAF8F4;font-size:17px;font-weight:600;cursor:pointer;padding:6px}
.opciones button:hover{border-color:var(--ladrillo);background:#fff}
.metodos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.metodos button{min-height:54px;border-radius:12px;border:1px solid var(--linea2);background:#fff;font-size:16px;font-weight:700;cursor:pointer}
.metodos button.on{background:var(--verde);color:#fff;border-color:var(--verde)}
.rapidos{display:flex;gap:8px;flex-wrap:wrap}
.rapidos button{min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--linea2);background:#fff;font-weight:600;cursor:pointer}
.vuelto{background:var(--verde-claro);color:var(--verde);border-radius:14px;padding:14px 20px;display:flex;justify-content:space-between;align-items:center}
.vuelto b{font-family:var(--display);font-size:34px}
.vuelto.falta{background:#F8E1DB;color:#7E2A18}
.in.grande{font-size:22px;min-height:54px;font-variant-numeric:tabular-nums}
.cliente-box{border:1px solid var(--linea);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:12px;background:#FAF9F6}
.err{background:#F8E1DB;color:#7E2A18;border-radius:10px;padding:10px 14px;font-weight:600;display:none}
.err.on{display:block}
.exito{text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.exito .grande{font-family:var(--display);font-size:46px;font-weight:700}
.ult{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #EEEBE5}
.ult .d{font-size:13px;color:var(--suave)}

/* abrir caja / avisos */
.centro{min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center;padding:20px}
.centro .card{width:100%;max-width:460px;padding:28px;display:flex;flex-direction:column;gap:16px}

/* menú admin */
.menu-lay{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px}
@media (max-width:820px){.menu-lay{grid-template-columns:1fr}}
.cats a{display:flex;justify-content:space-between;padding:11px 14px;border-radius:10px;text-decoration:none;color:var(--tinta);font-weight:500}
.cats a.on{background:#fff;border:1px solid var(--linea);font-weight:700}
.prod{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid #EEEBE5}
.prod .mini{width:56px;height:56px;border-radius:9px;background:repeating-linear-gradient(135deg,#EDE7DC 0 8px,#E5DED1 8px 16px);flex-shrink:0;overflow:hidden}
.prod .mini img{width:100%;height:100%;object-fit:cover}
.prod.agotado .nm{color:var(--suave)}
.acciones{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.acciones form{margin:0}
.foto-prev{width:100%;max-width:280px;aspect-ratio:4/3;border-radius:12px;background:repeating-linear-gradient(135deg,#EDE7DC 0 10px,#E5DED1 10px 20px);overflow:hidden}
.foto-prev img{width:100%;height:100%;object-fit:cover}

/* impresión */
@media print{
  .top,.flashes,.no-print{display:none !important}
  body{background:#fff}
  .wrap{padding:0}
  .card{border:none;box-shadow:none}
}


/* ===== toques caribeños ===== */
@keyframes mecer{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes olas{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sol{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.06);opacity:1}}
@keyframes entrar{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@keyframes rebote{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.tabs button.on{background:var(--verde);border-color:var(--verde)}
.tile{border-top:4px solid var(--mango)}
.tile:nth-child(3n+2){border-top-color:#2E8B57}
.tile:nth-child(3n){border-top-color:var(--ladrillo)}
.tile:hover{border-color:var(--mango);box-shadow:0 6px 16px rgba(242,182,50,.25)}
.tile .eleg{background:var(--ambar);color:var(--ambar-t)}
.caja-main{position:relative}
.caja-main::after{content:"";position:absolute;right:10px;bottom:0;width:260px;height:360px;pointer-events:none;opacity:.07;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'%3E%3Cg fill='%231D4B3A'%3E%3Cpath d='M104 300c-6-70-10-140 8-208l9 2c-15 66-10 136-6 206z'/%3E%3Cpath d='M112 92C80 60 40 58 4 92c36-16 72-18 108 0z'/%3E%3Cpath d='M112 92C90 46 54 26 14 30c38 8 70 30 98 62z'/%3E%3Cpath d='M112 92c4-44 28-74 70-84-32 20-54 48-70 84z'/%3E%3Cpath d='M112 92c32-28 66-30 88 6-30-14-58-14-88-6z'/%3E%3Cpath d='M112 92c30 10 54 34 66 70-22-28-44-50-66-70z'/%3E%3Cpath d='M112 92C82 104 58 128 44 164c18-34 42-56 68-72z'/%3E%3Ccircle cx='106' cy='100' r='7'/%3E%3Ccircle cx='118' cy='102' r='6'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom right/contain}
.productos{position:relative;z-index:1}
.orden{background:#fff linear-gradient(180deg,var(--mar-claro),#fff 70px) no-repeat}
.vacio svg{display:block;margin:0 auto 10px;width:56px;height:56px;opacity:.5;transform-origin:50% 95%;animation:mecer 5s ease-in-out infinite}
.btn.cobrar{background:linear-gradient(180deg,#CF4434,var(--ladrillo));box-shadow:0 3px 10px rgba(192,57,43,.25)}
.exito .pura{font-family:var(--marca);font-size:40px;color:var(--mar);line-height:1.2;animation:rebote .45s ease-out}
.exito .solcito{width:70px;height:70px;animation:sol 2.4s ease-in-out infinite}
.modal .caja-m{animation:entrar .18s ease-out}
.card h1 .acento,.cab h1 .acento{color:var(--ladrillo)}
.kpi{border-top:4px solid var(--mar)}
.grid .kpi:nth-child(2){border-top-color:var(--mango)}
.grid .kpi:nth-child(3){border-top-color:var(--ladrillo)}
.grid .kpi:nth-child(4){border-top-color:#2E8B57}
.barras .b span.bar{background:linear-gradient(180deg,var(--mar),var(--verde))}
.hbar .p span{background:linear-gradient(90deg,var(--verde),var(--mar))}
.centro .card,.login .card{border-top:6px solid var(--mango)}

/* escena de playa (entrada, abrir caja, avisos) */
.escena{position:relative;overflow:hidden;background:linear-gradient(180deg,#FFB86B 0%,#FFD89A 26%,#9FDCD8 55%,#1E9AA0 78%,#137377 100%)}
.escena .sol{position:absolute;left:50%;top:9%;width:150px;height:150px;margin-left:-75px;border-radius:50%;background:radial-gradient(circle,#FFF3C4 0,#FFD15C 55%,rgba(255,209,92,0) 72%);animation:sol 6s ease-in-out infinite}
.escena .palma{position:absolute;bottom:40px;width:min(34vw,320px);transform-origin:50% 100%;animation:mecer 6s ease-in-out infinite;fill:#173D30}
.escena .palma.izq{left:-30px}
.escena .palma.der{right:-40px;width:min(28vw,260px);animation-delay:-2.5s;transform:scaleX(-1)}
.escena .palma.der{animation-name:mecer-der}
@keyframes mecer-der{0%,100%{transform:scaleX(-1) rotate(-3deg)}50%{transform:scaleX(-1) rotate(3deg)}}
.escena .olas{position:absolute;left:0;bottom:0;width:200%;height:90px;animation:olas 14s linear infinite}
.escena .olas.atras{bottom:22px;opacity:.55;animation-duration:22s}
.escena .arena{position:absolute;left:0;right:0;bottom:0;height:34px;background:#F3DFB4}
.escena > .card,.escena > form{position:relative;z-index:3}
.login.escena,.centro.escena{min-height:100vh}
.centro.escena{min-height:calc(100vh - 65px)}
.marca-grande{font-family:var(--marca);font-size:44px;color:var(--ladrillo);line-height:1.1;margin:0}
.sub-marca{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--verde)}
.firma{display:flex;align-items:center;justify-content:center;gap:6px}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}
@media print{.caja-main::after{display:none}}

.productos::after{content:"";display:block;flex-basis:100%;height:55vh}
.productos.cabe::after{display:none}

@media (min-width:901px) and (max-width:1400px){.orden{width:320px}.orden-cab{padding:14px 14px 8px}.orden-lista{padding:0 14px}.orden-pie{padding:12px 14px 14px}.total b{font-size:30px}}
.productos .tile .foto{height:auto;aspect-ratio:16/10}
.orden-cab{flex-wrap:wrap;row-gap:8px}

.kpi-link{text-decoration:none;color:inherit;cursor:pointer}
.kpi-link:hover{box-shadow:0 4px 14px rgba(27,36,32,.1);color:inherit}
.kpi-link.sel{outline:2px solid var(--verde);outline-offset:-2px}
table.t tr.fila-total td{background:#FAF6EC;border-top:2px solid var(--linea2)}

/* ===== pantallas grandes: todo más grande y a lo ancho ===== */
.grupo-tit{font-size:clamp(17px,calc(var(--tw) * .1),26px)}
.tile .eleg{font-size:clamp(12px,calc(var(--tw) * .07),17px)}
.wrap{max-width:none}
/* escala continua según el ancho de la ventana (la calcula un script en <head>) */
.wrap{zoom:var(--zw,1)}
.top{zoom:var(--zt,1)}
@media (min-width:1500px){
  .orden{width:440px}
  .orden .linea .d b{font-size:17px}
  .orden .total b{font-size:40px}
  .orden .btn.grande{min-height:66px;font-size:21px}
  .tabs button{min-height:52px;font-size:17px;padding:0 24px}
}
@media (min-width:1800px){.orden{width:480px}}
/* tablet */
@media (min-width:701px) and (max-width:1100px){
  .tabs button{min-height:48px;font-size:16px}
}
/* celular: formato propio */
@media (max-width:700px){
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex-shrink:0;min-height:42px;padding:0 16px;font-size:15px}
  .caja-main{padding:12px 12px 190px}
  .productos{gap:10px}
  .grupo{flex-basis:100% !important}
  .rejilla{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px}
  .productos .tile .nom{font-size:15px}
  .productos .tile .pre{font-size:16px}
  .grupo-tit{font-size:18px}
}
.productos .tile .foto img{object-fit:cover}
.productos.parejo .grupo{flex-basis:100% !important}
.productos.parejo .tile .nom{font-size:clamp(15px,calc(var(--tw) * .09),20px)}
.productos.parejo .tile .pre{font-size:clamp(16px,calc(var(--tw) * .095),22px)}
.productos .tile{padding:clamp(6px,calc(var(--tw) * .05),10px);gap:clamp(4px,calc(var(--tw) * .04),8px)}
.productos .grupo-tit{margin:2px 2px 6px}

/* logo de Miss Thelma */
.marca img.avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;animation:none;box-shadow:0 0 0 2px rgba(242,182,50,.35)}
.logo-login{display:block;width:100%;max-width:400px;height:auto;margin:-8px auto 0;filter:drop-shadow(0 4px 10px rgba(0,0,0,.18))}
.login .card{max-width:440px}
.logo-abrir{display:block;width:100%;max-width:300px;height:auto;margin:-6px auto 0}
.vacio .logo-vacio{display:block;width:min(260px,80%);height:auto;margin:0 auto 14px;opacity:.95}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
@media (max-width:700px){.marca img.avatar{width:34px;height:34px}.logo-login{max-width:300px}}