:root {
  /* Paleta base (referencia). No pisa los colores de style.css si se carga antes. */
  --ffcv-blue-dark: #001C47;
  --ffcv-blue-light: #3871D7;
  --ffcv-orange: #D8641C;
  --ffcv-white: #FFFFFF;
  --text-dark: #222222;

  /* Tokens de diseño escalables */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.10);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.15);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --container-max: 1200px;
}
.container-wide { max-width: var(--container-max); margin: 0 auto; padding: 0 15px; }

/* Tipografía global unificada (redondeada, clara) */
html, body {
  font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Segoe UI Rounded", Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--text-dark);
}

/* Cabecera con colores más vivos y degradados decorativos */

/* --- Rediseño cabecera FFCV: azul cielo noche, gama LUNA, logos naranja neón difuminados --- */
.main-header {
  /* Neutralizada: sin fondo ni overlays para permitir solo header_bg.jpg desde custom.css */
  background: none !important;
  color: var(--ffcv-white);
  position: relative;
  overflow: hidden;
  min-height: 140px;
}
.main-header::before {
  /* Sin gradiente superpuesto */
  display: none !important;
  content: none !important;
  background: none !important;
}
.main-header::after {
  /* Sin logos decorativos superpuestos */
  display: none !important;
  content: none !important;
  background: none !important;
}
#current-page-title { color: #fff; font-weight: 900; letter-spacing: .2px; margin-left: 8px; text-shadow: 0 2px 12px rgba(0,0,0,0.18); }
.title-search-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Barra de acciones: botones centrados y estilo consistente */
#toolbar-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
#toolbar-actions .btn,
#toolbar-actions a,
#toolbar-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-weight: 800;
  text-decoration: none;
  border: 1px solid #d7e1ff;
  color: #0b2d6f;
  background: #eef3ff;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, background .12s ease;
}
#toolbar-actions .btn:hover,
#toolbar-actions a:hover,
#toolbar-actions button:hover { background: #e3ebff; transform: translateY(-1px); }
#toolbar-actions .btn:active,
#toolbar-actions a:active,
#toolbar-actions button:active { transform: translateY(0); }

/* Iconos simplificados para la toolbar (no UEFA) */
.btn .icon { width: 18px; height: 18px; display: inline-block; background-size: contain; background-repeat: no-repeat; }
.btn .icon-ics { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%230b2d6f'><path d='M7 2h10a2 2 0 0 1 2 2v2H5V4a2 2 0 0 1 2-2zm12 8H5v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V10zm-9 3h6v2H10v-2z'/></svg>"); }
.btn .icon-gcal { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%230b2d6f'><path d='M6 2h2v2h8V2h2v2h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2V2zm0 6h12v12H6V8z'/></svg>"); }
.btn .icon-theme { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%230b2d6f'><path d='M12 3a9 9 0 1 0 9 9c0-4.97-4.03-9-9-9zm0 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14z'/></svg>"); }

/* Márgenes interiores en listados de fechas/partidos */
#view-partidos { padding-left: 8px; padding-right: 8px; }
.fecha-partidos .fecha-titulo { padding-left: 8px; }
.fecha-partidos .cards { padding: 8px; }

/* Subtítulo y botón imprimir en línea (derecha) */
#res-titulo { display: none; }
#res-titulo.is-flex { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; }
#res-titulo .right-actions { display: inline-flex; align-items:center; gap:8px; }

/* Compatibilidad de color: sRGB + P3 cuando esté disponible */
@supports (color: color(display-p3 1 1 1)) {
  :root {
    /* Colores más vibrantes en pantallas P3 */
    --ffcv-blue-dark: color(display-p3 0.06 0.15 0.36);
    --ffcv-blue-light: color(display-p3 0.26 0.49 0.88);
    --ffcv-orange: color(display-p3 0.85 0.42 0.16);
    --text-dark: color(display-p3 0.15 0.16 0.18);
  }
  .main-header { background: none !important; }
}

/* Soporte básico para tema oscuro (opt-in): añadir data-theme="dark" en <html> o <body> */
:root[data-theme="dark"] {
  --ffcv-blue-dark: #0b1b33;
  --ffcv-blue-light: #5b8cff;
  --ffcv-orange: #ff7a3a;
  --ffcv-white: #0f141a;
  --text-dark: #e5e9ef;
}

/* Utilidades ligeras para acelerar mejoras de UI */
.u-hidden { display: none !important; }
.u-flex { display: flex !important; }
.u-grid { display: grid !important; }
.u-center { display: flex !important; align-items: center; justify-content: center; }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-radius-md { border-radius: var(--radius-md); }
.u-shadow-sm { box-shadow: var(--shadow-sm); }
.u-shadow-md { box-shadow: var(--shadow-md); }
.u-shadow-lg { box-shadow: var(--shadow-lg); }

.container-wide { max-width: var(--container-max); margin: 0 auto; padding: 0 15px; }

/* Botón base reutilizable (no interfiere con .m-btn existente) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #d7e1ff;
  color: #2457ff;
  background: #eef3ff;
}
.btn:hover { background: #e3ebff; }

/* Etiquetas compactas */
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #eef3ff; color: #2457ff; font-weight: 700; font-size: 12px; }