/* ==============
   Variables base
   ============== */
:root{
  /* paleta por defecto (se sobrescribe por tema) */
  --bg: #0e1116;
  --bg-soft: #0f1422;
  --card: #111623;
  --border: #22283a;
  --text: #e7e9ee;
  --muted: #cfe2ff;
  --accent: #00c2a8;
}

/* =========
   Temas
   ========= */
/* Tema oscuro */
html[data-theme="dark"]{
  --bg: #0e1116;
  --bg-soft: #0f1422;
  --card: #111623;
  --border: #20283a;
  --text: #e7e9ee;
  --muted: #cfe2ff;
  --accent: #00c2a8;
}

/* Tema claro */
html[data-theme="light"]{
  --bg: #f7f9fc;
  --bg-soft: #f1f5fb;
  --card: #ffffff;
  --border: #d7deea;
  --text: #111827;
  --muted: #324e86;
  --accent: #0ea5e9; /* un azulito agradable en claro */
}

/* =========
   Base
   ========= */
*{ box-sizing:border-box }
html, body { width:100%; max-width:100%; overflow-x:hidden }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* =========
   Layout
   ========= */
.app-header{
  position:sticky; top:0; z-index:10;
  display:flex; gap:.6rem; align-items:center;
  padding:.8rem 1rem;
  background: var(--card);
  border-bottom:1px solid var(--border);
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}
.app-title{
  margin:0; font-size:1rem; font-weight:800;
}
.nav{ margin-left:auto; display:flex; gap:.4rem }
.nav a{
  text-decoration:none; color:var(--muted);
  padding:.4rem .6rem; border-radius:.5rem;
  border:1px solid transparent;
}
.nav a.active{
  background: var(--bg-soft);
  border-color: var(--border);
}
.main{
  max-width:1100px; margin:0 auto; padding:1rem; display:grid; gap:1rem;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}
.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:.8rem; padding:1rem;
}
button{
  background:var(--accent); color:#041019; border:none;
  padding:.5rem .8rem; border-radius:.6rem; font-weight:700; cursor:pointer
}

/* Tema botón */
.theme-btn{
  display:flex; align-items:center; gap:.4rem;
  background:transparent; color:var(--text);
  border:1px solid var(--border); padding:.35rem .6rem; border-radius:.6rem;
}
.theme-btn:hover{ background:var(--bg-soft) }
.theme-icon{ line-height:1 }

/* Utilidades */
.row{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap }

/* =========
   Placeholders para componentes comunes
   (si tienes standings/fixtures, puedes mover sus estilos a cada página)
   ========= */

/* Tabla base reusable (opcional) */
.table{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
}
.table thead th{
  text-align:center;
  font-size:.8rem; font-weight:800; color:var(--muted);
  padding:.4rem .5rem;
  background:var(--card);
  white-space:nowrap;
}
.table tbody tr:nth-child(odd){ background:var(--bg-soft); }
.table tbody tr:nth-child(even){ background:color-mix(in srgb, var(--bg-soft) 85%, var(--bg) 15%); }
.table tbody td{
  padding:.35rem .4rem; font-size:.85rem; text-align:center; white-space:nowrap;
}

/* Num cols compactas */
.table th.num, .table td.num{
  text-align:center;
  font-variant-numeric:tabular-nums;
  width:5ch; max-width:5ch;
}

@media (max-width: 600px){
  .table thead th{ font-size:.7rem; padding:.25rem }
  .table tbody td{ font-size:.75rem; padding:.25rem }
}
.theme-btn {
  background: none;
  border: none;       /* 👈 sin borde */
  outline: none;      /* 👈 sin borde de foco por defecto */
  color: var(--text);
  cursor: pointer;
  font-size: 1.4rem;  /* tamaño del icono */
  padding: .3rem;
  line-height: 1;
}

.theme-btn:hover {
  opacity: 0.8;
}

.theme-btn:focus {
  outline: none;      /* 👈 evita borde azul en algunos navegadores */
}

.theme-btn .mdi {
  vertical-align: middle;
}
/* Marca de página para “scopear” reglas si lo necesitas
   body[data-page="laliga"] .clase { ... } */