/* Paleta de Original Food. Compartida exclusivamente por las cartas publicas. */
:root {
  --of-black: #000;
  --of-background: #0c0f11;
  --of-surface: #191c1f;
  --of-border: #34383c;
  --of-white: #fff;
  --of-muted: #bfc2c5;
  --of-ink: #17191b;
}

body {
  background: var(--of-black);
  color: var(--of-ink);
  accent-color: var(--of-ink);
}

.public-app-shell {
  background: var(--of-background);
  border-color: var(--of-background);
  color: var(--of-white);
  box-shadow: 0 18px 45px rgb(0 0 0 / 22%);
}

.public-app-shell .topbar {
  background: var(--of-background);
  color: var(--of-white);
}

.public-app-shell .site-logo-title { color: var(--of-white); }
.public-app-shell .public-brand-row {
  padding-right: 58px;
}
.public-app-shell .site-logo-title {
  font-size: clamp(22px, 4vw, 31px);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.public-app-shell .site-logo-slogan { color: var(--of-muted); }

.public-app-shell .top-buttons .btn-black,
.public-app-shell .topbar-action-delivery,
.public-search,
.public-category-tabs button {
  background: var(--of-surface);
  color: var(--of-muted);
  border-color: var(--of-border);
  box-shadow: inset 0 0 0 1px var(--of-border);
}

.public-search i,
.public-search input { color: var(--of-white); }
.public-search input::placeholder { color: var(--of-muted); }

.public-app-shell .top-buttons .btn-black.active,
.public-category-tabs button.active,
.public-filter-btn {
  background: var(--of-white);
  color: var(--of-black);
  border-color: var(--of-white);
  box-shadow: 0 8px 20px rgb(0 0 0 / 20%);
}

.public-filter-btn.is-active {
  background: var(--of-surface);
  color: var(--of-white);
  box-shadow: inset 0 0 0 2px var(--of-white);
}

.public-app-shell .product-card {
  color: var(--of-ink);
  box-shadow: 0 10px 25px rgb(0 0 0 / 24%);
}

.public-app-shell .product-card h3,
.public-app-shell .product-card p,
.public-app-shell .product-card p::before { color: var(--of-ink); }

.public-app-shell .product-card .agregar-pedido-btn,
.public-app-shell .agregar-pedido-btn {
  background: var(--of-black);
  color: var(--of-white);
}

.public-app-shell .product-card .agregar-pedido-btn:hover,
.public-app-shell .agregar-pedido-btn:hover {
  background: var(--of-border);
}

.public-app-shell .agregar-pedido-btn.is-disabled-by-schedule,
.public-app-shell .agregar-pedido-btn:disabled {
  background: #dedede !important;
  color: #595959 !important;
}

.public-app-shell .product-card .favorite-btn { color: var(--of-ink); }
.public-app-shell .product-card .favorite-btn.is-active {
  background: var(--of-black);
  color: #ff3145;
}

.public-bottom-nav {
  grid-template-columns: repeat(3, 1fr);
  background: var(--of-black);
  box-shadow: 0 -1px 0 var(--of-border), 0 -8px 24px rgb(0 0 0 / 20%);
}

.public-bottom-nav a,
.public-bottom-nav button { color: var(--of-muted); }
.public-bottom-nav .active,
.public-bottom-nav .is-active { color: var(--of-white); }

.boton-flotante-carrito,
.public-app-shell ~ .boton-flotante-carrito {
  background: var(--of-white);
  color: var(--of-black);
  border-color: var(--of-border);
}

.public-app-shell,
.dialog-body { scrollbar-color: #777 var(--of-surface); }
.public-app-shell::-webkit-scrollbar-track,
.dialog-body::-webkit-scrollbar-track { background: var(--of-surface); }
.public-app-shell::-webkit-scrollbar-thumb,
.dialog-body::-webkit-scrollbar-thumb {
  background: #777;
  border-color: var(--of-surface);
}
.public-app-shell::-webkit-scrollbar-thumb:hover,
.dialog-body::-webkit-scrollbar-thumb:hover { background: var(--of-muted); }

/* Los avisos de error y de estado conservan sus colores semanticos. */
.btn--success,
.finalizar-pedido,
.btn-confirmar,
.add-extra-btn,
.add-extra-btn:hover {
  background: var(--of-black);
  color: var(--of-white);
  box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
}
.precio,
.subtotal { color: var(--of-ink); }
.badge { background: var(--of-border); }
.swal2-actions .swal2-confirm {
  background: var(--of-black) !important;
  color: var(--of-white) !important;
}
.swal2-radio input { accent-color: var(--of-black); }
.swal2-timer-progress-bar { background: #777; }

.public-search:focus-within {
  outline: 2px solid var(--of-white);
  outline-offset: 3px;
}
.public-app-shell :is(button, a):focus-visible,
.public-bottom-nav :is(button, a):focus-visible,
.boton-flotante-carrito:focus-visible {
  outline: 2px solid var(--of-white);
  outline-offset: 3px;
}
.public-section-links { position:relative; margin:16px 0; max-width:100%; overflow-x:auto; }
.public-section-row { display:flex; flex-wrap:nowrap; gap:10px; width:max-content; }
.public-section-row a { display:inline-block; flex-shrink:0; white-space:nowrap; padding:10px 14px; border:1px solid #4c535a; border-radius:12px; color:#fff; background:transparent; text-decoration:none; }
.public-section-row a[aria-current="page"] { color:#111; background:#fff; }
.public-section-picker { display:none; position:relative; }
.public-section-links.is-compact { overflow:hidden; }
.public-section-links.is-compact .public-section-row { position:absolute; visibility:hidden; pointer-events:none; }
.public-section-links.is-compact .public-section-picker { display:block; }
.public-section-picker span { display:block; margin-bottom:8px; color:var(--of-muted); font-size:12px; font-weight:600; }
.public-section-picker select {
  appearance:none;
  -webkit-appearance:none;
  box-sizing:border-box;
  width:100%;
  min-height:54px;
  padding:14px 46px 14px 48px;
  border:1px solid var(--of-border);
  border-radius:16px;
  background:var(--of-surface);
  color:var(--of-white);
  font:inherit;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  color-scheme:dark;
  text-overflow:ellipsis;
  transition:border-color .15s ease, background-color .15s ease;
}
.public-section-picker select:hover { border-color:var(--of-muted); }
.public-section-picker select option { background:var(--of-surface); color:var(--of-white); }
.public-section-picker > i { position:absolute; bottom:15px; font-size:24px; color:var(--of-white); pointer-events:none; }
.public-section-icon { left:16px; }
.public-section-chevron { right:14px; }
.public-section-picker select:focus-visible { outline:2px solid #fff; outline-offset:-3px; }
.public-app-shell .product-card button:focus-visible {
  outline-color: var(--of-black);
}