/* RAKOOT · Caja — tema BLANCO minimalista (reemplaza a lujo.css + aurora.css)
   Principios aplicados:
   - espaciado por jerarquía: elemento < grupo < tarjeta < sección ≤ página;
   - escala tipográfica con tokens;
   - wayfinding (título grande y "volver");
   - contraste AA;
   - movimiento suave, sin rebote.
   Color del negocio solo en detalles. */

:root{
  color-scheme:light;
  /* color */
  --fondo:#F7F7F8; --sup:#FFFFFF; --sup2:#F4F4F6; --sup3:#EDEDF0;
  --linea:#ECECEF; --linea2:#E2E2E7; --campo:#85858C;
  --texto:#111113; --texto2:#5E5E66; --texto3:#6E6E76;
  --ok:#1E7A3C; --ok-bg:#E8F5EC; --warn:#8A5300; --warn-bg:#FFF3D6; --mal:#C4231A; --mal-bg:#FDECEA;
  --acento-suave:color-mix(in srgb,var(--acento) 12%,white);
  --acento-osc:color-mix(in srgb,var(--acento) 65%,black); --t-cifra:1.5rem;
  /* tokens que usan styles.css y escritorio.css */
  --tinta:var(--texto); --blanco:var(--sup); --arena:var(--fondo); --turq:var(--acento); --turq-osc:var(--texto2);
  --borde:1px solid var(--linea);
  --sombra:0 1px 2px rgba(16,16,20,.04),0 8px 24px -14px rgba(16,16,20,.14);
  --sombra-alta:0 2px 6px rgba(16,16,20,.05),0 24px 48px -20px rgba(16,16,20,.22);
  --radio:20px;
  --pop:cubic-bezier(.22,1,.36,1); --suave:cubic-bezier(.22,1,.36,1);
  /* espaciado por jerarquía */
  --e-elem:6px; --e-grupo:10px; --e-tarjeta:16px; --e-seccion:20px; --e-pagina:20px;
  /* escala tipográfica */
  --t-display:1.85rem; --t-titulo:1.15rem; --t-sub:1rem; --t-cuerpo:.95rem; --t-leyenda:.8rem; --t-etiqueta:.7rem;
}
@media (min-width:1000px){:root{--e-grupo:12px;--e-tarjeta:22px;--e-seccion:24px;--e-pagina:36px;--t-display:2.2rem}}

