/* ═══ Colores y tipografía de la página web Maverin en el software del recinto ═══
   Azul marino, teal, azul, amarillo y verde del logo, títulos en Anton y textos en Lexend, placas con efecto acrílico.
   Solo cambia la apariencia: la estructura y las funciones son las mismas. Se carga después de style.css y futbol.css. */
@font-face { font-family: 'Anton'; src: url('/fonts/anton.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('/fonts/lexend-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('/fonts/lexend-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('/fonts/lexend-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('/fonts/lexend-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('/fonts/lexend-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
:root {
  --bg: #F4F7FB;
  --surface: #FFFFFF;
  --surface-2: #F6F9FC;
  --ink: #10233D;
  --ink-2: #3B4A60;
  --muted: #5E6B7D;
  --line: #DDE4EC;
  --blue: #2163CF;
  --blue-700: #123769;
  --pastel-1: #EAF2FC;
  --pastel-2: #D6E6FA;
  --pastel-3: #B5D1F4;
  --pastel-4: #8DB6EC;
  --ok: #1E9E55;
  --ok-bg: #E4F6EA;
  --warn: #B87A00;
  --warn-bg: #FFF5DC;
  --bad: #D9434A;
  --bad-bg: #FDECEC;
  --lima: #2E8A86;
  --lima-bg: #E2F3F1;
  --lima-ink: #1F6A67;
  --cancha: #1F9E54;
  --noche: #0A2347;
  --m-navy: #0E2A4F; --m-teal: #2E8A86; --m-amarillo: #F2B42A; --m-verde: #2FAE5F;
  --ac-verde: linear-gradient(150deg, #6BF0A0 0%, #22C262 38%, #12994A 72%, #0B7A39 100%);
  --ac-amarillo: linear-gradient(150deg, #FFEB99 0%, #FFC727 38%, #F5A700 72%, #DB8B00 100%);
  --ac-azul: linear-gradient(150deg, #9CC8FF 0%, #3D8BF2 38%, #2163CF 72%, #16479E 100%);
  --ac-navy: linear-gradient(150deg, #4A7FC7 0%, #1D4F91 38%, #123769 72%, #0A2347 100%);
  --ac-teal: linear-gradient(150deg, #7BF0E4 0%, #1CB8AD 38%, #0E8C84 72%, #0A6B65 100%);
  --brillo: inset 0 1.5px 0 rgba(255, 255, 255, .7), inset 0 -8px 18px rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(255, 255, 255, .2);
  --shadow: 0 1px 2px rgba(14, 42, 79, .05), 0 8px 24px -10px rgba(14, 42, 79, .18);
  --shadow-lg: 0 18px 50px rgba(14, 42, 79, .22);
  --font-anton: 'Anton', 'Impact', sans-serif;
  --font-title: 'Lexend', 'Segoe UI', system-ui, sans-serif; /* títulos chicos y cifras de la agenda: Lexend (se lee mejor) */
  --font: 'Lexend', 'Segoe UI', system-ui, sans-serif;
}
body { font-family: var(--font); font-size: 14px; }
/* Anton solo en títulos grandes y cifras; los subtítulos quedan en Lexend para que se lean bien */
h1, .kpi .val, .side-ilu .txt b { font-family: var(--font-anton); font-weight: 400; letter-spacing: .02em; }
.num { font-weight: 700; }
h2, h3, h4 { font-family: var(--font); font-weight: 700; letter-spacing: 0; }
.main .top h1 { text-transform: uppercase; font-size: 30px; color: var(--m-navy); }
.top .titulo .crumb, .nav .sec-t { font-family: var(--font); font-weight: 700; }
::selection { background: rgba(47, 174, 95, .28); }

/* ── barra lateral azul marino (como la cabecera de la web) ── */
.side { background: linear-gradient(180deg, #16407A 0%, #0E2A4F 45%, #0A2347 100%); border-right: 0; color: #fff; }
.side .brand { border-bottom: 1px solid rgba(255, 255, 255, .1); padding: 18px 18px 14px; }
.side .brand img { width: 92px; margin: 0 auto; }
.side .brand .deporte { justify-content: center; }
.side .brand .app { color: #fff; font-family: var(--font-anton); font-weight: 400; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
.side .brand .empresa { color: #BFD3EA; }
.side::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--m-amarillo) 0 25%, var(--m-verde) 25% 50%, var(--blue) 50% 75%, var(--m-teal) 75%); }
.nav .sec-t { color: var(--m-amarillo); opacity: .9; }
.nav a { color: #DCE7F4; }
.nav a svg.i { color: #9FC1E8; }
.nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav a.on { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.nav a.on svg.i { color: var(--m-amarillo); }
.nav a.on::before { background: var(--m-amarillo); }
.nav .tag { background: rgba(255, 255, 255, .12); color: #DCE7F4; border-color: transparent; }
.side .yo { border-top-color: rgba(255, 255, 255, .1); }
.side .yo .who b { color: #fff; } .side .yo .who span { color: #BFD3EA; }
.side .yo .icon-btn { color: #DCE7F4; background: rgba(255, 255, 255, .08); border-color: transparent; }
.avatar { background: var(--ac-amarillo); color: var(--m-navy); box-shadow: var(--brillo); }
.side-ilu { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.side-ilu .txt { color: #BFD3EA; } .side-ilu .txt b { color: #fff; }
.top { background: rgba(244, 247, 251, .88); }

/* ── botones: acrílico (brillo arriba y sombra de color) ── */
.btn { font-weight: 700; border-radius: 12px; position: relative; overflow: hidden; }
.btn:not(.sec):not(.soft):not(.dark):not(.ok):not(.bad):not(.ghost) { background: var(--ac-verde); border-color: rgba(255, 255, 255, .35); box-shadow: var(--brillo), 0 8px 20px -6px rgba(18, 153, 74, .55); }
.btn:not(.sec):not(.soft):not(.dark):not(.ok):not(.bad):not(.ghost):hover { background: var(--ac-verde); filter: brightness(1.06) saturate(1.08); }
.btn.dark { background: var(--ac-navy); border-color: rgba(255, 255, 255, .3); box-shadow: var(--brillo), 0 8px 20px -6px rgba(18, 55, 105, .55); }
.btn.dark:hover { background: var(--ac-navy); filter: brightness(1.1); }
.btn.ok { background: var(--ac-teal); border-color: rgba(255, 255, 255, .3); box-shadow: var(--brillo); }
.btn.sec { background: linear-gradient(180deg, #fff, #F1F5FA); box-shadow: inset 0 1px 0 #fff, 0 3px 10px -4px rgba(14, 42, 79, .15); }
.btn.soft { background: linear-gradient(180deg, #EEF5FE, #DCEAFB); color: var(--blue-700); box-shadow: inset 0 1px 0 #fff; }
.icon-btn { border-radius: 10px; }

/* ── tarjetas y KPI ── */
.card, .kpi { border-color: #fff; box-shadow: inset 0 1px 0 #fff, 0 14px 34px -18px rgba(14, 42, 79, .32); background: linear-gradient(165deg, #FFFFFF 0%, #F7FAFE 100%); }
.kpi { border-radius: 16px; }
.kpi.azul { background: var(--ac-navy); border-color: rgba(255, 255, 255, .35); box-shadow: var(--brillo), 0 16px 34px -12px rgba(18, 55, 105, .6); }
.kpi.azul::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(172deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, .08) 34%, rgba(255, 255, 255, 0) 46%); }
.kpi .val { font-size: 30px; color: var(--m-navy); }
.kpi.azul .val { color: #fff; }
.band { background: linear-gradient(90deg, var(--m-amarillo) 0 25%, var(--m-verde) 25% 50%, var(--blue) 50% 75%, var(--m-teal) 75%); }
.stripes i:nth-child(1) { background: #FFE28A; } .stripes i:nth-child(2) { background: #A7E3BF; } .stripes i:nth-child(3) { background: var(--pastel-3); }
.kpi.azul .stripes i { background: rgba(255, 255, 255, .35); }
.tabs { border-radius: 14px; }
.tabs button.on { background: var(--ac-navy); color: #fff; box-shadow: var(--brillo); }
.tag.azul { background: var(--pastel-1); color: var(--blue-700); }
.tag.dark { background: var(--ac-navy); border-color: transparent; }
.badge { background: var(--ac-amarillo); color: var(--m-navy); }
input:focus, select:focus, textarea:focus { border-color: var(--m-verde) !important; box-shadow: 0 0 0 3px rgba(47, 174, 95, .18) !important; outline: none; }

/* ── pantalla de entrada ── */
.login.futbol { background: radial-gradient(90% 80% at 0% 0%, #EAF2FC 0%, #F4F7FB 60%), #F4F7FB; }
.login.futbol::before { background: #FFF1C7; box-shadow: 0 130px 0 #E4F6EA; }
.login.futbol::after { background: #D6E6FA; }
.login.futbol .lado-escena h1 { font-family: var(--font-anton); font-weight: 400; text-transform: uppercase; color: var(--m-navy); letter-spacing: .01em; line-height: 1; }
.login.futbol .lado-escena h1 em { color: var(--m-verde); }
.login .marca-mv { display: flex; align-items: center; gap: 12px; }
.login .marca-mv img { width: 54px; height: 54px; background: #fff; border-radius: 50%; padding: 4px; box-shadow: 0 6px 18px rgba(14, 42, 79, .18); }
.login .marca-mv span { font: 700 12px var(--font); letter-spacing: .2em; color: var(--blue-700); text-transform: uppercase; }
.login-card .inner > img { width: 190px; margin: 0 auto; display: block; }
.login-card .producto { font-family: var(--font-anton); letter-spacing: .14em; color: var(--m-navy); font-size: 15px; }
.chips-lead span svg.i { color: var(--m-verde); }
.roles-hint b { color: var(--blue-700); }
.pie-adhenna { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-size: 11px; color: var(--muted); }
.pie-adhenna img { height: 20px; width: auto; opacity: .75; }

/* ── página pública /reservar y paneles con color ── */
.pub-hero { background: radial-gradient(80% 120% at 90% 0%, rgba(74, 127, 199, .45), transparent 55%), linear-gradient(160deg, #123769, #0A2347) !important; }