/* =====================================================================
   FitCamp · Tema de Thanksgiving
   Se prende con data-tema="thanksgiving" en <html> (ver TEMA en config.js: con "auto", todo noviembre).
   Mantiene la marca: lima, noche, Bebas Neue, Montserrat y los banners inclinados.
   Le suma café, naranja y dorado de otoño, hojas que vuelan, un pavo en los títulos y una hojita en las tarjetas.
   Está hecho igual que halloween.css. Para quitarlo del todo: TEMA: "" en config.js (este archivo no hace nada sin el tema).
   ===================================================================== */

/* ---------- Colores: noche de otoño (café oscuro) ---------- */
html[data-tema="thanksgiving"] {
  --naranja: #FF8A2A;
  --dorado: #F2B33D;
  --rojizo: #E8572A;
  --bg: #120D0A;
  --surface: #1E1611;
  --text: #F7F1EA;
  --muted: #B9AA9B;
  --line: #3A2B21;
  --field: #241A14;
  --field-line: #4A382B;
  --banner: #5A230F;
  --card: #1E1611;
  --card-border: #3C2C20;
  --card-muted: #B9AA9B;
  --danger: #FF8A80;
  /* las sombras y las pestañas como en modo oscuro (diseno.css) */
  --aro: rgba(255, 255, 255, .08);
  --sombra: 0 0 0 1px var(--aro), 0 1px 2px rgba(0, 0, 0, .5);
  --sombra-on: 0 0 0 1px rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .5);
  --sombra-alta: 0 0 0 1px rgba(255, 255, 255, .10), 0 24px 48px -12px rgba(0, 0, 0, .8);
  --tab-on: var(--lime);
  --tab-on-txt: var(--night);
  --giro: var(--lime);
  color-scheme: dark;
}
/* Luz dorada suave arriba a la derecha (a la altura del primer título) y brillo naranja abajo.
   Donde están las pestañas de arriba (Entrenar · Ayuno · Mi progreso) baja para que no la tapen. */
