/* ================================================================
   DONDE TE QUIERO — "EL ROOF" · tema 'dtq'
   Verde profundo + crema + greige, elegante art-deco (arcos, deco caps).
   Paleta oficial del cliente: #003C3A / #212222 / #AFA69C / #F1F1EC / #FDFBEE
   Tipos: Italiana (display) + Poiret One (deco) — cargados en index.html.
   Se activa con data-theme="dtq" (api-loader lo pone desde config.theme).
   ================================================================ */
:root[data-theme="dtq"] {
  --q-green:   #1C1C1C;   /* oscuro profundo (fondo principal) */
  --q-green-2: #2A2A2A;   /* superficie / hover */
  --q-green-3: #333333;
  --q-ink:     #000000;   /* casi-negro */
  --q-greige:  #CBA052;   /* acento principal / oro elegante */
  --q-bone:    #F8F8F8;   /* texto muy claro */
  --q-cream:   #FDFBEE;   /* texto sobre fondo */
  --q-muted:   #9C9C9C;   /* texto suave */

  /* Redefinición de variables del framework */
  --gold:      #CBA052;   /* oro elegante */
  --gold-2:    #E2B768;   /* oro más brillante */
  --gold-3:    #A37A34;   /* oro oscuro */
  --cream:     #FDFBEE;
  --muted:     #9C9C9C;
  --platinum:  #CBA052;
  --card:      #2A2A2A;   /* fondo tarjetas */
  --line:      rgba(203, 160, 82, 0.15); /* separador dorado sutil */
  --red-2:     #d98f7e;
}

/* === FONDO general: oscuro elegante === */
body[data-theme="dtq"] {
  background: #111111 url('../resto-uploads/dondetequiero/logo/splash_dark.png') center/cover fixed !important;
  color: var(--q-cream) !important;
  -webkit-font-smoothing: antialiased;
}
body[data-theme="dtq"] .screen,
body[data-theme="dtq"] .home,
body[data-theme="dtq"] main,
body[data-theme="dtq"] .menu-container,
body[data-theme="dtq"] .m-section,
body[data-theme="dtq"] .menu,
body[data-theme="dtq"] .app-shell {
  background: transparent !important;
  color: var(--q-cream) !important;
}

/* === SPLASH: la página de la carta (oscuro + geométrico) === */
body[data-theme="dtq"] .splash-bg {
  background: #111111 url('../resto-uploads/dondetequiero/logo/splash_dark.png') center/cover no-repeat !important;
  animation: none !important;   /* cero Ken Burns */
}
body[data-theme="dtq"] .splash-bg .splash-video,
body[data-theme="dtq"] .splash-bg video { display: none !important; }
body[data-theme="dtq"] .splash-bg::after { background: transparent !important; }
/* cero movimiento del template (ember/corners) */
body[data-theme="dtq"] .splash-screen .ember,
body[data-theme="dtq"] .ember { display: none !important; animation: none !important; }
body[data-theme="dtq"] .splash-screen .corners::before,
body[data-theme="dtq"] .splash-screen .corners::after { animation: none !important; display: none !important; }
/* quitar overlay y logo duplicado (el splash_dark ya lo tiene) */
body[data-theme="dtq"] .splash-screen .overlay { display: none !important; }
body[data-theme="dtq"] .splash-screen .brand { display: none !important; }