html{background:var(--fondo)}
html,body{color:var(--texto);font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:-.006em}
body{background:transparent;font-size:var(--t-cuerpo)}
h1,h2,h3,.tit{font-family:Inter,-apple-system,system-ui,sans-serif;color:var(--texto);letter-spacing:-.022em;font-weight:650}
.chica{color:var(--texto2);opacity:1;font-size:var(--t-leyenda)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.nota{display:none}
b,strong{font-weight:600}

/* aurora casi invisible (durazno y lavanda), solo para dar calidez al blanco */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--fondo)}
.aurora i{position:absolute;border-radius:50%}
.aurora i:nth-child(1){width:70vmax;height:70vmax;left:-28vmax;top:-34vmax;background:radial-gradient(closest-side,#F6ECE4,transparent 72%);opacity:.7}
.aurora i:nth-child(2){width:60vmax;height:60vmax;right:-26vmax;top:-22vmax;background:radial-gradient(closest-side,#E6E0FA,transparent 70%);opacity:.6}
.aurora i:nth-child(3),.aurora i:nth-child(4){display:none}
.aurora::before,.aurora::after{display:none}
@keyframes deriva1{to{transform:translate3d(10vmax,6vmax,0) scale(1.08)}}
@keyframes deriva2{to{transform:translate3d(-8vmax,8vmax,0) scale(.94)}}
/* solo en computadora se mueve; en el celular queda quieta (ahorra batería y GPU durante el turno) */
@media (prefers-reduced-motion:no-preference) and (min-width:1000px){
  .aurora i{will-change:transform}
  .aurora i:nth-child(1){animation:deriva1 70s ease-in-out infinite alternate}
  .aurora i:nth-child(2){animation:deriva2 84s ease-in-out infinite alternate}
}
body:has(> .velo) .aurora i{animation-play-state:paused}

/* ---------- encabezado ---------- */
header.top{background:rgba(247,247,248,.82);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid var(--linea);color:var(--texto);padding:12px var(--e-pagina)}
header .nombre{font-weight:700;letter-spacing:-.02em;font-size:1.05rem;font-family:Inter,system-ui,sans-serif}
header .sub{color:var(--texto2);opacity:1}
.logo-neg{background:linear-gradient(180deg,color-mix(in srgb,var(--acento) 88%,white),var(--acento));border:0;color:#fff;font-family:Inter,system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;box-shadow:0 6px 16px -8px var(--acento)}
.chip-red{display:inline-block;background:var(--sup);color:var(--texto2);border:1px solid var(--linea2);font-weight:600;padding:5px 10px}
.chip-red:not(.off)::first-letter{color:#22A447}
.chip-red.off{background:var(--mal-bg);color:var(--mal);border-color:transparent}
.btn-rol{background:var(--sup);border:1px solid var(--linea2);color:var(--texto);font-weight:600;min-height:36px;padding:7px 12px}

.banner{margin:var(--e-grupo) var(--e-pagina) 0;border:1px solid var(--linea);border-radius:16px;background:var(--sup);box-shadow:var(--sombra);font-weight:600;color:var(--texto)}
.banner.off{background:var(--mal-bg);color:var(--mal);border-color:#F6C9C5}
.banner[style*="warn-bg"]{color:var(--warn)}

/* ---------- estructura y espaciado ---------- */
main{padding:var(--e-seccion) var(--e-pagina) calc(var(--e-seccion) + 8px);gap:var(--e-seccion)}
.card{background:var(--sup);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);padding:var(--e-tarjeta)}
.card > h2 + *,.card > h3 + *,.card > .fila:first-child + *{margin-top:var(--e-grupo)}
.card > h3,.card .fila > h3,.card h3:first-child{font-size:var(--t-etiqueta);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--texto2)}
.card h2{font-size:var(--t-titulo);font-weight:650}
.item{border-bottom:1px solid var(--linea);padding:var(--e-grupo) 0;gap:var(--e-grupo)}
.prods,.grid2,.grid3{gap:var(--e-grupo)}
.card .grid2{row-gap:var(--e-tarjeta);column-gap:var(--e-grupo)}

/* título de cada pantalla y "volver" */
.titulo-vista{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0 0 calc(var(--e-grupo) - var(--e-seccion));grid-column:1 / -1}
.titulo-vista h1{font-size:var(--t-display);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.volver{display:inline-flex;align-items:center;gap:2px;background:none;border:0;padding:6px 8px 6px 0;color:var(--texto2);font-weight:600;font-size:var(--t-sub);min-height:40px}
.volver .ico{margin:0;width:20px;height:20px}
@media (max-width:999px){main.v-pedido > .titulo-vista{display:none}}
@media (min-width:1000px){main.v-pedido > .titulo-vista{grid-column:1}}

/* ---------- botones ---------- */
.btn{background:var(--sup);color:var(--texto);border:1px solid var(--linea2);border-radius:14px;box-shadow:0 1px 2px rgba(16,16,20,.04);font-weight:600;letter-spacing:-.01em;transition:transform .4s var(--suave),background .2s,box-shadow .4s var(--suave),border-color .2s}
.btn:active,.prod:active,.mini:active,.seg button:active{transform:scale(.97);transition-duration:.08s;box-shadow:none}
.btn.pri{background:#111113;color:#fff;border:0;font-family:Inter,system-ui,sans-serif;font-weight:650;letter-spacing:-.015em;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 10px 24px -12px rgba(17,17,19,.6)}
.btn.acento{background:var(--mal-bg);color:var(--mal);border:1px solid #F6C9C5;box-shadow:none;font-weight:650}
.btn.turq{background:var(--sup);color:var(--texto);border:1px solid var(--linea2)}
.btn.turq .ico{color:var(--acento)}
.btn:disabled{opacity:.4}
.carrito .grid2 .btn{white-space:nowrap;padding-left:10px;padding-right:10px}

/* control segmentado (canal, categoría, forma de pago) */
.seg{background:var(--sup3);border:0;border-radius:14px;padding:4px;gap:4px}
.seg button{border:0;background:transparent;color:var(--texto2);border-radius:10px;font-weight:600;padding:9px 10px;transition:background .25s var(--suave),color .2s,box-shadow .25s}
.seg button.on{background:var(--texto);color:#fff;box-shadow:0 1px 2px rgba(16,16,20,.2)}
.seg button:disabled{opacity:.4;cursor:not-allowed}

/* ---------- productos y pedido ---------- */
.prod{background:var(--sup);border:1px solid var(--linea);border-radius:20px;box-shadow:var(--sombra);padding:12px;gap:var(--e-elem);justify-content:flex-start;transition:transform .4s var(--suave),box-shadow .4s var(--suave),border-color .2s}
.prod .em{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--sup2);margin-bottom:var(--e-elem)}
.prod .n{font-family:Inter,system-ui,sans-serif;font-weight:600;letter-spacing:-.01em;color:var(--texto)}
.prod .p{color:var(--texto2);font-weight:500;margin-top:auto}
.badge{background:var(--acento-osc);border:2px solid var(--sup);color:#fff;box-shadow:0 6px 14px -6px var(--acento);font-weight:700;min-width:30px;height:30px;top:-8px;right:-6px}
.carrito{background:var(--sup);border:1px solid var(--linea);box-shadow:var(--sombra-alta)}
.linea{border-bottom:1px solid var(--linea);padding:var(--e-grupo) 0;gap:var(--e-grupo)}
.linea .nt{color:var(--acento-osc);font-weight:500}
.mini{background:var(--sup);border:1px solid var(--linea2);color:var(--texto);border-radius:10px}
.total{font-family:Inter,system-ui,sans-serif;font-weight:650;letter-spacing:-.04em;color:var(--texto)}
.vacio{color:var(--texto3);font-weight:500;opacity:1}

/* ---------- estados ---------- */
.est{border:0;font-weight:600;padding:4px 9px}
.est.ok{color:var(--ok);background:var(--ok-bg)}
.est.warn{color:var(--warn);background:var(--warn-bg)}
.est.mal{color:var(--mal);background:var(--mal-bg)}
.est.neu{color:var(--texto2);background:var(--sup2)}
.err{color:var(--mal);font-weight:600}

/* ---------- métricas ---------- */
.kpi .v{font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:1.75rem;letter-spacing:-.045em;color:var(--texto)}
.kpi .l{color:var(--texto2);opacity:1;font-weight:500;font-size:.78rem;margin-top:2px}
@media (min-width:1000px){main.v-panel .kpi .v{font-size:2.3rem}}
.barra{border:0;background:var(--sup3);height:8px}
.barra i{background:#111113;border-radius:99px}
.cols span.b{border:0;border-radius:8px 8px 3px 3px;background:#DEDEE3}
.cols span.b.hoy{background:var(--acento);box-shadow:none}
.cols small{color:var(--texto2);font-weight:600}

/* ---------- formularios ---------- */
label{color:var(--texto2);font-weight:600;font-size:.8rem;margin-bottom:var(--e-elem)}
input,select,textarea{background:var(--sup);border:1px solid var(--campo);color:var(--texto);border-radius:14px;transition:border-color .2s,box-shadow .25s var(--suave)}
input::placeholder,textarea::placeholder{color:var(--texto3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:#111113;box-shadow:0 0 0 4px rgba(17,17,19,.08)}
:is(button,[role=button],input,select,textarea):focus-visible{outline:2px solid #111113!important;outline-offset:2px!important}
input[type=checkbox]{accent-color:#111113}
.vuelto{font-family:Inter,system-ui,sans-serif;font-weight:650;letter-spacing:-.03em}

/* ---------- navegación inferior ---------- */
nav.bottom{background:rgba(255,255,255,.86);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);border-top:1px solid var(--linea)}
nav.bottom button{color:var(--texto2);font-weight:600;transition:color .2s,background .3s var(--suave),transform .5s var(--suave)}
nav.bottom .ic{display:grid;place-items:center;height:24px}
nav.bottom .ic .ico{width:22px;height:22px;margin:0;stroke-width:1.6}
nav.bottom button.on{background:var(--sup2);color:var(--texto)}
nav.bottom button.on .ico{color:var(--acento-osc)}

/* ---------- ventanas ---------- */
.velo{background:rgba(16,16,20,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hoja{background:var(--sup);border:1px solid var(--linea);border-bottom:0;border-radius:28px 28px 0 0;box-shadow:0 -12px 40px -16px rgba(16,16,20,.25);color:var(--texto);padding:var(--e-tarjeta) var(--e-pagina) calc(var(--e-pagina) + env(safe-area-inset-bottom));gap:var(--e-grupo)}
.hoja::before{content:"";display:block;width:38px;height:5px;border-radius:99px;background:#D9D9DE;margin:-6px auto 2px;flex:none}
.hoja .card{background:var(--sup2);border-color:var(--linea);box-shadow:none}
.hoja .seg{background:var(--sup3)}
.hoja > div[style*="background:#fff"]{border:1px solid var(--linea2)!important;border-radius:18px!important}
.toast{background:rgba(17,17,19,.92);color:#fff;border:0;font-weight:600;border-radius:16px;box-shadow:var(--sombra-alta);pointer-events:none}
.wa{background:var(--sup);border:1px solid var(--linea2);color:var(--texto);border-radius:18px}
footer.faro{color:var(--texto3);opacity:1}

/* ---------- íconos ---------- */
.ico{width:1.15em;height:1.15em;vertical-align:-.2em;margin-right:.45em;flex:none;display:inline-block}
.ico.grande{width:24px;height:24px;margin:0;color:var(--texto);stroke-width:1.5}
.btn > .ico:has(+ br){display:block;margin:0 auto var(--e-elem);width:26px;height:26px;color:var(--texto)}
.btn > .ico + br{display:none}
.mini .ico{margin:0}
.btn-rol .ico{margin:0 .3em 0 0}
.btn.pri .ico,.btn.acento .ico{color:inherit}

/* ---------- movimiento suave ---------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes subir{from{opacity:0;transform:translateY(10px)}}
  @keyframes sombra{from{opacity:1}}
  @keyframes pop{from{transform:scale(.6);opacity:.4}}
  @keyframes tab{from{opacity:.4}}
  @keyframes late{40%{transform:scale(1.04)}}
  @keyframes brillo{from{background:var(--acento-suave)}}
  .hoja{animation:hojaSube .3s var(--suave)}
  @keyframes hojaSube{from{transform:translateY(28px);opacity:0}}
  .velo{animation:veloEntra .2s ease-out}
  @keyframes veloEntra{from{background-color:rgba(16,16,20,0)}}
  main.entra > :not(.prods){animation-name:subir;animation-duration:.32s;animation-delay:calc(min(var(--i,0),4) * 30ms)}
}
@media (prefers-reduced-motion:reduce){
  .btn,.prod,.mini,.seg button,nav.bottom button{transition:background-color .2s,color .2s}
  .hoja,.velo{animation:none}
}

/* ---------- computadora ---------- */
@media (min-width:1000px){
  header.top{padding:16px var(--e-pagina)}
  nav.bottom{background:var(--sup);border-top:0;border-right:1px solid var(--linea);padding:24px 14px;backdrop-filter:none;-webkit-backdrop-filter:none}
  nav.bottom button{color:var(--texto2);padding:11px 14px;border-radius:12px}
  nav.bottom button:not(.on):hover{background:var(--sup2);color:var(--texto)}
  .lado-marca{color:var(--texto);border-bottom:1px solid var(--linea)}
  .lado-marca b{font-family:Inter,system-ui,sans-serif;font-weight:700;letter-spacing:-.02em}
  .lado-marca small{color:var(--texto2);opacity:1}
  .lado-marca .logo-neg{border:0;background:linear-gradient(180deg,color-mix(in srgb,var(--acento) 88%,white),var(--acento))}
  .lado-pie{color:var(--texto3);border-top:1px solid var(--linea);opacity:1}
  .lado-pie .wm{font-size:1.05rem;text-shadow:none;color:var(--texto)}
  .lado-pie .wm i{color:var(--texto3)}
  .hoja{border-radius:24px;border:1px solid var(--linea);box-shadow:var(--sombra-alta)}
  .hoja::before{display:none}
  .toast{top:22px;right:28px}
  main.v-pedido{column-gap:var(--e-seccion)}
  main.v-panel,main.v-mes,main.v-caja,main.v-ajustes,main.v-resumen,main.v-inventario,main.v-menu{gap:var(--e-seccion)}
  .prod{padding:16px}
  main.v-pedido .prod .em{width:52px;height:52px;border-radius:15px}
  main.v-pedido .ico.grande{width:28px;height:28px}
}
@media (min-width:1000px) and (prefers-reduced-motion:no-preference){
  .hoja{animation:hojaAparece .26s var(--suave)}
  @keyframes hojaAparece{from{transform:scale(.97) translateY(8px);opacity:0}}
}
@media (min-width:1000px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  main:not(.v-pedido) > .card:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta);border-color:var(--linea2)}
  .prod:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta);border-color:var(--linea2)}
  .btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px -12px rgba(16,16,20,.3)}
  .btn.pri:hover{box-shadow:0 14px 30px -12px rgba(17,17,19,.7)}
  .btn:active,.prod:active{transform:scale(.97);box-shadow:none}
  .item[data-a]:hover b{color:var(--texto2)}
}

/* puntero: punto negro que crece a una burbuja con etiqueta */
.cur{width:10px;height:10px;background:#111113;border:0;mix-blend-mode:normal;transition:width .4s var(--suave),height .4s var(--suave),background .25s,opacity .2s}
.cur.big{width:40px;height:40px;background:transparent;border:1.5px solid rgba(17,17,19,.55)}
.cur span{display:none}

/* ---------- accesibilidad ---------- */
html.letra-grande,html.letra-grande body{font-size:18px}
html.letra-grande{--t-display:2.1rem}
@media (prefers-reduced-transparency:reduce){
  header.top,nav.bottom,.velo{backdrop-filter:none;-webkit-backdrop-filter:none}
  header.top,nav.bottom{background:var(--sup)}
  .aurora i{display:none}
}
@media (prefers-contrast:more){
  :root{--linea:#C9C9CF;--linea2:#AFAFB6;--texto2:#3F3F46;--texto3:#4F4F57}
}

/* márgenes de párrafo dentro de la escala (no los del navegador) */
.card p{margin-block:var(--e-grupo)}
.card > :first-child{margin-top:0}
.card > :last-child{margin-bottom:0}
.hoja > p{margin:0}
@media (min-width:1000px){main.v-pedido .prods{gap:var(--e-grupo)}}

/* ---------- correcciones de la revisión del tema blanco ---------- */
/* ventanas: etiqueta junto a su campo, sin huecos por mensajes vacíos */
.hoja > :is(p,div):empty{display:none}
.hoja > label:not(:has(input)){margin-top:var(--e-elem)!important;margin-bottom:calc(var(--e-elem) - var(--e-grupo))}
/* foco visible también en el último botón de cada línea del pedido */
.carrito .lineas{margin:0 -4px;padding:0 4px}
@media (prefers-contrast:more){:root{--campo:#5E5E66}}
/* pesos y tamaños alineados a la escala */
.linea .q,.mini,.deno .c{font-weight:600}
#cPrecio{font-weight:600!important}
.kpi .l,label,.est{font-size:var(--t-leyenda)}
.err,.prod .n{font-size:var(--t-cuerpo)}
header .nombre,.prod .p,input,select,textarea{font-size:var(--t-sub)}
.total,.vuelto{font-size:var(--t-cifra)}
/* la firma "farotech" sigue en la letra de la marca, el resto en Inter */
footer.faro b,.lado-pie .wm{font-family:Unbounded,Inter,sans-serif}
/* el código de barras siempre en blanco y negro para la cámara */
svg[role=img]{forced-color-adjust:none}
/* celular: sin desenfoque detrás de las ventanas (rendimiento) */
@media (max-width:999px){.velo{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(16,16,20,.36)}}

/* ---------- marca del negocio (logo y su color) ---------- */
:root{--acento-tono:#111113}
.logo-img{width:40px;height:40px;border-radius:12px;display:block;object-fit:cover;flex:none;box-shadow:0 1px 2px rgba(16,16,20,.12),0 6px 16px -8px var(--acento-tono)}
@media (min-width:1000px){.lado-marca .logo-img{width:46px;height:46px;border-radius:13px}}
.btn.pri{background:var(--acento-tono);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 10px 24px -12px var(--acento-tono)}
.btn.pri:hover{box-shadow:0 14px 30px -12px var(--acento-tono)}
.seg button.on{background:var(--acento-tono)}
.barra i{background:var(--acento-tono)}
.cols span.b.hoy{background:var(--acento-tono)}
.badge{background:var(--acento-tono)}
nav.bottom button.on .ico,.btn.turq .ico,.linea .nt{color:var(--acento-tono)}
input[type=checkbox]{accent-color:var(--acento-tono)}
@media (min-width:1000px){header.top .logo-img{display:none}}

/* ---------- identidad RAKOOT: marfil cálido de su Instagram (contraste AA comprobado) ---------- */
:root{
  --fondo:#F6F2EA; --sup2:#F3EFE7; --sup3:#ECE7DD;
  --linea:#ECE6DA; --linea2:#E2DBCD; --campo:#7E786E;
  --texto2:#5C574F; --texto3:#6B655C;
}
header.top{background:rgba(246,242,234,.84)}
.aurora i:nth-child(2){background:radial-gradient(closest-side,#F1E6D2,transparent 70%);opacity:.7}
.cols span.b{background:#E3DCCF}
.hoja::before{background:#DCD4C6}
.lado-marca small{font-style:italic;letter-spacing:.01em}
@media (prefers-contrast:more){:root{--linea:#CFC6B6;--linea2:#B5AB98;--texto2:#3D3933;--texto3:#4B463F;--campo:#5C574F}}

/* ---------- logo en letras del negocio ---------- */
.marca{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1;vertical-align:middle}
.marca img{height:30px;width:auto;display:block}
.marca-sub{font:700 .5rem/1 Inter,system-ui,sans-serif;letter-spacing:.26em;text-transform:uppercase;color:var(--acento-tono);margin:2px 4% 0 0}
header .nombre{overflow:visible}
header .sub{margin-top:4px}
@media (min-width:1000px){
  header .nombre .marca{display:none}               /* en computadora el logo va en la barra lateral */
  header .nombre::after{content:attr(data-vista)}
  .lado-marca{flex-direction:column;align-items:flex-start;gap:6px;padding-left:10px}
  .lado-marca .marca img{height:40px}
  .lado-marca .marca-sub{font-size:.56rem}
  .lado-marca small{margin-top:2px}
}
header.top > div:first-child{flex:1;min-width:0}
.lado-marca > div{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.lado-marca small{display:block}
header.top > .der{flex:0 0 auto}
.btn-rol,.chip-red{white-space:nowrap}