/* ==========================================================================
   Superficies flotantes — ventanas modales, menús y desplegables
   ========================================================================== */

html[data-theme] :is(.archi-info-card, .trade-info-card, .qty-modal-card, .compare-modal-card,
  .confirm-card, .avatar-modal-card, .trade-modal-card, .archi-modal-card) {
  background: var(--c-surface) !important;
  background-image: none !important;
  border: 1px solid var(--c-line-strong) !important;
  border-radius: 20px !important;
  box-shadow: var(--c-shadow-float) !important;
  color: var(--c-text) !important;
}

html[data-theme] :is(.notif-dropdown, .search-dropdown, .map-search-results, .progress-priority-drop,
  .archi-drop, .trade-archi-drop) {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-line-strong) !important;
  border-radius: 16px !important;
  box-shadow: var(--c-shadow-float) !important;
  color: var(--c-text) !important;
}

html[data-theme] :is(.qty-modal-card h3, .trade-modal-card h3, .compare-modal-header h2,
  .notif-dropdown-head h3, .avatar-modal-card h3) {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  color: var(--c-text) !important;
}

/* Velo detrás de las ventanas */
html[data-theme] :is(.qty-modal, .compare-modal, .confirm-modal, .avatar-modal, .archi-info-modal, .trade-info-modal, .archi-modal) {
  background: rgba(8, 7, 5, .55) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}