/* Hacer la tarjeta transparente para que el fondo geométrico cubra todo */
body[data-theme="dtq"] .splash-card {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Texto del splash sobre el arco VERDE → crema */
body[data-theme="dtq"] .splash-card .eyebrow.dtq-welcome {
  color: #FDFBEE !important; -webkit-text-fill-color: #FDFBEE !important;
  font-family: 'Italiana', serif !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  letter-spacing: .30em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  margin: 10px 0 8px !important;
}
body[data-theme="dtq"] .splash-card .sub {
  color: rgba(253,251,238,0.82) !important; -webkit-text-fill-color: rgba(253,251,238,0.82) !important;
  opacity: 1 !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  letter-spacing: .04em !important;
  line-height: 1.5 !important;
  max-width: 280px !important;
  margin: 0 auto 24px !important;
}

/* Logo del splash: lockup vertical crema — SIN el clip del template
   (brand-overrides.css:422 recorta 23% inferior a TODO logo de splash) */
body[data-theme="dtq"] .splash-screen .logo,
body[data-theme="dtq"] .splash-card img.logo,
body[data-theme="dtq"] .splash-card .logo {
  display: block !important;
}
/* flotación sutil (igual que Henry's, al CEO le gustó) */
@keyframes dtqFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
body[data-theme="dtq"] .splash-screen .logo,
body[data-theme="dtq"] .splash-card img.logo {
  animation: dtqFloat 4.2s ease-in-out infinite !important;
  will-change: transform;
}

/* === BOTONES: crema plano + texto verde (elegante, sin glow) === */
body[data-theme="dtq"] .btn-gold,
body[data-theme="dtq"] .btn-primary {
  background: #FDFBEE !important;
  color: #003C3A !important; border: none !important;
  box-shadow: none !important; font-weight: 700 !important;
  border-radius: 999px !important; letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
body[data-theme="dtq"] .btn-gold:hover,
body[data-theme="dtq"] .btn-primary:hover { background: #F1F1EC !important; transform: none; box-shadow: none !important; }
body[data-theme="dtq"] .btn-outline {
  background: transparent !important; color: var(--q-cream) !important;
  border: 1.5px solid rgba(253,251,238,0.55) !important;
  border-radius: 999px !important; letter-spacing: .10em !important;
}
body[data-theme="dtq"] .btn-ghost, body[data-theme="dtq"] .btn-ghost * { color: var(--q-muted) !important; -webkit-text-fill-color: var(--q-muted) !important; }

/* Pills flotantes (ACCESO / idioma): crema con borde verde sobre la parte crema del splash */
body[data-theme="dtq"] .lang-float {
  background: rgba(253,251,238,0.92) !important; color: #003C3A !important;
  -webkit-text-fill-color: #003C3A !important;
  border: 1.5px solid #003C3A !important; box-shadow: none !important; font-weight: 700 !important;
}

/* === TOPBAR === */
body[data-theme="dtq"] .topbar,
body[data-theme="dtq"] header.topbar {
  background: rgba(1,42,40,0.78) !important;
  backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(175,166,156,0.22) !important;
}
body[data-theme="dtq"] .topbar button,
body[data-theme="dtq"] .topbar .iconbtn {
  color: var(--q-cream) !important; background: rgba(253,251,238,0.06) !important;
  border: 1px solid rgba(253,251,238,0.12) !important;
}
body[data-theme="dtq"] .topbar button:hover,
body[data-theme="dtq"] .topbar .iconbtn:hover { color: var(--q-greige) !important; border-color: rgba(175,166,156,.55) !important; }
body[data-theme="dtq"] .topbar svg { color: var(--q-cream) !important; stroke: currentColor !important; }
body[data-theme="dtq"] .topbar .tlogo { max-height: 44px !important; }

/* === HERO del menú — limpio, estilo "the MENU" === */
body[data-theme="dtq"] .menu-hero {
  background: transparent !important; padding: 6px 0 8px !important; box-shadow: none !important;
}
body[data-theme="dtq"] .menu-hero .mh-kicker { color: var(--q-greige) !important; -webkit-text-fill-color: var(--q-greige) !important; letter-spacing: .38em !important; }
body[data-theme="dtq"] .menu-hero .mh-title {
  font-family: 'Italiana', serif !important;
  color: #FDFBEE !important; -webkit-text-fill-color: #FDFBEE !important;
  font-weight: 400 !important; letter-spacing: .06em !important;
}
body[data-theme="dtq"] .menu-hero .mh-sub { color: var(--q-muted) !important; -webkit-text-fill-color: var(--q-muted) !important; font-style: normal !important; letter-spacing: .06em !important; }
body[data-theme="dtq"] .menu-hero .orn { display: none !important; }

/* fuera romanos / adornos / divisores del template formal */
body[data-theme="dtq"] .m-sec-head,
body[data-theme="dtq"] .m-fin { display: none !important; }

/* === CHIPS de categorías + toggle Lista/Fotos === */
body[data-theme="dtq"] .chip,
body[data-theme="dtq"] .cat-chip,
body[data-theme="dtq"] .filter-chip,
body[data-theme="dtq"] .menu-view-toggle,
body[data-theme="dtq"] .view-toggle {
  background: rgba(253,251,238,0.05) !important; color: var(--q-cream) !important;
  border: 1px solid rgba(253,251,238,0.16) !important;
  border-radius: 999px !important;
}
body[data-theme="dtq"] .chip.active,
body[data-theme="dtq"] .cat-chip.active,
body[data-theme="dtq"] .filter-chip.sel,
body[data-theme="dtq"] .chip.sel {
  background: #FDFBEE !important; color: #003C3A !important;
  border-color: transparent !important; font-weight: 700 !important;
}
body[data-theme="dtq"] .menu-view-toggle button, body[data-theme="dtq"] .view-toggle button { color: var(--q-muted) !important; }
body[data-theme="dtq"] .menu-view-toggle button svg { color: var(--q-muted) !important; stroke: currentColor !important; }
body[data-theme="dtq"] .menu-view-toggle button.active,
body[data-theme="dtq"] .view-toggle button.active { background: #FDFBEE !important; color: #003C3A !important; }
body[data-theme="dtq"] .menu-view-toggle button.active svg { color: #003C3A !important; stroke: #003C3A !important; }

/* === TÍTULO de categoría: deco centrado con líneas finas (como la carta) === */
body[data-theme="dtq"] .m-section {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 6px 4px 12px !important;
  margin-bottom: 8px !important;
}
body[data-theme="dtq"] .m-section .rb {
  background: transparent !important;
  box-shadow: none !important;
  color: #FDFBEE !important; -webkit-text-fill-color: #FDFBEE !important;
  font-family: 'Italiana', serif !important;
  font-weight: 400 !important;
  font-size: 1.55rem !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  letter-spacing: .22em !important;
  text-align: center !important;
  width: 100% !important; max-width: none !important;
  display: block !important;
  margin: 12px 0 12px !important;
  padding: 0 0 10px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(253,251,238,0.22) !important;
}
body[data-theme="dtq"] .m-nota {
  color: var(--q-greige) !important; -webkit-text-fill-color: var(--q-greige) !important;
  text-align: center !important; font-style: normal !important; letter-spacing: .04em !important;
}

/* === ITEMS: lista estilo carta (sin cajas), nombres DECO, líder de puntos === */
body[data-theme="dtq"] .mitem {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 12px 2px !important;
  align-items: baseline !important;
}
body[data-theme="dtq"] .mitem + .mitem { border-top: 1px solid rgba(253,251,238,0.10) !important; }
body[data-theme="dtq"] .mitem .dots { border-bottom: 1px dotted rgba(253,251,238,0.35) !important; min-width: 26px !important; }
body[data-theme="dtq"] .mitem .n,
body[data-theme="dtq"] .mitem .info .n {
  font-family: 'Poiret One', 'Italiana', serif !important;
  font-weight: 700 !important;
  font-size: 1.22rem !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  color: #FDFBEE !important; -webkit-text-fill-color: #FDFBEE !important;
}
body[data-theme="dtq"] .mitem .m-item-desc {
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-size: .86rem !important;
  line-height: 1.42 !important;
  color: var(--q-muted) !important; -webkit-text-fill-color: var(--q-muted) !important;
}
body[data-theme="dtq"] .mitem .p {
  font-family: 'Poiret One', serif !important;
  font-weight: 700 !important;
  font-size: 1.06rem !important;
  color: #FDFBEE !important; -webkit-text-fill-color: #FDFBEE !important;
  background: none !important; text-shadow: none !important;
}
body[data-theme="dtq"] .mitem .p .desde { color: var(--q-greige) !important; }
body[data-theme="dtq"] .mi-chev { color: rgba(253,251,238,0.4) !important; }

/* === FOTOS: thumbnail izquierda + info derecha === */
body[data-theme="dtq"] .menu-view-grid .m-section > .mitem-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
body[data-theme="dtq"] .menu-view-grid .mitem-card {
  flex-direction: row !important;
  align-items: stretch !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: rgba(253,251,238,0.05) !important;
  border: 1px solid rgba(253,251,238,0.12) !important;
  box-shadow: none !important;
}
body[data-theme="dtq"] .menu-view-grid .mitem-card .ph {
  width: 110px !important;
  min-width: 110px !important;
  aspect-ratio: auto !important;
  align-self: stretch !important;
  border-radius: 0 !important;
}
body[data-theme="dtq"] .menu-view-grid .mitem-card .ph:not([style*="background-image"]) {
  background: linear-gradient(135deg, #06504d 0%, #0a5d59 100%) !important; opacity: .8 !important;
}
body[data-theme="dtq"] .menu-view-grid .mitem-card .info { justify-content: center !important; padding: 10px 14px !important; gap: 3px !important; }
body[data-theme="dtq"] .menu-view-grid .mitem-card .n {
  font-family: 'Poiret One', serif !important; font-weight: 700 !important;
  font-size: 15px !important; letter-spacing: .05em !important; text-transform: uppercase !important;
  color: #FDFBEE !important; -webkit-text-fill-color: #FDFBEE !important;
}
body[data-theme="dtq"] .menu-view-grid .mitem-card .d { font-size: 12.5px !important; flex: none !important; color: var(--q-muted) !important; -webkit-text-fill-color: var(--q-muted) !important; }
body[data-theme="dtq"] .menu-view-grid .mitem-card .p { font-size: 15px !important; font-weight: 700 !important; color: var(--q-greige) !important; -webkit-text-fill-color: var(--q-greige) !important; margin-top: 3px !important; }

/* === CARDS genéricas (home, ofertas, opciones) === */
body[data-theme="dtq"] .card,
body[data-theme="dtq"] .offer-card,
body[data-theme="dtq"] .option,
body[data-theme="dtq"] .hub-card {
  background: rgba(253,251,238,0.05) !important;
  border: 1px solid rgba(253,251,238,0.12) !important;
  color: var(--q-cream) !important;
  box-shadow: none !important;
  border-radius: 14px !important;
}
body[data-theme="dtq"] .hub-card .h { color: #FDFBEE !important; }
body[data-theme="dtq"] .hub-card .d { color: var(--q-muted) !important; }
body[data-theme="dtq"] .hub-card .ic, body[data-theme="dtq"] .ic { color: var(--q-greige) !important; stroke: var(--q-greige) !important; }
/* === CATEGORÍAS TABS (SCROLL) === */
body[data-theme="dtq"] .category-scroll-container::-webkit-scrollbar { display: none; }
body[data-theme="dtq"] .category-scroll-container {
  background: rgba(17, 17, 17, 0.95);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(8px);
}
body[data-theme="dtq"] .category-tabs {
  gap: 24px; padding: 14px 24px;
}
body[data-theme="dtq"] .cat-tab {
  color: var(--q-muted);
  font-family: 'Poiret One', sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.1em;
}
body[data-theme="dtq"] .cat-tab.active {
  color: var(--q-greige);
  border-bottom: 2px solid var(--q-greige);
}
body[data-theme="dtq"] .stat .num { color: var(--q-greige) !important; -webkit-text-fill-color: var(--q-greige) !important; }
body[data-theme="dtq"] .stat .lbl { color: var(--q-muted) !important; -webkit-text-fill-color: var(--q-muted) !important; }

/* CTA del home ("¿Qué se te antoja hoy?") — banda greige plana como la carta */
body[data-theme="dtq"] .home .rb,
body[data-theme="dtq"] .screen > .rb,
body[data-theme="dtq"] .rb {
  background: #AFA69C !important;
  color: #212222 !important; -webkit-text-fill-color: #212222 !important; border: none !important;
  padding: 9px 26px !important; border-radius: 3px !important; letter-spacing: .16em !important;
  text-transform: uppercase !important; font-weight: 700 !important; font-size: 12.5px !important;
  width: fit-content !important; margin: 0 auto 16px !important; display: block !important;
  box-shadow: none !important;
}
/* …pero dentro del menú manda el estilo de título de categoría (redefinido arriba) */
body[data-theme="dtq"] .m-section .rb {
  background: transparent !important;
  color: #FDFBEE !important; -webkit-text-fill-color: #FDFBEE !important;
  border-radius: 0 !important; padding: 0 0 10px !important;
  width: 100% !important; font-size: 1.55rem !important; font-weight: 400 !important;
  font-family: 'Italiana', serif !important; letter-spacing: .22em !important;
}

/* === HEADINGS / inputs === */
body[data-theme="dtq"] h1, body[data-theme="dtq"] h2,
body[data-theme="dtq"] h3, body[data-theme="dtq"] h4 { color: var(--q-cream) !important; }
body[data-theme="dtq"] .display.gold-text,
body[data-theme="dtq"] h1.gold-text {
  background: none !important; -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #FDFBEE !important; color: #FDFBEE !important;
  animation: none !important; font-family: 'Italiana', serif !important; font-weight: 400 !important;
}
body[data-theme="dtq"] input, body[data-theme="dtq"] textarea,
body[data-theme="dtq"] select, body[data-theme="dtq"] .input,
body[data-theme="dtq"] .input-tel {
  background: rgba(253,251,238,0.06) !important; color: var(--q-cream) !important;
  border: 1px solid rgba(253,251,238,0.16) !important; border-radius: 10px !important;
}
body[data-theme="dtq"] input::placeholder, body[data-theme="dtq"] textarea::placeholder { color: rgba(159,184,180,0.7) !important; }
body[data-theme="dtq"] label, body[data-theme="dtq"] .label { color: var(--q-cream) !important; -webkit-text-fill-color: var(--q-cream) !important; font-weight: 600 !important; }

/* === Banners / ofertas / legal === */
body[data-theme="dtq"] .offers-banner,
body[data-theme="dtq"] .nota, body[data-theme="dtq"] .cat-note {
  background: rgba(253,251,238,0.05) !important; color: var(--q-cream) !important;
  border: 1px solid rgba(175,166,156,0.30) !important; border-radius: 10px !important;
}
body[data-theme="dtq"] .menu-legal, body[data-theme="dtq"] .footer, body[data-theme="dtq"] footer { color: var(--q-muted) !important; }
body[data-theme="dtq"] .dots { color: rgba(253,251,238,0.20) !important; border-color: rgba(253,251,238,0.20) !important; }

/* precios genéricos fuera del menú */
body[data-theme="dtq"] .p,
body[data-theme="dtq"] .price,
body[data-theme="dtq"] .item-price {
  color: var(--q-greige) !important; -webkit-text-fill-color: var(--q-greige) !important;
  font-weight: 700 !important; background: none !important; text-shadow: none !important;
}

/* respeta reduce motion */
@media (prefers-reduced-motion: reduce) {
  body[data-theme="dtq"] .splash-card img.logo,
  body[data-theme="dtq"] .splash-screen .logo { animation: none !important; }
}