/* ============================================================
   ALTEFEM v2.0 — capa de restyle "presencia deportiva"
   Se carga DESPUES de app.css y solo sobrescribe lo visual.
   Para revertir: quitar el <link> de este archivo en index.html.
   ============================================================ */

/* ---------- 1. BOTONES: inclinacion 3D + destello ---------- */
.btn {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .3s cubic-bezier(.2,.9,.25,1),
              box-shadow .3s ease,
              background .25s ease,
              border-color .25s ease,
              color .25s ease;
}
.btn:hover:not(:disabled) {
  transform: translateY(-2px) rotateX(9deg);
}
.btn:active:not(:disabled) {
  transform: translateY(0) rotateX(0);
}
.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.btn--gold:hover:not(:disabled) {
  transform: translateY(-3px) rotateX(11deg) scale(1.015);
  box-shadow: 0 14px 28px -10px rgba(232,168,0,.6);
}
/* destello que barre el boton dorado */
.btn--gold::after {
  content: "";
  position: absolute;
  top: 0; left: -70%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease;
  pointer-events: none;
}
.btn--gold:hover:not(:disabled)::after { left: 130%; }

.btn--ghost:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold-text);
  box-shadow: 0 10px 20px -8px rgba(232,168,0,.4);
}
.btn--danger:hover:not(:disabled) {
  box-shadow: 0 10px 20px -8px rgba(239,68,68,.5);
}

/* ---------- 2. ESCUDO: rotacion 3D lenta ---------- */
.pub-header__shield,
.app-header__shield {
  transform-style: preserve-3d;
  animation: shieldFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 4px 14px rgba(232,168,0,.25));
}
@keyframes shieldFloat {
  0%, 100% { transform: rotateY(0deg) translateY(0); }
  50%      { transform: rotateY(16deg) translateY(-3px); }
}

/* ---------- 3. HERO: cuadricula en perspectiva ---------- */
.pub-hero {
  position: relative;
  overflow: hidden;
}
.pub-hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -30px;
  height: 260px;
  pointer-events: none;
  opacity: .45;
  z-index: 0;
  transform: perspective(520px) rotateX(72deg);
  transform-origin: bottom center;
  background:
    repeating-linear-gradient(to right, rgba(232,168,0,.14) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(to bottom, rgba(232,168,0,.10) 0 1px, transparent 1px 76px);
  animation: pitchDrift 16s linear infinite;
  -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 82%);
          mask-image: linear-gradient(to top, #000 8%, transparent 82%);
}
@keyframes pitchDrift {
  from { background-position: 0 0; }
  to   { background-position: 0 76px; }
}
.hero-inner,
.hero-media-wrap { position: relative; z-index: 1; }

/* ---------- 4. TARJETAS DE RESUMEN: 3D siguiendo el mouse ---------- */
.stats-grid {
  perspective: 900px;
  /* aire extra a los costados: el sitio tiene overflow-x:hidden
     global, asi que la inclinacion 3D nunca debe tocar el borde.
     Sin margin negativo: no sabemos el padding exacto del
     contenedor padre en todos los anchos de pantalla, asi que
     preferimos correr la grilla un poco hacia adentro (mas seguro)
     antes que arriesgar que se recorte igual en mobile. */
  padding: 0 20px;
  overflow: visible;
}
.stat-card { transform-origin: center; }
.stat-card {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .18s ease-out,
              border-color .3s ease,
              box-shadow .3s ease,
              background .3s ease;
}
.stat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
              rgba(232,168,0,.16), transparent 42%);
}
.stat-card:hover {
  border-color: rgba(232,168,0,.4);
  background: var(--card-hover);
  box-shadow: 0 18px 40px -18px rgba(232,168,0,.35);
}
.stat-card:hover::after { opacity: 1; }
.stat-card h4,
.stat-card__val,
.stat-card__note { position: relative; z-index: 1; }
.stat-card__val {
  transition: transform .3s cubic-bezier(.2,.9,.25,1), color .3s ease;
}
.stat-card:hover .stat-card__val {
  transform: translateZ(26px) scale(1.04);
  color: var(--gold-text);
}

/* ---------- 5. TABLAS: filas que se corren ---------- */
.table-wrap tbody tr {
  transition: background .22s ease, transform .22s cubic-bezier(.2,.9,.25,1);
}
.table-wrap tbody tr:hover {
  background: rgba(232,168,0,.05);
  transform: translateX(5px);
}

/* ---------- 6. FORMULARIOS: campo que se eleva al enfocar ---------- */
.input, select.input, textarea.input {
  transition: border-color .25s ease, box-shadow .3s ease, transform .25s ease, background .25s ease;
}
.input:focus, select.input:focus, textarea.input:focus {
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px var(--gold-soft), 0 8px 18px -10px rgba(232,168,0,.5);
}

/* ---------- 7. CHECKBOXES (asistencia) con glow ---------- */
input[type="checkbox"] {
  accent-color: var(--gold);
  cursor: pointer;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), filter .25s ease;
}
input[type="checkbox"]:hover { transform: scale(1.12); }
input[type="checkbox"]:checked {
  filter: drop-shadow(0 0 6px rgba(232,168,0,.65));
}

/* ---------- 8. TARJETAS GENERALES y NOTICIAS ---------- */
.card {
  transition: background .3s ease, border-color .3s ease,
              transform .3s cubic-bezier(.2,.9,.25,1), box-shadow .3s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--border-mid);
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.7);
}
.news-card {
  transition: transform .3s cubic-bezier(.2,.9,.25,1),
              border-color .3s ease, box-shadow .3s ease;
}
.news-card:hover {
  transform: translateY(-5px) scale(1.006);
  border-color: rgba(232,168,0,.35);
  box-shadow: 0 20px 42px -22px rgba(232,168,0,.4);
}
.news-card__thumb { transition: transform .5s cubic-bezier(.2,.9,.25,1); }
.news-card:hover .news-card__thumb { transform: scale(1.045); }

/* ---------- 9. PESTAÑAS del panel ---------- */
.tab-btn {
  position: relative;
  transition: background .25s ease, color .25s ease, transform .2s ease;
}
.tab-btn:hover { transform: translateY(-1px); }
.tab-btn.active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  animation: tabUnderline .3s cubic-bezier(.2,.9,.25,1);
}
@keyframes tabUnderline {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* ---------- 10. MODALES: entrada sin desplazamiento ----------
   El CSS base anima modalIn desde translate(-50%,-48%), lo que
   produce un salto visible. Usamos un nombre propio y mantenemos
   el centrado fijo durante toda la animacion. */
.modal {
  animation: v2ModalIn .24s ease-out !important;
}
@keyframes v2ModalIn {
  from { opacity: 0; transform: translate(-50%,-50%) scale(.98); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
.overlay {
  animation: v2OverlayIn .24s ease-out;
}
@keyframes v2OverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- 11. CHIPS del plantel ---------- */
.roster-chip {
  transition: transform .25s cubic-bezier(.2,.9,.25,1), background .25s ease;
}
.roster-chip:hover {
  transform: translateY(-2px);
  background: var(--card-hover);
}

/* ---------- 12. VERSION en el pie ---------- */
.app-version {
  font-size: .72rem;
  color: var(--text-dim);
  letter-spacing: .04em;
}

/* ---------- ACCESIBILIDAD ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .pub-hero::before { animation: none; }
  .pub-header__shield,
  .app-header__shield { animation: none; }
}