/* =========================================================
   POPUPS Y CHIPS EN EL MAPA (Leaflet + tarjeta hover/click)
   ========================================================= */

/* -------------------------
   Pin: tooltip permanente que envuelve el chip de hora
   (contenedor de Leaflet)
   ------------------------- */
.leaflet-container .leaflet-tooltip.pin-hour-chip-wrap{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  padding:0!important;
}
.leaflet-container .leaflet-tooltip.pin-hour-chip-wrap:before,
.leaflet-container .leaflet-tooltip.pin-hour-chip-wrap:after{
  display:none!important;
}

/* -------------------------
   Chip de hora (reutilizable)
   - Se usa en popovers/cards (className="card-hour-chip")
   - Y bajo el pin (se inserta dentro de .pin-hour-chip-wrap)
   ------------------------- */
.card-hour-chip,
.leaflet-container .pin-hour-chip{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  background:#0A5E3C!important;
  color:#fff!important;
  border:1.5px solid #2FE6A7!important;
  border-radius:999px!important;
  padding:2px 9px!important;
  font-weight:800!important;
  font-size:11px!important;
  line-height:12px!important;
  white-space:nowrap!important;
  box-shadow:0 6px 14px rgba(0,0,0,.25)!important;
}

/* texto de la hora dentro del chip */
.chip-hour-text{
  display:inline-block;
  transform:translateY(0.2px); /* micro-ajuste óptico */
}

/* puntos verde/rojo */
.chip-dot{
  width:8px; height:8px;
  border-radius:50%;
  display:inline-block;
  box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 0 6px rgba(0,0,0,.35);
}
.dot--green{ background:#2EE16A; }
.dot--red{   background:#FF3B3B; }

/* -------------------------
   Tooltip de partido (popover en hover)
   Contenedor transparente: manda la tarjeta interna
   ------------------------- */
.leaflet-container .leaflet-tooltip.popover-hover{
  background:transparent!important;
  color:inherit!important;
  border:none!important;
  border-radius:0!important;
  padding:0!important;
  min-width:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  text-align:center!important;
}
.leaflet-container .leaflet-tooltip.popover-hover:before,
.leaflet-container .leaflet-tooltip.popover-hover:after{
  display:none!important;
}

/* =========================================================
   DESBLOQUEAR ANCHO DEL POPUP DE LEAFLET (CLICK)
   (solo para popups con className="popup-wide")
   ========================================================= */
.leaflet-container .leaflet-popup.popup-wide,
.leaflet-container .leaflet-popup.popup-wide .leaflet-popup-content-wrapper,
.leaflet-container .leaflet-popup.popup-wide .leaflet-popup-content{
  max-width:none!important;
  width:auto!important;
}
.leaflet-container .leaflet-popup.popup-wide .leaflet-popup-content-wrapper{
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border:none!important;
}
.leaflet-container .leaflet-popup.popup-wide .leaflet-popup-content{
  margin:0!important;
}
.leaflet-container .leaflet-popup.popup-wide .leaflet-popup-tip{
  display:none!important;
}
.leaflet-container .leaflet-popup.popup-wide .leaflet-popup-close-button{
  right:12px!important;
  top:10px!important;
  color:#bfc7cc!important;
  text-shadow:none!important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));
}

/* =========================================================
   TARJETAS INTERNAS
   ========================================================= */
.popover-card{
  border-radius:14px;
  box-shadow:0 2px 10px #0008;
  overflow:visible;
  white-space:normal;
}
.popover-card p{ margin:0 0 6px 0; }

/* HOVER - ultra-compacta */
.hover-card{
  display:inline-block;
  width:max-content;
  max-width:360px;
  min-width:unset;
  padding:6px 8px;
  text-align:center;
}

/* filas del hover */
.hover-row{ display:flex; align-items:center; justify-content:center; width:100%; }
.hover-row--shields{ gap:6px; margin-bottom:4px; }
.hover-row--chips{ gap:6px; margin:0 0 4px 0; }
.hover-row--league{
  color:#e7fef7; font-size:10.5px; font-weight:600; opacity:.95;
  white-space:normal; overflow-wrap:anywhere; word-break:break-word;
}

/* POPUP - 30% más estrecha */
.popup-card{
  min-width:300px;
  max-width:690px;
  padding:10px 14px;
}

/* Chips arriba en el popup (fecha + hora + campo) */
.popup-top-chips{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0 0 8px 0;
}

/* =========================================================
   CABECERA: nombres a los lados + escudos + badge liga
   ========================================================= */
