:root {
  --verde-cesped: #0B1F17;
  --verde-panel: #14291E;
  --verde-panel-alt: #1B3327;
  --tiza: #F3EFE3;
  --tiza-tenue: #9FB0A5;
  --ambar: #E8A33D;
  --ambar-fuerte: #F2C94C;
  --rojo: #C1443C;
  --verde-ascenso: #4C9A6A;
  --borde: rgba(243, 239, 227, 0.12);
  --color-portero: #B983FF;
  --color-defensa: #5B9BD5;
  --color-medio: #4ECDC4;
  --color-delantero: #F2994A;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--verde-cesped);
  background-image: radial-gradient(circle at 50% -10%, rgba(232, 163, 61, 0.08), transparent 60%);
  color: var(--tiza);
  font-family: 'Work Sans', sans-serif;
  min-height: 100vh;
}

#app { max-width: 720px; margin: 0 auto; padding-bottom: 48px; }

.cargando { padding: 64px 24px; text-align: center; color: var(--tiza-tenue); font-family: 'Space Mono', monospace; }

/* ---------- Cabecera y nav (fijas arriba siempre, en cualquier pestaña) ---------- */
.nav-fija {
  position: sticky; top: 0; z-index: 30;
  background: var(--verde-cesped);
  background-image: radial-gradient(circle at 50% -10%, rgba(232, 163, 61, 0.08), transparent 60%);
}
.cabecera {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 18px 20px 12px; border-bottom: 1px solid var(--borde);
}
.marca { display: flex; align-items: center; gap: 12px; }
.escudo {
  width: 44px; height: 44px; border-radius: 8px; background: var(--ambar);
  color: var(--verde-cesped); display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 1px; flex-shrink: 0;
}
.nombre-club { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.5px; line-height: 1.1; }
.sub-marca { font-family: 'Space Mono', monospace; font-size: 12px; color: var(--tiza-tenue); }
.boton-fantasma {
  background: transparent; border: 1px solid var(--borde); color: var(--tiza-tenue);
  padding: 8px 12px; border-radius: 6px; font-family: 'Work Sans', sans-serif; font-size: 12px; cursor: pointer;
}
.boton-fantasma:hover { border-color: var(--rojo); color: var(--rojo); }
.boton-pequeno { padding: 4px 8px; font-size: 11px; }

.tendencia-sube { color: var(--verde-ascenso); font-weight: 700; }
.tendencia-baja { color: var(--rojo); font-weight: 700; }
.tendencia-estable { color: var(--tiza-tenue); }

