/* ==========================================================================
   50-campograma.css
   Proposito: estilos premium para la pagina Campograma (campo de juego,
   bloques de posicion, barra de filtros, modal picker y leyenda).
   Colores corporativos: Azul #00489A · Dorado #C39400 · Celeste #8BC2FF
   ========================================================================== */

/* =====================================================
   1. VARIABLES LOCALES (sobreescribibles por el tema global)
===================================================== */
:root {
  --camp-azul:       #00489A;
  --camp-azul-osc:   #003270;
  --camp-dorado:     #C39400;
  --camp-dorado-clr: #d4a820;
  --camp-celeste:    #8BC2FF;
  --camp-blanco:     #FFFFFF;
  --camp-rojo:       #D7263D;
  --camp-naranja:    #FF8C00;
  --camp-morado:     #6B21A8;
  --camp-gris-fondo: #EEF2F7;
  --camp-sombra-sm:  0 2px 8px rgba(0, 72, 154, 0.12);
  --camp-sombra-md:  0 6px 20px rgba(0, 50, 112, 0.18);
  --camp-sombra-lg:  0 12px 40px rgba(0, 30, 80, 0.22);
  --camp-radio:      10px;
  --camp-trans:      0.2s ease;
}

/* =====================================================
   2. CONTENEDOR GENERAL DE LA PAGINA
===================================================== */
.page-campograma {
  background: linear-gradient(160deg, #f0f4fa 0%, #e8eef7 100%);
  min-height: 100vh;
}

/* =====================================================
   3. BARRA DE FILTROS
===================================================== */
.filter-panel.camp-filtros {
  background: var(--camp-blanco) !important;
  border: 1px solid rgba(195, 148, 0, 0.22) !important;
  border-radius: 14px !important;
  box-shadow: var(--camp-sombra-sm) !important;
  padding: 8px 12px !important;
  gap: 6px !important;
  position: relative;
  overflow: visible;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}

.filter-panel.camp-filtros > div {
  flex: 0 0 auto !important;
}

/* Evita que el panel recorte los menús de dropdown */
.filter-panel.camp-filtros .Select-menu-outer,
.filter-panel.camp-filtros .Select-menu {
  z-index: 3000 !important;
}

/* Línea decorativa dorada superior */
.filter-panel.camp-filtros::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--camp-dorado), transparent);
  border-radius: 0 0 4px 4px;
}

/* Labels de filtro */
.filter-panel.camp-filtros .camp-label {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  color: var(--camp-azul) !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 3px;
  display: block;
  text-align: center;
}

/* Inputs del panel de filtros */
.filter-panel.camp-filtros input[type="number"],
.filter-panel.camp-filtros .camp-input {
  border: 1px solid rgba(195, 148, 0, 0.35) !important;
  border-radius: 7px !important;
  font-size: 0.75rem !important;
  background: #fafcff !important;
  transition: border-color var(--camp-trans), box-shadow var(--camp-trans);
}
.filter-panel.camp-filtros input[type="number"]:focus,
.filter-panel.camp-filtros .camp-input:focus {
  border-color: var(--camp-dorado) !important;
  box-shadow: 0 0 0 2px rgba(195, 148, 0, 0.16) !important;
  background: #fffdf5 !important;
  outline: none;
}
.filter-panel.camp-filtros input[type="number"]:hover {
  border-color: rgba(195, 148, 0, 0.6) !important;
}

/* Dropdown premium (Liga / Año contrato) */
#liga-dd,
#anio-dd {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
#liga-dd .Select-control,
#anio-dd .Select-control {
  height: 28px !important;
  min-height: 28px !important;
  border: 1px solid rgba(195, 148, 0, 0.7) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 72, 154, 0.08) !important;
}
#liga-dd .Select-value,
#anio-dd .Select-value,
#liga-dd .Select-placeholder,
#anio-dd .Select-placeholder {
  line-height: 28px !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  color: #243041 !important;
  padding-left: 10px !important;
  padding-right: 28px !important;
}
#liga-dd .Select-arrow-zone,
#anio-dd .Select-arrow-zone {
  width: 24px !important;
  padding-right: 8px !important;
}
#liga-dd .Select-arrow,
#anio-dd .Select-arrow {
  border-top-color: #8d8d8d !important;
}
#liga-dd.is-focused .Select-control,
#anio-dd.is-focused .Select-control,
#liga-dd .Select-control:hover,
#anio-dd .Select-control:hover {
  border-color: #c39400 !important;
  box-shadow: 0 0 0 2px rgba(195, 148, 0, 0.16) !important;
}

