/* =========================================================
   PÁGINA.CSS — estilos comunes para público (Bootstrap-based)
   Secciones:
   1) Utilidades generales
   2) Equipos (cards, modal y submodal)
   3) Modales reutilizables (resultados / jugador)
   4) Tablas y timeline de incidencias
   5) Componentes de estadísticas / leaderboards
   6) Tabla de posiciones (card, header sticky, leyenda)
   7) Avatares consistentes (jugador + escudo)
   ========================================================= */

/* ===== Variables utilitarias ===== */
:root{
  /* altura fija de los listados; ajusta a gusto.
     Con 10 filas se ve bien con 340–360px. */
  --leader-h: 348px;
}

/* Tamaño fijo solo al logo del navbar */
.navbar .brand-logo {
  height: 42px;
  width: auto;
  max-width: none;  /* evita que la regla global lo limite */
}

/* ========== 1) UTILIDADES GENERALES ========== */

.obj-cover { object-fit: cover; }
.obj-contain { object-fit: contain; }

.avatar { display:inline-block; border-radius:50%; }
.avatar-16 { width:16px; height:16px; }
.avatar-24 { width:24px; height:24px; }
.avatar-28 { width:28px; height:28px; }
.avatar-36 { width:36px; height:36px; }
.avatar-40 { width:40px; height:40px; }
.avatar-42 { width:42px; height:42px; }
.avatar-46 { width:46px; height:46px; }
.avatar-88 { width:88px; height:88px; }
.avatar-96 { width:96px; height:96px; }
.avatar-110 { width:110px; height:110px; }

.border-white { border-width: 2px !important; }
.preline { white-space: pre-line; }

.w-14p { width:14%; }
.w-18p { width:18%; }
.w-34p { width:34%; }