html[data-tema="thanksgiving"] body {
  --luz-y: calc(max(12px, env(safe-area-inset-top)) + 103px);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at calc(100% - 64px) var(--luz-y), rgba(255, 190, 90, .20), rgba(255, 140, 50, .07) 70px, transparent 150px),
    radial-gradient(ellipse 120% 55% at 50% 112%, rgba(232, 87, 42, .24), transparent 70%);
  background-attachment: fixed;
}
html[data-tema="thanksgiving"] body:has(> main > #nav:not([hidden])) { --luz-y: calc(max(12px, env(safe-area-inset-top)) + 182px); }

/* ---------- Lo que en modo oscuro ya era así (el tema siempre es oscuro) ---------- */
html[data-tema="thanksgiving"] .auth-card { border: 1px solid var(--line); }
html[data-tema="thanksgiving"] .tabs button[aria-selected="true"],
html[data-tema="thanksgiving"] .tabs button[aria-current="page"],
html[data-tema="thanksgiving"] .ej-video { background: var(--lime); color: var(--night); }
html[data-tema="thanksgiving"] .cuadritos button.lleno { border-color: var(--lime); }
html[data-tema="thanksgiving"] .radio input,
html[data-tema="thanksgiving"] .check input { accent-color: var(--lime); }
html[data-tema="thanksgiving"] .ay-semanas button[aria-pressed="true"],
html[data-tema="thanksgiving"] .ay-menus button[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--night); }
html[data-tema="thanksgiving"] .ay-semanas button[aria-pressed="true"] small,
html[data-tema="thanksgiving"] .ay-menus button[aria-pressed="true"] b { color: var(--night); }
html[data-tema="thanksgiving"] .ay-pista { background: #000; box-shadow: inset 0 0 0 1px #2A2A33; }
html[data-tema="thanksgiving"] .l-ayuno { background: #000; box-shadow: inset 0 0 0 1px #3A3A45; }
html[data-tema="thanksgiving"] .ay-num { box-shadow: 0 0 0 1.5px #fff; }
html[data-tema="thanksgiving"] .ay-comida.cierre { background: #000; border-color: #2A2A33; }
html[data-tema="thanksgiving"] .ay-hoy { background: #000; box-shadow: inset 0 0 0 1px #2A2A33; }
html[data-tema="thanksgiving"] .ay-swap[aria-expanded="true"],
html[data-tema="thanksgiving"] .ent-extra-btns .btn[aria-expanded="true"] { background: var(--lime); border-color: var(--lime); color: var(--night); }
html[data-tema="thanksgiving"] .pose-icono { --rodilla: var(--lime); }

/* ---------- Toques de Thanksgiving ---------- */
/* Botón lima con sombra naranja (y se "hunde" en ella al tocarlo) */
html[data-tema="thanksgiving"] .btn.primary { box-shadow: 3px 3px 0 var(--naranja); }
@media (hover: hover) and (pointer: fine) { html[data-tema="thanksgiving"] .btn.primary:hover { box-shadow: 5px 5px 0 var(--naranja); } }
html[data-tema="thanksgiving"] .btn.primary:not(:disabled):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--naranja); }
/* La raya de la cabecera: lima → naranja → dorado */
html[data-tema="thanksgiving"] .top {
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--lime) 0 40%, var(--naranja) 72%, var(--dorado)) 1;
}
html[data-tema="thanksgiving"] .logo { position: relative; z-index: 1; }
html[data-tema="thanksgiving"] .top-right { z-index: 1; }

/* Hojas que el viento lleva por la cabecera, dando vueltas. Van en la franja del logo, nunca más arriba:
   en la app instalada el teléfono pone la hora y la batería encima de esa parte
   (env(safe-area-inset-top)) y lo que quede ahí no se ve. */
.tg-hojas {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(max(12px, env(safe-area-inset-top)) - 6px);
  overflow: hidden; pointer-events: none;
}
.tg-hoja { position: absolute; left: -40px; top: 8px; width: 20px; height: 20px; fill: var(--naranja); animation: tg-viento 19s linear infinite; }
.tg-hoja path { transform-box: fill-box; transform-origin: center; animation: tg-giro 2.8s ease-in-out infinite alternate; }
.tg-hoja2 { top: 26px; width: 15px; height: 15px; fill: var(--dorado); opacity: .9; animation-duration: 25s; animation-delay: -10s; }
.tg-hoja2 path { animation-duration: 2.2s; }
.tg-hoja3 { top: 2px; width: 12px; height: 12px; fill: var(--rojizo); opacity: .8; animation-duration: 31s; animation-delay: -20s; }
.tg-hoja3 path { animation-duration: 3.4s; }
@keyframes tg-viento {
  0% { transform: translate(0, 0); }
  25% { transform: translate(25vw, 8px); }
  50% { transform: translate(50vw, 0); }
  75% { transform: translate(75vw, 9px); }
  100% { transform: translate(calc(100vw + 80px), 2px); }
}
@keyframes tg-giro { from { transform: rotate(-40deg); } to { transform: rotate(45deg); } }

/* Los banners: café rojizo con un pavo (con una pluma lima) asomándose */
html[data-tema="thanksgiving"] .banner::before { box-shadow: inset 0 0 0 1px rgba(255, 138, 42, .45); }
html[data-tema="thanksgiving"] .banner::after {
  content: ""; position: absolute; right: -24px; top: -20px; width: 40px; height: 40px; transform: rotate(12deg);
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg transform='translate(32 40)'%3E%3Cellipse cy='-17' rx='6.5' ry='16' fill='%23D9531E' transform='rotate(-72)'/%3E%3Cellipse cy='-17' rx='6.5' ry='16' fill='%23FF8A2A' transform='rotate(-48)'/%3E%3Cellipse cy='-17' rx='6.5' ry='16' fill='%23F2B33D' transform='rotate(-24)'/%3E%3Cellipse cy='-17' rx='6.5' ry='16' fill='%23C8F03E' transform='rotate(0)'/%3E%3Cellipse cy='-17' rx='6.5' ry='16' fill='%23F2B33D' transform='rotate(24)'/%3E%3Cellipse cy='-17' rx='6.5' ry='16' fill='%23FF8A2A' transform='rotate(48)'/%3E%3Cellipse cy='-17' rx='6.5' ry='16' fill='%23D9531E' transform='rotate(72)'/%3E%3Cpath d='M-5 16v4.5m-2 0h4M5 16v4.5m-2 0h4' stroke='%23F2B33D' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cy='5' r='13' fill='%237A4524'/%3E%3Ccircle cy='-9' r='7.5' fill='%239C5E33'/%3E%3Ccircle cx='-2.8' cy='-10.5' r='1.4' fill='%230B0B0F'/%3E%3Ccircle cx='2.8' cy='-10.5' r='1.4' fill='%230B0B0F'/%3E%3Cpath d='M-2.4 -7.6h4.8L0 -4.4z' fill='%23F2B33D'/%3E%3Cpath d='M1.8 -6.4c1.8 1.6 1.8 4.4 0 5.6c-.9-1.8-.9-3.8 0-5.6z' fill='%23E5484D'/%3E%3C/g%3E%3C/svg%3E");
}

/* Una hoja dorada, apenas visible, en la esquina de las tarjetas */
html[data-tema="thanksgiving"] .auth-card,
html[data-tema="thanksgiving"] .rutina,
html[data-tema="thanksgiving"] .ay-card,
html[data-tema="thanksgiving"] .card {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(80 20) rotate(40) scale(2.6) translate(-12 -12)' fill='%23F2B33D' fill-opacity='.08' stroke='%23F2B33D' stroke-opacity='.22' stroke-width='.35' stroke-linejoin='round'%3E%3Cpath d='M12 1L13.6 5L16 4L15.2 9L20.5 6L19.6 10L22.5 11.5L18 14.2L19 16.6L13 15.6L12.6 19V23H11.4V19L11 15.6L5 16.6L6 14.2L1.5 11.5L4.4 10L3.5 6L8.8 9L8 4L10.4 5Z'/%3E%3Cpath d='M12 20V6M12 15.4L6 11.6M12 15.4L18 11.6M12 11.5L9 6.8M12 11.5L15 6.8' fill='none'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 110px;
}
html[data-tema="thanksgiving"] .card { background-size: 80px; }
html[data-tema="thanksgiving"] .rutina,
html[data-tema="thanksgiving"] .ay-card { box-shadow: 0 10px 30px rgba(255, 138, 42, .08); }

/* Detalles */
html[data-tema="thanksgiving"] .toast { border-left-color: var(--naranja); }
html[data-tema="thanksgiving"] .ay-semanas button.hoy::after { background: var(--naranja); color: var(--night); }
html[data-tema="thanksgiving"] .empty .empty-title::before { content: "🍂 "; }
html[data-tema="thanksgiving"] .r-go { box-shadow: 2px 2px 0 var(--naranja); }
/* "¡GRACIAS!" en la portada, debajo de MI CUENTA */
.tg-chip {
  display: block; width: max-content; margin: -6px 0 16px 6px;
  font: 400 44px/1 "Bebas Neue", sans-serif; letter-spacing: .08em;
  color: var(--dorado); text-shadow: 3px 3px 0 rgba(232, 87, 42, .75);
  animation: tg-flota 3s ease-in-out infinite;
}
@keyframes tg-flota { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(2deg); } }

/* Con "Reducir movimiento" en el teléfono las hojas se quedan quietas en la cabecera */
@media (prefers-reduced-motion: reduce) {
  .tg-hoja, .tg-hoja path, .tg-chip { animation: none; }
  .tg-hoja1 { left: 52%; top: 10px; transform: rotate(20deg); }
  .tg-hoja2 { left: 66%; top: 4px; transform: rotate(-25deg); }
  .tg-hoja3 { left: 44%; top: 30px; transform: rotate(40deg); }
}