/* Botón "Generar ranking" */
#btn-generar-ranking {
  background: linear-gradient(135deg, var(--camp-dorado) 0%, #a87e00 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--camp-blanco) !important;
  font-weight: 800 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.3px;
  box-shadow: 0 3px 10px rgba(195, 148, 0, 0.35) !important;
  transition: box-shadow var(--camp-trans), transform var(--camp-trans), filter var(--camp-trans);
}
#btn-generar-ranking:hover {
  box-shadow: 0 5px 16px rgba(195, 148, 0, 0.52) !important;
  transform: translateY(-1px);
  filter: brightness(1.06);
}
#btn-generar-ranking:active { transform: translateY(0); }

/* Boton Reset (mismo rojo que rendimiento.py) */
.filter-panel.camp-filtros #btn-clear,
.filter-panel.camp-filtros .camp-reset-btn {
  border: 1px solid #dc2626 !important;
  border-radius: 6px !important;
  background: #fee2e2 !important;
  color: #b91c1c !important;
  font-weight: 700 !important;
  font-size: 0.68rem !important;
  transition: background var(--camp-trans), border-color var(--camp-trans),
              box-shadow var(--camp-trans), transform var(--camp-trans);
}
.filter-panel.camp-filtros #btn-clear:hover,
.filter-panel.camp-filtros .camp-reset-btn:hover {
  background: #fecaca !important;
  border-color: #dc2626 !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.22) !important;
  transform: translateY(-1px);
}

/* Botón engranaje filtro avanzado campograma */
#btn-filtro-minutos-avanzado-camp {
  transition: background var(--camp-trans), border-color var(--camp-trans), box-shadow var(--camp-trans);
}
#btn-filtro-minutos-avanzado-camp:hover {
  background: #fffaf0 !important;
  border-color: var(--camp-dorado) !important;
  color: var(--camp-azul) !important;
  box-shadow: 0 0 0 2px rgba(195, 148, 0, 0.18), 0 3px 8px rgba(195, 148, 0, 0.18) !important;
}

/* Inputs filtros avanzados campograma */
#partidos-minimos-camp,
#minutos-medios-minimos-camp,
#minutos-min,
#edad-min,
#edad-max {
  border-color: rgba(195, 148, 0, 0.38) !important;
  background: #fafcff !important;
  transition: border-color var(--camp-trans), box-shadow var(--camp-trans), background var(--camp-trans);
}
#partidos-minimos-camp:focus,
#minutos-medios-minimos-camp:focus,
#minutos-min:focus,
#edad-min:focus,
#edad-max:focus {
  border-color: var(--camp-dorado) !important;
  box-shadow: 0 0 0 2px rgba(195, 148, 0, 0.16) !important;
  background: #fffdf5 !important;
}

/* =====================================================
   4. AREA DEL CAMPO
===================================================== */
#campograma-wrap {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: none;
  background: transparent;
  contain: layout paint;
}

/* Alineacion horizontal del slider de edad con el resto de controles */
.camp-edad-slider {
  width: 100%;
  min-width: 180px;
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: -10px;
}
.camp-edad-slider .rc-slider {
  width: 100%;
  margin: 0 8px !important;
  padding: 0 !important;
}
.camp-edad-slider .rc-slider-with-marks {
  margin-bottom: 0 !important;
}
.camp-edad-slider .rc-slider-mark {
  top: 8px !important;
}

#pitch-area {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: none;
  contain: layout paint;
}

#pitch-area > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border: none;
}

/* =====================================================
   5. BLOQUES DE POSICION (nombre, equipo, ranking…)
===================================================== */

/* Título de posición (etiqueta dorada clickable) */
[id*="abrir_perfil"] {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #8f6f00 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  text-shadow: none !important;
  cursor: pointer;
  transition: none;
  display: inline-block;
  margin-bottom: 2px;
}
[id*="abrir_perfil"]:hover {
  color: #7b6000 !important;
  text-shadow: none !important;
  transform: none;
}

