/* ==========================================================================
   10-controles-compartidos-dropdowns.css
   Proposito: estilos compartidos para dcc.Dropdown (alto, bordes, menu, chips).
   Impacto: dashboards con clases dd-28 / dd-premium.
   ========================================================================== */
/* =====================================================
   dcc.Dropdown (react-select v1) a 28px para igualarlo al input
===================================================== */

.dd-28 .Select-control{
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 6px !important;
  border: 1px solid #c9a227 !important;
  box-shadow: 0 1px 2px rgba(201, 162, 39, 0.18) !important;
  background: #ffffff !important;
}

.dd-28 .Select-placeholder,
.dd-28 .Select-value{
  line-height: 28px !important;
  text-align: center !important;
  width: 100% !important;
}

.dd-28 .Select-input{
  height: 28px !important;
}

.dd-28 .Select-input > input{
  line-height: 28px !important;
  text-align: center !important;
}

/* Menú: ancho adaptable + no partir en 2 líneas */
.dd-28 .Select-menu-outer{
  width: max-content !important;
  min-width: 220px !important;
  max-width: 360px !important;
  font-size: 0.70rem;
  z-index: 9999;
}

.dd-28 .Select-option,
.dd-28 .VirtualizedSelectOption{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.dd-28 .Select-option.is-selected{
  font-weight: 600;
}

.dd-28 .Select-option.is-focused,
.dd-28 .VirtualizedSelectFocusedOption{
  background-color: rgba(26, 35, 126, 0.08);
}

/* =====================================================
   Dropdown premium (multi) — tags/pills y bordes dorados
===================================================== */

.dd-premium .Select-control{
  border: 1px solid #c9a227 !important;
  box-shadow: 0 1px 2px rgba(201, 162, 39, 0.18) !important;
  background: #ffffff !important;
}

.dd-premium .Select-placeholder{
  color: #64748b !important;
}

.dd-premium.Select--multi .Select-value{
  background: #f1f5f9 !important;
  border: 1px solid #c9a227 !important;
  border-radius: 6px !important;
  color: #1a237e !important;
  margin-top: 2px !important;
}

.dd-premium.Select--multi .Select-value-label{
  color: #1a237e !important;
  font-weight: 600 !important;
}

.dd-premium.Select--multi .Select-value-icon{
  border-right: 1px solid #c9a227 !important;
  color: #1a237e !important;
}

/* Multi: chips en líneas separadas (comportamiento por defecto de dd-premium) */
.dd-premium.Select--multi .Select-multi-value-wrapper{
  display: block !important;
  white-space: normal !important;
  padding: 2px 0 !important;
}

.dd-premium.Select--multi .Select-value{
  display: block !important;
  width: 100% !important;
  margin: 2px 0 !important;
  white-space: normal !important;
}

.dd-premium.Select--multi .Select-value-label{
  white-space: normal !important;
}

/* Multi-select compacto: evita línea vacía debajo de la selección */
.dd-premium.Select--multi .Select-input{
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 6px !important;
}
.dd-premium.Select--multi .Select-input > input{
  height: 20px !important;
  line-height: 20px !important;
  padding: 0 !important;
}

/* Tabla comparativa: selector limpio + lista externa de jugadores */
.dd-players-list.Select--multi .Select-control{
  min-height: 28px !important;
  height: auto !important;
}
.dd-players-list.Select--multi .Select-multi-value-wrapper{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 4px !important;
}
.dd-players-list.Select--multi .Select-value{
  display: none !important;
}
.dd-players-list.Select--multi .Select-input{
  height: 26px !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  display: block !important;
  width: 100% !important;
}
.dd-players-list.Select--multi .Select-input > input{
  height: 26px !important;
  line-height: 26px !important;
  text-align: left !important;
  width: 100% !important;
}
.dd-players-list .Select-menu-outer{
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

/* =====================================================
   Permitir scroll de la página aunque el cursor esté sobre la tabla
===================================================== */
.dash-table-container,
.dash-spreadsheet-container,
.dash-spreadsheet-inner{
  overflow: visible !important;
}

.dash-table-container{
  overscroll-behavior: auto;
}


.dd-premium .Select-option.is-selected{
  background-color: rgba(201, 162, 39, 0.12) !important;
  font-weight: 600;
}

/* =====================================================
   Scroll: permitir scroll de página al pasar por filtros (dashboard_extra)
===================================================== */
.page-dashboard-extra,
.page-dashboard-extra *{
  overscroll-behavior: auto !important;
}

.page-dashboard-extra .Select-control,
.page-dashboard-extra input,
.page-dashboard-extra button{
  overscroll-behavior: auto !important;
}

/* =====================================================
   Perfiles Admin: dropdown visual tipo modal/panel premium
===================================================== */
.dd-admin-picker{
  position: relative;
  z-index: 2000;
}

.dd-admin-picker .Select-control{
  border: 1px solid #c9a227 !important;
  box-shadow: 0 1px 2px rgba(201, 162, 39, 0.18) !important;
  background: #ffffff !important;
}

.dd-admin-picker .Select-menu-outer{
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  border: 1px solid #c9a227 !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22) !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
  z-index: 2147483647 !important;
}

.dd-admin-picker .VirtualizedSelectFocusedOption,
.dd-admin-picker .Select-option.is-focused{
  background-color: rgba(26, 35, 126, 0.08) !important;
  color: #1a237e !important;
}

.dd-admin-picker .Select-option.is-selected{
  background-color: rgba(201, 162, 39, 0.14) !important;
  color: #1a237e !important;
  font-weight: 700 !important;
}

/* =====================================================
   Posiciones Admin: chips en línea — clase de máxima especificidad
   Sobreescribe dd-premium multi que fuerza display:block
===================================================== */

/* Control: altura automática para acomodar chips */
.dd-admin-multi-inline.Select--multi .Select-control,
.dd-admin-picker.dd-admin-multi-inline .Select-control {
  height: auto !important;
  min-height: 30px !important;
  padding: 2px 4px !important;
}

/* Wrapper: flexbox en fila */
.dd-admin-multi-inline.Select--multi .Select-multi-value-wrapper,
.dd-admin-picker.dd-admin-multi-inline.Select--multi .Select-multi-value-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 4px !important;
  min-height: 26px !important;
  width: 100% !important;
}

/* Chip individual: inline compacto, uniforme */
.dd-admin-multi-inline.Select--multi .Select-value,
.dd-admin-picker.dd-admin-multi-inline.Select--multi .Select-value {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: auto !important;
  max-width: 200px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  background: #eef3ff !important;
  border: 1px solid #c9a227 !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  height: 20px !important;
  font-size: 10px !important;
}

/* Texto dentro del chip */
.dd-admin-multi-inline.Select--multi .Select-value-label,
.dd-admin-picker.dd-admin-multi-inline.Select--multi .Select-value-label {
  display: inline !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 170px !important;
  padding: 0 6px 0 6px !important;
  color: #0D1B3E !important;
  font-weight: 600 !important;
  line-height: 20px !important;
}

/* Icono × del chip */
.dd-admin-multi-inline.Select--multi .Select-value-icon,
.dd-admin-picker.dd-admin-multi-inline.Select--multi .Select-value-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 5px !important;
  border-right: 1px solid #c9a227 !important;
  color: #5A6E96 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  height: 20px !important;
  cursor: pointer !important;
}

.dd-admin-multi-inline.Select--multi .Select-value-icon:hover {
  background: rgba(201,162,39,0.15) !important;
  color: #0D1B3E !important;
}

/* Input de búsqueda inline */
.dd-admin-multi-inline.Select--multi .Select-input,
.dd-admin-picker.dd-admin-multi-inline.Select--multi .Select-input {
  display: inline-flex !important;
  align-items: center !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  flex-shrink: 0 !important;
}

.dd-admin-multi-inline.Select--multi .Select-input > input,
.dd-admin-picker.dd-admin-multi-inline.Select--multi .Select-input > input {
  height: 20px !important;
  line-height: 20px !important;
  padding: 0 !important;
  font-size: 10px !important;
}