@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#120f0d; --surface:#1c1815; --surface-2:#211c18; --border:#2a2420;
  --cream:#f2e6c9; --muted:#8a7a63; --muted-2:#a89a86;
  --orange:#e2822a; --orange-soft:rgba(226,130,42,.14);
  --teal:#1f9a94; --teal-soft:rgba(31,154,148,.14);
  --pink:#d43a63; --pink-soft:rgba(212,58,99,.14);
  --blue:#3a7bd4; --amber:#c99a2e; --purple:#8a5fc9;
  --mesa-libre:#1c5c3d; --mesa-ocupada:#7a2038;
}
body{ background:var(--bg); color:var(--cream); font-family:'Inter',sans-serif; background-image: radial-gradient(circle, rgba(226,130,42,.05) 1px, transparent 1px); background-size: 22px 22px; }
.font-display{ font-family:'Anton',sans-serif; letter-spacing:.02em; }
.text-muted-2{ color:var(--muted); }

/* Franja decorativa tipo papel picado — se usa bajo la barra de navegación */
.franja-picada{
  height:7px;
  background: repeating-linear-gradient(90deg,
    var(--orange) 0 22px, var(--teal) 22px 44px, var(--pink) 44px 66px, var(--amber) 66px 88px, var(--purple) 88px 110px);
  clip-path: polygon(0% 0%, 100% 0%, 100% 40%, 97% 100%, 94% 40%, 91% 100%, 88% 40%, 85% 100%, 82% 40%, 79% 100%, 76% 40%, 73% 100%, 70% 40%, 67% 100%, 64% 40%, 61% 100%, 58% 40%, 55% 100%, 52% 40%, 49% 100%, 46% 40%, 43% 100%, 40% 40%, 37% 100%, 34% 40%, 31% 100%, 28% 40%, 25% 100%, 22% 40%, 19% 100%, 16% 40%, 13% 100%, 10% 40%, 7% 100%, 4% 40%, 0% 100%);
  opacity:.9;
}

