/*
  Tema de Cardobel para el menú completo de la plataforma.
  Este archivo solo se carga en los menús con este tema encendido, y todas sus reglas
  van bajo [data-tema="cardobel"]: ningún otro menú cambia.
*/
@font-face {
  font-family: "Archivo Black";
  src: url("/plantillas/cardobel/fuentes/archivo-black.woff2") format("woff2");
  font-display: swap;
}

[data-tema="cardobel"] {
  --color-paper: #000;
  --color-card: #121212;
  --color-raised: #1e1e1e;
  --color-line: #262626;
  --color-muted: #a8a8a8;
  --color-soft: #e2e2e2;
  --color-chile: #ff6118;
  --color-chile-dark: #ff9a62;
  --color-chile-soft: #3a1206;
  --color-maiz: #f9d306;
  --gradient-brand: linear-gradient(120deg, #ff6118 0%, #ff8a1f 55%, #f9b406 100%);
  --on-gradient: #111;
  --font-display: "Archivo Black", "Arial Black", Impact, ui-sans-serif, system-ui, sans-serif;
  background: #000;
}
/* El fondo de toda la página, solo cuando el menú con este tema está en ella. */
html:has([data-tema="cardobel"]),
html:has([data-tema="cardobel"]) body { background: #000; }

/* La letra de Cardobel es gruesa: sin el espaciado negativo de los títulos normales. */
[data-tema="cardobel"] :is(h1, h2, h3) { letter-spacing: 0; font-weight: 400; }

/* ---------- Barra superior con el queso colgando ---------- */
[data-tema="cardobel"] .tema-barra { position: relative; background: #000; }
[data-tema="cardobel"] .tema-barra-interior {
  height: 52px; padding: env(safe-area-inset-top, 0px) 16px 0;
  display: flex; align-items: center; justify-content: center;
}
[data-tema="cardobel"] .tema-logo { height: 28px; width: auto; }
/* El queso ocupa su propio espacio debajo de la barra: cuelga sobre espacio libre, no encima del contenido. */
[data-tema="cardobel"] .tema-adorno { height: 56px; margin-bottom: -16px; pointer-events: none; overflow: visible; }
[data-tema="cardobel"] .tema-adorno .queso { display: block; width: 100%; height: 100%; overflow: visible; }
[data-tema="cardobel"] .tema-adorno .queso-capa { transform-origin: top; animation: tema-queso-estirar 7s ease-in-out infinite alternate; }
[data-tema="cardobel"] .tema-adorno .gota { opacity: 0; animation: tema-queso-caer 9s ease-in var(--d, 0s) infinite; }
@keyframes tema-queso-estirar { from { transform: scaleY(1); } to { transform: scaleY(1.07); } }
@keyframes tema-queso-caer {
  0%, 62% { opacity: 0; transform: translateY(0); }
  66% { opacity: 1; transform: translateY(0); }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translateY(70px); }
}
@media (prefers-reduced-motion: reduce) {
  [data-tema="cardobel"] .tema-adorno .queso-capa,
  [data-tema="cardobel"] .tema-adorno .gota { animation: none; }
}