/* Solo se aplica después de cargar la paleta de la cuenta autenticada. */
html[data-user-colors="true"] body {
  background: var(--bg) !important;
  color: var(--text) !important;
}
html[data-user-colors="true"] #app .section,
html[data-user-colors="true"] .form-container,
html[data-user-colors="true"] .modal-panel,
html[data-user-colors="true"] #app .card,
html[data-user-colors="true"] .tabla-wrap {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-user-colors="true"] #app h2,
html[data-user-colors="true"] #app h3,
html[data-user-colors="true"] .modal-panel h2,
html[data-user-colors="true"] #app .hint,
html[data-user-colors="true"] .modal-panel .hint,
html[data-user-colors="true"] th {
  color: var(--text) !important;
}
html[data-user-colors="true"] th,
html[data-user-colors="true"] #app nav {
  background: var(--bg) !important;
}
html[data-user-colors="true"] input,
html[data-user-colors="true"] select,
html[data-user-colors="true"] textarea {
  background-color: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-user-colors="true"] input::placeholder,
html[data-user-colors="true"] textarea::placeholder { color: var(--text); opacity: .7; }
html[data-user-colors="true"] #app > #app-header,
html[data-user-colors="true"] #app .nav-btn.active,
html[data-user-colors="true"] button[type="submit"],
html[data-user-colors="true"] #btn-guardar-rep,
html[data-user-colors="true"] #btn-guardar-encargo,
html[data-user-colors="true"] .btn-primary-action {
  background: var(--primary) !important;
  color: var(--personal-accent-text) !important;
}
html[data-user-colors="true"] #app > #app-header h1,
html[data-user-colors="true"] #app > #app-header #moneda-cuenta,
html[data-user-colors="true"] #app > #app-header #nombre-usuario { color: var(--personal-accent-text) !important; }
#form-preferencias input[type="color"] { display: block; width: 72px; height: 42px; padding: 3px; cursor: pointer; }
#form-preferencias label { display: block; margin-bottom: 10px; }