/* ============================================================
   TEAM ANALYST — Estilos completos
   Para modificar colores/fuentes: busca ":root" (línea ~10)
   Para modificar componentes: Ctrl+F con el nombre de la clase
   ============================================================ */

/* ============================================================
   TEAM ANALYST v1.1.1 — DESIGN SYSTEM
   Estadio moderno: oscuro, técnico, limpio.
   Una sola familia tipográfica (DM Sans). Verde eléctrico
   solo donde realmente importa. Grid de 8pt. Sin sombras genéricas.
   ============================================================ */
:root{
  /* Fondos */
  --bg-0:   #0A0D12;
  --bg-1:   #111620;
  --bg-2:   #18202E;
  --bg-3:   #1F2A3C;
  --border: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.14);

  /* Acento */
  --accent:      #00C67A;
  --accent-dim:  #00A865;
  --accent-glow: rgba(0,198,122,0.15);
  --accent-text: #04150E;

  /* Semánticos */
  --amber:   #F5B731;
  --crimson: #E04444;
  --sky:     #4B8EF0;
  --violet:  #8B5CF6;

  /* Texto */
  --text-1: #EEF2FF;
  --text-2: #8B93A8;
  --text-3: #4A5264;

  /* Color de club (sobreescrito por JS) */
  --club:      var(--accent);
  --club-deep: var(--accent-dim);
  --club-light: #33D48E;
  --club-on:   var(--accent-text);

  /* Aliases de compatibilidad */
  --ink:        var(--bg-0);
  --ink-2:      var(--bg-1);
  --ink-3:      var(--bg-2);
  --line:       var(--border);
  --turf:       var(--accent);
  --turf-deep:  var(--accent-dim);
  --turf-light: #33D48E;
  --paper:      var(--text-1);
  --paper-dim:  var(--text-2);
  --paper-faint:var(--text-3);
  --chalk:      var(--bg-1);
  --chalk-2:    var(--bg-2);
  --chalk-line: var(--border);
  --slate:      var(--text-1);
  --slate-dim:  var(--text-2);

  /* Tipografía */
  --f-display: 'DM Sans', system-ui, sans-serif;
  --f-body:    'DM Sans', system-ui, sans-serif;
  --f-mono:    'DM Mono', ui-monospace, monospace;

  /* Geometría */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  /* Ritmo */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 40px;
}

/* Modo claro — activado via [data-theme="light"] en <html> */
[data-theme="light"]{
  --bg-0:   #F0F2F5;
  --bg-1:   #FFFFFF;
  --bg-2:   #F5F7FA;
  --bg-3:   #E8EBF0;
  --border: rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.15);

  --accent:      #00A865;
  --accent-dim:  #008752;
  --accent-glow: rgba(0,168,101,0.12);
  --accent-text: #FFFFFF;

  --text-1: #0F1923;
  --text-2: #5A6374;
  --text-3: #9BA3B0;

  --club-on: #FFFFFF;

  --ink:        var(--bg-0);
  --ink-2:      var(--bg-1);
  --ink-3:      var(--bg-2);
  --line:       var(--border);
  --turf:       var(--accent);
  --turf-deep:  var(--accent-dim);
  --turf-light: #00C67A;
  --paper:      var(--text-1);
  --paper-dim:  var(--text-2);
  --paper-faint:var(--text-3);
  --chalk:      var(--bg-1);
  --chalk-2:    var(--bg-2);
  --chalk-line: var(--border);
  --slate:      var(--text-1);
  --slate-dim:  var(--text-2);

  color-scheme: light;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ color-scheme: dark; }

body{
  font-family: var(--f-body);
  background: var(--bg-0);
  color: var(--text-1);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  font-size: 15px;
}

::selection{ background: var(--accent); color: var(--accent-text); }
button{ font-family: inherit; }
a{ color: inherit; }
img{ display:block; max-width:100%; }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

.hidden{ display:none !important; }

