/* Estilo «Noche» del sitio público (manual de marca v4, elegido por Tommy el 12/10): todo sobre el negro de marca, texto crema; cuero en botones y detalles. Fuente: ~/wt-marca/sitio/estilos (armar.py, propuesta a). */
:root { --z-bg:#111111; --z-card:#1A1816; --z-card-2:#211E1B; --z-field:#141210; --z-line:#2F2A25; --z-line-2:#5A4E42;
  --z-ink:#EFE6D8; --z-ink-2:#B9AD9D; --z-ink-3:#9E9281; --z-acento:#C4813A; --z-cuero:#B17A45; --z-tint:rgba(196,129,58,.16);
  --z-ok:#6CC98A; --z-esquema:dark; color-scheme:dark;
  --z-btn:#B17A45; --z-btn-hover:#C4813A; --z-btn-ink:#111111;
  --z-cinta:#1A1816; --z-cinta-linea:#2F2A25; --z-cinta-ink:#EFE6D8; --z-cinta-punto:#C4813A; }
footer { --z-bg:#0B0A09; }

/* ═══ Estilo del sitio con el manual de marca v4 — parte común a las 3 propuestas ═══
   Solo color, bordes y sombras: no cambia texto, flujo ni tamaño de nada que se toque.
   Cada clase de color de hoy pasa a una función («fondo», «tarjeta», «texto», «botón») y la
   función toma el color de la ZONA donde está: --z-* lo define la propuesta (claro u oscuro por zona).
   Se carga último, después de tailwind.css y wa-fijo.css. */

/* ── Zonas: fondo de la página y textos ── */
body, body.bg-base-100, body.bg-payuca-crema, body.bg-payuca-carbon { background: var(--z-bg); color: var(--z-ink); }
.bg-payuca-carbon, .bg-payuca-carbon\/95 { background-color: var(--z-bg); }
.bg-payuca-crema, .bg-white { background-color: var(--z-card); }
.bg-payuca-crema\/50, .bg-payuca-crema\/30, .bg-white\/40, .hover\:bg-payuca-crema\/30:hover { background-color: var(--z-card-2); }
.hover\:bg-payuca-crema:hover, .hover\:bg-payuca-carbon\/80:hover { background-color: var(--z-card-2); }
.text-payuca-negro, .text-white, .text-payuca-crema, .text-neutral-content,
.hover\:text-white:hover, .hover\:text-payuca-crema:hover, .group:hover .group-hover\:text-payuca-crema { color: var(--z-ink); }
.text-payuca-carbon, .text-payuca-carbon\/70, .text-white\/70, .text-payuca-crema\/70, .text-payuca-crema\/75,
.text-payuca-crema\/80, .text-payuca-crema\/85, .text-payuca-crema\/90 { color: var(--z-ink-2); }
.text-white\/50, .text-white\/60, .text-payuca-crema\/60 { color: var(--z-ink-3); }
.text-payuca-bordo, .text-payuca-cuero, .hover\:text-payuca-bordo:hover, .hover\:text-payuca-cuero:hover,
.group:hover .group-hover\:text-payuca-bordo, .hover\:text-red-600:hover { color: var(--z-acento); }
.opacity-70, .opacity-85 { opacity: 1; }                         /* los links del menú ya bajan con --z-ink-2 */
.navbar .nav-link { color: var(--z-ink-2); }
.navbar .nav-link:hover, .navbar .nav-link.text-payuca-crema, .navbar .menu a.text-payuca-crema { color: var(--z-ink); }
.nav-link::after { background: linear-gradient(90deg, #6E1F1B, #B17A45); }

/* ── Líneas ── */
.border-payuca-crema, .border-gray-100, .border-gray-200, .border-white\/10, .border-white\/5, .border-payuca-crema\/20,
.border-payuca-carbon\/40, .lg\:border-payuca-crema, .divide-payuca-crema > :not([hidden]) ~ :not([hidden]) { border-color: var(--z-line); }
.border-gray-300, .border-payuca-carbon, .border-payuca-bordo\/30, .border-payuca-bordo\/40, .border { border-color: var(--z-line-2); }
.border-payuca-bordo, .hover\:border-payuca-bordo:hover, .hover\:border-payuca-crema:hover { border-color: var(--z-cuero); }
.ring-payuca-bordo\/40 { --tw-ring-color: color-mix(in srgb, var(--z-cuero) 55%, transparent); }
.accent-payuca-bordo { accent-color: var(--z-cuero); }
/* El filete corto debajo de los títulos es el hilo de brasa. */
.w-12.border-b-2.border-payuca-bordo, .w-16.border-b-2.border-payuca-bordo { border: 0; height: 2px; background: linear-gradient(90deg, #6E1F1B, #B17A45); }

/* ── Botones de acción (Terminar reserva, Agregar, Ir al checkout): color de la zona + hilo de brasa ── */
.bg-payuca-bordo, .btn-primary, .badge-primary, .hover\:bg-payuca-bordo:hover, .group:hover .group-hover\:bg-payuca-bordo,
.btn-payuca-destacado, .hover\:bg-payuca-cuero:hover {
  --z-ink: var(--z-btn-ink); --z-ink-2: var(--z-btn-ink); --z-ink-3: var(--z-btn-ink); --z-acento: var(--z-btn-ink);
  background-color: var(--z-btn); border-color: var(--z-btn); color: var(--z-btn-ink);
}
.btn-primary, .btn-payuca-destacado, button.bg-payuca-bordo:not(.rounded-xl), a.bg-payuca-bordo:not(.rounded-xl):not(.rounded-lg) {
  background-image: linear-gradient(90deg, #6E1F1B, #B17A45); background-size: 100% 3px; background-position: bottom; background-repeat: no-repeat;
}
.btn-primary:hover, .hover\:bg-payuca-bordo\/85:hover, .hover\:bg-payuca-bordo\/80:hover, .btn-payuca-destacado:hover { background-color: var(--z-btn-hover); border-color: var(--z-btn-hover); color: var(--z-btn-ink); }
.btn-primary:disabled, .btn-primary[disabled] { background-color: var(--z-card-2); border-color: var(--z-line-2); color: var(--z-ink-3); background-image: none; }
.bg-payuca-bordo\/10 { background-color: var(--z-tint); }
.bg-payuca-bordo\/30, .bg-payuca-bordo\/70 { background-color: var(--z-card-2); }
.btn-3d { border-bottom-color: transparent; }
.btn-sweep::after { background: var(--z-btn); }
.btn-sweep:hover, .btn-sweep:focus-visible { color: var(--z-btn-ink); }
.btn-outline { border-color: var(--z-line-2); color: var(--z-ink); }
.btn-ghost { color: inherit; }

/* ── Botones grandes de la portada (Menú, Delivery, Reservas…): el «botón de marca» del manual ── */
a.btn-3d.bg-payuca-bordo.rounded-xl, button.btn-3d.bg-payuca-bordo.rounded-xl {
  --z-ink: #EFE6D8; --z-acento: #C4813A;
  background: linear-gradient(90deg, #6E1F1B, #B17A45) bottom / 100% 3px no-repeat,
              radial-gradient(120% 140% at 50% 120%, #3a1a12, #161210 55%, #111111);
  border: 1px solid rgba(177, 122, 69, .55); color: #EFE6D8;
}
a.btn-3d.bg-payuca-bordo.rounded-xl:hover, button.btn-3d.bg-payuca-bordo.rounded-xl:hover { border-color: #C4813A; }
/* Los sub-botones del acordeón (Reservas, Lista de espera, Contacto…) */
a.bg-payuca-bordo\/70.rounded-lg { --z-ink: var(--z-ink); background-color: var(--z-card-2); border: 1px solid var(--z-line-2); color: var(--z-ink); }
a.bg-payuca-bordo\/70.rounded-lg:hover { border-color: var(--z-cuero); background-color: var(--z-card-2); }

/* ── Campos del formulario ── */
.input, .select, .textarea, input.input-bordered, select.select-bordered {
  background-color: var(--z-field); color: var(--z-ink); border-color: var(--z-line-2);
}
.input::placeholder, .textarea::placeholder { color: var(--z-ink-3); opacity: 1; }
.input:focus, .select:focus, .textarea:focus, .input-glow:focus { border-color: var(--z-cuero); outline: 2px solid color-mix(in srgb, var(--z-cuero) 45%, transparent); outline-offset: 1px; box-shadow: none; }
.label-text { color: var(--z-ink); }
input[type="date"], input[type="time"], select { color-scheme: var(--z-esquema); }
/* Botón de WhatsApp verde (Confirmar por WhatsApp): siempre texto negro sobre verde. */
[style*="25D366"] { color: #111111; --z-ink: #111111; }

/* ── Portada: foto con velo del negro de marca y una brasa abajo (no gris) ── */
.hero-overlay-payuca {
  background: radial-gradient(90% 60% at 50% 110%, rgba(110, 31, 27, .45), transparent 70%),
              linear-gradient(to bottom, rgba(17,17,17,.45) 0%, rgba(17,17,17,.7) 50%, rgba(17,17,17,.92) 100%);
}

/* ── Cinta de datos debajo de la portada ── */
section.bg-payuca-bordo.py-3 { background: var(--z-cinta); background-image: none; border-block: 1px solid var(--z-cinta-linea); }
.ticker-item, a.ticker-item:hover { color: var(--z-cinta-ink); }
.ticker-dot { color: var(--z-cinta-punto); }

/* ── Pie: hilo de brasa arriba ── */
footer { border-top: 0; background-image: linear-gradient(90deg, #6E1F1B, #B17A45); background-size: 100% 2px; background-repeat: no-repeat; background-position: top; }
.navbar.sticky, .navbar.bg-payuca-carbon\/95 { box-shadow: 0 2px 0 -0px transparent; background-image: linear-gradient(90deg, #6E1F1B, #B17A45); background-size: 100% 2px; background-repeat: no-repeat; background-position: bottom; }

/* ── Carta, delivery y reservas: pestañas de categorías, tarjetas, carrito ── */
.cart-sheet, .dropdown-content.card { background-color: var(--z-card); color: var(--z-ink); border-color: var(--z-line); }
.menu.dropdown-content { background-color: var(--z-bg); }
.skeleton { background-color: var(--z-card-2); }
.card-plato:hover { border-color: var(--z-cuero); box-shadow: none; }
.text-green-600, .text-green-500 { color: var(--z-ok); }
.img-placeholder { background: var(--z-card-2); color: var(--z-acento); border-color: var(--z-line-2); }
.notyf__toast--success { background: #111111 !important; }
.notyf__toast--warning { background: #8C5A2B !important; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline-color: var(--z-acento); }

/* ── Estados (opción elegida, foco) ── */
.has-\[\:checked\]\:border-payuca-bordo:has(:checked) { border-color: var(--z-cuero); }
.has-\[\:checked\]\:bg-payuca-bordo\/10:has(:checked) { background-color: var(--z-tint); }
.focus-visible\:outline-payuca-bordo:focus-visible { outline-color: var(--z-acento); }
/* Plato agotado: hoy va al 60 % de opacidad y su texto no llega a AA. Se atenúa con el gris
   de la zona (--z-ink-3, que sí pasa) y el cartel «Agotado» sigue diciendo el motivo. */
.flex-1.min-w-0.opacity-60 { opacity: 1; --z-ink: var(--z-ink-3); --z-ink-2: var(--z-ink-3); }