/* ============================================
   SETTINGS POPUP - Component Styles (BEM)
   ============================================ */
.settings-popup {
  position: fixed;
  top: var(--header-height);
  right: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 300;
  min-width: 260px;
  opacity: 0; /* oculto por defecto */
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  color: var(--text-primary);
}
.settings-popup.active { opacity: 1; pointer-events: all; transform: translateY(0); }

.settings-content { padding: 16px; }
.settings-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); }
.settings-header h3 { font-size: 1rem; font-weight: 700; margin: 0; color: var(--text-primary); }
.btn-close-settings { background: transparent; border: none; color: var(--text-primary); font-size: 1.25rem; cursor: pointer; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: background 0.2s ease; }
.btn-close-settings:hover { background: var(--bg-surface-variant); }
.settings-body { padding-top: 12px; display: flex; flex-direction: column; gap: 12px; }

/* Language section */
.language-section { margin-bottom: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); }
.language-label { font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; display: block; }
.language-toggle { display: flex; gap: 8px; }
.toggle-btn { flex: 1; padding: 10px 12px; background: var(--bg-surface-variant); border: 1px solid var(--border-color); color: var(--text-primary); font-size: 0.875rem; font-weight: 600; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; text-align: center; }
.toggle-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.toggle-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* Toggles (edición y filtrar) */
.reorder-mode-section { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.reorder-mode-label { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.toggle-switch { position: relative; display: inline-block; width: 50px; height: 26px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg-surface-variant); border: 1px solid var(--border-color); transition: 0.3s; border-radius: 26px; }
.toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #fff; transition: 0.3s; border-radius: 50%; }
.toggle-switch input:checked + .toggle-slider { background-color: var(--color-primary); border-color: var(--color-primary); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(24px); }

/* Color codes */
.color-codes-section { padding: 8px 0 0 0; }
.color-codes-label { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.color-codes-list { display: flex; flex-direction: column; gap: 6px; }
.color-code-item { display: flex; align-items: center; gap: 10px; }
.color-indicator { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-color); }
.color-indicator.relais { background: rgb(97, 38, 122); border-color: rgba(97, 38, 122, 0.3); }
.color-indicator.rcs { background: #F59E0B; border-color: rgba(245, 158, 11, 0.3); }
.color-indicator.green { background: #10b981; border-color: rgba(16, 185, 129, 0.3); }
.color-indicator.red { background: #ef4444; border-color: rgba(239, 68, 68, 0.3); }
.color-indicator.blue { background: #3B82F6; border-color: rgba(59, 130, 246, 0.3); }
.color-indicator.cyan { background: #06B6D4; border-color: rgba(6, 182, 212, 0.3); }
.color-indicator.magenta { background: #EC4899; border-color: rgba(236, 72, 153, 0.3); }
.color-description { font-size: 13px; color: var(--text-secondary); }

/* Logout */
.btn-logout { width: 100%; padding: 12px 16px; background: transparent; border: none; color: var(--color-error); font-size: 0.875rem; font-weight: 600; cursor: pointer; border-radius: 8px; text-align: left; transition: all 0.2s ease; display: flex; align-items: center; gap: 8px; }
.btn-logout:hover { background: rgba(239, 68, 68, 0.1); }