.selector-foco { display: flex; gap: 8px; flex-wrap: wrap; }
.boton-foco {
  background: transparent; border: 1px solid var(--borde); color: var(--tiza-tenue);
  padding: 8px 14px; border-radius: 6px; font-family: 'Work Sans', sans-serif; font-size: 13px; cursor: pointer;
}
.boton-foco:hover { border-color: var(--tiza); color: var(--tiza); }
.boton-foco.activo { background: var(--verde-ascenso); border-color: var(--verde-ascenso); color: #08130d; font-weight: 700; }

.tag-potencial {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-family: 'Work Sans', sans-serif; font-size: 11px; font-weight: 700;
  border: 1px solid transparent; white-space: nowrap;
}
.tag-potencial-basico { color: var(--tiza-tenue); background: rgba(159, 176, 165, 0.12); border-color: rgba(159, 176, 165, 0.25); }
.tag-potencial-regular { color: #B7C9BD; background: rgba(183, 201, 189, 0.12); border-color: rgba(183, 201, 189, 0.25); }
.tag-potencial-normal { color: var(--tiza); background: rgba(243, 239, 227, 0.10); border-color: rgba(243, 239, 227, 0.22); }
.tag-potencial-bueno { color: var(--color-medio); background: rgba(78, 205, 196, 0.12); border-color: rgba(78, 205, 196, 0.30); }
.tag-potencial-excelente { color: var(--verde-ascenso); background: rgba(76, 154, 106, 0.14); border-color: rgba(76, 154, 106, 0.35); }
.tag-potencial-brillante { color: var(--ambar-fuerte); background: rgba(242, 201, 76, 0.14); border-color: rgba(242, 201, 76, 0.35); }
.tag-potencial-genio {
  color: #08130d; background: linear-gradient(120deg, var(--ambar-fuerte), #ffe9a8);
  border-color: var(--ambar-fuerte); font-weight: 800; box-shadow: 0 0 10px rgba(242, 201, 76, 0.35);
}

.salario { color: var(--ambar); font-weight: 700; }
.icono-estado { font-size: 11px; opacity: 0.9; }

.marca { position: relative; }
.campana-avisos {
  position: relative; margin-left: 6px; background: transparent; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 2px;
}
.campana-numero {
  position: absolute; top: -6px; right: -8px; background: var(--rojo); color: var(--tiza);
  font-family: 'Work Sans', sans-serif; font-size: 10px; font-weight: 700;
  border-radius: 999px; padding: 1px 5px; min-width: 14px; text-align: center;
}

.barra-moral { height: 10px; border-radius: 999px; background: rgba(243, 239, 227, 0.10); overflow: hidden; margin-bottom: 4px; }
.barra-moral-relleno { height: 100%; background: linear-gradient(90deg, var(--rojo), var(--ambar), var(--verde-ascenso)); }

.panel-avisos { border-color: var(--ambar); }
.fila-pendiente { padding: 8px 0; border-bottom: 1px solid var(--borde); }
.fila-pendiente:last-child { border-bottom: none; }
.fila-pendiente-botones { display: flex; gap: 8px; margin-top: 6px; }

.aviso-club {
  margin-top: 10px; padding: 8px 10px; border-radius: 6px;
  background: rgba(242, 201, 76, 0.08); border: 1px solid rgba(242, 201, 76, 0.25);
  font-size: 13px; line-height: 1.6;
}

.fila-renombrar { display: flex; gap: 8px; margin-bottom: 8px; }
.fila-renombrar input[type="text"] {
  flex: 1; background: rgba(243, 239, 227, 0.06); border: 1px solid var(--borde); border-radius: 6px;
  color: var(--tiza); padding: 8px 10px; font-family: 'Work Sans', sans-serif; font-size: 14px;
}
.fila-renombrar input[type="text"]:focus { outline: none; border-color: var(--ambar); }

.detalle-division { margin-bottom: 10px; }
.detalle-division summary {
  cursor: pointer; font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 0.5px;
  color: var(--tiza); padding: 6px 0;
}
.detalle-division .tabla { margin-top: 6px; }
.fila-equipo-actual { background: rgba(76, 154, 106, 0.10); }

.cabecera-derecha { display: flex; align-items: center; gap: 12px; }
.saldo-cabecera {
  font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700; color: var(--verde-ascenso);
  background: rgba(76, 154, 106, 0.12); border: 1px solid rgba(76, 154, 106, 0.35);
  padding: 6px 10px; border-radius: 6px;
}
.saldo-cabecera.saldo-negativo { color: var(--rojo); background: rgba(193, 68, 60, 0.12); border-color: rgba(193, 68, 60, 0.35); }

.panel-saldo { text-align: center; }
.saldo-grande { font-family: 'Bebas Neue', sans-serif; font-size: 42px; color: var(--verde-ascenso); letter-spacing: 1px; }
.saldo-grande.saldo-negativo { color: var(--rojo); }

.tabla-finanzas th:nth-child(3), .tabla-finanzas td:nth-child(3),
.tabla-finanzas th:nth-child(4), .tabla-finanzas td:nth-child(4) { text-align: right; }
.cifra-positiva { color: var(--verde-ascenso); }
.cifra-negativa { color: var(--rojo); }

.fila-puja-propia { background: rgba(76, 154, 106, 0.10); }
.puja-ganando { color: var(--verde-ascenso); font-weight: 700; }

.tabs {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 16px; border-bottom: 1px solid var(--borde);
}
.tab {
  background: transparent; border: none; color: var(--tiza-tenue); padding: 8px 14px;
  border-radius: 999px; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s;
}
.tab:hover { background: var(--verde-panel-alt); color: var(--tiza); }
.tab.activa { background: var(--ambar); color: var(--verde-cesped); }

.contenido { padding: 20px 16px 8px; }

/* ---------- Marcador (hero de Inicio) ---------- */
.marcador {
  background: var(--verde-panel);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  margin-bottom: 18px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset;
}
.jornada-numero { font-family: 'Bebas Neue', sans-serif; font-size: 44px; color: var(--ambar-fuerte); letter-spacing: 2px; line-height: 1; text-shadow: 0 0 18px rgba(242, 201, 76, 0.35); }
.tipo-jornada { font-family: 'Space Mono', monospace; font-size: 12px; color: var(--tiza-tenue); letter-spacing: 3px; margin-top: 4px; }
.marcador-vs { font-family: 'Work Sans', sans-serif; font-size: 17px; font-weight: 600; margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.marcador-vs.sin-partido { color: var(--tiza-tenue); font-style: italic; font-weight: 500; }
.marcador-vs .vs { font-family: 'Space Mono', monospace; color: var(--ambar); font-size: 13px; }
.equipo-usuario { color: var(--ambar-fuerte); }
.detalle-marcador { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--tiza-tenue); margin-top: 8px; }

.boton-jugar {
  display: block; width: 100%; padding: 16px; margin: 4px 0 18px;
  background: linear-gradient(180deg, var(--ambar-fuerte), var(--ambar));
  color: var(--verde-cesped); border: none; border-radius: 10px;
  font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 2px; cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,0.25), 0 0 24px rgba(232, 163, 61, 0.25);
  transition: transform 0.08s;
}
.boton-jugar:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.25); }
.boton-jugar:disabled { opacity: 0.6; cursor: default; }

