/* ============================================================
   ScoutData - Estilos inputs & dropdowns (assets/*.css)
   - Usa: className="sd-input" y className="sd-dropdown"
   ============================================================ */

:root{
  --sd-bg: #151a1c;
  --sd-bg-2: #1f252a;
  --sd-border: rgba(255,255,255,0.18);
  --sd-text: rgba(255,255,255,0.92);
  --sd-muted: rgba(255,255,255,0.65);
  --sd-neon: #00E7FF;
  --sd-neon-a: rgba(0,231,255,0.55);
}

/* Labels */
.sd-label{
  font-weight: 800;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.92);
}

/* ---------------------------
   dbc.Input (Bootstrap)
   --------------------------- */
.sd-input.form-control{
  background: linear-gradient(180deg,var(--sd-bg-2) 0%, var(--sd-bg) 100%) !important;
  color: var(--sd-text) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: 9999px !important;
  height: 40px !important;
  padding: 0 14px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35) !important;
}

.sd-input.form-control::placeholder{
  color: var(--sd-muted) !important;
}

.sd-input.form-control:focus{
  border: 2px solid var(--sd-neon) !important;
  box-shadow: 0 0 8px var(--sd-neon-a), 0 0 16px var(--sd-neon-a), inset 0 0 6px var(--sd-neon-a) !important;
  outline: none !important;
}

/* ---------------------------
   dcc.Dropdown (react-select)
   className="sd-dropdown"
   --------------------------- */

/* Control (cerrado) */
.sd-dropdown .Select-control,
.sd-dropdown .select__control{
  background: linear-gradient(180deg,var(--sd-bg-2) 0%, var(--sd-bg) 100%) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: 9999px !important;
  min-height: 40px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35) !important;
}

/* Texto */
.sd-dropdown .Select-placeholder,
.sd-dropdown .select__placeholder{
  color: var(--sd-muted) !important;
}

.sd-dropdown .Select-value-label,
.sd-dropdown .select__single-value{
  color: var(--sd-text) !important;
}

/* Indicadores (flecha, clear) */
.sd-dropdown .Select-arrow-zone,
.sd-dropdown .select__indicators{
  color: var(--sd-muted) !important;
}

/* Focus glow */
.sd-dropdown .is-focused:not(.is-open) > .Select-control,
.sd-dropdown .select__control--is-focused{
  border: 2px solid var(--sd-neon) !important;
  box-shadow: 0 0 8px var(--sd-neon-a), 0 0 16px var(--sd-neon-a), inset 0 0 6px var(--sd-neon-a) !important;
}

/* Menú */
.sd-dropdown .Select-menu-outer,
.sd-dropdown .select__menu{
  background: #121618 !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.5) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  z-index: 9999 !important;
}

.sd-dropdown .Select-option,
.sd-dropdown .select__option{
  background: transparent !important;
  color: var(--sd-text) !important;
}

.sd-dropdown .Select-option.is-focused,
.sd-dropdown .select__option--is-focused{
  background: rgba(0,231,255,0.12) !important;
}

.sd-dropdown .Select-option.is-selected,
.sd-dropdown .select__option--is-selected{
  background: rgba(0,231,255,0.18) !important;
}

/* ============================================================
   (Opcional) botones para que casen con el look (si ya tienes)
   ============================================================ */
.sd-btn{
  border-radius: 9999px !important;
  height: 40px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35) !important;
}

.sd-btn--primary{
  background: linear-gradient(180deg,#0aa8b9 0%, #037a86 100%) !important;
  color: white !important;
}

.sd-btn--success{
  background: linear-gradient(180deg,#2ecc71 0%,#27ae60 100%) !important;
  color: white !important;
}