:root{
  /* Paleta del calendario Padelante (tema claro) */
  --bg:#eef1f7;            /* fondo de página */
  --surface:#ffffff;       /* tarjetas, modales, inputs */
  --surface-alt:#e2e8f3;   /* elementos activos/elevados */
  --input-bg:#f4f6fb;
  --text:#16233f;          /* texto principal (azul marino) */
  --text-soft:#5c6678;     /* texto secundario */
  --border:rgba(13,27,62,.12);
  --hover:rgba(13,27,62,.04);
  --shadow:0 8px 28px rgba(13,27,62,.12);
  --accent:#55b830;        /* verde de acción/foco */
  --accent-lime:#c4e000;   /* amarillo lima (acento de marca) */
  --overlay:rgba(13,27,62,.45);
  --radio:22px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Manrope',system-ui,sans-serif;
  color:var(--text);
  background:var(--bg);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

/* Fondo claro con leve halo verde y naranja */
.fondo{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(85,184,48,.10), transparent 60%),
    radial-gradient(900px 600px at 5% 108%, rgba(196,224,0,.10), transparent 55%),
    var(--bg);
}
/* Líneas de pista muy sutiles */
.lineas{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.6;
  background-image:
    linear-gradient(to right, rgba(13,27,62,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13,27,62,.045) 1px, transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(circle at 50% 28%, #000 30%, transparent 78%);
          mask-image:radial-gradient(circle at 50% 28%, #000 30%, transparent 78%);
}

/* ====== HEADER + HERO INTEGRADO ====== */
header{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:28px;
  padding:24px clamp(20px,5vw,64px) 16px;
  max-width:1280px; margin:0 auto;
}
.hero-mini{text-align:center; max-width:680px; margin:0 auto}
.hero-mini .kicker{margin-bottom:12px}
.hero-mini h1{
  font-family:'Fraunces',serif; font-weight:600;
  font-size:clamp(1.5rem,3vw,2.5rem); line-height:1.1;
  letter-spacing:-.01em; color:var(--text); margin-bottom:10px;
}
.hero-mini h1 em{
  font-style:italic;
  background:linear-gradient(transparent 58%, var(--accent-lime) 58%);
  padding:0 .08em; border-radius:2px;
}
.hero-mini p{font-size:.96rem; color:var(--text-soft); line-height:1.5; margin:0 auto; max-width:560px}
.marca{display:flex; align-items:center; gap:14px}
.marca .logo-img{height:58px; width:auto; display:block; filter:drop-shadow(0 4px 10px rgba(13,27,62,.18))}
.marca .txt b{
  font-family:'Fraunces',serif; font-weight:600;
  font-size:1.18rem; letter-spacing:.2px; display:block; line-height:1; color:var(--text);
}
.marca .txt span{font-size:.72rem; color:var(--text-soft); letter-spacing:.18em; text-transform:uppercase}

.btn-login{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:600; font-size:.92rem;
  padding:12px 20px; border-radius:999px;
  background:var(--accent); color:#fff;
  border:none; cursor:pointer; text-decoration:none;
  box-shadow:0 8px 20px -8px rgba(85,184,48,.6);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-login:hover{transform:translateY(-2px); background:#4aa329; box-shadow:0 14px 26px -8px rgba(85,184,48,.7)}
.btn-login svg{width:18px;height:18px}

/* ====== KICKER ====== */
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent);
  background:rgba(85,184,48,.12); border:1px solid rgba(85,184,48,.3);
  padding:6px 14px; border-radius:999px;
}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(85,184,48,.7)}

/* ====== GRID DE SECCIONES ====== */
.grid{
  max-width:1280px; margin:0 auto;
  padding:clamp(30px,5vw,56px) clamp(20px,5vw,64px) 40px;
  display:grid; gap:18px;
  grid-template-columns:repeat(6,1fr);
}
.card{
  --c:var(--accent); --cs:rgba(85,184,48,.12);
  position:relative; overflow:hidden;
  text-decoration:none; color:inherit;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radio);
  padding:30px 28px;
  min-height:200px;
  display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:var(--shadow);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s;
}
.card.lg{grid-column:span 4}
.card.md{grid-column:span 3}
.card.sm{grid-column:span 2}

/* Colores de categoría (del calendario) por sección */
.card[data-seccion="ligas"]     {--c:#2b86c5; --cs:rgba(43,134,197,.12)}
.card[data-seccion="ranking"]   {--c:#e23744; --cs:rgba(226,55,68,.12)}
.card[data-seccion="calendario"]{--c:#1f9d57; --cs:rgba(31,157,87,.12)}
.card[data-seccion="pozos"]     {--c:#f4722b; --cs:rgba(244,114,43,.12)}
.card[data-seccion="encuestas"] {--c:#8b5cf6; --cs:rgba(139,92,246,.12)}
.card[data-seccion="asociacion"]{--c:#c79a08; --cs:rgba(199,154,8,.13)}

.card::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(420px 200px at 100% 0%, var(--cs), transparent 60%);
  opacity:0; transition:opacity .4s ease;
}
.card:hover{transform:translateY(-6px); border-color:var(--c); box-shadow:0 16px 38px rgba(13,27,62,.16)}
.card:hover::after{opacity:1}
.card:hover .flecha{transform:translate(4px,-4px); color:var(--c)}

.icono{
  width:54px; height:54px; border-radius:16px;
  display:grid; place-items:center;
  background:linear-gradient(150deg, var(--cs), rgba(255,255,255,0));
  border:1px solid var(--border);
  position:relative; z-index:1;
}
.icono svg{width:28px;height:28px;stroke:var(--c)}
.card-txt{position:relative; z-index:1}
.card h3{
  font-family:'Fraunces',serif; font-weight:600;
  font-size:1.5rem; letter-spacing:-.01em; margin:18px 0 8px; color:var(--text);
}
.card p{font-size:.92rem; color:var(--text-soft); line-height:1.5}
.flecha{
  position:absolute; top:28px; right:28px; z-index:1;
  width:22px;height:22px; color:var(--text-soft);
  transition:transform .35s ease, color .35s ease;
}
/* Bloques aún sin funcionalidad */
.card.proximamente{cursor:default}
.card.proximamente:hover{transform:none; border-color:var(--border); box-shadow:var(--shadow)}
.card.proximamente:hover::after{opacity:0}
.tag-pronto{
  position:absolute; top:28px; right:28px; z-index:1;
  font-size:.64rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-soft);
  background:var(--surface-alt); border:1px solid var(--border);
  padding:5px 10px; border-radius:999px;
}

/* Tarjeta de acceso destacada */
.card.acceso{
  --c:var(--accent); --cs:rgba(85,184,48,.12);
  grid-column:span 6;
  flex-direction:row; align-items:center; justify-content:space-between;
  gap:40px; flex-wrap:wrap; min-height:auto;
  background:var(--surface);
  border-color:var(--border);
  cursor:default;
}
.card.acceso:hover{transform:none; border-color:var(--border); box-shadow:var(--shadow)}
.card.acceso:hover::after{opacity:0}
.card.acceso .acceso-info{flex:1 1 160px; min-width:0}
.card.acceso .acceso-info .icono{margin-bottom:16px}
.card.acceso h3{margin:0 0 8px}
.card.acceso .acceso-info p{font-size:.96rem}
.acceso-form{flex:0 0 300px; width:360px; max-width:100%; position:relative; z-index:1}
.acceso-form .campo{margin-bottom:13px}
.acceso-links{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; margin-top:14px; font-size:.86rem}
.acceso-links a{color:var(--text-soft); text-decoration:none; cursor:pointer; transition:color .2s}
.acceso-links a:hover{color:var(--accent)}

/* ====== FOOTER ====== */
footer{
  max-width:1280px; margin:0 auto;
  padding:30px clamp(20px,5vw,64px) 50px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  color:var(--text-soft); font-size:.85rem;
  border-top:1px solid var(--border);
}
footer a{color:var(--text-soft); text-decoration:none; transition:color .2s}
footer a:hover{color:var(--accent)}

/* ====== Animación de entrada ====== */
@keyframes subir{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:translateY(0)}}
.anim{opacity:0; animation:subir .7s cubic-bezier(.2,.7,.2,1) forwards}

/* ====== MODALES (login / registro / recuperar) ====== */
.overlay{
  position:fixed; inset:0; z-index:100;
  display:none; align-items:center; justify-content:center;
  padding:20px;
  background:var(--overlay);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.overlay.activo{display:flex; animation:fade .25s ease}
@keyframes fade{from{opacity:0} to{opacity:1}}

.modal{
  position:relative; width:100%; max-width:440px;
  max-height:92vh; overflow-y:auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:24px; padding:34px 32px;
  box-shadow:0 30px 70px rgba(13,27,62,.28);
  animation:pop .3s cubic-bezier(.2,.8,.2,1);
}
.modal.ancho{max-width:560px}
@keyframes pop{from{opacity:0; transform:translateY(18px) scale(.98)} to{opacity:1; transform:none}}

.modal .cerrar{
  position:absolute; top:18px; right:18px;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--hover); border:1px solid var(--border);
  color:var(--text-soft); transition:.2s;
}
.modal .cerrar:hover{color:var(--accent); border-color:rgba(85,184,48,.4)}
.modal .cerrar svg{width:16px;height:16px}

.modal .m-logo{height:46px; margin-bottom:14px; filter:drop-shadow(0 4px 10px rgba(13,27,62,.18))}
.modal h2{font-family:'Fraunces',serif; font-weight:600; font-size:1.7rem; letter-spacing:-.01em; margin-bottom:6px; color:var(--text)}
.modal .sub{color:var(--text-soft); font-size:.92rem; margin-bottom:22px}

.campo{margin-bottom:15px}
.campo label{display:block; font-size:.8rem; font-weight:600; color:var(--text-soft); margin-bottom:7px; letter-spacing:.02em}
.campo input, .campo select{
  width:100%; padding:12px 14px; font-family:inherit; font-size:.95rem;
  color:var(--text); background:var(--input-bg);
  border:1px solid var(--border); border-radius:12px; outline:none;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.campo input::placeholder{color:rgba(92,102,120,.6)}
.campo input:focus, .campo select:focus{border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3px rgba(85,184,48,.15)}
.campo select option{background:var(--surface); color:var(--text)}

.fila{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:520px){.fila{grid-template-columns:1fr}}

.check{display:flex; align-items:flex-start; gap:10px; margin:6px 0 20px; font-size:.85rem; color:var(--text-soft); line-height:1.45}
.check input{width:18px; height:18px; margin-top:2px; accent-color:var(--accent); flex:none; cursor:pointer}
.check a{color:var(--accent); text-decoration:none}
.check a:hover{text-decoration:underline}
.reg-legal-nota{font-size:.82rem; color:var(--text-soft); line-height:1.45; margin:4px 0 18px}
.reg-legal-nota a{color:var(--accent); text-decoration:none}
.reg-legal-nota a:hover{text-decoration:underline}

.btn-full{
  width:100%; padding:13px; font-family:inherit; font-weight:700; font-size:.98rem;
  background:var(--accent); color:#fff; border:none; border-radius:12px; cursor:pointer;
  box-shadow:0 10px 22px -8px rgba(85,184,48,.55); transition:transform .2s, box-shadow .2s, background .2s, opacity .2s;
}
.btn-full:hover{transform:translateY(-2px); background:#4aa329; box-shadow:0 14px 28px -8px rgba(85,184,48,.7)}
.btn-full:disabled{opacity:.55; cursor:not-allowed; transform:none}

.m-links{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:18px; font-size:.86rem}
.m-links a{color:var(--text-soft); text-decoration:none; cursor:pointer; transition:color .2s}
.m-links a:hover{color:var(--accent)}

.aviso{
  display:none; padding:11px 14px; border-radius:11px; font-size:.86rem;
  margin-bottom:16px; line-height:1.4;
}
.aviso.error{display:block; background:rgba(229,57,53,.1); border:1px solid rgba(229,57,53,.3); color:#c0392b}
.aviso.ok{display:block; background:rgba(85,184,48,.12); border:1px solid rgba(85,184,48,.35); color:#2f7d18}

/* ====== Estados de sesión (anónimo / logueado) ====== */
.solo-logueado{display:none}                           /* oculto hasta iniciar sesión */
body.logueado .solo-logueado.permitido{display:flex}   /* visible solo si el usuario tiene acceso */
body.logueado .solo-anonimo{display:none}

.user-menu{display:none; align-items:center; gap:14px; justify-content:flex-end}
body.logueado .user-menu{display:flex}
.user-nick{font-size:.92rem; color:var(--text-soft); white-space:nowrap; display:inline-flex; align-items:center; gap:7px}
.user-nick .ic-user{width:17px; height:17px; color:var(--accent); flex:none}
.user-nick b{color:var(--text); font-weight:600}
.user-nick a#nick-usuario{color:var(--text); font-weight:600; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s}
.user-nick a#nick-usuario:hover{border-bottom-color:var(--accent)}
a.user-nick{text-decoration:none; cursor:pointer}
a.user-nick:hover b{color:var(--accent)}
.btn-salir{
  display:inline-flex; align-items:center; gap:8px;
  font-family:inherit; font-weight:600; font-size:.9rem;
  padding:10px 18px; border-radius:999px; cursor:pointer;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); transition:border-color .2s, color .2s;
}
.btn-salir:hover{border-color:var(--accent); color:var(--accent)}
.btn-salir svg{width:16px;height:16px}

/* ====== Responsive ====== */
/* Tablet: dos por fila, ordenadas */
@media (max-width:980px) and (min-width:821px){
  .card.lg,.card.md,.card.sm{grid-column:span 3}
}
/* Móvil: SIEMPRE una tarjeta por fila */
@media (max-width:820px){
  .grid{grid-template-columns:1fr; gap:14px; padding-top:14px; padding-bottom:22px}
  .card{min-height:auto; padding:26px 24px}
  .card.lg,.card.md,.card.sm,.card.acceso{grid-column:1 / -1}
  .card.acceso{flex-direction:column; align-items:flex-start; gap:16px; padding:22px 22px}
  .card.acceso .acceso-info .icono{margin-bottom:10px}
  .flecha, .tag-pronto{top:24px; right:24px}
  /* En la zona de bloques (logueado) ocultamos el texto junto al logo */
  body.logueado .marca .txt{display:none}
  header{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"marca boton" "hero hero";
    gap:14px 12px; padding:18px 20px 6px;
  }
  .marca{grid-area:marca; min-width:0}
  .marca .txt{min-width:0}
  .marca .txt b, .marca .txt span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block}
  header .acceso-box{grid-area:boton; justify-self:end; min-width:0}
  .user-menu{flex-direction:column; align-items:flex-end; gap:8px}
  .user-nick{max-width:60vw; overflow:hidden; text-overflow:ellipsis}
  .hero-mini{grid-area:hero; max-width:none}
  .hero-mini p{font-size:.95rem}
  .marca .logo-img{height:50px}
}

/* Pantallas muy estrechas: nick + Salir apilados y pegados a la derecha (más pequeños) */
@media (max-width:520px){
  .marca .txt{display:none}            /* el logo ya incluye el nombre Padelante */
  header .acceso-box{justify-self:end}
  .user-menu{align-items:flex-end}
  .user-nick{font-size:.78rem; max-width:62vw}
  .btn-salir{padding:8px 14px; font-size:.82rem}
  .marca .logo-img{height:44px}
}

/* ====== Cabecera de secciones (páginas que NO son el hub) ====== */
.barra{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  max-width:1100px; margin:0 auto; padding:20px clamp(16px,4vw,40px);
}
.barra .izq{display:flex; align-items:center; gap:14px; min-width:0}
.barra .logo-img{height:46px; width:auto; display:block; filter:drop-shadow(0 4px 10px rgba(13,27,62,.18))}
.barra h1{font-family:'Fraunces',serif; font-weight:600; font-size:1.2rem; letter-spacing:-.01em; color:var(--text); margin:0}
.barra .der{display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:flex-end}
.volver{display:inline-flex; align-items:center; gap:7px; font-size:.88rem; font-weight:600; color:var(--text-soft); text-decoration:none; transition:color .2s}
.volver:hover{color:var(--accent)}
.contenido{max-width:1100px; margin:0 auto; padding:10px clamp(16px,4vw,40px) 60px}

@media (max-width:680px){
  .barra{flex-wrap:wrap}
  .barra h1{font-size:1.05rem}
  .barra .volver{display:none}
}

/* ======================================================================
   CABECERA COMÚN (hub + secciones) + menú hamburguesa
   ====================================================================== */
.cab{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:14px;
  max-width:1280px; margin:0 auto; padding:18px clamp(20px,5vw,64px) 8px;
}
.cab--seccion{max-width:1100px; padding:20px clamp(16px,4vw,40px) 8px}
.cab .cab-izq{display:flex; align-items:center; gap:14px; min-width:0}
.cab .cab-izq > a{display:flex; line-height:0}
.cab .logo-img{height:46px; width:auto; display:block; filter:drop-shadow(0 4px 10px rgba(13,27,62,.18))}
.cab .cab-izq h1{
  font-family:'Fraunces',serif; font-weight:600; font-size:1.3rem; letter-spacing:-.01em;
  color:var(--text); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.cab-burger{
  flex:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--border);
  background:var(--surface); cursor:pointer; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:5px; transition:.18s; box-shadow:var(--shadow); padding:0;
}
.cab-burger:hover{border-color:var(--accent)}
.cab-burger span{display:block; width:20px; height:2px; background:var(--text); border-radius:2px; transition:.25s}
.cab-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.cab-burger.open span:nth-child(2){opacity:0}
.cab-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.cab-menu-wrap{position:relative; flex:none}
.cab-nav{
  position:absolute; top:calc(100% + 8px); right:0; width:300px; max-width:88vw;
  background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(-8px); transition:.2s; z-index:60;
}
.cab-nav.open{opacity:1; visibility:visible; transform:translateY(0)}
.cab-nav-user{display:flex; align-items:center; gap:10px; padding:10px 12px 12px; color:var(--text-soft); font-size:.85rem}
.cab-nav-user b{display:block; color:var(--text); font-size:.98rem; font-weight:700}
.cab-nav-user svg{width:34px; height:34px; padding:7px; border-radius:10px; background:rgba(85,184,48,.12); color:var(--accent); flex:none}
.cab-nav a{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:11px;
  color:var(--text); text-decoration:none; font-size:.95rem; font-weight:600; transition:.15s;
}
.cab-nav a:hover{background:var(--hover)}
.cab-nav a svg{width:20px; height:20px; flex:none; color:var(--text-soft)}
.cab-nav a.activo{background:rgba(85,184,48,.12); color:#2f7d18}
.cab-nav a.activo svg{color:var(--accent)}
.cab-nav a.pronto{opacity:.55; cursor:default; pointer-events:none}
.cab-nav .pronto-tag{
  margin-left:auto; font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-soft); background:var(--surface-alt); padding:3px 7px; border-radius:999px;
}
.cab-nav hr{border:none; border-top:1px solid var(--border); margin:6px 8px}
.cab-nav a.salir{color:#c0392b}
.cab-nav a.salir svg{color:#c0392b}
.cab-nav a.salir:hover{background:rgba(229,57,53,.08)}

/* Raya del titular de la zona de acceso, en verde claro */
.card.acceso .acceso-info .acceso-top{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.card.acceso .acceso-info .acceso-top .icono{margin-bottom:0}
.card.acceso .acceso-info .acceso-top .kicker{margin-bottom:0}
.card.acceso .acceso-info h3 em{font-style:normal; background:linear-gradient(transparent 58%, #a3df89 58%)}

@media (max-width:520px){
  .cab .cab-izq h1{font-size:1.08rem}
  .cab .logo-img{height:42px}
}