/* CH Autentic Sedavi - pagina publica del calendario (mobile first) */
:root{
  --gold:#f1cf45; --gold-dark:#b08a00; --black:#0d0d0d; --ink:#1f2933; --muted:#6b7280;
  --bg:#f5f2e8; --panel:#fff; --border:#e4dfcf; --blue:#2563eb; --orange:#ea580c; --red:#dc2626;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); font-size:15px; line-height:1.4;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

.cabecera{
  display:flex; align-items:center; gap:14px; padding:16px 16px 14px;
  background:var(--black); color:#fff; border-bottom:4px solid var(--gold);
}
.cabecera .logo{width:52px; height:52px; object-fit:contain; background:#fff; border-radius:12px; padding:3px}
.cabecera h1{margin:0; font-size:20px; line-height:1.15}
.cabecera p{margin:2px 0 0; color:var(--gold); font-size:13px; font-weight:700}

main{max-width:760px; margin:0 auto; padding:14px 12px 8px}

/* ---- Filtro de equipos ---- */
.filtro{margin:0 0 6px; position:sticky; top:0; z-index:5; background:var(--bg); padding:8px 0 6px}
.filtro-titulo{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.limpiar{border:0; background:none; color:var(--blue); font-weight:800; font-size:13px; padding:4px 2px; cursor:pointer}
.filtro-botones{display:flex; flex-wrap:wrap; gap:8px}
.chip-equipo{
  border:1.5px solid var(--border); background:var(--panel); color:var(--ink);
  border-radius:999px; padding:9px 15px; font-size:14px; font-weight:800; cursor:pointer;
  min-height:40px; font-family:inherit;
}
.chip-equipo[aria-pressed="true"]{background:var(--black); border-color:var(--black); color:var(--gold)}
.chip-equipo:focus-visible,.limpiar:focus-visible,.como-llegar:focus-visible{outline:3px solid var(--blue); outline-offset:2px}

/* ---- Secciones ---- */
.seccion{margin:18px 0}
.seccion h2{margin:0 0 10px; font-size:17px; padding-left:10px; border-left:5px solid var(--gold)}
.vacio,.sin-resultados{color:var(--muted); text-align:center; padding:18px 8px}

/* ---- Tarjeta de partido ---- */
.partido{
  background:var(--panel); border:1px solid var(--border); border-radius:16px;
  padding:12px 12px 10px; margin:0 0 10px; box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.partido.cancelado{opacity:.6}
.partido.cancelado .cruce{text-decoration:line-through}
.partido.aplazado{border-style:dashed; border-color:var(--orange)}

.partido-cab{display:flex; justify-content:space-between; gap:10px; align-items:baseline; margin-bottom:8px}
.partido-titulo{font-size:13px; font-weight:800; color:var(--muted)}
.partido-equipo{color:var(--ink)}
.partido-fecha{font-size:14px; text-align:right; white-space:nowrap}

.cruce{display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center}
.lado{display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; min-width:0}
.lado .nombre{font-size:14px; line-height:1.2; overflow-wrap:anywhere}
.lado.propio .nombre{font-weight:800}
.escudo{width:44px; height:44px; object-fit:contain; display:block}
.escudo-vacio{border-radius:50%; background:#eceae0; border:1px dashed #cfc9b4}
.centro{font-size:15px; font-weight:800; color:var(--muted); text-align:center; min-width:34px}
.centro.resultado{font-size:24px; color:var(--black); letter-spacing:.02em; white-space:nowrap}

.partido-pie{margin-top:10px; padding-top:9px; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:14px}
.pista-pendiente{color:var(--muted)}
.como-llegar{
  display:inline-block; background:var(--black); color:var(--gold); text-decoration:none;
  font-weight:800; font-size:13px; border-radius:999px; padding:7px 14px;
}
.chip{display:inline-block; border-radius:999px; padding:3px 10px; font-size:12px; font-weight:800}
.chip-gris{background:#eef0f3; color:#4b5563}
.chip-naranja{background:#ffedd5; color:#c2410c}
.chip-rojo{background:#fee2e2; color:#b91c1c}
.chip-azul{background:#dbeafe; color:#1d4ed8}

/* ---- Calendario mensual ---- */
.calendario{margin:14px 0 18px}
.calendario h2{margin:0 0 10px; font-size:17px; padding-left:10px; border-left:5px solid var(--gold)}
.cal-mes{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:10px 8px 12px; margin:0 0 10px}
.cal-cab{display:flex; align-items:center; justify-content:center; gap:8px; margin:0 0 8px}
.cal-titulo{margin:0; font-size:16px; text-transform:capitalize; text-align:center; flex:1}
.cal-nav{
  width:40px; height:40px; border:1.5px solid var(--border); border-radius:12px; background:var(--panel);
  font-size:22px; line-height:1; font-weight:800; color:var(--ink); cursor:pointer; font-family:inherit;
}
.cal-nav:disabled{opacity:.3; cursor:default}

.cal-rejilla{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px}
.cal-sem{text-align:center; font-size:11px; font-weight:800; color:var(--muted); padding:2px 0 4px}

.cal-dia{position:relative; min-height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center}
.cal-dia .cal-num{font-size:14px; font-weight:700}
.cal-dia.pasado{color:#a8a39a}
.cal-dia.hoy{box-shadow:inset 0 0 0 2px var(--black)}

.cal-btn{
  width:100%; height:100%; min-height:42px; border:0; border-radius:10px; background:transparent;
  color:inherit; font-family:inherit; padding:0; cursor:default; position:relative;
}
.cal-dia.con-partido .cal-btn{background:var(--gold); color:var(--black); cursor:pointer}
.cal-dia.con-partido .cal-num{font-weight:900}
.cal-dia.con-partido.pasado .cal-btn{background:#efe3a8; color:#6b6450}
.cal-btn:focus-visible,.cal-nav:focus-visible{outline:3px solid var(--blue); outline-offset:2px}
.cal-cuenta{
  position:absolute; top:3px; right:3px; min-width:16px; height:16px; padding:0 4px; border-radius:999px;
  background:var(--black); color:var(--gold); font-size:10px; font-weight:900; line-height:16px;
}
.cal-dia:not(.con-partido) .cal-cuenta{display:none}

/* Popup: se muestra al pasar el raton (solo en dispositivos con raton),
   al navegar con teclado, o al pulsar (clase .abierto, puesta por JS) */
.cal-popup{
  display:none; position:absolute; z-index:20; top:calc(100% + 6px); left:50%; transform:translateX(-50%);
  width:max-content; min-width:160px; max-width:250px; text-align:left;
  background:var(--black); color:#fff; border-radius:12px; padding:9px 11px;
  box-shadow:0 10px 24px rgba(0,0,0,.28); font-size:13px;
}
.cal-dia.col-0 .cal-popup,.cal-dia.col-1 .cal-popup{left:0; transform:none}
.cal-dia.col-5 .cal-popup,.cal-dia.col-6 .cal-popup{left:auto; right:0; transform:none}
.cal-dia.con-partido.abierto .cal-popup,
.cal-dia.con-partido:has(.cal-btn:focus-visible) .cal-popup{display:block}
@media (hover:hover){ .cal-dia.con-partido:hover .cal-popup{display:block} }

.cal-popup-fecha{display:block; color:var(--gold); font-size:12px; margin-bottom:5px; text-transform:capitalize}
.cal-popup ul{margin:0; padding:0; list-style:none}
.cal-popup li{display:flex; align-items:center; gap:7px; padding:4px 0; line-height:1.3}
.cal-rival{display:flex; align-items:center; gap:5px; margin-left:auto; padding-left:6px}
.cal-sede{font-size:14px; line-height:1; width:18px; text-align:center}
.cal-vs{font-size:11px; color:#a8a39a}
.cal-escudo{width:22px; height:22px; min-width:22px; object-fit:contain; display:block;
  background:#fff; border-radius:6px; padding:1px}
.cal-rival-nombre{font-size:12px; color:#e9e6dd; max-width:110px; overflow-wrap:anywhere}
.cal-popup li + li{border-top:1px solid rgba(255,255,255,.12)}
.cal-hora{font-variant-numeric:tabular-nums; color:#d7d2c2; margin-right:4px}
.cal-equipo{font-weight:800}
.cal-etq{font-size:11px; color:#93c5fd}
.cal-etq-aplazado{color:#fdba74}

@media (min-width:600px){
  .cal-mes{padding:14px 14px 16px}
  .cal-dia,.cal-btn{min-height:52px}
  .cal-dia .cal-num{font-size:15px}
}

.pie-pagina{max-width:760px; margin:8px auto 28px; padding:0 14px; color:var(--muted); font-size:12px; text-align:center}

@media (min-width:600px){
  .cabecera{padding:18px 24px}
  .partido{padding:14px 16px 12px}
  .escudo{width:52px; height:52px}
  .lado .nombre{font-size:15px}
}