/* Decoración por temporadas. La activa temporadas.js con data-temporada en <html>. */

/* Franja arriba del encabezado: ocupa su propio lugar, no tapa el menú */
.td-tira { position: relative; width: 100%; overflow: hidden; line-height: 0; pointer-events: none; z-index: 61; }
.td-tira svg { display: block; overflow: visible; }
.td-foco, .td-banderin { pointer-events: all; cursor: pointer; }

/* Foquitos: encienden y apagan, se balancean y reaccionan al pasar el mouse */
.td-bal { transform-box: fill-box; transform-origin: 50% 0; transform: rotate(var(--ang, 0deg)); }
.td-foco .td-halo { transform-box: fill-box; transform-origin: center; animation: td-brillo 2.6s ease-in-out infinite; animation-delay: var(--ret, 0s); }
.td-foco:nth-of-type(3n) .td-halo { animation-duration: 3.1s; }
.td-foco:nth-of-type(3n+1) .td-halo { animation-duration: 2.2s; }
@keyframes td-brillo { 0%, 100% { opacity: .95; transform: scale(1); } 50% { opacity: .35; transform: scale(.72); } }
.td-foco:hover .td-halo, .td-foco.destello .td-halo { animation: none; opacity: 1; transform: scale(1.7); transition: transform .25s ease; }
.td-foco.destello .td-halo { transform: scale(2.3); }

/* Banderines: se mecen suave y se agitan al pasar el mouse */
.td-banderin .td-bal { animation: td-mecer 3.4s ease-in-out infinite; animation-delay: var(--ret, 0s); }
@keyframes td-mecer { 0%, 100% { transform: rotate(calc(var(--ang, 0deg) - 3deg)); } 50% { transform: rotate(calc(var(--ang, 0deg) + 3deg)); } }
.td-foco.agita .td-bal, .td-banderin.agita .td-bal { animation: td-agitar 1.1s ease-out; }
@keyframes td-agitar { 0% { transform: rotate(0deg); } 20% { transform: rotate(18deg); } 45% { transform: rotate(-14deg); } 70% { transform: rotate(8deg); } 100% { transform: rotate(0deg); } }
.td-banderin.destello .td-bal { filter: brightness(1.35); }

/* Efectos en pantalla */
.td-canvas { position: fixed; inset: 0; z-index: 58; pointer-events: none; }

/* Accesorio sobre el escudo */
.pub-brand { position: relative; }
.td-accesorio { position: absolute; left: -10px; top: -18px; width: 38px; pointer-events: auto; transform: rotate(-14deg); transform-origin: 50% 90%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); z-index: 2; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.td-accesorio svg { display: block; width: 100%; height: auto; }
.td-accesorio:hover { transform: rotate(-4deg) translateY(-5px) scale(1.14); }
html[data-temporada="desembarco"] .td-accesorio, html[data-temporada="jura"] .td-accesorio, html[data-temporada="independencia"] .td-accesorio { left: -14px; top: -10px; width: 34px; animation: td-ondear 2.6s ease-in-out infinite; }
html[data-temporada="aniversario"] .td-accesorio { left: -12px; top: -14px; width: 34px; transform: rotate(-8deg); }
@keyframes td-ondear { 0%, 100% { transform: rotate(-10deg) skewY(0deg); } 50% { transform: rotate(-6deg) skewY(-6deg); } }