.popup-team-row{
  display:grid;
  grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr);
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}
.popup-team-name{
  font-size:13px;
  font-weight:700;
  color:#e9eef1;
  line-height:1.12;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.popup-team-name.left{text-align:right;}
.popup-team-name.right{text-align:left;}

.popup-shields{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.popup-center-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 2px;
  transform:scale(.9);
}

/* =========================================================
   CHIPS (fecha + hora + campo)
   ========================================================= */
.card-date-chip{
  display:inline-block;
  background:rgba(28,120,255,.22);
  color:#cfe0ff;
  border:1.5px solid rgba(28,120,255,.45);
  border-radius:999px;
  padding:2px 9px;
  font-weight:800;
  font-size:11px;
  line-height:12px;
  white-space:nowrap;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
  backdrop-filter:blur(3px);
}
.card-field-chip{
  display:inline-block;
  background:rgba(180,190,200,.20);
  color:#dfe5ea;
  border:1.5px solid rgba(180,190,200,.45);
  border-radius:999px;
  padding:2px 9px;
  font-weight:800;
  font-size:11px;
  line-height:12px;
  white-space:nowrap;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
  backdrop-filter:blur(3px);
}
.chip-ellipsis{
  max-width:50%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* =========================================================
   BOTONERA MINIMALISTA
   ========================================================= */
.map-card-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  margin-top:6px;
  flex-wrap:wrap;
}
.map-card-actions--inline .btn{ white-space:nowrap; }
.map-card-btn{
  font-weight:700;
  font-size:12px;
  line-height:1.05;
  padding:6px 10px;
  border-radius:9px;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
  width:auto;
}
.map-card-btn--sm{ backdrop-filter:blur(2px); }

/* =========================================================
   LAYOUT: SPLIT 70/30 (mapa + panel lateral)
   ========================================================= */
.mapa-split{ display:flex; gap:12px; align-items:flex-start; }
.mapa-split-left{ flex:7 1 0; min-width:0; }
.mapa-split-right{ flex:3 1 0; min-width:260px; }

/* Canvas del mapa */
.mapa-canvas{
  height:500px;
  width:100%;
  border-radius:10px;
  overflow:hidden;
}

/* =========================================================
   PANEL LATERAL (partidos del día)
   ========================================================= */
.panel-partidos{
  background:#1f2328; color:#e9eef1; border:1px solid rgba(255,255,255,.08);
  border-radius:10px; width:100%; height:500px; display:flex; flex-direction:column; overflow:hidden;
}
.panel-title{ font-weight:800; font-size:14px; padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.08); }
.panel-scroll{ flex:1 1 auto; overflow:auto; padding:10px; }

.panel-card{
  background:#2a2f36; border:1px solid rgba(255,255,255,.08); border-radius:10px;
  padding:10px 12px; box-shadow:0 2px 8px rgba(0,0,0,.25); margin-bottom:10px;
  transition:background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.panel-card-chips{
  display:flex; align-items:center; justify-content:flex-start; gap:6px; margin-bottom:6px;
}

/* ========= ESTADOS DE TARJETA ========= */
.panel-card--tabla-only{
  background: linear-gradient(0deg, rgba(0,231,255,0.08), rgba(0,231,255,0.08)), #0b1f29 !important;
  border-color:#00E7FF !important;
  box-shadow:
    0 0 0 1px rgba(0,231,255,.25),
    0 2px 10px rgba(0,231,255,.25),
    0 0 18px rgba(0,231,255,.18) inset;
}
.panel-card--opcion-a{
  background: linear-gradient(0deg, rgba(57,255,20,0.10), rgba(57,255,20,0.10)), #0b2917 !important;
  border-color:#39FF14 !important;
  box-shadow:
    0 0 0 1px rgba(57,255,20,.22),
    0 2px 10px rgba(57,255,20,.18),
    0 0 18px rgba(57,255,20,.12) inset;
}
.panel-card--opcion-b{
  background: linear-gradient(0deg, rgba(255,213,74,0.10), rgba(255,213,74,0.10)), #2c2405 !important;
  border-color:#FFD54A !important;
  box-shadow:
    0 0 0 1px rgba(255,213,74,.25),
    0 2px 10px rgba(255,213,74,.22),
    0 0 18px rgba(255,213,74,.14) inset;
}

/* ======= FILA CENTRAL: nombre izq | (escudos + badges) | nombre dcha ======= */
.panel-row-center{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
  margin:2px 0 6px 0;
}
.panel-team-name{
  font-weight:800; font-size:13px; line-height:1.1; color:#e9eef1;
  overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.panel-team-name.left{ text-align:right; }
.panel-team-name.right{ text-align:left; }

.panel-middle-shields{
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.panel-shield-ring{
  width:26px; height:26px; border-radius:50%;
  border:1.6px solid #E9FFF7; background:#333;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  overflow:hidden;
}
.panel-shield-ring img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:50%;
}
.panel-badge-age{ width:22px; height:22px; border-radius:50%; object-fit:cover; display:block; }
.panel-badge-cat{ width:18px; height:18px; border-radius:50%; object-fit:cover; display:block; }

/* Liga/Grupo centrado */
.panel-liga{ font-size:11.5px; color:#cfd7de; font-weight:700; opacity:.95; }
.panel-liga--center{ text-align:center; }

/* Estado vacío */
.empty-state{ opacity:.7; font-size:13px; padding:8px 12px; }

/* =========================================================
   AFINES / DETALLES
   ========================================================= */
.pin-icon{ transition:filter 120ms ease; }
.leaflet-marker-icon:hover{ filter:drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.popover-card .pc-match-shield{ height:28px; width:28px; border-radius:50%; object-fit:cover; }




















/* =========================================================
   MAPA · NUEVO LAYOUT
   ========================================================= */

.mapa-main-layout{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.mapa-main-row{
  display:flex;
  gap:12px;
  align-items:stretch;
}

.mapa-main-left{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  flex-direction:column;
}

.mapa-main-right{
  flex: 0 0 320px;
  min-width: 280px;
  max-width: 340px;
  display:flex;
}

.mapa-legend-side{
  background:#1f2328;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:12px 14px;
  color:#e9eef1;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:auto;
}

.mapa-legend-title{
  font-weight:800;
  font-size:14px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.mapa-legend-block{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mapa-legend-note{
  margin-top:auto;
  font-size:11px;
  opacity:.72;
  line-height:1.35;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:10px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px){
  .mapa-main-row{
    flex-direction:column;
  }

  .mapa-main-right{
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    height: auto !important;
  }

  .mapa-legend-side{
    height:auto;
    overflow:visible;
  }
}