/* "Cartel" — bandera pintada de brocha, como los letreros TACOS / CARNE POR KILO / BEBIDAS del menú */
.cartel{
  position:relative;
  display:inline-block;
  padding:.5rem 1.3rem;
  font-family:'Anton',sans-serif;
  letter-spacing:.02em;
  font-size:1.15rem;
  border-radius: 4px 16px 4px 16px / 12px 4px 12px 4px;
  box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.25);
  transform: rotate(-0.5deg);
  margin-bottom: .25rem;
}
.cartel.orange{ background:var(--orange); color:#151210; }
.cartel.teal{ background:var(--teal); color:#0d1f1d; }
.cartel.pink{ background:var(--pink); color:#2a0d16; }
.cartel.amber{ background:var(--amber); color:#241a05; }
.cartel.purple{ background:var(--purple); color:#1c1330; }
.cartel.blue{ background:var(--blue); color:#0d1a2e; }

.logo-bull{ color:#e8d9ab; }
.flor-esquina{ position:absolute; opacity:.5; pointer-events:none; }

.navbar-brand-taq{ display:flex; align-items:center; gap:.6rem; }
.navbar-brand-taq .logo-circle{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#2a2420,#171310); border:1px solid #3a322a;
}
.navbar-taq{ background:rgba(18,15,13,.96)!important; border-bottom:1px solid var(--border); }
.navbar-taq .nav-link{ color:var(--muted-2)!important; }
.navbar-taq .nav-link.active{ color:var(--bg)!important; background:var(--orange); border-radius:.6rem; }

.card-taq{ background:var(--surface); border:1px solid var(--border); border-radius:1rem; }
.pill{ border-radius:999px; padding:.4rem 1rem; font-size:.8rem; font-weight:600; border:1px solid transparent; }
.pill-cat{ background:var(--surface-2); color:var(--muted-2); border-color:var(--border); cursor:pointer; }
.pill-cat.active{ color:var(--bg); }

.mesa-tile{
  aspect-ratio:1/1; border-radius:.9rem; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--cream); font-family:'Anton',sans-serif; font-size:1.2rem; cursor:pointer; user-select:none; border:none;
  transition: transform .1s ease;
}
.mesa-tile:active{ transform:scale(.95); }
.mesa-tile.libre{ background:var(--mesa-libre); }
.mesa-tile.ocupada{ background:var(--mesa-ocupada); }
.mesa-tile small{ font-family:'Inter',sans-serif; font-size:.65rem; opacity:.85; }
.mesa-tile.mesa-lista{ animation: pulso-listo 1.4s ease-in-out infinite; box-shadow: 0 0 0 2px var(--teal); }
@keyframes pulso-listo{ 0%,100%{ box-shadow:0 0 0 2px var(--teal); } 50%{ box-shadow:0 0 14px 3px var(--teal); } }
.mesa-badges{ position:absolute; top:4px; right:6px; display:flex; gap:3px; font-size:.65rem; }
.mesa-badges.muted{ opacity:.55; }
.pedido-badges{ display:inline-flex; gap:6px; font-size:.85rem; margin-left:.5rem; }

/* Editor de plano (rompecabezas de mesas) */
.plano-editor{
  position:relative; background:var(--surface); border:1px dashed var(--border); border-radius:1rem;
  min-height:520px; background-image: radial-gradient(circle, #26201b 1px, transparent 1px);
  background-size: 24px 24px; overflow:auto;
}
.mesa-drag{
  position:absolute; width:84px; height:84px; border-radius:.9rem; background:var(--mesa-libre);
  color:var(--cream); display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:'Anton',sans-serif; font-size:1.1rem; cursor:grab; box-shadow:0 4px 14px rgba(0,0,0,.4);
  border:2px solid transparent;
}
.mesa-drag.redonda{ border-radius:50%; }
.mesa-drag:active{ cursor:grabbing; }
.mesa-drag.selected{ border-color:var(--orange); }
.mesa-drag .cap{ font-family:'Inter',sans-serif; font-size:.62rem; opacity:.8; }

.btn-taq-orange{ background:var(--orange); border-color:var(--orange); color:#151210; font-weight:600; }
.btn-taq-orange:hover{ background:#cf7423; border-color:#cf7423; color:#151210; }
.btn-taq-teal{ background:var(--teal); border-color:var(--teal); color:#0d1f1d; font-weight:600; }
.btn-taq-teal:hover{ background:#1b8a85; border-color:#1b8a85; color:#0d1f1d; }
.btn-taq-pink{ background:var(--pink); border-color:var(--pink); color:#2a0d16; font-weight:600; }
.btn-taq-pink:hover{ background:#bd3358; border-color:#bd3358; color:#2a0d16; }
.btn-taq-outline{ background:var(--surface-2); border:1px solid var(--border); color:var(--muted-2); }
.btn-taq-outline:hover{ background:#26201b; color:var(--cream); }

.product-card{ background:var(--surface-2); border:1px solid var(--border); border-radius:.9rem; padding:.75rem; cursor:pointer; overflow:hidden; }
.product-card:hover{ border-color:var(--orange); }
.product-img{ width:100%; aspect-ratio:4/3; object-fit:contain; border-radius:.6rem; margin-bottom:.5rem; background:var(--surface); display:block; }
.product-img-placeholder{ width:100%; aspect-ratio:4/3; border-radius:.6rem; margin-bottom:.5rem; background:var(--surface); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }

.table-dark-taq{ --bs-table-bg:var(--surface); --bs-table-color:var(--cream); --bs-table-border-color:var(--border); }

.badge-disponible{ background:rgba(31,154,148,.15); color:#3ec2ba; }
.badge-pausado{ background:rgba(212,58,99,.15); color:#e8628a; }

.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ scrollbar-width:none; }