/* ---------- FUENTE: BROWN SQUID ---------- */
/* Archivos: brownfont-light / brownfont-bold / brownfont-extrabold */
@font-face {
  font-family: 'Brown Squid';
  src: url('recursos/fuentes/brownfont-light.woff2') format('woff2'),
       url('recursos/fuentes/brownfont-light.woff') format('woff'),
       url('recursos/fuentes/brownfont-light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Brown Squid';
  src: url('recursos/fuentes/brownfont-bold.woff2') format('woff2'),
       url('recursos/fuentes/brownfont-bold.woff') format('woff'),
       url('recursos/fuentes/brownfont-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Brown Squid';
  src: url('recursos/fuentes/brownfont-extrabold.woff2') format('woff2'),
       url('recursos/fuentes/brownfont-extrabold.woff') format('woff'),
       url('recursos/fuentes/brownfont-extrabold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:#0a1f0a;
  --card:#133013;
  --card-2:#0d260d;
  --text:#e8f5e8;
  --muted:#7fa87f;
  --accent:#2d8a2d;
  --accent-soft:rgba(45,138,45,.18);
  --accent2:#4caf50;
  --accent2-soft:rgba(76,175,80,.14);
  --border:rgba(127,168,127,.18);
  --field-green:#1a4d1a;
  --field-green-alt:#174517;
}
[data-theme="dark"]{
  --bg:#0a0a0a;
  --card:#1a1a1a;
  --card-2:#141414;
  --text:#f0f0f0;
  --muted:#888888;
  --accent:#444444;
  --accent-soft:rgba(68,68,68,.25);
  --accent2:#666666;
  --accent2-soft:rgba(102,102,102,.18);
  --border:rgba(136,136,136,.2);
  --field-green:#222222;
  --field-green-alt:#1e1e1e;
}
[data-theme="light"]{
  --bg:#f5f5f5;
  --card:#ffffff;
  --card-2:#fafafa;
  --text:#1a1a1a;
  --muted:#666666;
  --accent:#333333;
  --accent-soft:rgba(51,51,51,.08);
  --accent2:#555555;
  --accent2-soft:rgba(85,85,85,.08);
  --border:rgba(102,102,102,.15);
  --field-green:#e8e8e8;
  --field-green-alt:#e0e0e0;
}
[data-theme="wine"]{
  --bg:#1a0a10;
  --card:#2d1520;
  --card-2:#24101a;
  --text:#f5e8ec;
  --muted:#a87f8f;
  --accent:#8a2d4c;
  --accent-soft:rgba(138,45,76,.2);
  --accent2:#b84068;
  --accent2-soft:rgba(184,64,104,.14);
  --border:rgba(168,127,143,.2);
  --field-green:#3d1a28;
  --field-green-alt:#351622;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{
  font-family:'FuenteBrownSquid', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font-family:inherit}

.header{
  position:sticky;top:0;z-index:50;
  background:var(--card-2);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(10px);
}
.header-inner{
  max-width:1200px;margin:0 auto;
  padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;align-items:center;gap:12px;cursor:pointer}
.logo-img{width:42px;height:42px;border-radius:12px;object-fit:cover}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-title{font-weight:800;font-size:16px;color:var(--text)}
.logo-sub{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

.hamburger{background:none;border:none;cursor:pointer;padding:8px}
.hamburger span{
  display:block;width:24px;height:2px;
  background:var(--text);margin:5px 0;
  transition:all .3s ease;
}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

.menu-overlay{
  position:fixed;inset:0;
  background:var(--card-2);z-index:100;
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.77,0,.175,1);
  overflow-y:auto;
}
.menu-overlay.open{transform:translateX(0)}
.menu-inner{max-width:1200px;margin:0 auto;padding:20px}

.menu-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:28px;padding-bottom:20px;
  border-bottom:1px solid var(--border);
}
.close-menu-btn{
  background:var(--card);border:1px solid var(--border);
  color:var(--text);width:42px;height:42px;
  border-radius:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;transition:all .2s ease;
}
.close-menu-btn:hover{border-color:var(--accent2);color:var(--accent2)}

.menu-item{opacity:0;transform:translateX(30px);transition:opacity .35s ease,transform .35s ease}
.menu-overlay.open .menu-item{opacity:1;transform:translateX(0)}
.menu-overlay.open .menu-item:nth-child(1){transition-delay:.1s}
.menu-overlay.open .menu-item:nth-child(2){transition-delay:.15s}
.menu-overlay.open .menu-item:nth-child(3){transition-delay:.2s}
.menu-overlay.open .menu-item:nth-child(4){transition-delay:.25s}
.menu-overlay.open .menu-item:nth-child(5){transition-delay:.3s}
.menu-overlay.open .menu-item:nth-child(6){transition-delay:.35s}
.menu-overlay.open .menu-item:nth-child(7){transition-delay:.4s}
.menu-overlay.open .menu-item:nth-child(8){transition-delay:.45s}
.menu-overlay.open .menu-item:nth-child(9){transition-delay:.5s}
.menu-overlay.open .menu-item:nth-child(10){transition-delay:.55s}
.menu-overlay.open .menu-item:nth-child(11){transition-delay:.6s}
.menu-overlay.open .menu-item:nth-child(12){transition-delay:.65s}
.menu-overlay.open .menu-item:nth-child(13){transition-delay:.7s}

.theme-section{margin-bottom:28px}
.section-label{
  font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted);margin-bottom:10px;font-weight:700;
}
.theme-buttons{display:flex;gap:10px;flex-wrap:wrap}
.theme-btn{
  width:44px;height:44px;border-radius:10px;
  border:2px solid transparent;cursor:pointer;
  transition:all .2s ease;
}
.theme-btn[data-theme-value="green"]{background:linear-gradient(135deg,#1a4d1a,#2d8a2d)}
.theme-btn[data-theme-value="dark"]{background:linear-gradient(135deg,#1a1a1a,#333333)}
.theme-btn[data-theme-value="light"]{background:linear-gradient(135deg,#f5f5f5,#ffffff);border:1px solid #ddd}
.theme-btn[data-theme-value="wine"]{background:linear-gradient(135deg,#3d1a28,#8a2d4c)}
.theme-btn.active{border-color:var(--accent2);transform:scale(1.1)}

.main-nav{margin-bottom:28px}
.nav-btn{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:10px;
  color:var(--text);font-weight:700;font-size:16px;
  transition:background .15s ease;
}
.nav-btn:hover{background:var(--accent-soft)}
.nav-icon{width:20px;height:20px;object-fit:contain}

.categories{
  margin-bottom:28px;
  border-top:1px solid var(--border);
  padding-top:20px;
}
.cat-btn{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-radius:8px;
  color:var(--muted);font-weight:600;font-size:14px;
  transition:all .15s ease;cursor:pointer;
}
.cat-btn:hover{background:var(--accent-soft);color:var(--text)}
.chevron{width:16px;height:16px;transition:transform .3s ease;opacity:.6}
.chevron.open{transform:rotate(180deg)}

.submenu{max-height:0;overflow:hidden;transition:max-height .35s ease}
.submenu.open{max-height:500px}
.sub-link{
  display:block;padding:8px 16px 8px 44px;
  color:var(--muted);font-size:13px;border-radius:6px;
  transition:all .15s ease;
}
.sub-link:hover{color:var(--text);background:var(--accent-soft)}

.menu-footer{border-top:1px solid var(--border);padding-top:20px}
.legal-btn{
  background:var(--card);border:1px solid var(--border);
  color:var(--muted);padding:10px 16px;border-radius:8px;
  font-size:13px;cursor:pointer;
  transition:all .2s ease;margin-bottom:20px;
}
.legal-btn:hover{border-color:var(--accent2);color:var(--text)}

.data-source{
  display:flex;align-items:center;gap:10px;
  margin-bottom:24px;flex-wrap:wrap;
  font-size:12px;color:var(--muted);
}
.mini-logo{width:24px;height:24px;border-radius:6px}
.data-source strong{color:var(--text);font-weight:800}

.social-icons{display:flex;gap:12px}
.social-icons a{
  width:40px;height:40px;border-radius:10px;
  background:var(--card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  transition:all .2s ease;
}
.social-icons a:hover{border-color:var(--accent2);background:var(--accent-soft)}
.social-icons img{width:18px;height:18px;opacity:.6}
.social-icons a:hover img{opacity:1}

.main-content{max-width:1200px;margin:0 auto;padding:24px 20px}

.date-controls{
  display:flex;align-items:center;gap:12px;
  margin-bottom:24px;flex-wrap:wrap;
}
.date-btn{
  width:40px;height:40px;border-radius:10px;
  background:var(--card);border:1px solid var(--border);
  color:var(--text);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;transition:all .2s ease;
}
.date-btn:hover{border-color:var(--accent2);color:var(--accent2)}
.date-text{font-weight:800;font-size:16px;color:var(--text);min-width:200px;text-align:center}
.calendar-btn{
  margin-left:auto;width:40px;height:40px;border-radius:10px;
  background:var(--accent-soft);border:1px solid var(--accent);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s ease;
}
.calendar-btn:hover{background:var(--accent)}
.calendar-btn img{width:18px;height:18px}

.tabs{
  display:flex;gap:4px;margin-bottom:20px;
  border-bottom:1px solid var(--border);
  overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab-btn{
  background:none;border:none;
  padding:12px 20px;
  font-weight:700;font-size:14px;color:var(--muted);
  cursor:pointer;white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:all .2s ease;
}
.tab-btn.active{
  color:var(--text);
  border-bottom-color:var(--accent2);
  background:var(--accent-soft);
}
.tab-btn:hover:not(.active){color:var(--text)}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(15px)}
  to{opacity:1;transform:translateY(0)}
}
.fade-up{animation:fadeUp .5s ease forwards}

@keyframes hideCard{
  from{opacity:1;transform:translateX(0);max-height:300px}
  to{opacity:0;transform:translateX(30px);max-height:0;margin:0;padding:0;overflow:hidden}
}
.match-wrapper.hiding{animation:hideCard .35s ease forwards}
.match-wrapper{margin-bottom:20px}

.match-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;padding:0 4px;
}

.torneo-link{
  display:flex;align-items:center;gap:8px;
  transition:opacity .2s ease;
}
.torneo-link:hover{opacity:.75}
.torneo-logo{
  width:20px;height:20px;object-fit:contain;flex-shrink:0;
}
.torneo-logo-fallback{
  width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800;color:#fff;flex-shrink:0;
}
.torneo-name{
  font-size:12px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;
}

.close-section{
  background:none;border:none;color:var(--muted);
  cursor:pointer;padding:4px 8px;
  transition:opacity .2s ease;display:flex;align-items:center;
}
.close-section:hover{opacity:.7;color:var(--text)}

.match-card{
  border:1px solid var(--border);border-radius:14px;
  padding:18px 20px;position:relative;overflow:hidden;
  background:repeating-linear-gradient(
    90deg,
    var(--field-green) 0px,var(--field-green) 40px,
    var(--field-green-alt) 40px,var(--field-green-alt) 80px
  );
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.match-card:hover{
  transform:translateY(-2px);border-color:var(--accent2);
  box-shadow:0 8px 30px rgba(0,0,0,.2);
}

.match-meta{
  display:flex;align-items:center;gap:12px;
  margin-bottom:14px;flex-wrap:wrap;
}

.status-live{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:20px;
  background:rgba(220,38,38,.15);color:#ef4444;
  font-size:11px;font-weight:800;
  border:1px solid rgba(220,38,38,.3);
}
.status-live .pulse-dot{
  width:6px;height:6px;border-radius:50%;
  background:#ef4444;animation:pulse 1.5s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.status-finished{
  display:inline-block;padding:3px 10px;border-radius:20px;
  background:var(--accent-soft);color:var(--muted);
  font-size:11px;font-weight:700;border:1px solid var(--border);
}
.status-upcoming{
  display:inline-block;padding:3px 10px;border-radius:20px;
  background:rgba(59,130,246,.12);color:#60a5fa;
  font-size:11px;font-weight:700;
  border:1px solid rgba(59,130,246,.25);
}
.match-hour{font-size:12px;color:var(--muted);font-weight:600}

.teams-row{
  display:flex;align-items:center;gap:12px;
}

.club-link{
  display:flex;align-items:center;gap:10px;flex:1;
  transition:opacity .2s ease;
}
.club-link:hover{opacity:.75}
.club-link.local{
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
}
.club-link.visitante{
  flex-direction: row;
  justify-content: flex-end;
  text-align: right;
}

/* ⭐ ESCUDO: CUADRADO, SIN BORDES REDONDEADOS, SIN FONDO */
.team-escudo{
  width:44px;height:44px;
  object-fit:contain;
  flex-shrink:0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.team-name{font-weight:700;font-size:14px;color:var(--text)}

.score-area{
  flex-shrink:0;min-width:100px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:8px 4px;border-radius:10px;
  transition:background .2s ease;
}
.score-area:hover{background:var(--accent-soft)}
.score-link{
  text-align:center;flex-shrink:0;min-width:80px;
  font-size:22px;font-weight:800;color:var(--text);
  letter-spacing:.02em;cursor:pointer;
  transition:color .2s ease,transform .2s ease;
}
.score-link:hover{color:var(--accent2);transform:scale(1.08)}

.empty-state{
  text-align:center;padding:60px 20px;
  color:var(--muted);font-size:14px;
}

.hidden-controls{
  display:flex;justify-content:flex-end;
  margin-bottom:12px;
}
.show-hidden-btn{
  display:none;align-items:center;gap:6px;
  padding:8px 14px;border-radius:8px;
  background:var(--accent-soft);border:1px solid var(--accent);
  color:var(--accent2);cursor:pointer;
  font-size:12px;font-weight:700;transition:all .2s ease;
}
.show-hidden-btn.visible{display:inline-flex}
.show-hidden-btn:hover{background:var(--accent);color:var(--bg)}

.calendar-modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,.7);z-index:200;display:none;
  align-items:center;justify-content:center;padding:20px;
}
.calendar-modal.open{display:flex}
.calendar-box{
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:24px;max-width:360px;width:100%;
}
.calendar-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.cal-nav{
  background:none;border:none;color:var(--text);
  font-size:20px;cursor:pointer;
  width:32px;height:32px;border-radius:6px;
  transition:background .15s ease;
}
.cal-nav:hover{background:var(--accent-soft)}
.cal-month{font-weight:800;font-size:16px;color:var(--text)}
.calendar-weekdays{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:4px;text-align:center;margin-bottom:8px;
}
.calendar-weekdays span{
  font-size:11px;color:var(--muted);font-weight:700;padding:6px 0;
}
.calendar-grid{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:4px;text-align:center;
}
.cal-day{
  padding:8px 0;font-size:13px;color:var(--text);
  border-radius:8px;cursor:pointer;transition:all .15s ease;
}
.cal-day:hover{background:var(--accent-soft)}
.cal-day.selected{background:var(--accent);color:var(--bg);font-weight:800}
.cal-day.today{border:1px solid var(--accent2)}
.calendar-footer{
  margin-top:16px;padding-top:16px;
  border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;
}
.cal-close-btn{
  padding:8px 16px;border-radius:8px;
  background:var(--card-2);border:1px solid var(--border);
  color:var(--muted);cursor:pointer;
  font-size:13px;transition:all .2s ease;
}
.cal-close-btn:hover{border-color:var(--accent2);color:var(--text)}

@media(max-width:640px){
  .team-name{font-size:12px}
  .score-link{font-size:18px;min-width:60px}
  .score-area{min-width:80px}
  .team-escudo{width:36px;height:36px}
  .date-text{min-width:140px;font-size:14px}
  .club-link{gap:6px}
}