/* Tipografía */
h1,h2,h3,h4{
  font-family: var(--f-body);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.eyebrow{
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
}

.mono{ font-family: var(--f-mono); }

/* ---- HOME ---- */
.home{
  min-height: 100vh;
  background: var(--bg-0);
  display: flex;
  flex-direction: column;
}

/* Topbar de la home */
.home-topbar{
  background: var(--home-topbar-bg, #1A2E1F);
  color: #fff;
  padding: 0 clamp(20px,4vw,48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  flex-shrink: 0;
  gap: 16px;
}

.home-topbar .brand{
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark{
  width: 38px; height: 38px;
  border-radius: 8px;
  background: var(--accent);
  display: flex; align-items:center; justify-content:center;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--accent-text);
  flex-shrink: 0;
}

.brand-title h1{
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}

.brand-title p{
  font-size: 0.7rem;
  color: rgba(255,255,255,0.55);
  margin-top: 1px;
}

.home-body{
  flex: 1;
  background: var(--bg-0);
  padding: clamp(20px,4vw,48px) clamp(20px,4vw,48px) 80px;
}

.home-section-label{
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}

.home-cards{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

/* ---- TARJETA DE EQUIPO ---- */
.team-tile{
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: box-shadow 0.18s, transform 0.15s, border-color 0.15s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
}

.team-tile:hover{
  box-shadow: 0 10px 36px rgba(0,0,0,0.16);
  transform: translateY(-3px);
  border-color: var(--tile-color, var(--accent));
}

.team-tile::before,.team-tile::after{ display:none; }

/* Banda de color — toda la parte superior, escudo centrado dentro */
.team-tile-band{
  height: 130px;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* El background se pone inline en el HTML con gradiente o color sólido */
}

/* Textura sutil sobre la banda */
.team-tile-band-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255,255,255,0.16) 0%, transparent 50%, rgba(0,0,0,0.14) 100%);
  pointer-events: none;
}

/* Escudo centrado y grande dentro de la banda */
.team-tile-crest{
  position: relative;
  z-index: 1;
  width: 84px; height: 84px;
  border-radius: 16px;
  border: 3px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  display: flex; align-items:center; justify-content:center;
  font-size: 2.4rem;
  font-weight: 900;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.28);
  flex-shrink: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.team-tile-crest img{
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 8px;
}

/* Botón editar flotante */
.team-tile-edit{
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(0,0,0,0.28);
  border: none;
  border-radius: 7px;
  color: rgba(255,255,255,0.9);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.12s;
  backdrop-filter: blur(6px);
  z-index: 2;
}
.team-tile:hover .team-tile-edit{ opacity: 1; }
.team-tile-edit:hover{ background: rgba(0,0,0,0.55); }

/* Cuerpo de la tarjeta */
.team-tile-body{
  padding: 16px 18px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.team-tile-name{
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 2px;
}

.team-tile-meta{
  font-size: 0.74rem;
  color: var(--text-3);
  font-weight: 400;
}

/* Stats en la parte inferior */
.team-tile-stats{
  display: flex;
  gap: 0;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.team-tile-stat{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 0;
  position: relative;
}

.team-tile-stat + .team-tile-stat::before{
  content: '';
  position: absolute;
  left: 0; top: 20%;
  width: 1px; height: 60%;
  background: var(--border);
}

.team-tile-stat b{
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-1);
  font-family: var(--f-mono);
  letter-spacing: -0.03em;
  line-height: 1;
}

.team-tile-stat span{
  font-size: 0.6rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Tarjeta "añadir equipo" */
.team-tile-add{
  background: var(--bg-1);
  border: 2px dashed var(--border-strong);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  min-height: 240px;
  transition: background 0.14s, border-color 0.14s;
}

.team-tile-add:hover{
  background: var(--bg-2);
  border-color: var(--accent);
}

.team-tile-add .plus{
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bg-2);
  display: flex; align-items:center; justify-content:center;
  font-size: 1.5rem;
  color: var(--text-3);
  transition: color 0.14s, background 0.14s;
}

.team-tile-add:hover .plus{ background: var(--accent-glow); color: var(--accent); }

.tile-add-label{
  font-size: 0.84rem;
  color: var(--text-3);
  font-weight: 600;
  transition: color 0.14s;
}
.team-tile-add:hover .tile-add-label{ color: var(--text-1); }



/* Empty state home */
.home-empty-card{
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 64px 32px;
  text-align: center;
  max-width: 100%;
}

.home-empty{
  text-align: center;
  color: var(--text-3);
}

.home-empty .empty-icon-wrap{
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--accent-glow);
  display: flex; align-items:center; justify-content:center;
  margin: 0 auto 20px;
  font-size: 2rem;
}

.home-empty .icon{ font-size: 2.5rem; margin-bottom: 14px; }
.home-empty h2{ color: var(--text-1); font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.home-empty p{ font-size: 0.88rem; line-height: 1.6; margin-bottom: 22px; max-width:400px; margin-inline:auto; color:var(--text-2); }

/* ---- TEAM SHELL: TOPBAR HORIZONTAL + CONTENIDO ---- */
.team-shell{
  min-height: 100vh;
  background: var(--bg-0);
  color: var(--text-1);
  display: flex;
  flex-direction: row;  /* sidebar izquierda, contenido derecha */
}

/* SIDEBAR — fija a la izquierda, scrolleable internamente */
.team-topbar{
  background: #1A2E1F;
  color: #fff;
  width: 220px;
  min-width: 220px;
  height: 100vh;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 40;
  border-right: 1px solid rgba(255,255,255,0.06);
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.team-topbar::-webkit-scrollbar{ display:none; }

/* ---- SIDEBAR VERTICAL ---- */
.team-topbar-inner{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
  overflow: hidden; /* el inner no scrollea, solo el nav */
}

/* Cabecera: logo app + nombre equipo */
.team-topbar-header{
  padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Logo de la app arriba del todo */
.sidebar-app-logo{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.sidebar-app-logo .brand-mark{
  width: 34px; height: 34px;
  border-radius: 8px;
  font-size: 1rem;
}

.sidebar-app-logo .brand-title h1{
  font-size: 1rem;
  color: #fff;
}

.sidebar-app-logo .brand-title p{
  font-size: 0.62rem;
  color: rgba(255,255,255,0.4);
}

/* Selector de equipo en la sidebar */
.sidebar-team-selector{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.1);
  transition: background 0.12s;
}

.sidebar-team-selector:hover{
  background: rgba(255,255,255,0.12);
}

.team-topbar-crest{
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items:center; justify-content:center;
  font-weight: 800;
  font-size: 1rem;
  overflow: hidden;
  flex-shrink: 0;
  color: #fff;
}
.team-topbar-crest img{ width:100%; height:100%; object-fit:cover; }

.team-topbar-name{
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-topbar-name small{
  display: block;
  font-size: 0.62rem;
  color: rgba(255,255,255,0.4);
  font-weight: 400;
  margin-top: 1px;
}

.sidebar-chevron{
  color: rgba(255,255,255,0.4);
  font-size: 0.7rem;
  flex-shrink: 0;
}

.team-topbar-back{
  display: none; /* no se usa en sidebar */
}

/* btn-back oculto */
.btn-back{ display:none; }

/* Navegación vertical */
.team-nav{
  display: flex;
  flex-direction: column;
  padding: 10px 10px;
  gap: 2px;
  flex: 1;
  overflow-y: auto;  /* el nav scrollea si hay muchos items */
  overflow-x: hidden;
  scrollbar-width: none;
}
.team-nav::-webkit-scrollbar{ display: none; }

.team-nav button{
  font-family: var(--f-body);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 9px 12px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.team-nav button::before{ display:none; }

.team-nav button:hover{
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.9);
}

.team-nav button.active{
  background: #1A4C2A;
  color: #fff;
  font-weight: 600;
}

.team-nav button.active .nav-icon{
  color: var(--accent);
}

/* Icono y label separados */
.nav-icon{ font-size: 1rem; flex-shrink: 0; }
.nav-label{ flex: 1; }

/* Pie de la sidebar */
.team-topbar-footer{
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-footer-link{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  color: rgba(255,255,255,0.5);
  font-size: 0.82rem;
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  transition: background 0.12s, color 0.12s;
  font-family: var(--f-body);
  width: 100%;
}

.sidebar-footer-link:hover{
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.8);
}

/* Área de contenido principal — ocupa el resto, scroll natural */
.team-main{
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  padding: 32px 40px 60px;
  background: var(--bg-0);
  /* Sin overflow-y: auto — la página entera scrollea */
}

@media(max-width:720px){
  .team-topbar-inner{ padding: 0 12px; }
  .team-nav button{ padding:6px 10px; font-size:0.76rem; gap:4px; }
}

.view{ display:none; }
.view.active{ display:block; animation: viewIn 0.16s ease; }

@keyframes viewIn{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}

.view-header{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-md);
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.view-header h2{
  font-size: 1.6rem;
  color: var(--text-1);
  letter-spacing: -0.025em;
  font-weight: 800;
}

.view-header p{
  color: var(--text-2);
  font-size: 0.82rem;
  margin-top: 4px;
}

.home-header{
  padding: 40px clamp(24px,5vw,64px) 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.home-header .brand{
  display: flex;
  align-items: center;
  gap: 13px;
}

.brand-mark{
  width: 40px; height: 40px;
  border-radius: 9px;
  background: var(--accent);
  display: flex; align-items:center; justify-content:center;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--accent-text);
  flex-shrink: 0;
}

.brand-title h1{
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: -0.025em;
}

.brand-title p{
  font-size: 0.76rem;
  color: var(--text-3);
  margin-top: 1px;
}

.home-section-label{
  padding: 44px clamp(24px,5vw,64px) 12px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
}


/* ============================================================
   VISTA: PARTIDOS — nueva tarjeta y stats bar
   ============================================================ */

/* Barra de stats rápidas */
.matches-stats-bar{
  display: flex;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 24px;
}

.msb-item{
  flex: 1;
  background: var(--bg-1);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.msb-icon{
  font-size: 1.3rem;
  color: var(--accent);
  flex-shrink: 0;
}

.msb-val{
  font-size: 1.6rem;
  font-weight: 800;
  font-family: var(--f-mono);
  color: var(--text-1);
  letter-spacing: -0.03em;
  line-height: 1;
}

.msb-label{
  font-size: 0.7rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

@media(max-width:600px){
  .matches-stats-bar{ flex-wrap:wrap; }
  .msb-item{ min-width:45%; }
}

/* Tarjeta de partido nueva */
.match-card-v2{
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  transition: box-shadow 0.15s, border-color 0.15s;
  position: relative;
  overflow: hidden;
}

.match-card-v2:hover{
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  border-color: var(--border-strong);
}

.match-card-v2.in_progress{
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow);
}

/* Badges de estado */
.status-badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.status-pending   { background: rgba(75,142,240,0.15); color: var(--sky); }
.status-live      { background: rgba(0,198,122,0.15);  color: var(--accent); }
.status-finished  { background: var(--bg-2); color: var(--text-3); border: 1px solid var(--border); }

.mc-header{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.mc-meta-row{
  display: flex;
  gap: 10px;
  font-size: 0.74rem;
  color: var(--text-3);
  flex: 1;
  flex-wrap: wrap;
}

.mc-delete{
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 5px;
  font-size: 0.8rem;
  transition: background 0.1s, color 0.1s;
  margin-left: auto;
  flex-shrink: 0;
}
.mc-delete:hover{ background: rgba(224,68,68,0.12); color: var(--crimson); }

.mc-fixture{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  text-align: center;
}

.mc-team{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.mc-crest{
  width: 52px; height: 52px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  display: flex; align-items:center; justify-content:center;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-2);
  overflow: hidden;
}
.mc-crest img{ width:100%; height:100%; object-fit:contain; padding:6px; }

.mc-name{
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.2;
}

.mc-condition{
  font-size: 0.66rem;
  padding: 2px 7px;
  border-radius: 100px;
  background: var(--accent-glow);
  color: var(--accent);
  font-weight: 600;
}

.mc-score{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mc-score-num{
  font-family: var(--f-mono);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: -0.03em;
  line-height: 1;
}

.mc-score-sep{
  color: var(--text-3);
  font-size: 1.2rem;
}

.mc-vs{
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-3);
  text-align: center;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
}

.mc-footer-meta{
  display: flex;
  gap: 12px;
  font-size: 0.74rem;
  color: var(--text-3);
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* ============================================================
   COMPONENTES BASE
   ============================================================ */
.card{
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px;
  margin-bottom: var(--gap-md);
}

.card-tight{ padding: 14px; }

.btn{
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--accent-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: filter 0.12s ease, transform 0.1s ease;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.btn:hover{ filter: brightness(1.1); }
.btn:active{ transform: scale(0.97); }

.btn-secondary{
  background: var(--bg-2);
  color: var(--text-1);
  border-color: var(--border-strong);
}
.btn-secondary:hover{ filter:none; background: var(--bg-3); }

.btn-ghost{
  background: transparent;
  color: var(--text-2);
  border-color: transparent;
}
.btn-ghost:hover{ background: var(--bg-2); filter:none; color: var(--text-1); }

.btn-danger{ background: var(--crimson); color: #fff; }
.btn-block{ width: 100%; justify-content: center; }
.btn-sm{ padding: 7px 11px; font-size: 0.78rem; }

.btn-row{ display:flex; gap: 8px; flex-wrap: wrap; }

label{
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.field{ margin-bottom: 16px; }

.field-hint{
  font-size: 0.76rem;
  color: var(--text-3);
  margin-top: 5px;
}

input[type=text], input[type=number], input[type=date], input[type=time],
input[type=color], select, textarea{
  width: 100%;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-2);
  color: var(--text-1);
  font-size: 0.88rem;
  font-family: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

input::placeholder{ color: var(--text-3); }

input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

select{ cursor: pointer; }

/* Inputs de fecha y hora */
input[type=date], input[type=time]{ cursor: pointer; position: relative; }

input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{
  filter: invert(0.6) brightness(1.4);
  cursor: pointer;
  width: 20px;
  height: 20px;
  opacity: 0.8;
  padding: 2px;
}

input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover{
  opacity: 1;
  filter: invert(0.8) brightness(1.6);
}

/* Placeholder visual para fecha/hora vacíos */
input[type=date]:not(:focus):not([value])::-webkit-datetime-edit-text,
input[type=date]:not(:focus):not([value])::-webkit-datetime-edit-day-field,
input[type=date]:not(:focus):not([value])::-webkit-datetime-edit-month-field,
input[type=date]:not(:focus):not([value])::-webkit-datetime-edit-year-field{
  color: #A8AB9E;
}

.badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--bg-2);
  color: var(--text-2);
  border: 1px solid var(--border-strong);
}
.badge-club{ background: var(--accent-glow); color: var(--accent); border-color: transparent; }
.badge-amber{ background: rgba(245,183,49,0.15); color: var(--amber); border-color: transparent; }
.badge-crimson{ background: rgba(224,68,68,0.15); color: var(--crimson); border-color: transparent; }
.badge-sky{ background: rgba(75,142,240,0.15); color: var(--sky); border-color: transparent; }

.empty{
  text-align: center;
  padding: 56px 24px;
  color: var(--text-3);
}

/* Icono con círculo tintado verde suave */
.empty-icon-wrap{
  width: 80px; height: 80px;
  border-radius: 50%;
  background: #E8F5EE;
  display: flex; align-items:center; justify-content:center;
  margin: 0 auto 20px;
  font-size: 1.8rem;
}

/* Para modo oscuro, el círculo se adapta */
:root:not([data-theme="light"]) .empty-icon-wrap{
  background: rgba(0,198,122,0.12);
}

.empty .icon{
  font-size: 2rem;
  margin-bottom: 0;
  opacity: 1;
}

.empty-card{
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 56px 32px;
  margin-bottom: 16px;
}

.empty h3{ color: var(--text-1); font-size: 1.05rem; margin-bottom: 8px; font-weight: 700; }
.empty p{ font-size: 0.86rem; max-width: 380px; margin: 0 auto 20px; line-height: 1.6; color: var(--text-2); }

/* Toasts */
.toast-stack{
  position: fixed;
  top: 18px; right: 18px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(340px, calc(100vw - 36px));
}
.toast{
  background: var(--bg-2);
  color: var(--text-1);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  font-size: 0.84rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  animation: toastIn 0.18s ease;
}
.toast.error{ border-left-color: var(--crimson); }
.toast.info{ border-left-color: var(--sky); }
@keyframes toastIn{ from{ opacity:0; transform: translateX(16px);} to{opacity:1; transform:translateX(0);} }

/* Modales */
.modal-backdrop{
  position: fixed; inset: 0;
  background: rgba(10,18,30,0.55);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 20px;
}
.modal-backdrop.active{ display:flex; }

/* Los modales usan siempre fondo claro (estilo wireframe) independientemente del tema */
.modal{
  background: #FFFFFF;
  border: none;
  border-radius: 18px;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 48px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  animation: modalIn 0.18s ease;
  color: #1A2E1F;
}
.modal.modal-wide{ max-width: 680px; }

@keyframes modalIn{
  from{ opacity:0; transform:translateY(10px) scale(0.97); }
  to{   opacity:1; transform:translateY(0) scale(1); }
}

.modal-head{
  padding: 22px 28px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: #F5F7F4;
  border-radius: 18px 18px 0 0;
  padding-bottom: 18px;
  border-bottom: 1px solid #E8EDE6;
}

.modal-head h3{
  font-size: 1.25rem;
  color: #0F1F14;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.modal-close{
  width: 30px; height: 30px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #7A8A7A;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 1rem;
  display: flex; align-items:center; justify-content:center;
  transition: background 0.1s, color 0.1s;
  margin-top: 2px;
}
.modal-close:hover{ background: #E8EDE6; color: #0F1F14; }

.modal-body{
  padding: 22px 28px;
  background: #FFFFFF;
}

/* Labels en modales */
.modal-body label{
  color: #0F1F14;
  font-weight: 600;
  font-size: 0.84rem;
}

/* Inputs en modales: sobre fondo blanco */
.modal-body input[type=text],
.modal-body input[type=number],
.modal-body input[type=date],
.modal-body input[type=time],
.modal-body select,
.modal-body textarea{
  background: #FFFFFF;
  border: 1.5px solid #D4DDD2;
  color: #0F1F14;
  border-radius: 10px;
}
.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus{
  border-color: #1A6B3C;
  box-shadow: 0 0 0 3px rgba(26,107,60,0.12);
  outline: none;
}

.modal-foot{
  padding: 16px 28px;
  background: #FFFFFF;
  border-top: 1px solid #E8EDE6;
  border-radius: 0 0 18px 18px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.modal-foot .btn{ min-width: 120px; justify-content: center; }
.modal-foot .btn:first-child:not(:last-child){
  background: #EEF2EC;
  color: #3A5A40;
  border: none;
}
.modal-foot .btn:first-child:not(:last-child):hover{
  background: #DDE8DB;
  filter: none;
}

/* Info box en modales (fondo verde tintado) */
.modal-info-box{
  background: #EEF5EC;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 0.84rem;
  color: #2E5A35;
  line-height: 1.5;
  margin-top: 14px;
}

.modal-info-box.amber{
  background: #FEF9EC;
  color: #7A5A10;
}

/* Convocados / titulares: checkboxes tipo pill */
.titular-checkbox-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid #D4DDD2;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
  background: #FFFFFF;
}

.titular-checkbox-item.checked{
  background: #EEF5EC;
  border-color: #1A6B3C;
}

.titular-checkbox{
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid #C4D4C2;
  display: flex; align-items:center; justify-content:center;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s;
  background: white;
}

.titular-checkbox-item.checked .titular-checkbox{
  background: #1A6B3C;
  border-color: #1A6B3C;
}

.titular-checkbox-item.checked .titular-checkbox::after{
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: white;
}

/* Convocados en el modal de partido */
.convocado-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1.5px solid #D4DDD2;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  background: #FFFFFF;
  user-select: none;
}
.convocado-item.checked{
  background: #EEF5EC;
  border-color: #1A6B3C;
}

/* Selector de quién marca (Equipo / Rival) */
.goal-team-selector{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 6px;
}

.goal-team-btn{
  padding: 12px;
  border-radius: 10px;
  border: 1.5px solid #D4DDD2;
  background: #FFFFFF;
  color: #5A6A5A;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  text-align: center;
}

.goal-team-btn.active{
  background: #EEF5EC;
  border-color: #1A6B3C;
  color: #1A6B3C;
}

/* ============================================================
   JUGADORES
   ============================================================ */
.players-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--gap-md);
}

.player-card{
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  text-align: center;
  transition: border-color 0.12s, background 0.12s;
  cursor: default;
}
.player-card:hover{ border-color: var(--border-strong); background: var(--bg-2); }

.player-photo{
  width: 76px; height: 76px;
  border-radius: 50%;
  margin: 0 auto 12px;
  background: var(--accent);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  overflow: hidden;
  border: 2px solid var(--border-strong);
}
.player-photo img{ width:100%; height:100%; object-fit:cover; }

.player-card .pname{ font-weight: 700; font-size: 0.95rem; color: var(--text-1); }
.player-card .pdorsal{ font-family: var(--f-mono); color: var(--text-3); font-size: 0.8rem; margin-top: 2px;}
.player-card .ppos{ margin-top: 8px; }

.player-actions{ display:flex; gap:8px; margin-top: 14px; }
.player-actions .btn{ flex:1; }

/* ============================================================
   PARTIDOS
   ============================================================ */
.matches-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--gap-md);
}

.match-card{
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  position: relative;
  border-left: 3px solid var(--club);
  transition: background 0.12s;
}
.match-card:hover{ background: var(--bg-2); }

.match-fixture{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.match-fixture-side{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.match-fixture-side span{
  font-family: var(--f-display);
  font-size: 0.82rem;
  color: var(--slate);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.match-fixture-crest{
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--chalk);
  border: 1px solid var(--chalk-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--slate-dim);
  overflow: hidden;
}
.match-fixture-crest img{ width:100%; height:100%; object-fit:cover; }

.match-fixture-vs{
  font-family: var(--f-display);
  font-size: 0.72rem;
  color: var(--slate-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.match-card .match-meta{
  font-size: 0.82rem;
  color: var(--slate-dim);
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}

.match-card .match-status-row{ margin-bottom: 12px; }

/* ============================================================
   CONTROL EN VIVO — MARCADOR
   ============================================================ */
.live-shell{
  background: var(--bg-1);
  border-radius: var(--r-lg);
  padding: clamp(18px, 3vw, 28px);
  color: var(--text-1);
  margin-bottom: var(--gap-lg);
  border: 1px solid var(--border);
}

.scoreboard{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 3vw, 24px);
  margin-bottom: 20px;
}

.scoreboard-team{
  display: flex;
  align-items: center;
  gap: 12px;
}
.scoreboard-team.is-right{ flex-direction: row-reverse; text-align: right; }

.scoreboard-crest{
  width: 44px; height: 44px;
  border-radius: 9px;
  background: var(--bg-3);
  border: 1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  font-weight: 700;
  font-size: 1.1rem;
  overflow: hidden;
  flex-shrink: 0;
}
.scoreboard-crest img{ width:100%; height:100%; object-fit:cover; }

.scoreboard-team-name{
  font-size: clamp(0.82rem, 2.2vw, 1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.scoreboard-team-name small{
  display:block;
  font-size: 0.68rem;
  color: var(--text-3);
  font-weight: 400;
  margin-top: 2px;
}

.scoreboard-center{
  text-align: center;
  min-width: 140px;
}

.score-digits{
  font-family: var(--f-mono);
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-1);
}
.score-digits .sep{ color: var(--text-3); font-size: 0.6em; }

.clock-row{
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.clock-time{
  font-family: var(--f-mono);
  font-size: 1.05rem;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.clock-time-up{
  color: var(--amber) !important;
  animation: clockPulse 1.4s ease-in-out infinite;
}

@keyframes clockPulse{
  0%, 100%{ opacity: 1; }
  50%{ opacity: 0.55; }
}

.part-duration-note{
  text-align: center;
  font-size: 0.78rem;
  color: var(--paper-faint);
  margin: -6px 0 14px;
}

.clock-part{
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-faint);
  border: 1px solid var(--line);
  padding: 2px 8px;
  border-radius: 100px;
}

.live-controls{
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  gap: 10px;
  align-items: stretch;
}

.live-ctrl-main{
  grid-column: 1;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
  font-size: 0.9rem;
}

.live-ctrl-action{
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  color: var(--text-1);
  font-weight: 600;
}

.live-ctrl-action:hover{ background: var(--bg-3); filter:none; }

.live-ctrl-end{
  grid-column: 4;
  justify-content: center;
}

@media(max-width:600px){
  .live-controls{ grid-template-columns: 1fr 1fr; }
  .live-ctrl-main{ grid-column: span 2; }
  .live-ctrl-end{ grid-column: span 2; }
}

/* Layout dos columnas en vivo */
.live-two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

@media(max-width:900px){
  .live-two-col{ grid-template-columns: 1fr; }
}

/* Fila del fixture en el marcador */
.live-fixture-row{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.live-team-side{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.live-crest{
  width: 64px; height: 64px;
  border-radius: 14px;
  display: flex; align-items:center; justify-content:center;
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}
.live-crest img{ width:100%; height:100%; object-fit:contain; padding:6px; }

.live-team-name{
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-1);
  text-align: center;
}

.live-center-panel{
  text-align: center;
  padding: 0 8px;
}

/* Pill de parte */
.part-pill{
  font-family: var(--f-body);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--border-strong);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.part-pill.active{
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
}

.btn-pitch-action{
  background: var(--bg-2);
  color: var(--text-1);
  border: 1px solid var(--border-strong);
}
.btn-pitch-action:hover{ filter:none; background: var(--bg-3); }

.btn-active-side{
  background: var(--club) !important;
  color: var(--club-on) !important;
  border-color: var(--club) !important;
}

.part-pills{
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}
.part-pills button{
  font-family: var(--f-body);
  font-size: 0.78rem;
  padding: 7px 16px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--paper-dim);
  cursor: pointer;
}
.part-pills button.active{ background: var(--turf); border-color: var(--turf); color: #fff; }

/* ============================================================
   PIZARRA TÁCTICA — CAMPO DE FÚTBOL
   ============================================================ */
.tactics-block{ margin-top: 4px; }

.tactics-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.tactics-head h3{
  font-family: var(--f-display);
  font-size: 1.05rem;
  color: var(--slate);
}

.formation-controls{ display:flex; gap:8px; flex-wrap:wrap; }
.formation-controls select{
  width: auto;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--chalk-line);
  background: var(--chalk-2);
  color: var(--slate);
  cursor: pointer;
}

.pitch-shirt-empty{
  background: rgba(255,255,255,0.12) !important;
  border-style: dashed !important;
  color: rgba(255,255,255,0.7) !important;
}
.pitch-slot-empty .pitch-tag{ opacity: 0.75; }

.pitch-wrap{
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.pitch{
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 64;
  border-radius: 12px;
  overflow: hidden;
  touch-action: none;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.055) 0px, rgba(255,255,255,0.055) 9.09%,
      transparent 9.09%, transparent 18.18%),
    linear-gradient(90deg, var(--turf-deep), var(--turf) 50%, var(--turf-deep));
  border: 3px solid rgba(255,255,255,0.95);
  box-shadow: inset 0 0 50px rgba(0,0,0,0.3), var(--shadow-card);
}

.pitch-mark{
  position: absolute;
  border: 2px solid rgba(255,255,255,0.82);
  background: transparent;
}
.pitch-dot{
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  transform: translate(-50%,-50%);
}

.pitch-corner{
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.82);
  border-radius: 50%;
  clip-path: inset(0 50% 50% 0);
}

.pitch-player{
  position: absolute;
  width: 54px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  z-index: 5;
}
.pitch-player.dragging{ cursor: grabbing; z-index: 30; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.45)); }

.pitch-shirt{
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--club);
  color: var(--club-on);
  border: 2.5px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 0.84rem;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0,0,0,0.35);
}
.pitch-shirt img{ width:100%; height:100%; object-fit: cover; }

.pitch-tag{
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 0.64rem;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  white-space: nowrap;
  max-width: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(11,18,32,0.45);
  padding: 1px 6px;
  border-radius: 100px;
  line-height: 1.4;
}

.tactics-foot{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.tactics-hint{ font-size: 0.78rem; color: var(--slate-dim); }

/* Listas de plantilla (titulares / banquillo) */
.roster-section{ margin-top: 24px; }
.roster-section h4{
  font-family: var(--f-display);
  font-size: 0.95rem;
  color: var(--slate);
  margin-bottom: 12px;
  display:flex; align-items:center; gap:8px;
}
.roster-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.roster-chip{
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.roster-chip:hover{ border-color: var(--accent); background: var(--bg-3); }
.roster-chip.on-field{
  border-color: var(--accent);
  background: var(--accent-glow);
}
.roster-chip.on-bench{
  border-color: var(--amber);
  background: rgba(245,183,49,0.1);
}
.roster-chip .rc-name{
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-1);
}
.roster-chip .rc-meta{
  font-size: 0.74rem;
  color: var(--text-2);
  margin-top: 2px;
  font-family: var(--f-mono);
}

/* Timeline de eventos */
.event-timeline{ border-left: 2px solid var(--border-strong); padding-left: 18px; margin-top: 14px; }
.event-part-label{
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin: 16px 0 8px -18px;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
  text-transform: uppercase;
}
.event-row{
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.9rem;
}
.event-row .et{ font-family: var(--f-mono); color: var(--slate-dim); font-size: 0.82rem; flex-shrink:0; }

.note-input-row{
  display: flex;
  gap: 10px;
}
.note-input-row input{ flex: 1; }

.note-row{
  align-items: center;
  justify-content: space-between;
}
.note-row .note-text{ flex: 1; }
.note-delete-btn{
  width: 24px; height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--slate-dim);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 0.78rem;
}
.note-delete-btn:hover{ background: var(--chalk); color: var(--crimson); }

/* ============================================================
   MAPA DE CALOR — CAMPO DE ZONAS
   ============================================================ */
.heatmap-block{
  margin-top: 6px;
}

.heatmap-layout{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.heatmap-field-wrap{
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.heatmap-field{
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 64;
  overflow: visible;
  background:
    linear-gradient(90deg, var(--turf-deep), var(--turf) 50%, var(--turf-deep));
  border: 2.5px solid rgba(255,255,255,0.9);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.2);
  cursor: crosshair;
}

/* Líneas de marcado del campo dentro del heatmap */
.hf-mark{
  position: absolute;
  border: 1.5px solid rgba(255,255,255,0.75);
  background: transparent;
  pointer-events: none;
}

/* Cuadrícula de zonas (6 columnas × 4 filas = 24 zonas) */
.hz-grid{
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.hz-zone{
  border: 1px solid rgba(255,255,255,0.18);
  position: relative;
  cursor: pointer;
  transition: background 0.12s ease;
  /* Por defecto, todas las zonas tienen una tenue cuadrícula visible para orientarse */
  background: rgba(255,255,255,0.04);
}

/* Zona nunca tocada: fondo blanco suave para que las celdas sean visibles */
.hz-zone.hz-virgin{
  background: rgba(255,255,255,0.10);
}

/* Zona actualmente seleccionada — iluminada persistentemente */
.hz-zone.hz-selected{
  background: rgba(255,255,255,0.30) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.8);
}

.hz-zone:hover{
  background: rgba(255,255,255,0.22) !important;
}

/* Panel de acciones contextual (aparece debajo del campo tras clicar zona) */
.action-panel-inner{
  background: var(--ink-3);
  border: 1px solid var(--chalk-line);
  border-radius: 10px;
  padding: 12px;
  margin-top: 8px;
  animation: slideDown 0.15s ease-out;
}

@keyframes slideDown{
  from{ opacity:0; transform:translateY(-5px); }
  to{ opacity:1; transform:translateY(0); }
}

.action-panel-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}

.action-panel-body{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.action-panel-btns{
  flex: 1;
  min-width: 200px;
}

/* Overlay de calor — con filter blur para efecto difuminado suave */
.hz-heat{
  position: absolute;
  inset: -30%;          /* desborda la celda para que el blur se mezcle con vecinas */
  pointer-events: none;
  transition: background 0.3s ease;
  filter: blur(18px);
  border-radius: 50%;   /* forma circular para el difuminado */
}

/* Contador de zonas — se mantiene pero oculto en live (se usa en resumen) */
.hz-count{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  pointer-events: none;
  flex-direction: column;
  gap: 1px;
  line-height: 1.15;
}

/* Panel de acciones — horizontal, compacto encima del campo */
.quick-actions-panel{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quick-actions-panel h4{
  font-family: var(--f-display);
  font-size: 0.82rem;
  color: var(--slate);
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

/* Fila de botones de acción — horizontal */
.qa-actions-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Chips de jugador (en vez de <select>) */
.qa-player-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 80px;
  overflow-y: auto;
}

.qa-player-chip{
  padding: 4px 8px;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,0.18);
  background: var(--ink-3);
  color: var(--paper);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}

.qa-player-chip.selected{
  background: var(--club);
  border-color: var(--club);
  color: var(--club-on);
}

.qa-player-chip:hover:not(.selected){
  background: var(--ink-2);
  border-color: rgba(255,255,255,0.35);
}

/* Indicador de modo activo (esperando clic en zona) */
.qa-mode-indicator{
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  animation: modePulse 1.2s ease-in-out infinite;
}

.qa-mode-loss{
  background: rgba(220,60,60,0.25);
  border: 1.5px solid var(--crimson);
  color: #FF9090;
}

.qa-mode-recovery{
  background: rgba(40,200,100,0.2);
  border: 1.5px solid var(--turf-light);
  color: #6EE7B7;
}

.qa-mode-cancel{
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.2);
  color: var(--paper-faint);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 6px;
}

.qa-mode-cancel:hover{ background: var(--ink-3); }

@keyframes modePulse{
  0%,100%{ opacity: 1; }
  50%{ opacity: 0.65; }
}

.qa-btn{
  padding: 7px 11px;
  border-radius: 8px;
  border: none;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: filter 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}

.qa-btn:active{ transform: scale(0.96); }
.qa-btn:disabled{ opacity: 0.4; cursor: default; }

.qa-btn-loss{      background: color-mix(in srgb, var(--crimson) 90%, transparent); color:#fff; }
.qa-btn-recovery{  background: color-mix(in srgb, var(--turf-light) 90%, transparent); color:#fff; }
.qa-btn-touch{     background: color-mix(in srgb, var(--sky) 90%, transparent); color:#fff; }
.qa-btn-shot{      background: color-mix(in srgb, #FF8C00 90%, transparent); color:#fff; }
.qa-btn-cross{     background: color-mix(in srgb, #9060D0 90%, transparent); color:#fff; }
.qa-btn-header{    background: color-mix(in srgb, #D04080 90%, transparent); color:#fff; }

.qa-btn-loss:hover:not(:disabled),
.qa-btn-recovery:hover:not(:disabled),
.qa-btn-touch:hover:not(:disabled),
.qa-btn-shot:hover:not(:disabled),
.qa-btn-cross:hover:not(:disabled),
.qa-btn-header:hover:not(:disabled){ filter: brightness(1.12); }

.qa-hint{
  font-size: 0.72rem;
  color: var(--paper-faint);
  line-height: 1.4;
}

/* Campo en modo live: no muestra el heatmap acumulado */
.heatmap-field.hz-live-clean .hz-heat{
  background: transparent !important;
}

/* ---- SELECTOR DE PORTERÍA (dentro del panel de acciones) ---- */
.goal-selector{
  flex-shrink: 0;
  width: 160px;
  animation: slideDown 0.18s ease-out;
}

.goal-selector h5{
  font-family: var(--f-display);
  font-size: 0.76rem;
  color: var(--slate-dim);
  text-align: center;
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.goal-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  width: 100%;
  aspect-ratio: 2 / 1.4;
  border: 3px solid rgba(255,255,255,0.7);
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
}

.goal-zone{
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  transition: background 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.5);
  background: transparent;
}

.goal-zone:hover{
  background: rgba(255,165,0,0.45);
  color: #fff;
  border-color: rgba(255,165,0,0.7);
}

.goal-zone-out{
  background: var(--ink-3);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5);
  font-size: 0.72rem;
  padding: 5px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  display: block;
  width: 100%;
  margin-top: 4px;
  transition: background 0.12s;
}

.goal-zone-out:hover{
  background: rgba(220,80,80,0.35);
  color: #fff;
}


/* Leyenda del heatmap */
.heatmap-legend{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
  align-items: center;
}

.hm-legend-item{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--paper-faint);
}

.hm-legend-dot{
  width: 12px; height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Heatmap en resumen (modo solo-lectura, fondo claro) */
.heatmap-readonly .heatmap-field{
  cursor: default;
}
.heatmap-readonly .hz-zone{
  cursor: default;
}
.heatmap-readonly .hz-zone:hover{
  background: transparent !important;
}

/* PDF — heatmap en tabla de zonas (legacy, las tablas usan inline styles) */
.pdf-heatmap-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin: 12px 0;
}
.pdf-hz-cell{
  padding: 8px 4px;
  border-radius: 5px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #15181F;
  border: 1px solid #E2E2DC;
}


.stat-tiles{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap-md);
  margin-bottom: var(--gap-lg);
}
.stat-tile{
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-md);
  padding: 20px;
  border-top: 3px solid var(--club);
}
.stat-tile .stv{ font-family: var(--f-mono); font-size: 2.2rem; font-weight: 700; line-height:1; }
.stat-tile .stl{ font-size: 0.78rem; color: var(--paper-faint); margin-top: 8px; text-transform: uppercase; letter-spacing: 0.05em; }

.data-table{ width:100%; border-collapse: collapse; font-size: 0.86rem; }
.data-table thead th{
  text-align: left;
  font-family: var(--f-body);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.data-table td{
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  font-family: var(--f-mono);
  font-size: 0.84rem;
  color: var(--text-1);
}
.data-table td.namecell{ font-family: var(--f-body); font-weight: 600; font-size: 0.88rem; }
.data-table tbody tr:hover{ background: var(--bg-2); }
.table-scroll{ overflow-x: auto; }

.dorsal-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border-radius: 5px;
  background: var(--bg-3);
  color: var(--text-2);
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 0.74rem;
  margin-right: 8px;
  flex-shrink: 0;
}

/* ============================================================
   HISTORIAL
   ============================================================ */
.history-header{
  display: grid;
  grid-template-columns: 1fr 140px 220px;
  padding: 12px 20px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  gap: 12px;
  align-items: center;
}
.history-header span{
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.history-row{
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr 140px 220px;
  align-items: center;
  gap: 12px;
  transition: background 0.12s;
}
.history-row:last-child{ border-bottom: none; }
.history-row:hover{ background: var(--bg-2); }

.history-col-partido{ display:flex; flex-direction:column; gap:3px; }
.history-col-resultado{ display:flex; justify-content:center; }
.history-col-acciones{ display:flex; justify-content:flex-end; gap:8px; }

.history-row .hr-title{
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-1);
}
.history-row .hr-meta{
  font-size: 0.78rem;
  color: var(--text-3);
}

.history-score-badge{
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 9px;
  padding: 6px 16px;
  text-align: center;
  min-width: 70px;
}

/* Responsive */
@media(max-width:600px){
  .history-header{ grid-template-columns: 1fr; display:none; }
  .history-row{ grid-template-columns: 1fr; gap:8px; }
  .history-col-resultado{ justify-content:flex-start; }
  .history-col-acciones{ justify-content:flex-start; }
}

/* ============================================================
   VISTA: LIGA — tarjetas de rivales
   ============================================================ */
.rivals-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.rival-card{
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.rival-card:hover{
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  border-color: var(--border-strong);
}

.rival-card-crest{
  width: 72px; height: 72px;
  border-radius: 14px;
  background: var(--bg-2);
  border: 2px solid var(--border-strong);
  display: flex; align-items:center; justify-content:center;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-2);
  overflow: hidden;
}

.rival-card-crest img{
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 8px;
}

.rival-card-name{
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.3;
  word-break: break-word;
}

.rival-card-actions{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.rival-tile-add{
  background: var(--bg-1);
  border: 2px dashed var(--border-strong);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  min-height: 160px;
  transition: background 0.12s, border-color 0.12s;
  color: var(--text-3);
  font-size: 0.82rem;
  font-weight: 600;
}

.rival-tile-add:hover{
  background: var(--bg-2);
  border-color: var(--accent);
  color: var(--text-1);
}

.rival-tile-add .plus{
  font-size: 1.6rem;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-2);
  display: flex; align-items:center; justify-content:center;
  transition: background 0.12s, color 0.12s;
}

.rival-tile-add:hover .plus{
  background: var(--accent-glow);
  color: var(--accent);
}

/* ============================================================
   PÁGINA DE INICIO DEL EQUIPO
   ============================================================ */

/* Acciones rápidas del home */
.home-quick-action{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-1);
  font-family: var(--f-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s;
  width: 100%;
}

.home-quick-action:hover{
  background: var(--bg-3);
  border-color: var(--accent);
  color: var(--accent);
}

/* Accesos directos del menú */
.team-home-shortcuts{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

.shortcut-card{
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 12px 14px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.12s, border-color 0.15s, background 0.12s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-family: var(--f-body);
}

.shortcut-card:hover{
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  transform: translateY(-2px);
  border-color: var(--accent);
  background: var(--accent-glow);
}

.shortcut-card .sc-icon{
  font-size: 1.8rem;
  line-height: 1;
}

.shortcut-card .sc-label{
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.2;
}

.shortcut-card:hover .sc-label{
  color: var(--accent);
}

/* Puntos de racha */
.racha-dot{
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items:center; justify-content:center;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0;
  flex-shrink: 0;
}

.racha-w{ background: rgba(0,198,122,0.18); color: var(--accent); border: 1.5px solid var(--accent); }
.racha-d{ background: rgba(245,183,49,0.15); color: var(--amber); border: 1.5px solid var(--amber); }
.racha-l{ background: rgba(224,68,68,0.15); color: var(--crimson); border: 1.5px solid var(--crimson); }

/* ============================================================
   CONTROL DE DENSIDAD DE GRIDS (jugadores, partidos, liga)
   ============================================================ */
.grid-density-controls{
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
}

.density-btn{
  width: 30px; height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  display: flex; align-items:center; justify-content:center;
  color: var(--text-3);
  font-size: 0.78rem;
  transition: background 0.1s, color 0.1s;
  gap: 2px;
}

.density-btn.active{
  background: var(--bg-1);
  color: var(--text-1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.density-btn:hover:not(.active){ color: var(--text-2); background: var(--bg-3); }

/* Los grids aplican --grid-min-col según la densidad */
.players-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-col, 180px), 1fr));
  gap: var(--gap-md);
}

.matches-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-col, 260px), 1fr));
  gap: var(--gap-md);
}

.rivals-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-col, 160px), 1fr));
  gap: 14px;
}

