@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:wght@400;500;600&family=Oswald:wght@400;500;600&display=swap');

:root{
  --night: #071a14;
  --pitch: #0e3a29;
  --pitch-2: #145338;
  --line: #eef3ea;
  --gold: #f2a900;
  --card: #e0344a;
  --ink: #cfe7d8;
}

*{box-sizing:border-box; margin:0; padding:0;}

html,body{
  color: var(--line);
  font-family:'Barlow Condensed', sans-serif;
  overflow-x:hidden;
  background:
    /* halo suave dorado arriba */
    radial-gradient(ellipse 60% 30% at 50% -5%, rgba(242,169,0,0.10), transparent 70%),
    /* césped con rayado sutil horizontal (barber pole) */
    repeating-linear-gradient(
      180deg,
      #1e5a3f 0px,
      #1e5a3f 60px,
      #235f43 60px,
      #235f43 120px
    );
  background-attachment: fixed;
}

/* Textura muy suave sobre el pasto (casi imperceptible) */
body::before {
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px);
  background-size: 10px 10px;
}

/* Viñeta oscura en los bordes */
body::after {
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  box-shadow: inset 0 0 200px 40px rgba(0,0,0,0.5);
}

a{ color: var(--gold); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Los divs .sky/.beam/.pitch del layout viejo se ocultan.
   Se dejan los selectores por compatibilidad con las páginas que los renderizan. */
.sky, .beam, .pitch { display:none; }

/* ---------- LAYOUT ---------- */
.wrap{
  position:relative; z-index:2;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center;
  padding: 6vh 5vw 8vh;
  text-align:center;
}

.eyebrow{
  font-family:'Oswald', sans-serif;
  letter-spacing:.35em;
  font-size:clamp(.7rem,1.4vw,.85rem);
  color: var(--gold);
  text-transform:uppercase;
  border:1px solid rgba(242,169,0,0.5);
  padding:.5em 1.2em;
  border-radius:999px;
  margin-bottom:2.2rem;
  background:rgba(242,169,0,0.06);
}

h1{
  font-family:'Anton', sans-serif;
  font-weight:400;
  line-height:.92;
  letter-spacing:.01em;
  font-size:clamp(2.8rem, 9vw, 6.5rem);
  text-transform:uppercase;
  color:var(--line);
  text-shadow: 0 0 40px rgba(242,169,0,0.15);
}
h1 span{
  display:block;
  color:var(--gold);
  -webkit-text-stroke: 1px rgba(255,255,255,0.08);
}

/* Post-login: títulos más discretos, acordes al contenido. */
body.logged h1{
  font-size:clamp(1.8rem, 4.5vw, 3.2rem);
  text-shadow:none;
  margin-bottom:.2rem;
}
body.logged h1 span{
  font-size:.65em;
  -webkit-text-stroke:0;
  letter-spacing:.02em;
  margin-top:.1rem;
}
body.logged .sub{
  font-size:clamp(.95rem, 1.8vw, 1.1rem);
  margin-top:.8rem;
}

.sub{
  max-width:34rem;
  margin: 1.6rem auto 0;
  font-size:clamp(1.1rem,2.2vw,1.4rem);
  color:var(--ink);
  font-weight:400;
  line-height:1.4;
}

/* ---------- SCOREBOARD ---------- */
.board{
  margin-top:3.2rem;
  display:flex; align-items:stretch; gap:clamp(.6rem,2vw,1.6rem);
  background:linear-gradient(180deg,#0a2419,#071a11);
  border:1px solid rgba(238,243,234,0.12);
  border-radius:10px;
  padding:1.1rem clamp(1rem,3vw,2.2rem);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.02);
}
/* Cada celda es una columna: la etiqueta arriba y el dato pegado al fondo,
   así todos los rótulos quedan a la misma altura aunque los valores tengan
   tamaños distintos o una nota extra debajo. */
.board > div:not(.div){
  display:flex; flex-direction:column; justify-content:flex-start;
  min-width:0;
}
.board .lbl{
  font-family:'Oswald', sans-serif;
  font-size:.65rem;
  letter-spacing:.25em;
  color:rgba(207,231,216,0.55);
  text-transform:uppercase;
  display:block;
  margin-bottom:.35rem;
  line-height:1.2;
}
.board .val{
  display:block;
  margin-top:auto;            /* empuja el dato al fondo de la celda */
  font-family:'Anton', sans-serif;
  font-size:clamp(1.6rem,4vw,2.4rem);
  color:var(--gold);
  letter-spacing:.05em;
  line-height:1.1;
}
.board .div{
  width:1px; height:2.6rem;
  align-self:center;
  flex:0 0 auto;
  background:rgba(238,243,234,0.12);
}

/* ---------- LINEUP / FEATURES ---------- */
.lineup{
  margin-top:4rem;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.1rem;
  width:100%;
  max-width:60rem;
}
.kit{
  background:rgba(238,243,234,0.04);
  border:1px solid rgba(238,243,234,0.4);
  border-radius:12px;
  padding:1.6rem 1.2rem;
  text-align:left;
  position:relative;
  overflow:hidden;
  box-shadow: 0 0 0 1px rgba(238,243,234,0.08), 0 4px 14px rgba(0,0,0,0.25);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.kit:hover{
  border-color: var(--gold);
  box-shadow:
    0 0 0 1px rgba(242,169,0,0.35),
    0 0 24px rgba(242,169,0,0.20),
    0 10px 24px rgba(0,0,0,0.35);
  transform: translateY(-2px);
}
a.kit:hover{ text-decoration:none; }
.kit::before{
  content:attr(data-n);
  position:absolute; top:-.3rem; right:.4rem;
  font-family:'Anton', sans-serif;
  font-size:3.6rem;
  color:rgba(238,243,234,0.05);
}
.kit h3{
  font-family:'Oswald', sans-serif;
  font-size:1.05rem;
  letter-spacing:.03em;
  color:var(--line);
  text-transform:uppercase;
  margin-bottom:.5rem;
}
.kit p{
  font-size:1.02rem;
  color:var(--ink);
  line-height:1.35;
}

/* ---------- CARD (CTA) ---------- */
.cta{
  margin-top:3.4rem;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
}
.cta .card-icon{
  width:1.4rem; height:2rem;
  background:var(--card);
  border-radius:3px;
  box-shadow:0 6px 14px rgba(230,52,74,0.4);
}
.cta p{
  font-family:'Oswald', sans-serif;
  font-size:.95rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(207,231,216,0.7);
}
.cta strong{ color:var(--line); }

/* ---------- BOTONES / FORMULARIOS (fase 1+) ---------- */
.btn{
  display:inline-block;
  font-family:'Oswald', sans-serif;
  font-size:.95rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  padding:.85em 1.8em;
  border-radius:8px;
  border:1px solid var(--gold);
  background:var(--gold);
  color:var(--night);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(242,169,0,0.35); text-decoration:none; }
.btn.ghost{ background:transparent; color:var(--gold); }
.btn.ghost:hover{ background:rgba(242,169,0,0.08); }
.btn.danger{ background:var(--card); border-color:var(--card); color:#fff; }

.field{ display:block; margin:1rem 0; text-align:left; width:100%; }
.field label{
  display:block;
  font-family:'Oswald', sans-serif;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(207,231,216,0.7);
  margin-bottom:.4rem;
}
.field input, .field select, .field textarea{
  width:100%;
  background:rgba(238,243,234,0.04);
  border:1px solid rgba(238,243,234,0.15);
  border-radius:8px;
  padding:.85rem 1rem;
  color:var(--line);
  font-family:inherit;
  font-size:1rem;
  outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--gold);
  background:rgba(242,169,0,0.05);
}

/* Radios y checkboxes: la regla de arriba (pensada para inputs de texto) los
   estiraba al 100% del ancho con padding y borde. Aquí se revierte. */
.field input[type="checkbox"],
.field input[type="radio"]{
  width:auto;
  flex:0 0 auto;
  margin:0;
  padding:0;
  border:none;
  border-radius:0;
  background:none;
  accent-color: var(--gold);
}
.field input[type="checkbox"]:focus,
.field input[type="radio"]:focus{
  background:none;
  border:none;
  outline:2px solid rgba(242,169,0,0.55);
  outline-offset:2px;
}

/* Etiqueta de una OPCIÓN (junto a un radio/checkbox), no de un campo:
   sin uppercase ni letter-spacing, en una sola línea con su control. */
label.opt,
.field label.opt{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:0;
  font-family:'Barlow Condensed', sans-serif;
  font-size:.95rem;
  letter-spacing:normal;
  text-transform:none;
  color:var(--ink);
  line-height:1.4;
  cursor:pointer;
}
label.opt small{ color:rgba(207,231,216,0.45); }

/* Lista vertical de opciones: un renglón por opción. */
.opt-group{ display:flex; flex-direction:column; gap:.55rem; margin-top:.45rem; }

.card{
  background:linear-gradient(180deg,#0a2419,#071a11);
  border:1px solid rgba(238,243,234,0.12);
  border-radius:12px;
  padding:2rem;
  max-width:30rem;
  width:100%;
  margin:2rem auto;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* Tablas de listado dentro de .card ------------------------------------
   text-align:left es OBLIGATORIO aquí: .wrap centra todo el contenido y
   los <td> heredaban ese centrado, mientras los <th> del thead sí traen
   text-align:left inline. Resultado: título a la izquierda y dato al
   centro en toda columna que no declarara alineación propia.
   El padding evita que una cifra alineada a la derecha choque con el
   texto de la columna siguiente; las orillas van a 0 para cuadrar con el
   borde de la card. Cualquier text-align/padding inline gana sobre esto. */
.card table{ border-collapse:collapse; text-align:left; }
.card table th,
.card table td{
  padding:.55rem .7rem;
  vertical-align:middle;
}
.card table th:first-child,
.card table td:first-child{ padding-left:0; }
.card table th:last-child,
.card table td:last-child{ padding-right:0; }

.alert{
  padding:.9rem 1.1rem;
  border-radius:8px;
  margin:1rem 0;
  font-size:.95rem;
  border:1px solid transparent;
}
.alert.error{ background:rgba(224,52,74,0.1); border-color:rgba(224,52,74,0.4); color:#f6bcc6; }
.alert.ok{ background:rgba(94,196,120,0.1); border-color:rgba(94,196,120,0.4); color:#c5ecd0; }
.alert.info{ background:rgba(242,169,0,0.08); border-color:rgba(242,169,0,0.35); color:#f7dda0; }

/* ---------- QUINIELA: filas de partidos + radios L/E/V ---------- */
.match-row{
  display:grid;
  grid-template-columns: 2fr 1.6fr;
  gap:1rem;
  align-items:center;
  padding:1rem 0;
  border-top:1px solid rgba(238,243,234,0.08);
}
.match-row:first-of-type{ border-top:none; }
.match-row .match-info{
  min-width:0;
}
.match-row .match-league{
  font-family:'Oswald', sans-serif;
  font-size:.65rem;
  letter-spacing:.2em;
  color:rgba(207,231,216,0.55);
  text-transform:uppercase;
  margin-bottom:.2rem;
}
.match-row .match-teams{
  font-size:1rem;
  color:var(--line);
  line-height:1.3;
}
.match-row .match-teams strong{ color:var(--line); }
.match-row .match-teams .vs{ color:rgba(207,231,216,0.4); margin:0 .4rem; }
/* Escudo + nombre como una sola unidad, para que no se parta el renglón
   entre la imagen y el texto cuando el nombre es largo. */
.match-row .match-teams .team{
  display:inline-flex; align-items:center; gap:.4rem; vertical-align:middle;
}
/* Fondo claro: muchos escudos son azul/negro y sobre el verde oscuro
   desaparecerían. Si el CDN falla, el onerror oculta el <img> y solo
   queda el nombre. */
.match-row .match-teams .team-logo{
  flex:0 0 auto;
  width:22px; height:22px;
  object-fit:contain;
  background:rgba(238,243,234,0.9);
  border-radius:50%;
  padding:2px;
}
.match-row .match-date{
  font-family:'Oswald', sans-serif;
  font-size:.7rem;
  letter-spacing:.15em;
  color:var(--gold);
  text-transform:uppercase;
  margin-top:.15rem;
}

.lev-group{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.4rem;
}
.lev-option{ position:relative; }
.lev-option input{
  position:absolute; opacity:0; pointer-events:none;
}
.lev-option label{
  display:flex; align-items:center; justify-content:center;
  padding:.6rem 0;
  border:1px solid rgba(238,243,234,0.15);
  border-radius:8px;
  background:rgba(238,243,234,0.03);
  cursor:pointer;
  font-family:'Oswald', sans-serif;
  font-size:.9rem;
  letter-spacing:.2em;
  color:rgba(207,231,216,0.7);
  transition:all .12s ease;
  user-select:none;
}
.lev-option label:hover{
  border-color: rgba(242,169,0,0.4);
  color:var(--line);
}
.lev-option input:checked + label{
  background: var(--gold);
  color: var(--night);
  border-color: var(--gold);
  box-shadow:0 4px 12px rgba(242,169,0,0.35);
  font-weight:600;
}
.lev-option input:disabled + label{
  cursor:not-allowed;
  opacity:.55;
}

.goles-total{
  display:flex; align-items:center; gap:1rem;
  padding:1.2rem;
  background:rgba(242,169,0,0.06);
  border:1px solid rgba(242,169,0,0.25);
  border-radius:10px;
  margin-top:1.2rem;
}
.goles-total label{
  font-family:'Oswald', sans-serif;
  font-size:.85rem;
  letter-spacing:.15em;
  color:var(--gold);
  text-transform:uppercase;
  flex:1;
}
.goles-total input{
  width:5rem;
  padding:.7rem;
  font-size:1.4rem;
  font-family:'Anton', sans-serif;
  text-align:center;
  background:var(--night);
  border:1px solid var(--gold);
  border-radius:8px;
  color:var(--gold);
}

@media (max-width:700px){
  .match-row{ grid-template-columns:1fr; gap:.6rem; }
  .lev-option label{ padding:.85rem 0; font-size:1rem; }
}

/* ---------- NAV (para páginas internas) ---------- */
.nav{
  position:relative; z-index:3;
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 5vw;
  border-bottom:1px solid rgba(238,243,234,0.08);
  background:rgba(10,30,20,0.85);
  backdrop-filter: blur(6px);
}
.nav .brand{
  font-family:'Anton', sans-serif;
  font-size:1.4rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--line);
}
.nav .brand span{ color:var(--gold); }
.nav ul{
  list-style:none;
  display:flex;
  gap:1.4rem;
  align-items:center;
}
.nav a{
  font-family:'Oswald', sans-serif;
  font-size:.8rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(207,231,216,0.75);
}
.nav a:hover{ color:var(--gold); text-decoration:none; }
.nav a.active{ color:var(--gold); }

/* ---------- HAMBURGUESA (oculta en desktop) ---------- */
.nav-toggle{
  display:none;
  background:transparent;
  border:1px solid rgba(238,243,234,0.2);
  border-radius:6px;
  cursor:pointer;
  padding:.55rem .65rem;
  transition:border-color .18s ease;
}
.nav-toggle:hover{ border-color:var(--gold); }
.nav-toggle span{
  display:block;
  width:22px; height:2px;
  background:var(--line);
  margin:5px 0;
  border-radius:2px;
  transition:transform .28s ease, opacity .18s ease;
}
/* Convertir a "X" al abrir */
.nav.open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2){ opacity:0; }
.nav.open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

footer{
  margin-top:3.5rem;
  font-family:'Oswald', sans-serif;
  font-size:.75rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(207,231,216,0.35);
  text-align:center;
}

/* Utility: ocultar en móvil (columnas de tabla no esenciales, etc.) */
.hide-mobile{ /* visible en desktop, se oculta en <=700px */ }

@media (max-width:700px){
  .hide-mobile{ display:none !important; }
  .lineup{ grid-template-columns:1fr; }
  .board{ flex-wrap:wrap; justify-content:center; row-gap:1rem; }
  .board .div{ display:none; }
  /* Tablas de listado: hacer las celdas un poco más compactas */
  .card table{ font-size:.85rem !important; }
  .card table th, .card table td{ padding-left:.35rem !important; padding-right:.35rem !important; }
  .card table th:first-child, .card table td:first-child{ padding-left:0 !important; }
  .card table th:last-child,  .card table td:last-child { padding-right:0 !important; }
  /* Botones pequeños dentro de tablas — apilarlos si son varios */
  .card table td form{ display:inline-block; margin:.1rem .05rem; }
  .card table td details{ display:inline-block; margin:.1rem .05rem; }
  /* Botones compactos en móvil (íconos únicamente en columnas de acción) */
  .card table td .btn{ padding:.35em .55em !important; font-size:.85rem !important; }
  .btn-icon{ font-size:1.05rem; line-height:1; }

  /* Menú hamburguesa: nav se apila, ul se despliega verticalmente */
  .nav{ flex-wrap:wrap; padding:.9rem 1.2rem; }
  .nav-toggle{ display:block; }
  .nav ul{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    margin-top:.8rem;
    padding-top:.6rem;
    border-top:1px solid rgba(238,243,234,0.08);
  }
  .nav.open ul{ display:flex; }
  .nav ul li{
    width:100%;
    padding:.7rem 0;
    border-bottom:1px solid rgba(238,243,234,0.04);
  }
  .nav ul li:last-child{ border-bottom:none; }
  .nav ul li a{
    display:block;
    width:100%;
    font-size:.9rem;
    padding:.15rem 0;
  }
}

@media (prefers-reduced-motion: reduce){
  .beam{ animation:none; }
}