.color-chip{
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid #e9ecef; border-radius: 999px;
  padding: .35rem .75rem; background: #fff;
}
.color-chip .dot{
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15);
}
.color-chip .hex{ font-weight: 600; font-size: .9rem; }
.color-chip .label{ color:#6c757d; }

.meta-line{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; margin-bottom:.25rem; }
.meta-line .sep{ opacity:.5; }

.equipos-hero{
  background:#fff; border:1px solid #e9efff; border-radius:1rem;
}
.filters .form-select{ min-width:180px; }
@media (max-width: 767.98px){
  .filters{ flex-direction: column; }
  .filters .form-select, .filters .btn{ width: 100%; }
}

/* ========== 2) EQUIPOS ========== */

.equipo-card{
  position: relative; border:0; border-radius:1rem; cursor:pointer; overflow:hidden;
  min-height:220px; transition: transform .2s ease; box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.equipo-card:hover{ transform: translateY(-2px); }
.equipo-card::before{
  content:""; position:absolute; inset:0;
  background-image: var(--foto); background-size: cover; background-position: center;
  filter: blur(10px) saturate(1.1) brightness(.9); transform: scale(1.12); opacity:.35; image-rendering: pixelated; z-index:0;
}
.equipo-card > *{ position: relative; z-index:1; }
.equipo-card .card-title{ font-weight:700; }
.equipo-card .card-body p{ color:#000 !important; }

.equipo-logo{
  width:110px; height:110px; border-radius:50%; object-fit:contain;
  background:#fff; padding:6px; display:block; margin:0 auto;
}
.equipo-logo--md{ width:116px; height:116px; }

.equipo-modal{
  position: fixed; inset:0; display:none; align-items:center; justify-content:center;
  background: rgba(0,0,0,.6); padding:1rem; z-index:9999;
}

.equipo-modal.is-open{ display:flex; }
.equipo-modal .modal-card{
  width:100%; max-width:520px; border:0; border-radius:1rem; background:#fff;
  box-shadow: 0 20px 50px rgba(0,0,0,.25); position: relative;
  max-height: 88vh; display:flex; flex-direction:column;
  transform: translateY(10px) scale(.98); opacity:0; transition: transform .2s ease, opacity .2s ease;
  padding-top: 2.5rem;
}
.equipo-modal.is-open .modal-card{ transform: translateY(0) scale(1); opacity:1; }
.equipo-modal .btn-close{ position:absolute; top:.75rem; right:.75rem; z-index:2; }

.modal-header-soft{
  padding: 1rem 1.25rem .75rem 1.25rem; text-align:center; border-bottom:1px solid #f1f1f5;
}
.modal-header-soft h5{ font-weight:700; }
.modal-header-soft small{ display:block; color:#6c757d; }
.scroll-area{ padding:1rem 1.25rem 1.25rem 1.25rem; overflow-y:auto; }

.submodal{
  position: fixed; inset:0; background: rgba(0,0,0,.55);
  display:none; align-items:center; justify-content:center; z-index:10000; padding:1rem;
}
.submodal.is-open{ display:flex; }
.submodal .submodal-card{
  width:100%; max-width:520px; background:#fff; border-radius:1rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.35); position:relative;
  max-height:88vh; display:flex; flex-direction:column; padding-top:2.5rem;
}
.submodal .btn-close{ position:absolute; top:.75rem; right:.75rem; }
.submodal-header-soft{
  padding:1rem 1.25rem .5rem 1.25rem; border-bottom:1px solid #f1f1f5; text-align:center;
}
.sub-scroll-area{ padding:1rem 1.25rem 1.25rem 1.25rem; overflow-y:auto; }

/* ========== 3) MODALES REUTILIZABLES (resultados / estadísticas) ========== */

.res-modal, .jug-modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background: rgba(0,0,0,.35); z-index:1050; padding:1rem;
}
.res-modal.is-open, .jug-modal.is-open{ display:flex; }

.res-modal .modal-card,
.jug-modal .modal-card{
  width:100%; max-width:720px; border-radius:1rem; background:#fff;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.jug-modal .modal-card{ max-width:420px; padding:1rem 1rem .75rem; position:relative; }
.jug-modal .btn-close{ position:absolute; top:.75rem; right:.75rem; }

/* Avatar centrado en el modal */
.modal-avatar-wrap{ display:flex; justify-content:center; margin-bottom:.5rem; }

/* Grid marcador */
.score-grid{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
}

/* ========== 4) TABLAS Y TIMELINE DE INCIDENCIAS ========== */

.ico{
  width:18px; display:inline-flex; align-items:center; justify-content:center;
  font-size:.95rem; vertical-align:middle;
}
.tarj{
  width:12px; height:16px; border-radius:2px; display:inline-block;
  border:1px solid rgba(0,0,0,.15); vertical-align:middle;
}
.tarj-amarilla{ background:#ffd60a; border-color:#c9a800; }
.tarj-roja{ background:#f44336; border-color:#c62828; }
.ev-piece{ display:inline-flex; align-items:center; gap:.35rem; }
.ev-name{}

.table-timeline{ table-layout:fixed; width:100%; }
.table-timeline col.tl-left{ width:45%; }
.table-timeline col.tl-min{ width:70px; }
.table-timeline col.tl-right{ width:45%; }

.th-w-34 { width:34%; }
.th-w-14 { width:14%; }
.th-w-18 { width:18%; }

.table thead th { vertical-align: middle; }
.table-striped>tbody>tr:nth-of-type(odd)>* { --bs-table-accent-bg: rgba(0,0,0,.015); }

/* ========== 5) ESTADÍSTICAS / LEADERBOARDS ========== */

/* MISMA ALTURA en todas las tarjetas + scroll interno */
.stat-card{ display:flex; flex-direction:column; }
.stat-body{ padding:.5rem .5rem !important; }
.leader-scroll{ max-height:var(--leader-h); padding-right:.25rem; overflow:auto; }

.badge-soft{
  display:inline-block; padding:.45rem .9rem; border-radius:999px;
  background:#f5f7ff; border:1px solid #e6ebff; font-weight:600;
}

/* helpers de grid para listados */
.lb-grid{
  display:grid;
  grid-template-columns: 1fr auto; /* izquierda: info; derecha: valor */
  row-gap:.55rem; column-gap:.5rem; align-items:center;
}
.lb-grid-rows{
  display:grid;
  grid-template-columns: 1fr auto;
  row-gap:.6rem; column-gap:.5rem; align-items:center;
}
.idx-col{ width:1.5rem; flex:0 0 1.5rem; text-align:right; }

/* ========== 6) TABLA DE POSICIONES (card, header sticky, leyenda) ========== */

/* Card contenedora */
.tabla-card{
  background:#fff;
  border:1px solid #e9efff;
  border-radius:1rem;
  overflow:hidden;
}

/* Fondo blanco en celdas y rayado suave */
.tabla-card .table{ --bs-table-bg:#fff; margin:0; }
.table-standings tbody tr:hover{ background: rgba(0,0,0,.03); }

/* ===== Encabezado reutilizable: verde opaco en cards y thead ===== */
.phase-header{
  background:#d9f0e0 !important;
  background-color:#d9f0e0 !important;
  color:#000 !important;
  border-bottom:1px solid rgba(0,0,0,.06) !important;

  /* por si tu tema usa variables de Bootstrap */
  --bs-card-cap-bg:#d9f0e0;
  --bs-card-cap-color:#000;
  --bs-table-bg:#d9f0e0;
  --bs-table-color:#000;
}

/* Caso 1: card headers (Eliminatorias) */
.card-header.phase-header{
  background:#d9f0e0 !important;
  background-color:#d9f0e0 !important;
  color:#000 !important;
}

/* Caso 2: thead (Tabla de posiciones) */
thead.phase-header th{
  background:#d9f0e0 !important;
  background-color:#d9f0e0 !important;
  color:#000 !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
  position: sticky; top: 0; z-index: 2;
}

/* Mantén el sticky en la tabla sin tocar colores aquí */
.table-standings thead th{ position: sticky; top: 0; z-index: 2; }

/* Columna del índice más estrecha */
@media (min-width: 768px){
  .table-standings thead th:first-child,
  .table-standings tbody td:first-child{ width:56px; }
}

/* Leyenda compacta */
.standings-legend{
  display:flex; flex-wrap:wrap;
  gap:.5rem 1rem;
  background:#fff;
  border:1px solid #e9efff;
  border-radius:.75rem;
  padding:.75rem;
  margin-top:.5rem;
}

.standings-legend > div{
  display:flex; align-items:center; gap:.5rem;
}

.badge-key{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:28px; padding:0 .6rem;
  border-radius:.5rem;
  background:#111;
  color:#fff;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1;
  border:1px solid #111;
}

/* ===== FIXS RESPONSIVE MÓVIL (escudos) ===== */
@media (max-width: 575.98px){

  /* Cards de partidos */
  .card .card-body{
    padding: .75rem .9rem;
    overflow: hidden;
  }
  .card .card-body .d-flex.gap-3{ gap: .5rem !important; }
  .card .card-body img.rounded-circle{ width: 32px; height: 32px; }

  .card .card-body .fw-semibold{
    max-width: 38vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Modal */
  .res-modal{
    padding: 16px;
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
    padding-top: calc(16px + env(safe-area-inset-top));
  }
  .res-modal .modal-card{
    border-radius: .9rem;
    max-width: 100%;
    margin: 0;
  }
  .res-modal .btn-close{
    top: calc(.75rem + env(safe-area-inset-top));
    right: calc(.75rem + env(safe-area-inset-right));
  }

  .score-grid{ gap: 8px; }
  .score-grid img.rounded-circle{ width: 30px; height: 30px; }
}

/* Seguridad: que ninguna imagen se desborde */
img{ max-width: 100%; height: auto; }

/* Borde del contenedor de partidos alineado al estilo de la tabla */
.card { border-color: #e9efff; }

/* Botón de detalles neutro para no saturar de verde */
.btn-outline-secondary.btn-sm{
  --bs-btn-color:#6c757d;
  --bs-btn-border-color:#cfd6df;
  --bs-btn-hover-bg:#f6f7fb;
  --bs-btn-hover-border-color:#c2c9d3;
}

/* === Escudos circulares y layout de "Equipos con más victorias" === */
.avatar-logo{
  width:42px; height:42px;
  border-radius:50%;
  object-fit:cover;           /* recorte circular consistente */
  background:#fff;            /* fondo blanco para PNG con transparencia */
  border:1px solid rgba(0,0,0,.1);
  display:block;
}
.win-right{
  text-align:right;
  line-height:1.05;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}
.win-right .pg{
  font-weight:700;
  font-size:1.05rem;
}
.win-right .gf-gc{
  font-size:.825rem;
  color:#6c757d;
}
@media (max-width:575.98px){
  .avatar-logo{ width:36px; height:36px; }
  .win-right .pg{ font-size:1rem; }
  .win-right .gf-gc{ font-size:.8rem; }
}

/* ========== 7) AVATARES CONSISTENTES (jugador + escudo) ========== */
/* Usa estas clases en lugar de estilos en línea para que TODAS las fotos luzcan iguales.
   - .avatar-stack: contenedor con tamaño configurable
   - .avatar-img: foto del jugador
   - .avatar-badge: escudo del equipo superpuesto
   Variantes: .avatar-sm (42px) y .avatar-lg (96px) */
.avatar-stack{
  --ava: 42px;     /* tamaño del avatar */
  --badge: 16px;   /* tamaño del escudo */
  position:relative;
  width:var(--ava); height:var(--ava);
  flex:0 0 var(--ava);
}
.avatar-stack.avatar-sm{ --ava:42px; --badge:16px; }
.avatar-stack.avatar-lg{ --ava:96px; --badge:24px; }

/* Aumenta el escudo específicamente dentro del modal */
.jug-modal .avatar-stack.avatar-lg{ --ava:112px; --badge:28px; }
.avatar-img{
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
}
.avatar-badge{
  position:absolute; right:-3px; bottom:-3px;
  width:var(--badge); height:var(--badge);
  border-radius:50%;
  object-fit:cover;
  background:#fff;
  border:2px solid #fff;          /* aro blanco para separar */
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
/* que el badge grande se desplace un poquito más */
.avatar-stack.avatar-lg .avatar-badge{ right:-6px; bottom:-6px; }

/* Logo circular genérico a 42px (para listas de equipos) */
.logo-42{
  width:42px; height:42px; border-radius:50%;
  object-fit:cover; background:#fff; border:1px solid rgba(0,0,0,.1);
}
@media (max-width:575.98px){
  .logo-42{ width:36px; height:36px; }
}

/* Quitar subrayados de los items clicables (abrir modal) */
.stat-card .btn.btn-link{
  text-decoration: none !important;
  color: inherit !important;     /* que no se ponga azul */
  cursor: pointer;
}
.stat-card .btn.btn-link:hover,
.stat-card .btn.btn-link:focus{
  text-decoration: none !important;
  color: inherit !important;
}

/* Si hubiese <a> dentro del botón, neutralizarlos también */
.stat-card a{
  text-decoration: none !important;
  color: inherit !important;
}

/* Enfocado accesible (opcional) */
.stat-card .btn.btn-link:focus-visible{
  outline: 2px solid rgba(86,150,110,.45);
  outline-offset: 2px;
  border-radius: .5rem;
  box-shadow: none;
}

/* Quitar subrayado de los botones tipo link en toda la app */
.btn-link,
.btn-link:hover,
.btn-link:focus {
  text-decoration: none !important;
}

/* Por si el subrayado se hereda a los hijos (título y <small>) */
.btn-link * {
  text-decoration: none !important;
}