/* Tabla del bloque de jugador */
[id*="bloque"] table {
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

[id*="bloque"] td {
  transition: none;
}

/* Hover en la fila del nombre: resalta sutilmente */
[id*="bloque"] tr:first-child:hover td {
  filter: none;
}

/* Celda nombre Málaga: gradiente dorado */
td[id*="campo_nombre"][style*="00489A"] {
  background: var(--camp-azul) !important;
}

/* Celda nombre jugadores externos */
td[id*="campo_nombre"] {
  position: relative;
}

/* Sombra en los bloques — sin tocar transform (lo gestiona Dash inline) */
[id*="bloque"] {
  filter: none;
  transition: none;
  will-change: auto;
}
[id*="bloque"]:hover {
  z-index: 10 !important;
}

/* Aislar pintura del layer para mejorar fluidez cuando cambia el layout (sidebar) */
#blocks-layer {
  contain: layout paint;
  transform: translateZ(0);
}


/* =====================================================
   6. LEYENDA DEL CAMPOGRAMA
===================================================== */
#camp-leyenda {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(195, 148, 0, 0.25);
  border-radius: 10px;
  box-shadow: var(--camp-sombra-sm);
  backdrop-filter: blur(4px);
  padding: 8px 12px;
}

.camp-leyenda-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.70rem;
  font-weight: 600;
  color: #374151;
}

.camp-leyenda-badge {
  width: 28px;
  height: 13px;
  border-radius: 3px;
  display: inline-block;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  line-height: 13px;
}

/* =====================================================
   7. MODAL PICKER — Contenedor y cabecera
===================================================== */
#picker-modal .modal-content {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid #C79B00 !important;
  box-shadow: 0 20px 60px rgba(0, 20, 80, 0.32) !important;
}

#picker-modal .modal-header {
  background: #003875 !important;
  border-bottom: 1px solid #C79B00 !important;
  padding: 10px 18px !important;
  position: relative;
  overflow: hidden;
}

/* Cabecera sobria compartida con Biblioteca, sin brillo decorativo. */
#picker-modal .modal-header::after {
  content: none;
  position: absolute;
  top: 0;
  left: -40%;
  width: 80%;
  height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
  pointer-events: none;
}

#picker-modal .modal-header .btn-close {
  filter: invert(1) brightness(1.5) !important;
  opacity: 0.85 !important;
  transition: opacity var(--camp-trans), transform var(--camp-trans);
}
#picker-modal .modal-header .btn-close:hover {
  opacity: 1 !important;
  transform: scale(1.15);
}

/* Título del modal */
#picker-title {
  font-size: .9rem !important;
  font-weight: 700 !important;
  color: var(--camp-blanco) !important;
  letter-spacing: normal !important;
  text-transform: none;
  line-height: 1.3 !important;
}

#picker-modal .modal-header .fa-users { color: white; font-size: .9rem !important; margin-right: 9px !important; }
/* El tema global aplica Inter a todos los elementos: los iconos conservan su fuente. */
#picker-modal i.fas { font-family: "Font Awesome 6 Free" !important; font-style: normal; font-weight: 900; }

/* =====================================================
   8. MODAL PICKER — Body y buscadores
===================================================== */
#picker-modal .modal-body {
  background: #f8fafd !important;
  padding: 10px 14px !important;
}

/* Tarjeta de búsqueda */
.camp-picker-search-bar {
  background: var(--camp-blanco);
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 1px 4px rgba(0, 72, 154, 0.07);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 8px;
}

/* Dropdowns del picker */
#picker-search,
#picker-search-team {
  border: 1px solid #B9C4D2 !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  background: #fff !important;
  transition: border-color var(--camp-trans), box-shadow var(--camp-trans);
}
#picker-search:focus,
#picker-search-team:focus {
  border-color: var(--camp-dorado) !important;
  box-shadow: 0 0 0 2px rgba(195, 148, 0, 0.15) !important;
}

/* Caja de info (amarilla) */
.camp-info-box {
  background: linear-gradient(135deg, #fffbeb 0%, #fff8db 100%) !important;
  border: 1px solid rgba(195, 148, 0, 0.4) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  box-shadow: 0 1px 4px rgba(195, 148, 0, 0.12);
}

/* Radio buttons fuente de datos */
#picker-mode .form-check-input:checked {
  background-color: var(--camp-dorado) !important;
  border-color: var(--camp-dorado) !important;
}
#picker-mode .form-check-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  cursor: pointer;
  transition: color var(--camp-trans);
}
#picker-mode .form-check-label:hover { color: var(--camp-azul) !important; }

