/* ---------- Password: filas con mismo ancho en Password/Confirm ---------- */
.password-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.password-left {
  flex: 1 1 auto; /* ambos inputs ocupan el mismo ancho */
}

/* Medidor compacto (ajusta width 100–200px a gusto) */
.strength-inline {
  width: 160px;       /* cambia a 100 o 200 si prefieres */
  min-width: 120px;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.strength-inline-bar {
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
}
.strength-inline-text {
  display: block;
  margin-top: 4px;
  font-size: .75rem;
  text-align: right;
  opacity: .8;
}

/* Spacer: mismo ancho, sin contenido visible (para Confirm) */
.strength-inline--spacer .strength-inline-bar,
.strength-inline--spacer .strength-inline-text {
  display: none;
}

/* Responsive */
@media (max-width: 576px) {
  .password-row { flex-wrap: wrap; }
  .strength-inline { width: 120px; }
}

/* ---------- intl-tel-input tweaks ---------- */
.iti { width: 100%; }
.iti__country-list { z-index: 10000; } /* que el dropdown no quede detrás de cards/modals */

/* Modo CLARO: códigos de área en negro (seleccionado + lista) */
:root:not([data-theme="dark"]) .iti .iti__selected-dial-code,
:root:not([data-theme="dark"]) .iti .iti__country-list .iti__dial-code,
:root:not([data-theme="dark"]) .iti .iti__country .iti__dial-code {
  color: #000 !important;
  opacity: 1;
}

/* Modo OSCURO: lista y textos legibles */
:root[data-theme="dark"] .iti__country-list {
  background: var(--bs-body-bg, #0f1115);
  color: var(--bs-body-color, #e6e6e6);
  border-color: var(--bs-border-color, #2a2f3a);
}
:root[data-theme="dark"] .iti__dial-code {
  color: var(--bs-secondary-color, #c8c8c8);
  opacity: 1;
}
:root[data-theme="dark"] .strength-inline-text {
  color: var(--bs-secondary-color, #c8c8c8);
}