/* RAKOOT · Caja — versión de computadora (FaroTech)
   El celular no cambia: todo esto vive dentro de @media (min-width:1000px) o (pointer:fine). */
:root{--pop:cubic-bezier(.34,1.56,.64,1);--lado:248px}

/* ---------- puntero de FaroTech (solo con mouse) ---------- */
.cur{position:fixed;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--turq);border:3px solid var(--tinta);pointer-events:none;z-index:999;transform:translate3d(-100px,-100px,0) translate(-50%,-50%);transition:width .25s var(--pop),height .25s var(--pop),background .25s,opacity .2s;display:none}
.cur span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 11px Unbounded,sans-serif;color:#fff;opacity:0;white-space:nowrap;transition:opacity .2s}
.cur.big{width:76px;height:76px;background:var(--tinta)}
.cur.big span{opacity:1}
.cur.oculto{opacity:0}
@media (hover:hover) and (pointer:fine){
  html.con-cursor .cur{display:block}
  html.con-cursor body,html.con-cursor button,html.con-cursor .prod,html.con-cursor [data-a]{cursor:none}
  html.con-cursor input:not([type=checkbox]):not([type=color]),html.con-cursor textarea{cursor:text}
  html.con-cursor select,html.con-cursor input[type=checkbox],html.con-cursor input[type=color]{cursor:pointer}
}