/* Botón borrar selección */
#picker-clear {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border: 1px solid #fca5a5 !important;
  border-radius: 7px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  transition: background var(--camp-trans), box-shadow var(--camp-trans), transform var(--camp-trans);
}
#picker-clear:hover {
  background: #fecaca !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.22) !important;
  transform: translateY(-1px);
}

/* =====================================================
   9. TABLA DEL PICKER
===================================================== */
#picker-table.dash-spreadsheet-container,
.picker-table-wrap {
  border-radius: 10px !important;
  overflow: hidden !important;
}

#picker-modal .dash-spreadsheet-container {
  border: 1px solid #CCD8E5 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* Header de tabla */
#picker-modal .dash-spreadsheet-container .dash-header {
  background: #003875 !important;
  color: var(--camp-blanco) !important;
}

/* Fila Málaga: borde izquierdo dorado más visible */
#picker-modal tr[style*="rgba(195,148,0"] {
  border-left: 4px solid var(--camp-dorado) !important;
}

/* Filas pares ligeramente distintas */
#picker-modal .dash-spreadsheet-container .cell-1-0:nth-child(even) td,
#picker-modal .dash-spreadsheet-container tr:nth-child(even) td {
  background-color: #f6f9ff;
}

/* Hover en filas */
#picker-modal .dash-spreadsheet-container tr:hover td {
  background-color: #eef4ff !important;
  transition: background-color 0.12s ease;
}

/* Fila seleccionada */
#picker-modal .dash-spreadsheet-container tr.row-selected td,
#picker-modal .dash-spreadsheet-container .cell-selected {
  background-color: #dbeafe !important;
  border-left: 3px solid var(--camp-azul) !important;
}

/* Checkbox de selección */
#picker-modal .dash-spreadsheet input[type="checkbox"] {
  accent-color: var(--camp-dorado);
  width: 14px;
  height: 14px;
}

/* =====================================================
   10. FOOTER DEL MODAL
===================================================== */
#picker-modal .modal-footer {
  background: #fff !important;
  border-top: 1px solid #DFE6EF !important;
  padding: 10px 14px !important;
}

#picker-cancel {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 7px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  transition: background var(--camp-trans), transform var(--camp-trans);
}
#picker-cancel:hover {
  background: #e5e7eb !important;
  transform: translateY(-1px);
}

#picker-accept {
  background: linear-gradient(135deg, var(--camp-dorado) 0%, #a87e00 100%) !important;
  color: var(--camp-blanco) !important;
  border: none !important;
  border-radius: 7px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px;
  box-shadow: 0 3px 12px rgba(195, 148, 0, 0.38) !important;
  transition: box-shadow var(--camp-trans), transform var(--camp-trans), filter var(--camp-trans);
}
#picker-accept:hover {
  box-shadow: 0 5px 18px rgba(195, 148, 0, 0.55) !important;
  transform: translateY(-1px);
  filter: brightness(1.06);
}
#picker-accept:active { transform: translateY(0); }

/* =====================================================
   11. INDICADOR DE JUGADORES SELECCIONADOS (resumen)
===================================================== */
#picker-selected-summary {
  color: #334155 !important;
  font-weight: 400 !important;
  font-size: .72rem !important;
  white-space: normal;
  background: #fff !important;
  border: 1px solid #CCD8E5 !important;
  border-radius: 8px !important;
  padding: 8px !important;
  max-height: min(240px, 40vh) !important;
  overflow-y: auto;
}