/* Mensaje (temporada o día de partido) */
.td-aviso { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px auto 16px; padding: 9px 10px 9px 16px; width: max-content; max-width: 100%; border-radius: 999px;
  color: #fff; font: 600 14px var(--font-body, inherit); line-height: 1.3; background: linear-gradient(90deg, #00325a, #0b4a80); border: 1px solid #d4a017; box-shadow: 0 8px 22px rgba(0, 50, 90, .28); animation: td-entrar .5s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes td-entrar { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
.td-aviso .td-ico { display: inline-flex; width: 20px; height: 20px; color: #ffd54f; flex: none; }
.td-aviso .td-ico svg { width: 100%; height: 100%; }
.td-aviso button { width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; font-size: 18px; line-height: 1; color: #fff; background: rgba(255, 255, 255, .16); flex: none; }
.td-aviso button:hover { background: rgba(255, 255, 255, .3); }
html[data-temporada="navidad"] .td-aviso { border-color: #e57373; background: linear-gradient(90deg, #00325a, #7a1226); }
html[data-temporada="desembarco"] .td-aviso, html[data-temporada="jura"] .td-aviso, html[data-temporada="independencia"] .td-aviso { background: linear-gradient(90deg, #1b5f9e, #3f8fd0); border-color: #fff; }
html[data-temporada="carnaval"] .td-aviso { background: linear-gradient(90deg, #7b3fc4, #ef476f); border-color: #ffd166; }

/* Día de partido */
.td-aviso.td-partido { background: linear-gradient(90deg, #7a1226, #00325a); border-color: #f0c94a; font-size: 15px; padding: 10px 10px 10px 14px; }
.td-aviso.td-partido .td-ico { width: 26px; height: 26px; color: #0b3a6b; cursor: pointer; }
.td-aviso.td-partido .td-ico:hover svg { animation: td-rodar .9s ease-out; }
@keyframes td-rodar { 0% { transform: translateX(0) rotate(0); } 40% { transform: translateX(10px) rotate(200deg); } 100% { transform: translateX(0) rotate(360deg); } }
.td-aviso.gana { background: linear-gradient(90deg, #14663b, #1f9d58); border-color: #fff; }
.td-aviso.pierde { background: linear-gradient(90deg, #3a4350, #566170); border-color: #cbd2da; }
.td-aviso.juega { animation: td-latido 1.6s ease-in-out infinite; }
@keyframes td-latido { 0%, 100% { box-shadow: 0 8px 22px rgba(184, 17, 47, .35); } 50% { box-shadow: 0 8px 34px rgba(184, 17, 47, .75); } }
#proximo.td-hoy { position: relative; box-shadow: 0 0 0 2px #f0c94a, 0 12px 34px rgba(184, 17, 47, .28); animation: td-brilla-borde 2.4s ease-in-out infinite; }
@keyframes td-brilla-borde { 0%, 100% { box-shadow: 0 0 0 2px #f0c94a, 0 12px 30px rgba(184, 17, 47, .22); } 50% { box-shadow: 0 0 0 3px #ffe082, 0 12px 42px rgba(184, 17, 47, .45); } }

/* Botón del encabezado para quitar o poner la decoración */
.deco-btn { cursor: pointer; font: inherit; padding: 0; }
.deco-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: currentColor; stroke-width: 0; }
.deco-btn .deco-tacha { display: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.deco-btn[data-estado="apagada"] svg path:not(.deco-tacha) { opacity: .45; }
.deco-btn[data-estado="apagada"] .deco-tacha { display: block; }
.deco-btn[data-estado="activa"] { color: #d4a017; }
@media (max-width: 640px) { .pub-top .deco-btn { width: 34px; height: 34px; } }

/* Detalles de color según la temporada */
html[data-temporada] .pub-top-in { box-shadow: 0 0 0 1.5px rgba(212, 160, 23, .5), var(--shadow, 0 6px 20px rgba(0, 0, 0, .18)); }
html[data-temporada="navidad"] .pub-foot { border-top: 8px solid; border-image: repeating-linear-gradient(135deg, #b8112f 0 12px, #ffffff 12px 24px) 8; }
html[data-temporada="anionuevo"] .pub-foot, html[data-temporada="aniversario"] .pub-foot { border-top: 6px solid; border-image: linear-gradient(90deg, #8a6a00, #ffd54f, #8a6a00) 6; }
html[data-temporada="desembarco"] .pub-foot, html[data-temporada="jura"] .pub-foot, html[data-temporada="independencia"] .pub-foot { border-top: 6px solid; border-image: repeating-linear-gradient(180deg, #5aa7e0 0 2px, #fff 2px 4px) 6; }
html[data-temporada="carnaval"] .pub-foot { border-top: 6px solid; border-image: linear-gradient(90deg, #ef476f, #ffd166, #06d6a0, #118ab2, #9b5de5) 6; }

@media (max-width: 640px) {
  .td-aviso { width: auto; font-size: 13px; border-radius: 16px; text-align: left; margin: 12px 0; }
  .td-accesorio { width: 30px; left: -8px; top: -14px; }
}
@media (prefers-reduced-motion: reduce) {
  .td-canvas { display: none; }
  .td-foco .td-halo, .td-banderin .td-bal, .td-aviso, #proximo.td-hoy, .td-aviso.juega, html[data-temporada] .td-accesorio { animation: none !important; }
}
@media print { .td-tira, .td-canvas, .td-accesorio, .td-aviso, .deco-btn { display: none !important; } }