.boton-jugar-cabecera {
  padding: 8px 16px;
  background: linear-gradient(180deg, var(--ambar-fuerte), var(--ambar));
  color: var(--verde-cesped); border: none; border-radius: 8px;
  font-family: 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: 1px; cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,0.25);
  transition: transform 0.08s;
}
.boton-jugar-cabecera:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,0.25); }
.boton-jugar-cabecera:disabled { opacity: 0.6; cursor: default; }

/* ---------- Paneles genéricos ---------- */
.panel { background: var(--verde-panel); border: 1px solid var(--borde); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.panel-titulo { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 1px; color: var(--ambar); margin-bottom: 10px; }
.panel-resultado .linea-resultado { font-size: 16px; font-weight: 600; }
.linea-resultado.sin-partido { color: var(--tiza-tenue); font-style: italic; font-weight: 400; }

.panel-resumen .fila-resumen { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--borde); font-size: 14px; }
.panel-resumen .fila-resumen:last-child { border-bottom: none; }
.panel-resumen .fila-resumen.sub { font-size: 12px; color: var(--tiza-tenue); font-family: 'Space Mono', monospace; }

.nota-copa { font-size: 12px; color: var(--tiza-tenue); margin-top: 10px; }

/* ---------- Tablas ---------- */
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th { text-align: left; font-family: 'Space Mono', monospace; font-size: 10px; color: var(--tiza-tenue); text-transform: uppercase; letter-spacing: 1px; padding: 6px 6px; border-bottom: 1px solid var(--borde); }
.tabla td { padding: 7px 6px; border-bottom: 1px solid var(--borde); }
.tabla tr:last-child td { border-bottom: none; }
.tabla .mono { font-family: 'Space Mono', monospace; }
.tabla-clasificacion th, .tabla-clasificacion td { text-align: center; }
.tabla-clasificacion th:nth-child(2), .tabla-clasificacion td:nth-child(2) { text-align: left; }
.tabla-clasificacion .pts { font-weight: 700; color: var(--ambar); }
.fila-usuario { background: rgba(232, 163, 61, 0.1); }
.fila-usuario td:nth-child(2) { color: var(--ambar-fuerte); font-weight: 700; }
.zona-ascenso td:first-child { box-shadow: inset 3px 0 0 var(--verde-ascenso); }
.zona-descenso td:first-child { box-shadow: inset 3px 0 0 var(--rojo); }
.fila-siguiente { background: rgba(232, 163, 61, 0.08); }
.estado-jornada { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--tiza-tenue); text-align: right; }
.etiqueta-tipo { font-family: 'Space Mono', monospace; font-size: 10px; padding: 2px 6px; border-radius: 4px; }
.etiqueta-tipo.liga { background: rgba(76, 154, 106, 0.2); color: var(--verde-ascenso); }
.etiqueta-tipo.copa { background: rgba(232, 163, 61, 0.2); color: var(--ambar); }