/* ============================================================
   AJUSTES
   ============================================================ */
.settings-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--gap-lg);
}
@media (max-width: 860px){ .settings-grid{ grid-template-columns: 1fr; } }

/* Botones de selección de tema */
.settings-theme-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 12px;
  border-radius: 10px;
  border: 2px solid var(--border-strong);
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  font-family: var(--f-body);
  position: relative;
}

.settings-theme-btn.active{
  border-color: var(--accent);
  background: var(--accent-glow);
}

.stb-check{
  position: absolute;
  top: 8px; right: 8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--bg-1);
  transition: background 0.12s, border-color 0.12s;
}

.settings-theme-btn.active .stb-check{
  background: var(--accent);
  border-color: var(--accent);
}

/* Responsive ajustes */
@media(max-width:900px){
  .settings-grid-2{ grid-template-columns: 1fr !important; }
}

/* Selector de modo de seguimiento */
.tracking-mode-cards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}

.tracking-mode-card{
  border: 2px solid var(--border-strong);
  border-radius: 12px;
  padding: 18px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: var(--bg-1);
  text-align: left;
  position: relative;
}

.tracking-mode-card:hover{
  border-color: var(--accent);
  background: var(--accent-glow);
}

.tracking-mode-card.active{
  border-color: var(--accent);
  background: var(--accent-glow);
}

