/* Caja Sabores de Paz — identidad visual "picada de barrio".
   Verde botella, mostaza y rojo tomate, como los letreros pintados de una fuente de soda.
   Letras: Bricolage Grotesque (marca, títulos y montos) y Figtree (todo lo demás), incluidas en la app.
   Se carga después de estilos.css: aquí solo van colores, letras y la forma de los elementos. */

@font-face{font-family:"Bricolage";src:url(fuentes/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Figtree";src:url(fuentes/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}

:root{
  --bg:#0e1613; --surface:#16211d; --raised:#1d2a25; --raised2:#25362f; --line:#2b3c35;
  --ink:#eef3ef; --ink2:#9db1a7; --accent:#f2b33d; --accent-ink:#1d1504; --accent-soft:#2c2914; --accent-soft2:#3a3416; --accent-line:#5e4c1a;
  --rail:#0f3b2e; --rail-ink:#cfe3d8; --rail-on:#f2b33d; --rail-on-ink:#1d1504;
  --ok:#5cc48a; --ok-soft:#163226; --danger:#ec5a43; --danger-soft:#3a1d18; --warn:#f2b33d; --warn-soft:#33290f;
  --hero-tint:#1c3a2e; --bar:#2f4a3f; --bar-top:#86b3a0;
  --blob1:#0f3b2e; --blob2:#3a2f0c; --blob3:#1d4a3a;
  --brand-a:#ffffff; --brand-b:#f2b33d;
  --card-glass:rgba(22,33,29,.86); --btn-glass:rgba(29,42,37,.78);
  --f-ui:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif,var(--emoji);
  --f-brand:"Bricolage","Figtree",system-ui,sans-serif;
  --r:10px;
}
html[data-tema="claro"]{
  --accent-soft2:#d3e9fb; --accent-line:#b9daf3;
  --rail:#0f4c81; --rail-ink:#d6e9fa; --rail-on:#ffffff; --rail-on-ink:#0f4c81;
  --hero-tint:#cfe8fc; --bar:#bcdcf5; --bar-top:#5aaee8;
  --brand-a:#0f5f9e; --brand-b:#2b9be6;
  --card-glass:rgba(255,255,255,.88); --btn-glass:rgba(255,255,255,.82);
}

body{font-family:var(--f-ui);font-size:15.5px;letter-spacing:.005em}

/* Títulos y montos con la letra de letrero */
.top h1,.ph h2,.menu-head h3,.saludo,.cb-cab h2,dialog.form h2,.tut-card h2,.ay-cab h2,.login-card h1,.mes-nombre{font-family:var(--f-brand);letter-spacing:-.01em}
.ph h2{font-size:1.08rem;font-weight:700}
.top h1{font-size:1.55rem;font-weight:800}
.tot strong,.hero-num strong,.total strong,.vuelto-box strong,.ik strong,.lc-num strong,.an-centro strong,.pp-num,.mp-num,.v-num,.login-reloj strong,.clock strong,.nm strong{font-family:var(--f-brand);font-weight:800;letter-spacing:-.02em}
.hero-num strong{font-weight:800}

/* Riel: el bloque de color de la marca */
.rail{background:var(--rail);border-right:0;color:var(--rail-ink)}
.brand{font-family:var(--f-brand);font-style:normal;font-weight:800;letter-spacing:-.02em;color:#fff;font-size:1.02rem;line-height:1}
.rail .logo{color:var(--rail-on);background:rgba(255,255,255,.08);border-color:transparent}
.nav{color:var(--rail-ink);border-radius:12px;font-size:.74rem;font-weight:700}
.nav-ic{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav:hover{background:rgba(255,255,255,.08);color:#fff}
.nav[aria-current=page]{background:var(--rail-on);color:var(--rail-on-ink)}
.nav[aria-current=page] .nav-ic{stroke-width:2.2}
.who,.who #who-n{color:var(--rail-ink)}
.rail .salir{color:var(--rail-ink)}
.who .av{background:rgba(255,255,255,.12);color:#fff;border-color:transparent}

/* Superficies: borde fino, sin sombras repetidas */
.panel,.ticket{border-radius:var(--r)}
.panel{box-shadow:none}
.tot{border-radius:var(--r)}
.tot.mes{background:var(--accent-soft);border-color:var(--accent-line)}
.cat,.prod,.pay,.ik,.nm,.efe,.vuelto-box,.prep-lista li,.mini-prep li,.agot-lista li,.cb-p,.ay-op{border-radius:8px}
.cat:hover{box-shadow:none;transform:translateY(-2px)}
.prod:hover{transform:none}
.hero{border-color:var(--accent-line)}

/* Botones "apretables": borde inferior más oscuro, como letrero esmaltado */
.btn{border-radius:8px}
.btn.primary,.btn.acc,.caja-card .btn.acc,.btn-opc,.chip.fijo{box-shadow:inset 0 -3px 0 rgba(0,0,0,.22)}
.btn.primary:active,.btn.acc:active,.btn-opc:active{transform:translateY(1px);box-shadow:inset 0 -1px 0 rgba(0,0,0,.22)}
.badge{border-radius:6px}

/* Etiquetas en minúscula normal (sin MAYÚSCULAS espaciadas) */
.lema{text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:600;color:var(--ink2)}
.tut-paso{text-transform:none;letter-spacing:0;font-size:.85rem}
.prod.agotado .pr{text-transform:none;letter-spacing:0}

/* Ingreso */
.login-lado .brand.xl{font-family:var(--f-brand);font-style:normal;font-weight:800;letter-spacing:-.03em;font-size:clamp(2.6rem,5.4vw,4rem)}
.login .login-card{border-radius:14px}
.login .logo{background:var(--accent-soft);color:var(--accent)}

/* Modo claro: riel azul profundo con la misma lógica */
html[data-tema="claro"] .brand{color:#fff}
html[data-tema="claro"] .nav[aria-current=page]{background:#fff;color:var(--rail)}
html[data-tema="claro"] .rail{border-color:transparent}

@media (max-width:860px){
  .rail{border-top:0}
  .nav{font-size:.7rem}
  .nav-ic{width:24px;height:24px}
}

/* =========================================================
   Segunda pasada: menos "tarjetitas", más local de comida
   ========================================================= */
:root{--c1:#e5533d;--c2:#f2b33d;--c3:#2e8b57;--c4:#2f6fb2;--c5:#d9577e;--c6:#e8833a;--c7:#3ba99c;--c8:#7a5bc2;--tag:#f3f6f4;--tag-ink:#13241d}
html[data-tema="claro"]{--tag:#ffffff;--tag-ink:#12324c}

/* Categorías: letreros de color sólido */
.cats{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.cats .cat{position:relative;overflow:hidden;min-height:112px;padding:14px;align-items:flex-start;justify-content:flex-end;text-align:left;border:0;border-radius:6px;background:var(--cc,var(--c1));color:#fff}
.cats .cat:nth-child(8n+1){--cc:var(--c1)}.cats .cat:nth-child(8n+2){--cc:var(--c2);color:#1d1504}.cats .cat:nth-child(8n+3){--cc:var(--c3)}.cats .cat:nth-child(8n+4){--cc:var(--c4)}
.cats .cat:nth-child(8n+5){--cc:var(--c5)}.cats .cat:nth-child(8n+6){--cc:var(--c6);color:#1d1504}.cats .cat:nth-child(8n+7){--cc:var(--c7)}.cats .cat:nth-child(8n+8){--cc:var(--c8)}
.cats .cat span{position:absolute;right:-6px;top:-4px;font-size:3.4rem;transform:rotate(-12deg);opacity:.95;filter:drop-shadow(0 4px 0 rgba(0,0,0,.18))}
.cats .cat b{position:relative;font-family:var(--f-brand);font-size:1.12rem;font-weight:800;letter-spacing:-.01em;line-height:1.05;max-width:85%}
.cats .cat:hover{background:var(--cc);border:0;transform:translateY(-2px);filter:brightness(1.06)}
.cats .cat:hover span{transform:rotate(-4deg) scale(1.06)}
.cats .cat:active{transform:translateY(1px)}

/* Productos: etiquetas de precio colgadas */
.grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px 12px}
.prod{min-height:104px;padding:14px 14px 12px 30px;border:0;border-radius:4px 10px 10px 4px;background:var(--tag);color:var(--tag-ink);
  clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px),0 14px)}
.prod::before{content:"";position:absolute;left:10px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--surface);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.prod b{font-family:var(--f-brand);font-weight:700;font-size:1rem;color:var(--tag-ink)}
.prod .pd{color:#5b6d65}
.prod .pr{align-self:flex-start;padding:3px 10px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font-family:var(--f-brand);font-size:1rem;transform:rotate(-3deg)}
.prod:hover{background:#fff;border:0}
.prod .badge{top:8px;right:8px;border-radius:99px;background:var(--rail);color:#fff}
.prod.agotado{background:repeating-linear-gradient(135deg,#d9dfdb 0 10px,#cfd6d1 10px 20px);opacity:.75}
.prod.agotado .pr{background:var(--danger);color:#fff;transform:none}
.grid.agotar .prod{outline:2px dashed var(--danger);outline-offset:-4px}
html[data-tema="claro"] .prod{box-shadow:0 1px 0 #cde1f2,0 0 0 1px #cde1f2}
html[data-tema="claro"] .prod::before{background:var(--bg)}
html[data-tema="claro"] .prod .badge{background:var(--accent)}

/* Indicadores del día: franja con números grandes, sin cajitas ni emojis */
.ini-kpis{gap:0;background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.ik{border:0;border-radius:0;background:none;border-left:1px solid var(--line);padding:16px 18px;box-shadow:none}
.ik:first-child{border-left:0}
.ik .e{display:none}
.ik strong{font-size:1.9rem;order:2}
.ik span{order:1;font-size:.85rem}
.ik small{order:3}
.ik::before{content:"";order:0;width:28px;height:4px;border-radius:2px;background:var(--accent);margin-bottom:6px}
.ik.perdida::before{background:var(--danger)}
.ik:hover{transform:none;border-color:var(--line)}
@media (max-width:600px){.ik:nth-child(3){border-left:0}.ik:nth-child(n+3){border-top:1px solid var(--line)}.ik strong{font-size:1.45rem}}

/* Paneles: esquinas rectas y título subrayado */
.panel,.ticket,.tot{border-radius:6px}
.ph h2{position:relative;padding-bottom:6px}
.ph h2::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:3px;border-radius:2px;background:var(--accent)}
.hero{border-radius:6px}

/* Medios de pago y botones del pedido: rectos, con el ícono más chico */
.pay{border-radius:6px;font-family:var(--f-brand);font-size:1rem}
.pay[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.qty button,.cb-m{border-radius:6px}
.total strong{font-size:2.3rem}

/* Combos y ayuda: mismas etiquetas */
.cb-p{border-radius:4px}
.ay-op{border-radius:6px}

/* Botones de cada venta: más grandes y fáciles de tocar */
.sales .acc-v{gap:6px}
.sales .acc-v .link{min-height:38px;padding:0 12px;border-radius:6px;border:1px solid var(--line);background:var(--raised);font-size:.85rem;text-decoration:none}
.sales .acc-v .link:hover{border-color:var(--accent);text-decoration:none}
.sales .acc-v .link.borrar{background:var(--danger);border-color:var(--danger);color:#fff}
.sales .imp{min-width:38px;min-height:38px;border:1px solid var(--line);border-radius:6px;background:var(--raised)}
/* Confirmación propia */
dialog.confirmar{width:min(420px,92vw)}
.confirmar .ok-txt{margin:8px 0 16px;color:var(--ink2);line-height:1.5}
.confirmar .acciones{display:flex;gap:10px;justify-content:flex-end}
.confirmar .acciones .btn{min-height:48px;padding:0 18px}
.confirmar .acciones .btn.primary{width:auto}
.confirmar .btn.primary.peligro{background:var(--danger);border-color:var(--danger);color:#fff}
@media (max-width:600px){.sales .acc-v{flex-direction:column;align-items:stretch}.sales .acc-v .link{min-height:36px}}

/* Tutorial: botón para cerrar y "Saltar" bien visible */
.tut-x{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:8px;border:1px solid var(--line);background:var(--raised);color:var(--ink);font-size:1rem;cursor:pointer}
.tut-x:hover{border-color:var(--accent)}
.tut-x[hidden]{display:none}
.tut-card h2{padding-right:44px}
.tut-acc .tut-saltar{min-height:46px;padding:0 14px;color:var(--ink2)}