.selector {
  width: 100%; padding: 10px; margin-bottom: 14px; background: var(--verde-panel-alt);
  color: var(--tiza); border: 1px solid var(--borde); border-radius: 8px; font-family: 'Work Sans', sans-serif; font-size: 13px;
}
.leyenda { display: flex; gap: 16px; margin-top: 10px; font-size: 11px; color: var(--tiza-tenue); align-items: center; }
.marca-zona { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.marca-zona.zona-ascenso { background: var(--verde-ascenso); }
.marca-zona.zona-descenso { background: var(--rojo); }

.ascenso-info {
  margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  background: rgba(76, 154, 106, 0.12); border: 1px solid rgba(76, 154, 106, 0.35);
  font-size: 13px; color: var(--verde-ascenso);
}
.ascenso-info strong { color: var(--tiza); }
.ascenso-info.sin-ascenso { background: var(--verde-panel-alt); border-color: var(--borde); color: var(--tiza-tenue); font-style: italic; }

.separador-jornada {
  font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--verde-cesped); background: var(--ambar); display: inline-block;
  padding: 3px 10px; border-radius: 999px; margin: 14px 0 6px;
}
.subtitulo-partidos { font-family: 'Space Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--tiza-tenue); margin: 14px 0 4px; border-top: 1px solid var(--borde); padding-top: 10px; }

/* ---------- Copa ---------- */
.fase-copa { margin-bottom: 18px; }
.fase-titulo { font-family: 'Bebas Neue', sans-serif; font-size: 17px; color: var(--ambar); letter-spacing: 0.5px; margin-bottom: 8px; }
.grid-grupos-copa { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grupo-copa { background: var(--verde-panel-alt); border: 1px solid transparent; border-radius: 8px; padding: 10px 12px; }
.grupo-copa.grupo-destacado { border-color: var(--ambar); background: rgba(232, 163, 61, 0.08); }
.grupo-titulo { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--tiza-tenue); text-transform: uppercase; margin-bottom: 6px; }
.lista-grupo { margin: 0; padding-left: 18px; font-size: 12px; }
.lista-grupo li.equipo-usuario { color: var(--ambar-fuerte); font-weight: 700; }
.linea-partido-mini, .linea-partido { font-size: 12px; padding: 4px 0; display: flex; gap: 6px; align-items: center; }
.linea-partido { justify-content: center; font-size: 14px; }
.linea-partido.linea-usuario { color: var(--ambar-fuerte); font-weight: 700; }
.ronda-etiqueta { font-family: 'Space Mono', monospace; font-size: 9px; text-transform: uppercase; color: var(--tiza-tenue); background: var(--verde-panel-alt); padding: 2px 6px; border-radius: 4px; }

@media (max-width: 480px) {
  .grid-grupos-copa { grid-template-columns: 1fr; }
}

/* ---------- Módulos ---------- */
.grid-modulos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.tarjeta-modulo { background: var(--verde-panel-alt); border: 1px dashed var(--borde); border-radius: 10px; padding: 12px; opacity: 0.7; }
.tarjeta-modulo.modulo-activo { opacity: 1; border-style: solid; border-color: var(--ambar); }
.modulo-titulo { font-family: 'Bebas Neue', sans-serif; font-size: 16px; color: var(--tiza); letter-spacing: 0.5px; }
.modulo-desc { font-size: 11px; color: var(--tiza-tenue); margin: 4px 0 8px; line-height: 1.4; }
.modulo-estado { font-family: 'Space Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--ambar); }
.modulo-activo .modulo-estado { color: var(--verde-ascenso); }

@media (max-width: 480px) {
  .grid-modulos { grid-template-columns: 1fr; }
  .jornada-numero { font-size: 36px; }
}

/* ---------- Plantilla: color por tipo de jugador ---------- */
.fila-posicion td:first-child { box-shadow: inset 3px 0 0 var(--fila-color, var(--tiza-tenue)); }
.fila-portero { --fila-color: var(--color-portero); }
.fila-defensa { --fila-color: var(--color-defensa); }
.fila-medio { --fila-color: var(--color-medio); }
.fila-delantero { --fila-color: var(--color-delantero); }

.badge-posicion {
  font-family: 'Space Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 7px; border-radius: 4px; color: var(--verde-cesped); font-weight: 700;
}
.badge-portero { background: var(--color-portero); }
.badge-defensa { background: var(--color-defensa); }
.badge-medio { background: var(--color-medio); }
.badge-delantero { background: var(--color-delantero); }
.sub-posicion { font-size: 11px; color: var(--tiza-tenue); margin-left: 6px; }

/* ---------- Partido en vivo (Intervención humana) ---------- */
.boton-en-vivo { background: linear-gradient(180deg, #E8665E, var(--rojo)); color: var(--tiza); }
.boton-ancho { display: block; width: 100%; padding: 10px; margin: -8px 0 18px; }
.marcador-vivo { padding: 20px 16px; }
.punto-vivo { color: var(--rojo); animation: latido 1.4s ease-in-out infinite; }
@keyframes latido { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .punto-vivo { animation: none; } }
.marcador-vivo-fila { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 14px; }
.equipo-vivo { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.equipo-vivo:first-child { text-align: right; }
.equipo-vivo:last-child { text-align: left; }
.goles-vivo { font-family: 'Bebas Neue', sans-serif; font-size: 52px; line-height: 1; color: var(--ambar-fuerte); letter-spacing: 3px; font-variant-numeric: tabular-nums; }
.linea-tiempo { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 16px; }
.tramo { height: 18px; border-radius: 3px; background: var(--verde-panel-alt); border: 1px solid var(--borde); font-size: 10px; line-height: 16px; }
.tramo.jugado { background: var(--verde-ascenso); border-color: var(--verde-ascenso); }
.tramo.siguiente { border-color: var(--ambar); }
.tramo-descanso { margin-right: 6px; }
.panel-destacado { border-color: var(--ambar); }
.panel-alerta { border-color: var(--rojo); }
.boton-desesperada { border-color: var(--rojo); color: var(--tiza); }
.evento-vivo { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--borde); font-size: 13px; flex-wrap: wrap; }
.evento-vivo:last-child { border-bottom: none; }
.evento-vivo .minuto { color: var(--tiza-tenue); font-size: 11px; min-width: 52px; }
.evento-vivo .evento-jugador { margin-left: auto; }
.evento-equipo { color: var(--tiza-tenue); font-size: 11px; }
.evento-mio .evento-jugador { color: var(--ambar-fuerte); font-weight: 600; }
.contador-vivo { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--tiza-tenue); letter-spacing: 0; margin-left: 6px; }
.fila-cambio { display: flex; gap: 8px; flex-wrap: wrap; }
.fila-cambio select { flex: 1 1 140px; min-width: 0; }
.nota-fuera { color: var(--rojo); font-size: 11px; }

/* ---------- Multijugador: acceso, reloj, administración ---------- */
.acceso { max-width: 420px; margin: 0 auto; padding-top: 40px; }
.campo { display: block; font-size: 13px; color: var(--tiza-tenue); margin-bottom: 12px; }
.campo input { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--borde); background: var(--verde-panel-alt); color: var(--tiza); font-size: 16px; font-family: inherit; }
.campo input:focus { outline: 2px solid var(--ambar); outline-offset: 1px; }
.aviso-error { color: #F08A82; font-size: 13px; margin: 4px 0 12px; }
.cuenta-atras { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--tiza-tenue); text-align: right; line-height: 1.3; }
.cuenta-atras strong { color: var(--ambar-fuerte); font-size: 12px; }
.panel-proxima .panel-titulo { margin-bottom: 4px; }
.panel-admin { border-style: dashed; }
.nota-directo { text-align: center; margin: -8px 0 14px; }
.fila-marcador { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--borde); font-size: 13px; }
.fila-marcador:last-child { border-bottom: none; }
.fila-marcador span:first-child { text-align: right; }
.fila-marcador .mono { color: var(--ambar-fuerte); }

/* ---------- Cuentas ---------- */
.aviso-ok { color: #8FD3A8; font-size: 13px; margin: 4px 0 12px; }
.nota-campo { font-size: 11px; color: var(--tiza-tenue); }
.boton-enlace { display: block; margin: 4px auto 0; background: none; border: none; color: var(--tiza-tenue); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; padding: 8px; }
.boton-enlace:hover { color: var(--tiza); }
.boton-peligro { border-color: var(--rojo); color: #F08A82; }
.acceso p { font-size: 14px; line-height: 1.5; margin-top: 0; }

/* ---------- Panel de administración ---------- */
.tabla-desplazable { overflow-x: auto; }
.acciones-admin { white-space: nowrap; }
.acciones-admin .boton-pequeno { margin: 2px 0; }
.filtro-admin { width: 100%; margin-bottom: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--borde); background: var(--verde-panel-alt); color: var(--tiza); font: inherit; }
.fila-resumen-admin { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--borde); font-size: 13px; flex-wrap: wrap; }
.fila-resumen-admin:last-child { border-bottom: none; }
input[type="datetime-local"] { padding: 8px; border-radius: 8px; border: 1px solid var(--borde); background: var(--verde-panel-alt); color: var(--tiza); font: inherit; color-scheme: dark; }

/* ---------- Plan de partido ---------- */
.regla-plan { border: 1px solid var(--borde); border-radius: 8px; padding: 8px; margin-top: 8px; }
.regla-plan-fila { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 3px 0; }
.regla-plan-fila select { flex: 1 1 120px; min-width: 0; }

/* ---------- Mensajes ---------- */
.insignia { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--rojo); color: var(--tiza); font-size: 11px; line-height: 18px; text-align: center; font-weight: 700; }
.sub-pestanas { margin-bottom: 12px; }
.mensaje { border-bottom: 1px solid var(--borde); }
.mensaje:last-child { border-bottom: none; }
.boton-mensaje { width: 100%; display: flex; justify-content: space-between; gap: 10px; background: none; border: none; color: var(--tiza); text-align: left; padding: 10px 0; cursor: pointer; font: inherit; font-size: 14px; flex-wrap: wrap; }
.mensaje-nuevo .boton-mensaje strong { color: var(--ambar-fuerte); }
.mensaje-nuevo .boton-mensaje::before { content: "●"; color: var(--ambar); margin-right: -4px; }
.mensaje-cuerpo { padding: 0 0 12px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.mensaje-tablon { padding: 10px 0; border-bottom: 1px solid var(--borde); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.mensaje-tablon:last-child { border-bottom: none; }
.mensaje-cabecera .boton-enlace { display: inline; margin: 0 0 0 8px; padding: 0; font-size: 12px; }
.enlace-manager { display: inline; margin: 0; padding: 0; font-size: 12px; }
textarea, .campo textarea { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--borde); background: var(--verde-panel-alt); color: var(--tiza); font: inherit; font-size: 15px; resize: vertical; }

/* --- Ligas privadas --- */
.selector-mundo { max-width: 190px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--borde); background: var(--verde-panel-alt); color: var(--tiza); font-family: inherit; font-size: 13px; }
.campo select { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--borde); background: var(--verde-panel-alt); color: var(--tiza); font-size: 16px; font-family: inherit; }
.fila-formulario { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fila-formulario input { flex: 1 1 160px; min-width: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--borde); background: var(--verde-panel-alt); color: var(--tiza); font-size: 16px; font-family: inherit; }
.panel-subtitulo { margin: 14px 0 6px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--tiza-tenue); }
.horario-dias { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 4px 0 10px; font-size: 14px; }
.dia-check { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.codigo-liga { font-size: 20px; letter-spacing: 3px; color: var(--ambar); padding: 4px 10px; border: 1px dashed var(--borde); border-radius: 8px; }

/* --- Atributos y puestos --- */
.nota-alta { color: var(--ambar-fuerte); font-weight: 700; }
.nota-media { color: var(--verde-ascenso); }
.nota-baja { color: var(--tiza); }
.nota-mala { color: var(--tiza-tenue); }
.nombre-jugador { text-align: left; color: var(--tiza); font-size: inherit; }
.fila-ficha td { background: var(--verde-panel-alt); }
.ficha-jugador { padding: 6px 2px; }
.atributos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; }
.grupo-titulo { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--tiza-tenue); margin-bottom: 4px; }
.atributo { display: flex; justify-content: space-between; font-size: 13px; padding: 2px 0; border-bottom: 1px dotted var(--borde); cursor: help; }
.valor-atributo { font-family: 'Space Mono', monospace; min-width: 22px; text-align: right; }
.notas-puesto { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.nota-puesto { display: inline-flex; gap: 4px; align-items: center; font-family: 'Space Mono', monospace; font-size: 13px; }
.once { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 18px; margin-top: 8px; }
.fila-hueco { display: grid; grid-template-columns: 54px 1fr 38px; gap: 8px; align-items: center; margin-bottom: 6px; }
.fila-hueco select { min-width: 0; width: 100%; padding: 6px; border-radius: 8px; border: 1px solid var(--borde); background: var(--verde-panel-alt); color: var(--tiza); font-family: inherit; font-size: 14px; }
.lista-suplentes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 14px; }
.suplente-check { font-size: 13px; }
.valoraciones { display: grid; gap: 6px; }
.valoracion { display: grid; grid-template-columns: 92px 1fr 92px; gap: 8px; align-items: center; font-size: 13px; }
.valoracion .barra { height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.valoracion .relleno { display: block; height: 100%; background: var(--ambar); border-radius: 4px; }
.valoracion .relleno.gana { background: var(--verde-ascenso); }
.valoracion .relleno.pierde { background: var(--rojo); }
.badge-posicion { white-space: nowrap; }