#collapse-summary {
  min-width: min(420px, 70vw) !important;
  max-width: min(560px, 70vw) !important;
  top: calc(100% + 6px) !important;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 35, 65, .16) !important;
}
.camp-picker-selection-list { display: flex; flex-direction: column; gap: 6px; }
.camp-picker-selection-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 6px;
}
.camp-picker-selection-number {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 22px; height: 22px; border-radius: 50%;
  background: #00489A; color: white; font-size: .68rem; font-weight: 700;
}
.camp-picker-selection-player { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.camp-picker-selection-name { color: #003875; font-weight: 600; }
.camp-picker-selection-team { color: #718096; font-size: .68rem; }
.camp-picker-selection-actions { display: inline-flex; flex-shrink: 0; gap: 4px; }
#picker-modal .camp-picker-order-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 1px solid #B9C4D2;
  border-radius: 6px; background: #F8FAFC; color: #334155; font-size: .72rem;
  box-shadow: none; cursor: pointer; transition: background-color .15s, border-color .15s;
}
#picker-modal .camp-picker-order-button:hover:not(:disabled) { background: #EAF0F7; border-color: #8DA9CA; }
#picker-modal .camp-picker-remove-button { background: #FFF1F1; border-color: #E5A3A3; color: #B4232C; }
#picker-modal .camp-picker-remove-button:hover:not(:disabled) { background: #FDE2E2; border-color: #B4232C; }
#picker-modal .camp-picker-order-button:focus-visible { outline: 2px solid #C79B00; outline-offset: 2px; }
#picker-modal .camp-picker-order-button:disabled { opacity: .4; cursor: default; }
.camp-picker-empty { padding: 6px; color: #718096; }
@media (pointer: coarse) {
  #picker-modal .camp-picker-order-button { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  #picker-modal .camp-picker-order-button { transition: none; }
}

/* Aviso de rol */
#picker-role-warning {
  border-left: 3px solid var(--camp-rojo) !important;
  background: #fee2e2 !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  color: #b91c1c !important;
  font-weight: 600 !important;
  padding: 7px 12px !important;
}

/* =====================================================
   12. CELDAS DE JUGADOR — Refinamiento visual
===================================================== */

/* Celda del contrato rojo (vence pronto) */
td[style*="D7263D"] {
  background: #d7263d !important;
  font-weight: 800 !important;
  letter-spacing: 0.1px;
}

/* Celda del contrato naranja (cedido) */
td[style*="FF8C00"] {
  background: #ff8c00 !important;
  font-weight: 800 !important;
}

/* Celda dorada (ranking Málaga) */
td[style*="C39400"],
td[style*="c39400"] {
  background: #c39400 !important;
}

/* =====================================================
   13. ANIMACION DE ENTRADA DEL CAMPOGRAMA
===================================================== */
@keyframes camp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fade-in suave solo para el contenedor y la imagen — sin translateY
   que desplazaría los bloques de su posición calculada por Dash */
#campograma-wrap {
  animation: none;
}

#pitch-area img {
  animation: none;
}

/* Los bloques NO tienen animación — su posición la calcula Dash con
   transform:translate inline y cualquier keyframe que mute transform
   los desplaza y causa el parpadeo/movimiento observado */

/* =====================================================
   14. BARRA DE FILTROS AVANZADOS (collapse)
===================================================== */
#collapse-filtro-minutos-camp .card,
#collapse-filtro-minutos-camp > div {
  background: #fafcff !important;
  border: 1px solid rgba(195, 148, 0, 0.28) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  margin-top: 4px;
  box-shadow: 0 2px 6px rgba(0, 72, 154, 0.07);
}

/* =====================================================
   15. RESPONSIVE — Pantallas pequeñas
===================================================== */
@media (max-width: 900px) {
  .filter-panel.camp-filtros {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  [id*="bloque"] {
    transform: translate(-50%, -50%) scale(0.82) !important;
  }

  #picker-modal .modal-dialog {
    width: calc(100vw - 20px) !important;
    margin: 6px auto !important;
  }
}

@media (max-width: 600px) {
  [id*="bloque"] {
    transform: translate(-50%, -50%) scale(0.68) !important;
  }
}

/* =====================================================
   16. SCROLLBAR PERSONALIZADA EN LA TABLA DEL PICKER
===================================================== */
#picker-modal .modal-body ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
#picker-modal .modal-body ::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}
#picker-modal .modal-body ::-webkit-scrollbar-thumb {
  background: rgba(0, 72, 154, 0.28);
  border-radius: 4px;
}
#picker-modal .modal-body ::-webkit-scrollbar-thumb:hover {
  background: var(--camp-azul);
}