/* ---------- distribución de computadora ---------- */
.lado-marca,.lado-pie{display:none}
@media (min-width:1000px){
  body{display:block;background:var(--arena)}
  #app{max-width:none;padding:0 0 0 var(--lado);min-height:100vh}
  header.top{padding:14px 32px}
  header.top .logo-neg{display:none}
  header .nombre{font-size:1.25rem}
  .banner{margin:14px 32px 0}
  main{max-width:1320px;width:100%;margin:0 auto;padding:24px 32px 40px;gap:18px}
  footer.faro{display:none}

  /* la barra de abajo pasa a ser una barra lateral */
  nav.bottom{left:0;top:0;bottom:0;transform:none;width:var(--lado);max-width:none;flex-direction:column;justify-content:flex-start;gap:6px;padding:22px 16px;border-right:var(--borde)}
  nav.bottom button{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:12px;font-size:.95rem;padding:12px 14px;border-radius:12px;transition:background .2s,transform .35s var(--pop)}
  nav.bottom button .ic{font-size:1.25rem}
  nav.bottom button:not(.on):hover{background:#ffffff14}
  .lado-marca{display:flex;align-items:center;gap:10px;color:#fff;padding:2px 6px 18px;margin-bottom:8px;border-bottom:1.5px solid #ffffff22}
  .lado-marca .logo-neg{width:44px;height:44px;background:var(--acento);border-color:#fff}
  .lado-marca b{display:block;font-family:Unbounded;font-weight:800;font-size:1.05rem}
  .lado-marca small{font-size:.75rem;opacity:.7}
  .lado-pie{display:block;margin-top:auto;color:#fff;padding:14px 6px 0;border-top:1.5px solid #ffffff22;font-size:.75rem;opacity:.85}
  .lado-pie .wm{display:block;font-family:Unbounded;font-weight:800;font-size:1.3rem;letter-spacing:-.02em;text-shadow:3px 3px 0 var(--turq)}
  .lado-pie .wm i{font-style:normal;color:var(--turq);text-shadow:none}

  /* ventanas: de hoja inferior a ventana centrada */
  .velo{align-items:center}
  .hoja{max-width:600px;max-height:88vh;border:var(--borde);border-radius:20px;box-shadow:8px 8px 0 var(--turq)}
  .toast{top:22px;left:auto;right:28px;transform:none}

  /* Pedido: productos a la izquierda, pedido fijo a la derecha */
  main.v-pedido{display:grid;grid-template-columns:minmax(0,1fr) 400px;align-items:start;column-gap:24px}
  main.v-pedido > *{grid-column:1}
  main.v-pedido > .carrito{grid-column:2;grid-row:1 / span 8;position:sticky;top:96px;bottom:auto}
  main.v-pedido .carrito .lineas{max-height:52vh}
  main.v-pedido .prods{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
  main.v-pedido .prod{min-height:120px;padding:16px}
  main.v-pedido .prod .n{font-size:.95rem}
  main.v-pedido .prod .em{font-size:1.9rem}

  /* Hoy */
  main.v-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  main.v-panel > .card:first-child,main.v-panel > .btn{grid-column:1 / -1}
  main.v-panel > .card:first-child .grid2{grid-template-columns:repeat(4,1fr)}
  main.v-panel .kpi .v{font-size:1.9rem}
  main.v-panel .cols{height:170px}

  /* Pedidos, caja, mes, ajustes, resumen */
  main.v-pedidos{max-width:1000px}
  main.v-caja,main.v-ajustes,main.v-resumen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  main.v-mes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  main.v-mes > .card:first-child{grid-row:span 2}
  main.v-mes > .card:last-child{grid-column:1 / -1}

  /* Inventario y menú en columnas */
  main.v-inventario{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
  main.v-inventario > :not(.card),main.v-inventario > .card:last-of-type{grid-column:1 / -1}
  main.v-inventario > .grid2{grid-template-columns:repeat(3,1fr)}
  main.v-inventario > .card.fila{grid-column:1 / -1}
  main.v-inventario > p.chica{grid-column:1 / -1}
  main.v-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
  main.v-menu > .card:first-child{grid-column:1 / -1}
  main.v-mas > .grid2{grid-template-columns:repeat(5,1fr)}
}

/* ---------- movimiento en celular y computadora (si el usuario no pidió reducirlo) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* pestaña activa de la barra: entra con rebote al cambiar de pantalla */
  #app.cambio nav.bottom button.on{animation:tab .4s var(--pop)}
  @keyframes tab{from{transform:scale(.8);opacity:.4}}
  #app.cambio .banner{animation:bajar .35s ease-out both}
  @keyframes bajar{from{opacity:0;transform:translateY(-8px)}}
  /* al cambiar de categoría, los productos entran en cascada */
  main.entra-prods .prods > .prod{animation:subir .32s var(--pop) both;animation-delay:calc(var(--j,0) * 28ms)}
  /* la línea del producto recién sumado se ilumina */
  .linea.nueva{animation:brillo .7s ease-out}
  @keyframes brillo{from{background:#14b8a633}}
  .carrito .total{display:inline-block}
  .total.late{animation:late .3s var(--pop)}
  @keyframes late{40%{transform:scale(1.08)}}
  .toast.in{animation:toastIn .32s var(--pop)}
  @keyframes toastIn{from{opacity:0;translate:0 -10px;scale:.96}}
  .hoja .card{animation:subir .35s var(--pop) both}
}
@media (max-width:999px) and (prefers-reduced-motion:no-preference){
  main.entra > :not(.prods){animation:subir .38s var(--pop) both,sombra .3s ease-out both;animation-delay:calc(var(--i,0) * 40ms),calc(var(--i,0) * 40ms + 120ms)}
  main.entra .prods > .prod{animation:subir .34s var(--pop) both;animation-delay:calc(var(--j,0) * 25ms + 80ms)}
  main.entra .barra i{animation:creceX .7s var(--pop) both .2s;transform-origin:left}
  main.entra .cols span.b{animation:creceY .6s var(--pop) both;animation-delay:calc(var(--k,0) * 45ms + .15s);transform-origin:bottom}
  .badge.pop{animation:pop .3s var(--pop)}
  @keyframes subir{from{opacity:0;transform:translateY(14px)}}
  @keyframes sombra{from{box-shadow:0 0 0 var(--turq)}}
  @keyframes creceX{from{transform:scaleX(0)}}
  @keyframes creceY{from{transform:scaleY(0)}}
  @keyframes pop{from{transform:scale(.4)}}
}
@media (min-width:1000px) and (prefers-reduced-motion:no-preference){
  .hoja{animation:aparece .28s var(--pop)}
  @keyframes aparece{from{transform:scale(.94) translateY(12px);opacity:0}}
  main.entra > :not(.prods){animation:subir .5s var(--pop) both,sombra .4s ease-out both;animation-delay:calc(var(--i,0) * 55ms),calc(var(--i,0) * 55ms + 150ms)}
  main.entra .prods > .prod{animation:subir .45s var(--pop) both,sombra .35s ease-out both;animation-delay:calc(var(--j,0) * 35ms + 120ms),calc(var(--j,0) * 35ms + 270ms)}
  @keyframes subir{from{opacity:0;transform:translateY(18px)}}
  @keyframes sombra{from{box-shadow:0 0 0 var(--turq)}}
  main.entra .barra i{animation:creceX .9s var(--pop) both .25s;transform-origin:left}
  main.entra .cols span.b{animation:creceY .8s var(--pop) both;animation-delay:calc(var(--k,0) * 60ms + .2s);transform-origin:bottom}
  @keyframes creceX{from{transform:scaleX(0)}}
  @keyframes creceY{from{transform:scaleY(0)}}
  .badge.pop{animation:pop .35s var(--pop)}
  @keyframes pop{from{transform:scale(.4)}}
  .nota{display:inline-block;transform:rotate(-4deg)}
}
@media (min-width:1000px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .card{transition:transform .3s var(--pop),box-shadow .3s var(--pop)}
  main:not(.v-pedido) > .card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--turq)}
  .prod:hover{transform:translate(-2px,-3px) rotate(-.6deg);box-shadow:7px 7px 0 var(--turq)}
  .btn:hover{transform:translate(-1px,-2px);box-shadow:6px 6px 0 var(--turq)}
  .btn:active,.prod:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--turq)}
  .item[data-a]:hover b{color:var(--turq-osc)}
}