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

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* PALETA LA PAYUCA (Manual de marca v1.0)  */
/* Fuente: herramientas-diseño/payuca-sitio-web/PALETA-COLORES.css */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  --payuca-negro: #111111;
  --payuca-blanco: #FFFFFF;
  --payuca-crema: #EFE6D8;
  --payuca-bordo: #6E1F1B;
  --payuca-cuero: #B17A45;
  --payuca-carbon: #2B2B2B;
  --payuca-gris-claro: #F5F0EB;

  --payuca-success: #10B981;
  --payuca-warning: #F59E0B;
  --payuca-error: #EF4444;
  --payuca-info: #3B82F6;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* TEMA daisyUI "payuca"                    */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

[data-theme="payuca"] {
  --p: 6E1F1B;
  --pf: 551815;
  --pc: FFFFFF;
  --s: B17A45;
  --sf: 8E6237;
  --sc: FFFFFF;
  --a: EFE6D8;
  --af: D4C4AE;
  --ac: 111111;
  --n: 2B2B2B;
  --nf: 111111;
  --nc: FFFFFF;
  --b1: FFFFFF;
  --b2: F5F0EB;
  --b3: EFE6D8;
  --bc: 111111;
  --in: 3B82F6;
  --su: 10B981;
  --wa: F59E0B;
  --er: EF4444;
  --rounded-box: 0.25rem;
  --rounded-btn: 0.25rem;
  --rounded-badge: 0.25rem;
  --btn-text-case: uppercase;
  --animation-btn: 0.2s;
}

body {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-editorial {
  font-family: 'Merriweather', Georgia, serif;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* CLASES UTILITARIAS LA PAYUCA             */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.bg-payuca-negro { background-color: var(--payuca-negro); }
.bg-payuca-crema { background-color: var(--payuca-crema); }
.bg-payuca-carbon { background-color: var(--payuca-carbon); }
.text-payuca-bordo { color: var(--payuca-bordo); }
.text-payuca-cuero { color: var(--payuca-cuero); }
.text-payuca-crema { color: var(--payuca-crema); }

.hero-overlay-payuca {
  background: linear-gradient(
    to bottom,
    rgba(17, 17, 17, 0.5) 0%,
    rgba(17, 17, 17, 0.65) 50%,
    rgba(17, 17, 17, 0.9) 100%
  );
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* COMPONENTES CUSTOM LA PAYUCA             */
/* Fuente: herramientas-diseño/payuca-sitio-web/PALETA-COLORES.css */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Card plato — hover con borde bordo */
.card-plato {
  border: 2px solid transparent;
  transition: all 0.3s ease;
}
.card-plato:hover {
  border-color: var(--payuca-bordo);
  box-shadow: 0 8px 16px rgba(110, 31, 27, 0.15);
  transform: translateY(-4px);
}
.card-plato-precio {
  color: var(--payuca-crema);
  font-size: 1.75rem;
  font-weight: bold;
}

/* Boton destacado (bordo + cuero) */
.btn-payuca-destacado {
  background-color: var(--payuca-bordo);
  border: 2px solid var(--payuca-cuero);
  color: white;
  font-weight: bold;
  transition: all 0.3s ease;
}
.btn-payuca-destacado:hover {
  background-color: var(--payuca-cuero);
  border-color: var(--payuca-bordo);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(110, 31, 27, 0.3);
}

/* Badge urgencia pulsante */
.badge-nuevo {
  background-color: var(--payuca-error);
  color: white;
  animation: pulse-urgencia 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-urgencia {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Estados de pedido (admin) */
.estado-nuevo {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--payuca-error);
}
.estado-preparando {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--payuca-warning);
}
.estado-en-camino {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--payuca-info);
}
.estado-entregado {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--payuca-success);
}

/* Carrito flotante */
.carrito-flotante {
  background-color: var(--payuca-blanco);
  border-top: 4px solid var(--payuca-bordo);
  box-shadow: 0 -4px 12px rgba(110, 31, 27, 0.1);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* GLASSMORPHISM (UIverse #5)               */
/* Fuente: herramientas-diseño/uiverse/     */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.glass-card {
  background: rgba(36, 36, 36, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 14px;
  padding: 14px 16px;
  color: #ffffff;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* BURGER MENU ANIMADO (UIverse #1)         */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.burger {
  position: relative;
  width: 40px;
  height: 30px;
  background: transparent;
  cursor: pointer;
  display: block;
}
.burger input { display: none; }
.burger span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: white;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}
.burger span:nth-of-type(1) { top: 0px; transform-origin: left center; }
.burger span:nth-of-type(2) { top: 50%; transform: translateY(-50%); transform-origin: left center; }
.burger span:nth-of-type(3) { top: 100%; transform-origin: left center; transform: translateY(-100%); }
.burger input:checked ~ span:nth-of-type(1) { transform: rotate(45deg); top: 0px; left: 5px; }
.burger input:checked ~ span:nth-of-type(2) { width: 0%; opacity: 0; }
.burger input:checked ~ span:nth-of-type(3) { transform: rotate(-45deg); top: 28px; left: 5px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* LOADER ANILLOS (UIverse #12)             */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.loader-payuca {
  display: inline-block;
  width: 48px;
  height: 48px;
  border: 4px solid var(--payuca-crema);
  border-top-color: var(--payuca-bordo);
  border-radius: 50%;
  animation: spin-payuca 0.8s linear infinite;
}
@keyframes spin-payuca {
  to { transform: rotate(360deg); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* INPUT GLOW (UIverse #9, adaptado bordo)  */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.input-glow {
  transition: border-color 0.3s, box-shadow 0.3s;
}
.input-glow:focus {
  border-color: var(--payuca-bordo) !important;
  box-shadow: 0 0 0 3px rgba(110, 31, 27, 0.15);
  outline: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* TOOLTIP (UIverse #15)                    */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.tooltip-payuca {
  position: relative;
  cursor: pointer;
}
.tooltip-payuca::before {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  padding: 6px 12px;
  background: var(--payuca-carbon);
  color: white;
  font-size: 0.75rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
}
.tooltip-payuca:hover::before {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ACCESSIBILITY (WCAG AA)                  */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.btn:focus-visible,
.input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--payuca-bordo);
  outline-offset: 2px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* NOTYF — Toasts La Payuca               */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.notyf__toast--success { background: var(--payuca-bordo) !important; }
.notyf__toast--error   { background: var(--payuca-carbon) !important; border-left: 4px solid var(--payuca-error); }
.notyf__toast--warning { background: var(--payuca-cuero) !important; }
.notyf {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}