/* =====================================================
   17. PAGINACION DE LA TABLA
===================================================== */
#picker-modal .previous-next-container button {
  border: 1px solid rgba(0, 72, 154, 0.3) !important;
  border-radius: 5px !important;
  background: var(--camp-blanco) !important;
  color: var(--camp-azul) !important;
  transition: background var(--camp-trans), border-color var(--camp-trans);
}
#picker-modal .previous-next-container button:hover {
  background: #eef4ff !important;
  border-color: var(--camp-azul) !important;
}

/* =====================================================
   18. ESTADO VACÍO DEL BLOQUE (sin jugador asignado)
===================================================== */
[id*="bloque"] table td:empty {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Dropdown oculto del nombre (sin espacio visual) */
[id*="dd_nombre"] {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}


/* Premium hover for standard buttons (Liga, Contrato) */
.btn-premium-action {
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.btn-premium-action:hover {
  border-color: var(--camp-dorado) !important;
  box-shadow: 0 4px 12px rgba(195,148,0,0.18) !important;
  color: var(--camp-dorado) !important;
  background: #fffdf5 !important;
  transform: translateY(-1px);
}


/* Premium hover para botón Reset */
.camp-reset-btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}
.camp-reset-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
  background: #fecaca !important;
}

/* === BOTONES PANEL FILTROS CAMPOGRAMA � hovers premium === */
#btn-open-guardar-campograma { transition: all 0.20s ease; }
#btn-open-guardar-campograma:hover {
    background: linear-gradient(135deg, #00489A 0%, #003270 100%) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(0,72,154,0.40) !important;
    transform: translateY(-1px);
}
#btn-open-listado-campogramas { transition: all 0.20s ease; }
#btn-open-listado-campogramas:hover {
    background: linear-gradient(135deg, #334155 0%, #1E293B 100%) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(51,65,85,0.32) !important;
    transform: translateY(-1px);
}
#btn-clear { transition: all 0.20s ease; }
#btn-clear:hover {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(220,38,38,0.38) !important;
    transform: translateY(-1px);
}

/* === MODAL "VER GUARDADOS" CENTRADO REAL === */
#modal-listado-campogramas.camp-modal-guardados-centered .modal-dialog {
  width: min(1040px, calc(100vw - 72px));
  max-width: min(1040px, calc(100vw - 72px));
  margin: 1.75rem auto;
}

@media (max-width: 900px) {
  #modal-listado-campogramas.camp-modal-guardados-centered .modal-dialog {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    margin: 0.75rem auto;
  }
}

/* ==========================
   Comparativa auto: escala preview vs fullscreen
   ========================== */
#cbd-modal-comparar-auto .cmp-preview-pitch {
  width: min(100%, calc(56vh * 1.78)) !important;
  margin-left: auto;
  margin-right: auto;
}

#campograma-comparativa-pitch-only:fullscreen {
  width: min(100vw, calc(88vh * 1.78)) !important;
  max-width: 100vw !important;
  margin: 0 auto !important;
}

/* Comparativa auto fullscreen controls */
.cmp-fs-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 60;
  display: none;
  align-items: flex-start;
  gap: 8px;
}

#campograma-comparativa-pitch-only:fullscreen .cmp-fs-controls {
  display: flex;
}

.cmp-fs-btn {
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(12, 26, 52, 0.72);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
  padding: 0 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
}

.cmp-fs-summary-wrap {
  position: relative;
}

.cmp-fs-summary-wrap > summary {
  list-style: none;
}

.cmp-fs-summary-wrap > summary::-webkit-details-marker {
  display: none;
}

.cmp-fs-summary-panel {
  margin-top: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 26px rgba(0, 40, 92, 0.20);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 360px;
  justify-content: flex-start;
}



/* Filas compactas y escudo alineado con el nombre del equipo. */
#picker-modal #picker-table td.dash-cell {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 24px !important;
  vertical-align: middle !important;
}
#picker-modal #picker-table td .dash-cell-value,
#picker-modal #picker-table td .dash-cell-value p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 20px;
}
#picker-modal #picker-table td[data-dash-column="Equipo_Display"] .dash-cell-value,
#picker-modal #picker-table td[data-dash-column="Equipo_Display"] .dash-cell-value > p {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  height: 100% !important;
  min-height: 24px;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}
#picker-modal #picker-table .camp-picker-team {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 20px;
  width: 100%;
}
#picker-modal #picker-table .camp-picker-team img {
  display: block;
  margin: 0;
}
#picker-modal #picker-table .camp-picker-team-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}