.tracking-mode-card .tm-check{
  position: absolute;
  top: 12px; right: 12px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: flex; align-items:center; justify-content:center;
  background: var(--bg-2);
  transition: background 0.15s, border-color 0.15s;
}

.tracking-mode-card.active .tm-check{
  background: var(--accent);
  border-color: var(--accent);
}

.tracking-mode-card.active .tm-check::after{
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-text);
}

.tracking-mode-card .tm-icon{
  font-size: 1.6rem;
  margin-bottom: 10px;
  display: block;
}

.tracking-mode-card .tm-title{
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 6px;
}

.tracking-mode-card .tm-desc{
  font-size: 0.76rem;
  color: var(--text-2);
  line-height: 1.5;
}

.tracking-mode-card .tm-features{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tracking-mode-card .tm-feature{
  font-size: 0.74rem;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 5px;
}

.tracking-mode-card .tm-feature::before{
  content: '✓';
  color: var(--accent);
  font-weight: 700;
  font-size: 0.7rem;
}

/* Badge en la topbar indicando el modo */
.mode-badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 600;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
}


.identity-row{
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.crest-uploader{
  width: 84px; height: 84px;
  border-radius: 16px;
  border: 2px dashed var(--chalk-line);
  background: var(--chalk);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 1.8rem;
  color: var(--slate-dim);
  position: relative;
}
.crest-uploader img{ width:100%; height:100%; object-fit:cover; }

.color-swatches{ display:flex; gap:8px; flex-wrap: wrap; align-items:center; }
.swatch{
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.swatch:hover{ transform: scale(1.1); }
.swatch.selected{ border-color: var(--slate); box-shadow: 0 0 0 2px var(--chalk-2), 0 0 0 4px var(--slate); }

.team-list{ display:flex; flex-direction:column; gap:8px; }
.team-list-item{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 14px;
  background: var(--chalk);
  border: 1px solid var(--chalk-line);
  border-radius: 8px;
  font-size: 0.9rem;
}
.team-add-row{ display:flex; gap:8px; margin-top:14px; }
.team-add-row input{ flex:1; }

.rival-crest-chip{
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--chalk-2);
  border: 1px solid var(--chalk-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--slate-dim);
  overflow: hidden;
  flex-shrink: 0;
}
.rival-crest-chip img{ width:100%; height:100%; object-fit:cover; }

.danger-zone{
  border: 1px solid #F3D5D5;
  background: #FDF6F6;
  border-radius: var(--r-md);
  padding: 18px;
}
.danger-zone h3{ color: #9A2A2A; font-size: 1rem; margin-bottom: 6px; font-family: var(--f-body); font-weight:700; }
.danger-zone p{ font-size: 0.85rem; color: var(--slate-dim); margin-bottom: 14px; }

/* ============================================================
   RESPONSIVE — MOBILE FIRST
   ≤768px: nav inferior fijo, layout 1-2 col
   769-1024px: tablet, topbar compacto
   >1024px: desktop completo
   ============================================================ */

/* ---- TABLET (≤1024px): sidebar más estrecha ---- */
/* ================================================================
   RESPONSIVE — TABLET (≤1024px)
   ================================================================ */
@media(max-width:1024px){
  .team-topbar{ width:180px; min-width:180px; }
  .team-main{ padding:24px 20px 60px; }
  .home-topbar{ padding:0 20px; }
  .home-body{ padding:20px 20px 60px; }
  .sidebar-app-logo{ display:none; }
  .team-nav button .nav-label{ font-size:0.8rem; }
  .settings-grid{ grid-template-columns:1fr; }
  .live-two-col{ grid-template-columns:1fr; }
  #statPlayerDetailPanel,#playerDetailPanel{ display:none !important; }
}

/* ================================================================
   RESPONSIVE — MÓVIL + TABLET PEQUEÑO (≤768px)
   ================================================================ */
@media(max-width:768px){

  /* Shell */
  .team-shell{ flex-direction:column; }

  /* Sidebar → topbar fina */
  .team-topbar{
    width:100% !important; min-width:unset !important;
    height:52px; min-height:unset;
    position:sticky; top:0; flex-direction:row;
    border-right:none; border-bottom:1px solid rgba(255,255,255,0.08);
    overflow:hidden;
  }
  .team-topbar-inner{ flex-direction:row !important; align-items:center; padding:0 14px; }
  .team-topbar-header{ padding:0; border-bottom:none; flex-direction:row; align-items:center; flex:1; }
  .sidebar-app-logo{ display:none; }
  .sidebar-team-selector{ padding:6px 10px; background:rgba(255,255,255,0.08); border-radius:8px; flex:1; max-width:260px; }
  .sidebar-chevron{ display:none; }
  .team-nav{ display:none !important; }
  .team-topbar-footer{ display:none; }

  /* Bottom nav */
  .bottom-nav{
    display:flex !important; position:fixed;
    bottom:0; left:0; right:0;
    background:var(--bg-1); border-top:1px solid var(--border);
    z-index:50; height:60px; box-shadow:0 -4px 20px rgba(0,0,0,0.12);
  }
  .bottom-nav-item{
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:2px;
    cursor:pointer; background:none; border:none;
    color:var(--text-3); font-family:var(--f-body);
    font-size:0.58rem; font-weight:600; letter-spacing:0.02em;
    padding:6px 4px 8px; transition:color 0.12s; position:relative;
  }
  .bottom-nav-item .bn-icon{ font-size:1.3rem; line-height:1; transition:transform 0.15s; }
  .bottom-nav-item.active{ color:var(--accent); }
  .bottom-nav-item.active .bn-icon{ transform:translateY(-1px); }
  .bottom-nav-item.active::after{
    content:''; position:absolute; bottom:5px;
    width:4px; height:4px; border-radius:50%; background:var(--accent);
  }

  /* Contenido */
  .team-main{ padding:14px 12px 76px; min-height:unset; }

  /* View header */
  .view-header{ flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:16px; }
  .view-header h2{ font-size:1.3rem; }
  .view-header > div:last-child{ width:100%; }
  .view-header > div:last-child .btn{ width:100%; justify-content:center; }

  /* Home */
  .home-topbar{ height:52px; padding:0 14px; }
  .home-body{ padding:14px 12px 80px; }
  .home-cards{ grid-template-columns:1fr 1fr; gap:10px; }
  .team-tile-band{ height:100px; }
  .team-tile-crest{ width:60px; height:60px; font-size:1.6rem; }
  .team-tile-body{ padding:10px 12px 12px; }

  /* Plantilla */
  .players-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .grid-density-controls{ display:none; }

  /* Partidos */
  .matches-stats-bar{ flex-wrap:wrap; }
  .msb-item{ min-width:45%; }
  .matches-grid{ grid-template-columns:1fr !important; }
  .mc-crest{ width:40px; height:40px; }
  .mc-score-num{ font-size:1.4rem; }

  /* Control en vivo */
  .live-two-col{ grid-template-columns:1fr; gap:12px; }
  .live-fixture-row{ gap:8px; }
  .live-crest{ width:48px; height:48px; }
  .live-team-name{ font-size:0.78rem; }
  .live-scoreboard-card{ padding:14px; }
  .live-controls{ grid-template-columns:1fr 1fr; gap:8px; }
  .live-ctrl-main{ grid-column:span 2; }
  .live-ctrl-end{ grid-column:span 2; }

  /* Estadísticas */
  #statPlayerDetailPanel,#playerDetailPanel{ display:none !important; }

  /* Historial */
  .history-table-header{ display:none; }

  /* Liga */
  .league-two-col{ grid-template-columns:1fr; gap:12px; }

  /* Ajustes */
  .settings-grid{ grid-template-columns:1fr; }
  .settings-two-col{ grid-template-columns:1fr !important; }
  .tracking-mode-cards{ grid-template-columns:1fr; }

  /* Pizarra táctica */
  .pitch{ aspect-ratio:100/80; }
  .pitch-player{ width:38px; }
  .pitch-shirt{ width:26px; height:26px; font-size:0.65rem; }
  .pitch-tag{ font-size:0.52rem; max-width:46px; }
  .tactics-head{ flex-direction:column; align-items:flex-start; gap:8px; }
  .formation-controls{ flex-wrap:wrap; gap:6px; }

  /* Modales */
  .modal{ border-radius:14px; margin:8px; width:calc(100% - 16px); max-height:90vh; overflow-y:auto; }
  .modal-head{ padding:14px 18px 0; }
  .modal-body{ padding:14px 18px; }
  .modal-foot{ padding:10px 18px; flex-direction:column; }
  .modal-foot .btn{ min-width:unset; }

  /* Tablas */
  .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .data-table{ min-width:520px; }

  /* Heatmap */
  .quick-actions-panel{ gap:4px; }
  .qa-btn{ padding:7px 8px; font-size:0.72rem; }
  .qa-player-chips{ max-height:60px; }

  /* Grids de ajustes: 1 col */
  .settings-two-col{ grid-template-columns:1fr !important; }
}

/* ================================================================
   RESPONSIVE — SOLO MÓVIL PEQUEÑO (≤480px)
   ================================================================ */
@media(max-width:480px){
  .home-cards{ grid-template-columns:1fr; }
  .team-tile-band{ height:90px; }
  .team-tile-crest{ width:52px; height:52px; font-size:1.4rem; }
  .players-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .msb-item{ min-width:48%; }
  .live-two-col{ grid-template-columns:1fr; }
  .modal{ margin:4px; width:calc(100% - 8px); }
  .btn-row{ flex-wrap:wrap; }
  .btn-row .btn{ flex:1 1 auto; }
}

/* ---- Bottom nav oculto en desktop ---- */
.bottom-nav{ display:none; }

/* Panel "Más" de la barra inferior */
.bottom-nav-more-panel{
  position: fixed;
  bottom: 60px; left: 0; right: 0;
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  z-index: 49;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.18);
  animation: slideUpPanel 0.18s ease-out;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@keyframes slideUpPanel{
  from{ transform: translateY(100%); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}

.bnm-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: none;
  border: none;
  color: var(--text-1);
  font-family: var(--f-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

.bnm-item:hover{ background: var(--bg-2); }

.bnm-close{
  margin-top: 6px;
  padding: 10px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-family: var(--f-body);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: background 0.1s;
}

.bnm-close:hover{ background: var(--bg-3); }

/* Overlay oscuro tras el panel "Más" */
.bottom-nav-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 48;
  display: none;
}