/* SISPLUS v0.19.25a · Seguridad del correo */

.account-email-security-card {
  border-top: 4px solid #147fbe;
}

.account-email-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: .9rem;
}

.account-email-section-heading h2 {
  margin: .15rem 0 .25rem;
}

.account-email-section-heading p {
  margin: 0;
  color: #607989;
}

.account-email-security-icon {
  font-size: 1.8rem;
}

.account-email-current-state {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  margin-bottom: .9rem;
}

.account-email-current-state article {
  padding: .7rem;
  border: 1px solid #dce8ee;
  border-radius: 13px;
  background: #f7fbfd;
}

.account-email-current-state small,
.account-email-current-state strong,
.account-email-current-state span {
  display: block;
}

.account-email-current-state small {
  color: #6c8391;
  font-size: .68rem;
  text-transform: uppercase;
}

.account-email-current-state strong {
  margin-top: .2rem;
  color: #22516c;
}

.account-email-current-state span {
  margin-top: .15rem;
  color: #738793;
  font-size: .72rem;
}

.account-email-pending-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr);
  gap: .8rem;
  margin-bottom: 1rem;
  padding: .85rem;
  border: 1px solid #d4c5ed;
  border-radius: 15px;
  background: #faf7ff;
}

.account-email-pending-card h3 {
  margin: .2rem 0 .4rem;
  color: #5c4095;
}

.account-email-pending-card p {
  margin: .22rem 0;
  color: #695f7c;
}

.account-email-cancel-form {
  display: grid;
  gap: .55rem;
  align-content: start;
}

.account-email-recovery-form {
  padding-top: .9rem;
  border-top: 1px solid #dce7ec;
}

.account-email-identity-confirmation {
  margin: .8rem 0;
}

.account-email-safety-note,
.assisted-recovery-help {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  padding: .75rem;
  border: 1px solid #cce0eb;
  border-radius: 13px;
  background: #f2f9fd;
}

.account-email-safety-note p,
.assisted-recovery-help p {
  margin: 0;
  color: #527184;
}

.assisted-recovery-help {
  margin-top: 1rem;
}

.assisted-recovery-help strong {
  display: block;
  margin-bottom: .18rem;
  color: #27566f;
}

.email-safety-feedback {
  min-height: 1.25rem;
  color: #627988;
  font-size: .78rem;
}

.email-safety-feedback.is-warning {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
  padding: .55rem .65rem;
  border: 1px solid #e6cc8c;
  border-radius: 10px;
  background: #fff9e9;
  color: #745b20;
}

.email-safety-feedback.is-warning button {
  padding: .32rem .52rem;
  border: 1px solid #cfac51;
  border-radius: 8px;
  background: #fff;
  color: #725514;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.email-safety-feedback.is-error {
  color: #b23434;
  font-weight: 750;
}

.email-safety-feedback.is-success {
  color: #267844;
  font-weight: 750;
}

.email-confirmation-card {
  max-width: 650px;
}

.email-confirmation-result {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
}

.email-confirmation-result > span {
  font-size: 2rem;
}

.email-confirmation-result h1 {
  margin: .2rem 0 .5rem;
}

.confirmed-email {
  display: block;
  margin: .7rem 0;
  padding: .7rem;
  border-radius: 12px;
  background: #ecf8f0;
  color: #247541;
  text-align: center;
}

.email-change-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: .5rem;
  align-items: center;
  margin: 1rem 0;
}

.email-change-comparison article {
  padding: .7rem;
  border: 1px solid #d9e6ec;
  border-radius: 12px;
  background: #f8fbfd;
  text-align: center;
}

.email-change-comparison small,
.email-change-comparison strong {
  display: block;
}

.email-change-comparison small {
  color: #708591;
  font-size: .68rem;
  text-transform: uppercase;
}

.email-change-comparison strong {
  margin-top: .2rem;
  color: #27536c;
}

.email-change-warning {
  margin-top: .8rem;
  color: #a33b3b;
  font-size: .8rem;
  text-align: center;
}

.button.full {
  display: block;
  width: 100%;
  margin-top: .55rem;
  text-align: center;
}

@media (max-width: 760px) {
  .account-email-current-state,
  .account-email-pending-card,
  .email-change-comparison {
    grid-template-columns: 1fr;
  }

  .email-change-comparison > span {
    text-align: center;
    transform: rotate(90deg);
  }
}