/* =========================================================
   NAI HUB · MI PERFIL
   NEURO APRENDIZAJE INFANTIL

   UBICACIÓN:
   frontend/src/pages/perfil/perfil.css

   - PREMIUM
   - MODERNO
   - COMPACTO
   - RESPONSIVE
   - FOTO EDITABLE
   - MODALES
   - MODO CLARO / OSCURO
   - SIN GLOW
   - SIN SCROLL HORIZONTAL
   ========================================================= */


/* =========================================================
   PAGE TOKENS
   ========================================================= */

#perfilPage,
.perfil-page {

  --perfil-bg:
    #f5f6f8;

  --perfil-surface:
    #ffffff;

  --perfil-surface-soft:
    #f7f8fa;

  --perfil-surface-hover:
    #f1f2f5;

  --perfil-border:
    #d6dae2;

  --perfil-border-strong:
    #b7beca;

  --perfil-text:
    #050505;

  --perfil-text-soft:
    #4b4f58;

  --perfil-accent:
    #6253a2;

  --perfil-accent-soft:
    rgba(98, 83, 162, .08);

  --perfil-success:
    #11683f;

  --perfil-success-bg:
    #e9f7ef;

  --perfil-success-border:
    #b7dcc7;

  --perfil-warning:
    #7b4a00;

  --perfil-warning-bg:
    #fff6df;

  --perfil-warning-border:
    #e6cb87;

  --perfil-danger:
    #9b1c1c;

  --perfil-danger-bg:
    #fff0ef;

  --perfil-danger-border:
    #efb3ae;

  --perfil-radius:
    15px;

  --perfil-radius-sm:
    10px;

  --perfil-transition:
    150ms cubic-bezier(.2, .8, .2, 1);

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    18px !important;

  overflow-x:
    clip !important;

  box-sizing:
    border-box !important;

  color:
    var(--perfil-text) !important;

  background:
    transparent;

}


/* =========================================================
   BOX SIZING
   ========================================================= */

#perfilPage *,
#perfilPage *::before,
#perfilPage *::after,
.perfil-page *,
.perfil-page *::before,
.perfil-page *::after {

  box-sizing:
    border-box;

}


/* =========================================================
   HEADER
   ========================================================= */

#perfilPage .perfil-page__header {

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  margin-bottom:
    16px;

}


#perfilPage .perfil-page__header-copy {

  min-width:
    0;

}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

#perfilPage .perfil-page__header-actions {

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

}


/* =========================================================
   OVERLINE
   ========================================================= */

#perfilPage .perfil-page__overline {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  margin-bottom:
    5px;

  color:
    var(--perfil-text);

  font-size:
    9px;

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    .13em;

}


#perfilPage .perfil-page__overline-dot {

  width:
    5px;

  height:
    5px;

  flex:
    0 0 5px;

  border-radius:
    50%;

  background:
    var(--perfil-accent);

}


/* =========================================================
   PAGE TITLE
   ========================================================= */

#perfilPage .perfil-page__header h1 {

  margin:
    0;

  color:
    var(--perfil-text) !important;

  font-size:
    28px;

  font-weight:
    900;

  line-height:
    1.05;

  letter-spacing:
    -.045em;

}


#perfilPage .perfil-page__header p {

  margin:
    6px 0 0;

  color:
    var(--perfil-text) !important;

  font-size:
    12px;

  font-weight:
    650;

  line-height:
    1.45;

}


/* =========================================================
   HEADER BADGE
   ========================================================= */

#perfilPage .perfil-page__header-badge {

  flex:
    0 0 auto;

  min-height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    0 11px;

  border:
    1px solid var(--perfil-border);

  border-radius:
    999px;

  background:
    var(--perfil-surface);

  color:
    var(--perfil-text);

  font-size:
    9px;

  font-weight:
    800;

  white-space:
    nowrap;

}


#perfilPage .perfil-page__header-badge svg {

  width:
    13px;

  height:
    13px;

  stroke-width:
    2.2;

}


/* =========================================================
   ACTION BUTTON
   ========================================================= */

.perfil-action-btn {

  min-height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    0 11px;

  border:
    1px solid transparent;

  border-radius:
    9px;

  font-family:
    inherit;

  font-size:
    9.5px;

  font-weight:
    850;

  line-height:
    1;

  white-space:
    nowrap;

  cursor:
    pointer;

  transition:
    background-color var(--perfil-transition),
    border-color var(--perfil-transition),
    color var(--perfil-transition),
    transform var(--perfil-transition);

}


.perfil-action-btn svg {

  width:
    13px;

  height:
    13px;

  flex:
    0 0 13px;

  stroke-width:
    2.25;

}


.perfil-action-btn:hover:not(:disabled) {

  transform:
    translateY(-1px);

}


.perfil-action-btn:active:not(:disabled) {

  transform:
    translateY(0)
    scale(.985);

}


.perfil-action-btn:disabled {

  cursor:
    not-allowed;

  opacity:
    .55;

}


/* =========================================================
   ACTION PRIMARY
   ========================================================= */

.perfil-action-btn--primary {

  border-color:
    #111111;

  background:
    #111111;

  color:
    #ffffff;

}


.perfil-action-btn--primary:hover:not(:disabled) {

  border-color:
    #000000;

  background:
    #000000;

  color:
    #ffffff;

}


.perfil-action-btn--primary svg {

  color:
    #ffffff;

  stroke:
    #ffffff;

}


/* =========================================================
   ACTION SECONDARY
   ========================================================= */

.perfil-action-btn--secondary {

  border-color:
    var(--perfil-border);

  background:
    var(--perfil-surface);

  color:
    var(--perfil-text);

}


.perfil-action-btn--secondary:hover:not(:disabled) {

  border-color:
    var(--perfil-border-strong);

  background:
    var(--perfil-surface-hover);

}


/* =========================================================
   ACTION GHOST
   ========================================================= */

.perfil-action-btn--ghost {

  border-color:
    transparent;

  background:
    transparent;

  color:
    var(--perfil-text);

}


.perfil-action-btn--ghost:hover:not(:disabled) {

  border-color:
    var(--perfil-border);

  background:
    var(--perfil-surface-soft);

}


/* =========================================================
   ACTION DANGER
   ========================================================= */

.perfil-action-btn--danger {

  border-color:
    #a92525;

  background:
    #a92525;

  color:
    #ffffff;

}


.perfil-action-btn--danger:hover:not(:disabled) {

  border-color:
    #8c1919;

  background:
    #8c1919;

  color:
    #ffffff;

}


.perfil-action-btn--danger svg {

  color:
    #ffffff;

  stroke:
    #ffffff;

}


/* =========================================================
   CONTENT
   ========================================================= */

#perfilPage .perfil-content {

  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  overflow:
    visible;

  color:
    var(--perfil-text);

}


/* =========================================================
   LAYOUT
   ========================================================= */

#perfilPage .perfil-layout {

  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    250px minmax(0, 1fr);

  align-items:
    start;

  gap:
    14px;

}


/* =========================================================
   SUMMARY
   ========================================================= */

#perfilPage .perfil-summary {

  position:
    sticky;

  top:
    12px;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    stretch;

  padding:
    16px;

  overflow:
    hidden;

  border:
    1px solid var(--perfil-border);

  border-radius:
    var(--perfil-radius);

  background:
    var(--perfil-surface);

  color:
    var(--perfil-text);

  transition:
    border-color var(--perfil-transition),
    transform var(--perfil-transition);

}


#perfilPage .perfil-summary:hover {

  border-color:
    var(--perfil-border-strong);

  transform:
    translateY(-1px);

}


/* =========================================================
   SUMMARY TOP
   ========================================================= */

#perfilPage .perfil-summary__top {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    11px;

}


/* =========================================================
   AVATAR
   ========================================================= */

#perfilPage .perfil-avatar,
.perfil-modal .perfil-avatar {

  position:
    relative;

  width:
    78px;

  height:
    78px;

  flex:
    0 0 78px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border:
    2px solid #ffffff;

  border-radius:
    50%;

  background:
    linear-gradient(
      135deg,
      #eceaf6 0%,
      #f7f8fa 100%
    );

  outline:
    1px solid var(--perfil-border, #d6dae2);

  color:
    #050505;

  font-size:
    22px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -.04em;

}


#perfilPage .perfil-avatar img,
.perfil-modal .perfil-avatar img {

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  object-position:
    center;

  border-radius:
    50%;

}


#perfilPage .perfil-avatar__fallback,
.perfil-modal .perfil-avatar__fallback {

  width:
    100%;

  height:
    100%;

  display:
    grid;

  place-items:
    center;

  color:
    #050505;

  font-weight:
    900;

}


#perfilPage .perfil-avatar__fallback[hidden],
.perfil-modal .perfil-avatar__fallback[hidden] {

  display:
    none !important;

}


/* =========================================================
   AVATAR EDIT
   ========================================================= */

#perfilPage .perfil-avatar--editable {

  overflow:
    visible;

}


#perfilPage .perfil-avatar__edit {

  position:
    absolute;

  right:
    -3px;

  bottom:
    -3px;

  z-index:
    3;

  width:
    27px;

  height:
    27px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    2px solid var(--perfil-surface);

  border-radius:
    50%;

  background:
    #111111;

  color:
    #ffffff;

  cursor:
    pointer;

}


#perfilPage .perfil-avatar__edit svg {

  width:
    12px;

  height:
    12px;

  stroke:
    #ffffff;

  stroke-width:
    2.4;

}


/* =========================================================
   IDENTITY
   ========================================================= */

#perfilPage .perfil-summary__identity {

  width:
    100%;

  min-width:
    0;

  text-align:
    center;

}


#perfilPage .perfil-summary__identity strong {

  display:
    block;

  width:
    100%;

  overflow:
    hidden;

  color:
    var(--perfil-text);

  font-size:
    14px;

  font-weight:
    900;

  line-height:
    1.25;

  letter-spacing:
    -.025em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


#perfilPage .perfil-summary__identity span {

  display:
    block;

  width:
    100%;

  margin-top:
    3px;

  overflow:
    hidden;

  color:
    var(--perfil-text);

  font-size:
    10px;

  font-weight:
    650;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   PHOTO ACTIONS
   ========================================================= */

#perfilPage .perfil-summary__photo-actions {

  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;

  margin-top:
    10px;

}


#perfilPage .perfil-photo-btn {

  min-height:
    28px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  padding:
    0 8px;

  border:
    1px solid var(--perfil-border);

  border-radius:
    8px;

  background:
    var(--perfil-surface-soft);

  color:
    var(--perfil-text);

  font-family:
    inherit;

  font-size:
    8.5px;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    background-color var(--perfil-transition),
    border-color var(--perfil-transition),
    transform var(--perfil-transition);

}


#perfilPage .perfil-photo-btn:hover {

  border-color:
    var(--perfil-border-strong);

  background:
    var(--perfil-surface-hover);

  transform:
    translateY(-1px);

}


#perfilPage .perfil-photo-btn svg {

  width:
    11px;

  height:
    11px;

  stroke-width:
    2.3;

}


#perfilPage .perfil-photo-btn--danger {

  border-color:
    var(--perfil-danger-border);

  background:
    var(--perfil-danger-bg);

  color:
    var(--perfil-danger);

}


/* =========================================================
   BADGES
   ========================================================= */

#perfilPage .perfil-summary__badges {

  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;

  margin-top:
    13px;

}


#perfilPage .perfil-badge {

  min-height:
    24px;

  max-width:
    100%;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  padding:
    0 8px;

  overflow:
    hidden;

  border:
    1px solid var(--perfil-border);

  border-radius:
    999px;

  background:
    var(--perfil-surface-soft);

  color:
    var(--perfil-text);

  font-size:
    8.5px;

  font-weight:
    800;

  line-height:
    1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


#perfilPage .perfil-badge svg {

  width:
    11px;

  height:
    11px;

  flex:
    0 0 11px;

  stroke-width:
    2.3;

}


#perfilPage .perfil-badge__dot {

  width:
    5px;

  height:
    5px;

  flex:
    0 0 5px;

  border-radius:
    50%;

  background:
    currentColor;

}


#perfilPage .perfil-badge--role {

  border-color:
    rgba(98, 83, 162, .22);

  background:
    rgba(98, 83, 162, .07);

  color:
    var(--perfil-text);

}


#perfilPage .perfil-badge--success {

  border-color:
    var(--perfil-success-border);

  background:
    var(--perfil-success-bg);

  color:
    #0b4f31;

}


#perfilPage .perfil-badge--warning {

  border-color:
    var(--perfil-warning-border);

  background:
    var(--perfil-warning-bg);

  color:
    #633d00;

}


#perfilPage .perfil-badge--danger {

  border-color:
    var(--perfil-danger-border);

  background:
    var(--perfil-danger-bg);

  color:
    #761616;

}


/* =========================================================
   SUMMARY SEPARATOR
   ========================================================= */

#perfilPage .perfil-summary__separator {

  width:
    100%;

  height:
    1px;

  margin:
    15px 0;

  background:
    var(--perfil-border);

}


/* =========================================================
   SUMMARY META
   ========================================================= */

#perfilPage .perfil-summary__meta {

  width:
    100%;

  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    30px minmax(0, 1fr);

  align-items:
    center;

  gap:
    9px;

  padding:
    10px;

  border:
    1px solid var(--perfil-border);

  border-radius:
    var(--perfil-radius-sm);

  background:
    var(--perfil-surface-soft);

  color:
    var(--perfil-text);

}


#perfilPage .perfil-summary__meta-icon {

  width:
    30px;

  height:
    30px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--perfil-border);

  border-radius:
    8px;

  background:
    var(--perfil-surface);

  color:
    var(--perfil-text);

}


#perfilPage .perfil-summary__meta-icon svg {

  width:
    14px;

  height:
    14px;

  stroke-width:
    2.2;

}


#perfilPage .perfil-summary__meta > div:last-child {

  min-width:
    0;

}


#perfilPage .perfil-summary__meta span {

  display:
    block;

  color:
    var(--perfil-text);

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    .045em;

  text-transform:
    uppercase;

}


#perfilPage .perfil-summary__meta strong {

  display:
    block;

  margin-top:
    3px;

  overflow:
    hidden;

  color:
    var(--perfil-text);

  font-size:
    9.5px;

  font-weight:
    800;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   SECURITY
   ========================================================= */

#perfilPage .perfil-summary__security {

  width:
    100%;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  margin-top:
    8px;

  padding:
    8px 10px;

  border:
    1px solid var(--perfil-border);

  border-radius:
    var(--perfil-radius-sm);

  color:
    var(--perfil-text);

  font-size:
    8.5px;

  font-weight:
    750;

}


#perfilPage .perfil-summary__security > div {

  width:
    24px;

  height:
    24px;

  flex:
    0 0 24px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    7px;

  background:
    var(--perfil-accent-soft);

  color:
    var(--perfil-text);

}


#perfilPage .perfil-summary__security svg {

  width:
    12px;

  height:
    12px;

  stroke-width:
    2.3;

}


/* =========================================================
   MAIN
   ========================================================= */

#perfilPage .perfil-main {

  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    14px;

}


/* =========================================================
   CARD
   ========================================================= */

#perfilPage .perfil-card {

  min-width:
    0;

  overflow:
    hidden;

  border:
    1px solid var(--perfil-border);

  border-radius:
    var(--perfil-radius);

  background:
    var(--perfil-surface);

  color:
    var(--perfil-text);

  transition:
    border-color var(--perfil-transition),
    transform var(--perfil-transition);

}


#perfilPage .perfil-card:hover {

  border-color:
    var(--perfil-border-strong);

  transform:
    translateY(-1px);

}


#perfilPage .perfil-card--full {

  grid-column:
    1 / -1;

}


/* =========================================================
   CARD HEADER
   ========================================================= */

#perfilPage .perfil-card__header {

  min-height:
    58px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    11px 13px;

  border-bottom:
    1px solid var(--perfil-border);

  background:
    var(--perfil-surface);

  color:
    var(--perfil-text);

}


#perfilPage .perfil-card__header-copy {

  min-width:
    0;

}


#perfilPage .perfil-card__header-copy > span {

  display:
    block;

  color:
    var(--perfil-text);

  font-size:
    8px;

  font-weight:
    850;

  line-height:
    1.1;

  letter-spacing:
    .08em;

}


#perfilPage .perfil-card__header h2 {

  margin:
    4px 0 0;

  color:
    var(--perfil-text);

  font-size:
    13.5px;

  font-weight:
    900;

  line-height:
    1.2;

  letter-spacing:
    -.02em;

}


/* =========================================================
   CARD HEADER ICON
   ========================================================= */

#perfilPage .perfil-card__header-icon,
#perfilPage .perfil-card__edit {

  width:
    32px;

  height:
    32px;

  flex:
    0 0 32px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid var(--perfil-border);

  border-radius:
    9px;

  background:
    var(--perfil-surface-soft);

  color:
    var(--perfil-text);

}


#perfilPage .perfil-card__edit {

  cursor:
    pointer;

  transition:
    background-color var(--perfil-transition),
    border-color var(--perfil-transition),
    transform var(--perfil-transition);

}


#perfilPage .perfil-card__edit:hover {

  border-color:
    var(--perfil-border-strong);

  background:
    var(--perfil-surface-hover);

  transform:
    translateY(-1px);

}


#perfilPage .perfil-card__header-icon svg,
#perfilPage .perfil-card__edit svg {

  width:
    15px;

  height:
    15px;

  stroke-width:
    2.2;

}


/* =========================================================
   FIELDS
   ========================================================= */

#perfilPage .perfil-fields {

  width:
    100%;

  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  background:
    var(--perfil-surface);

}


#perfilPage .perfil-field {

  min-width:
    0;

  min-height:
    68px;

  padding:
    11px 13px;

  overflow:
    hidden;

  border-right:
    1px solid var(--perfil-border);

  border-bottom:
    1px solid var(--perfil-border);

  background:
    var(--perfil-surface);

  color:
    var(--perfil-text);

  transition:
    background-color var(--perfil-transition);

}


#perfilPage .perfil-field:hover {

  background:
    var(--perfil-surface-soft);

}


#perfilPage .perfil-field:nth-child(2n) {

  border-right:
    0;

}


#perfilPage .perfil-field:nth-last-child(-n + 2) {

  border-bottom:
    0;

}


/* =========================================================
   FIELD LABEL
   ========================================================= */

#perfilPage .perfil-field__label {

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  color:
    var(--perfil-text);

}


#perfilPage .perfil-field__label svg {

  width:
    12px;

  height:
    12px;

  flex:
    0 0 12px;

  stroke-width:
    2.25;

}


#perfilPage .perfil-field__label span {

  overflow:
    hidden;

  color:
    var(--perfil-text);

  font-size:
    8.5px;

  font-weight:
    800;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   FIELD VALUE
   ========================================================= */

#perfilPage .perfil-field > strong {

  display:
    block;

  width:
    100%;

  margin-top:
    6px;

  overflow:
    hidden;

  color:
    var(--perfil-text);

  font-size:
    12px;

  font-weight:
    850;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   ACTIVITY
   ========================================================= */

#perfilPage .perfil-fields--activity {

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

}


/* =========================================================
   LOADING
   ========================================================= */

#perfilPage .perfil-loading {

  width:
    100%;

  min-height:
    280px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  padding:
    24px;

  border:
    1px solid var(--perfil-border);

  border-radius:
    var(--perfil-radius);

  background:
    var(--perfil-surface);

  color:
    var(--perfil-text);

}


#perfilPage .perfil-loading > div {

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

}


#perfilPage .perfil-loading strong {

  color:
    var(--perfil-text);

  font-size:
    11px;

  font-weight:
    850;

}


#perfilPage .perfil-loading span:not(.perfil-spinner) {

  color:
    var(--perfil-text);

  font-size:
    9px;

  font-weight:
    600;

}


/* =========================================================
   SPINNER
   ========================================================= */

#perfilPage .perfil-spinner,
.perfil-button-spinner {

  width:
    24px;

  height:
    24px;

  flex:
    0 0 24px;

  border:
    2px solid var(--perfil-border, #d6dae2);

  border-top-color:
    var(--perfil-text, #050505);

  border-radius:
    50%;

  animation:
    perfilSpin
    650ms
    linear
    infinite;

}


.perfil-button-spinner {

  width:
    13px;

  height:
    13px;

  flex-basis:
    13px;

  border-width:
    1.5px;

  border-color:
    rgba(255, 255, 255, .35);

  border-top-color:
    #ffffff;

}


@keyframes perfilSpin {

  to {

    transform:
      rotate(360deg);

  }

}


/* =========================================================
   EMPTY
   ========================================================= */

#perfilPage .perfil-empty {

  width:
    100%;

  min-height:
    280px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    24px;

  border:
    1px solid var(--perfil-border);

  border-radius:
    var(--perfil-radius);

  background:
    var(--perfil-surface);

  color:
    var(--perfil-text);

  text-align:
    center;

}


#perfilPage .perfil-empty__icon {

  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    3px;

  border:
    1px solid var(--perfil-border);

  border-radius:
    11px;

  background:
    var(--perfil-surface-soft);

  color:
    var(--perfil-text);

}


#perfilPage .perfil-empty__icon svg {

  width:
    18px;

  height:
    18px;

  stroke-width:
    2.2;

}


#perfilPage .perfil-empty strong {

  color:
    var(--perfil-text);

  font-size:
    12px;

  font-weight:
    850;

}


#perfilPage .perfil-empty > span {

  color:
    var(--perfil-text);

  font-size:
    9px;

  font-weight:
    600;

}


/* =========================================================
   MODAL ROOT
   ========================================================= */

.perfil-modal-root {

  position:
    fixed;

  inset:
    0;

  z-index:
    500;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    center;

  padding:
    76px 16px 20px;

  pointer-events:
    none;

}


body.perfil-modal-open {

  overflow:
    hidden;

}


/* =========================================================
   MODAL BACKDROP
   ========================================================= */

.perfil-modal-backdrop {

  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  background:
    rgba(0, 0, 0, .48);

  pointer-events:
    auto;

}


/* =========================================================
   MODAL
   ========================================================= */

.perfil-modal {

  position:
    relative;

  z-index:
    1;

  width:
    min(
      720px,
      calc(100vw - 32px)
    );

  max-height:
    calc(100dvh - 96px);

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  border:
    1px solid #d6dae2;

  border-radius:
    15px;

  background:
    #ffffff;

  color:
    #050505;

  box-shadow:
    0 22px 60px
    rgba(0, 0, 0, .18);

  pointer-events:
    auto;

}


.perfil-modal--photo {

  width:
    min(
      560px,
      calc(100vw - 32px)
    );

}


.perfil-modal--confirm {

  width:
    min(
      500px,
      calc(100vw - 32px)
    );

}


/* =========================================================
   MODAL HEADER
   ========================================================= */

.perfil-modal__header {

  min-height:
    72px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    13px 15px;

  border-bottom:
    1px solid #d6dae2;

  background:
    #ffffff;

}


.perfil-modal__header > div:first-child {

  min-width:
    0;

}


.perfil-modal__eyebrow {

  display:
    block;

  margin-bottom:
    3px;

  color:
    #050505;

  font-size:
    8px;

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    .10em;

}


.perfil-modal__header h2 {

  margin:
    0;

  color:
    #050505;

  font-size:
    17px;

  font-weight:
    900;

  line-height:
    1.15;

  letter-spacing:
    -.025em;

}


.perfil-modal__header p {

  margin:
    4px 0 0;

  color:
    #35383f;

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.4;

}


/* =========================================================
   MODAL CLOSE
   ========================================================= */

.perfil-modal__close {

  width:
    32px;

  height:
    32px;

  flex:
    0 0 32px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid #d6dae2;

  border-radius:
    9px;

  background:
    #f7f8fa;

  color:
    #050505;

  cursor:
    pointer;

  transition:
    background-color var(--perfil-transition),
    border-color var(--perfil-transition);

}


.perfil-modal__close:hover {

  border-color:
    #b7beca;

  background:
    #eef0f3;

}


.perfil-modal__close svg {

  width:
    14px;

  height:
    14px;

  stroke:
    currentColor;

  stroke-width:
    2.3;

}


/* =========================================================
   MODAL BODY
   ========================================================= */

.perfil-modal__body {

  min-height:
    0;

  flex:
    1 1 auto;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  padding:
    15px;

}


/* =========================================================
   MODAL FOOTER
   ========================================================= */

.perfil-modal__footer {

  min-height:
    58px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  padding:
    10px 15px;

  border-top:
    1px solid #d6dae2;

  background:
    #fafbfc;

}


/* =========================================================
   EDIT FORM
   ========================================================= */

.perfil-edit-form {

  min-height:
    0;

  display:
    flex;

  flex:
    1 1 auto;

  flex-direction:
    column;

}


.perfil-edit-grid {

  width:
    100%;

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    11px;

}


/* =========================================================
   EDIT FIELD
   ========================================================= */

.perfil-edit-field {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

}


.perfil-edit-field > span {

  color:
    #050505;

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1.2;

}


.perfil-edit-field > small {

  color:
    #575b64;

  font-size:
    8px;

  font-weight:
    600;

  line-height:
    1.35;

}


/* =========================================================
   EDIT CONTROL
   ========================================================= */

.perfil-edit-control {

  min-width:
    0;

  height:
    38px;

  display:
    grid;

  grid-template-columns:
    26px minmax(0, 1fr);

  align-items:
    center;

  border:
    1px solid #d6dae2;

  border-radius:
    9px;

  background:
    #f7f8fa;

  color:
    #050505;

  transition:
    border-color var(--perfil-transition),
    background-color var(--perfil-transition);

}


.perfil-edit-control:focus-within {

  border-color:
    #9da4af;

  background:
    #ffffff;

}


.perfil-edit-control > svg {

  width:
    12px;

  height:
    12px;

  justify-self:
    center;

  stroke-width:
    2.2;

}


.perfil-edit-control input {

  width:
    100%;

  min-width:
    0;

  height:
    100%;

  padding:
    0 9px 0 0;

  border:
    0;

  outline:
    none;

  background:
    transparent;

  color:
    #050505;

  font-family:
    inherit;

  font-size:
    10.5px;

  font-weight:
    750;

}


.perfil-edit-control input::placeholder {

  color:
    #7b8089;

}


/* =========================================================
   FIN PARTE 1 DE 2
   ========================================================= *//* =========================================================
   PHOTO EDITOR
   ========================================================= */

.perfil-photo-editor {

  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    12px;

  text-align:
    center;

}


.perfil-photo-editor__preview {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

}


.perfil-photo-editor__preview
.perfil-avatar {

  width:
    108px;

  height:
    108px;

  flex-basis:
    108px;

  font-size:
    28px;

}


.perfil-photo-editor__copy {

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

}


.perfil-photo-editor__copy strong {

  color:
    #050505;

  font-size:
    12px;

  font-weight:
    900;

}


.perfil-photo-editor__copy span {

  color:
    #4c5058;

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1.4;

}


.perfil-photo-editor__actions {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    7px;

}


/* =========================================================
   PHOTO FILE
   ========================================================= */

.perfil-photo-editor__file {

  width:
    100%;

  display:
    grid;

  grid-template-columns:
    32px minmax(0, 1fr);

  align-items:
    center;

  gap:
    9px;

  padding:
    9px 10px;

  border:
    1px solid #d6dae2;

  border-radius:
    10px;

  background:
    #f7f8fa;

  text-align:
    left;

}


.perfil-photo-editor__file > svg {

  width:
    15px;

  height:
    15px;

  justify-self:
    center;

  stroke-width:
    2.2;

}


.perfil-photo-editor__file > div {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

}


.perfil-photo-editor__file strong {

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    9.5px;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.perfil-photo-editor__file span {

  color:
    #5a5e66;

  font-size:
    8px;

  font-weight:
    650;

}


/* =========================================================
   DELETE PHOTO
   ========================================================= */

.perfil-delete-photo {

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

}


.perfil-delete-photo__preview {

  flex:
    0 0 auto;

}


.perfil-delete-photo__preview
.perfil-avatar {

  width:
    64px;

  height:
    64px;

  flex-basis:
    64px;

  font-size:
    18px;

}


.perfil-delete-photo__copy {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

}


.perfil-delete-photo__copy strong {

  color:
    #050505;

  font-size:
    11px;

  font-weight:
    900;

}


.perfil-delete-photo__copy span {

  color:
    #4c5058;

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1.4;

}


/* =========================================================
   TOAST ROOT
   ========================================================= */

.perfil-toast-root {

  position:
    fixed;

  top:
    72px;

  right:
    16px;

  z-index:
    900;

  width:
    min(
      340px,
      calc(100vw - 32px)
    );

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

  pointer-events:
    none;

}


/* =========================================================
   TOAST
   ========================================================= */

.perfil-toast {

  min-height:
    46px;

  display:
    grid;

  grid-template-columns:
    28px minmax(0, 1fr) 28px;

  align-items:
    center;

  gap:
    8px;

  padding:
    8px 9px;

  border:
    1px solid #cfd4dc;

  border-radius:
    10px;

  background:
    #ffffff;

  color:
    #050505;

  box-shadow:
    0 8px 28px
    rgba(0, 0, 0, .10);

  pointer-events:
    auto;

}


.perfil-toast__icon {

  width:
    28px;

  height:
    28px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid currentColor;

  border-radius:
    8px;

}


.perfil-toast__icon svg {

  width:
    13px;

  height:
    13px;

  stroke-width:
    2.2;

}


.perfil-toast > span {

  color:
    inherit;

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1.35;

}


.perfil-toast__close {

  width:
    28px;

  height:
    28px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    currentColor;

  cursor:
    pointer;

}


.perfil-toast__close:hover {

  background:
    rgba(0, 0, 0, .055);

}


.perfil-toast__close svg {

  width:
    12px;

  height:
    12px;

  stroke-width:
    2.3;

}


/* =========================================================
   TOAST TYPES
   ========================================================= */

.perfil-toast--success {

  border-color:
    #b7dcc7;

  background:
    #e9f7ef;

  color:
    #0b4f31;

}


.perfil-toast--error {

  border-color:
    #efb3ae;

  background:
    #fff0ef;

  color:
    #761616;

}


.perfil-toast--info {

  border-color:
    #c7cbe4;

  background:
    #f1f2fb;

  color:
    #342f67;

}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"]
#perfilPage,

body[data-theme="dark"]
#perfilPage,

body.dark
#perfilPage {

  --perfil-bg:
    #050505;

  --perfil-surface:
    #080808;

  --perfil-surface-soft:
    #101010;

  --perfil-surface-hover:
    #161616;

  --perfil-border:
    #2c2c2c;

  --perfil-border-strong:
    #474747;

  --perfil-text:
    #ffffff;

  --perfil-text-soft:
    #c8c8c8;

  --perfil-accent:
    #a495dc;

  --perfil-accent-soft:
    rgba(164, 149, 220, .10);

  --perfil-success:
    #8bd5a8;

  --perfil-success-bg:
    #0d2116;

  --perfil-success-border:
    #28523a;

  --perfil-warning:
    #f0c36c;

  --perfil-warning-bg:
    #211805;

  --perfil-warning-border:
    #59430e;

  --perfil-danger:
    #f19a9a;

  --perfil-danger-bg:
    #241010;

  --perfil-danger-border:
    #613030;

  color:
    #ffffff !important;

}


/* =========================================================
   DARK TEXT
   ========================================================= */

html[data-theme="dark"]
#perfilPage .perfil-page__overline,

html[data-theme="dark"]
#perfilPage .perfil-page__header h1,

html[data-theme="dark"]
#perfilPage .perfil-page__header p,

html[data-theme="dark"]
#perfilPage .perfil-page__header-badge,

html[data-theme="dark"]
#perfilPage .perfil-summary,

html[data-theme="dark"]
#perfilPage .perfil-summary__identity strong,

html[data-theme="dark"]
#perfilPage .perfil-summary__identity span,

html[data-theme="dark"]
#perfilPage .perfil-summary__meta,

html[data-theme="dark"]
#perfilPage .perfil-summary__meta span,

html[data-theme="dark"]
#perfilPage .perfil-summary__meta strong,

html[data-theme="dark"]
#perfilPage .perfil-summary__meta-icon,

html[data-theme="dark"]
#perfilPage .perfil-summary__security,

html[data-theme="dark"]
#perfilPage .perfil-summary__security > div,

html[data-theme="dark"]
#perfilPage .perfil-card,

html[data-theme="dark"]
#perfilPage .perfil-card__header,

html[data-theme="dark"]
#perfilPage .perfil-card__header-copy > span,

html[data-theme="dark"]
#perfilPage .perfil-card__header h2,

html[data-theme="dark"]
#perfilPage .perfil-card__header-icon,

html[data-theme="dark"]
#perfilPage .perfil-card__edit,

html[data-theme="dark"]
#perfilPage .perfil-field,

html[data-theme="dark"]
#perfilPage .perfil-field__label,

html[data-theme="dark"]
#perfilPage .perfil-field__label span,

html[data-theme="dark"]
#perfilPage .perfil-field > strong,

html[data-theme="dark"]
#perfilPage .perfil-loading,

html[data-theme="dark"]
#perfilPage .perfil-loading strong,

html[data-theme="dark"]
#perfilPage .perfil-loading span:not(.perfil-spinner),

html[data-theme="dark"]
#perfilPage .perfil-empty,

html[data-theme="dark"]
#perfilPage .perfil-empty strong,

html[data-theme="dark"]
#perfilPage .perfil-empty > span,

html[data-theme="dark"]
#perfilPage .perfil-empty__icon,

body[data-theme="dark"]
#perfilPage .perfil-page__overline,

body[data-theme="dark"]
#perfilPage .perfil-page__header h1,

body[data-theme="dark"]
#perfilPage .perfil-page__header p,

body[data-theme="dark"]
#perfilPage .perfil-page__header-badge,

body[data-theme="dark"]
#perfilPage .perfil-summary,

body[data-theme="dark"]
#perfilPage .perfil-summary__identity strong,

body[data-theme="dark"]
#perfilPage .perfil-summary__identity span,

body[data-theme="dark"]
#perfilPage .perfil-summary__meta,

body[data-theme="dark"]
#perfilPage .perfil-summary__meta span,

body[data-theme="dark"]
#perfilPage .perfil-summary__meta strong,

body[data-theme="dark"]
#perfilPage .perfil-summary__meta-icon,

body[data-theme="dark"]
#perfilPage .perfil-summary__security,

body[data-theme="dark"]
#perfilPage .perfil-summary__security > div,

body[data-theme="dark"]
#perfilPage .perfil-card,

body[data-theme="dark"]
#perfilPage .perfil-card__header,

body[data-theme="dark"]
#perfilPage .perfil-card__header-copy > span,

body[data-theme="dark"]
#perfilPage .perfil-card__header h2,

body[data-theme="dark"]
#perfilPage .perfil-card__header-icon,

body[data-theme="dark"]
#perfilPage .perfil-card__edit,

body[data-theme="dark"]
#perfilPage .perfil-field,

body[data-theme="dark"]
#perfilPage .perfil-field__label,

body[data-theme="dark"]
#perfilPage .perfil-field__label span,

body[data-theme="dark"]
#perfilPage .perfil-field > strong,

body[data-theme="dark"]
#perfilPage .perfil-loading,

body[data-theme="dark"]
#perfilPage .perfil-loading strong,

body[data-theme="dark"]
#perfilPage .perfil-loading span:not(.perfil-spinner),

body[data-theme="dark"]
#perfilPage .perfil-empty,

body[data-theme="dark"]
#perfilPage .perfil-empty strong,

body[data-theme="dark"]
#perfilPage .perfil-empty > span,

body[data-theme="dark"]
#perfilPage .perfil-empty__icon {

  color:
    #ffffff !important;

}


/* =========================================================
   DARK SURFACES
   ========================================================= */

html[data-theme="dark"]
#perfilPage .perfil-summary,

html[data-theme="dark"]
#perfilPage .perfil-card,

html[data-theme="dark"]
#perfilPage .perfil-card__header,

html[data-theme="dark"]
#perfilPage .perfil-field,

html[data-theme="dark"]
#perfilPage .perfil-summary__meta-icon,

html[data-theme="dark"]
#perfilPage .perfil-loading,

html[data-theme="dark"]
#perfilPage .perfil-empty,

body[data-theme="dark"]
#perfilPage .perfil-summary,

body[data-theme="dark"]
#perfilPage .perfil-card,

body[data-theme="dark"]
#perfilPage .perfil-card__header,

body[data-theme="dark"]
#perfilPage .perfil-field,

body[data-theme="dark"]
#perfilPage .perfil-summary__meta-icon,

body[data-theme="dark"]
#perfilPage .perfil-loading,

body[data-theme="dark"]
#perfilPage .perfil-empty {

  background:
    #080808 !important;

}


/* =========================================================
   DARK AVATAR
   ========================================================= */

html[data-theme="dark"]
#perfilPage .perfil-avatar,

html[data-theme="dark"]
.perfil-modal .perfil-avatar,

body[data-theme="dark"]
#perfilPage .perfil-avatar,

body[data-theme="dark"]
.perfil-modal .perfil-avatar,

body.dark
#perfilPage .perfil-avatar,

body.dark
.perfil-modal .perfil-avatar {

  border-color:
    #080808;

  outline-color:
    #353535;

  background:
    #141414;

  color:
    #ffffff;

}


html[data-theme="dark"]
#perfilPage .perfil-avatar__fallback,

html[data-theme="dark"]
.perfil-modal .perfil-avatar__fallback,

body[data-theme="dark"]
#perfilPage .perfil-avatar__fallback,

body[data-theme="dark"]
.perfil-modal .perfil-avatar__fallback,

body.dark
#perfilPage .perfil-avatar__fallback,

body.dark
.perfil-modal .perfil-avatar__fallback {

  color:
    #ffffff;

}


/* =========================================================
   DARK BADGES
   ========================================================= */

html[data-theme="dark"]
#perfilPage .perfil-badge--role,

body[data-theme="dark"]
#perfilPage .perfil-badge--role,

body.dark
#perfilPage .perfil-badge--role {

  border-color:
    rgba(164, 149, 220, .30);

  background:
    rgba(164, 149, 220, .11);

  color:
    #ffffff;

}


html[data-theme="dark"]
#perfilPage .perfil-badge--success,

body[data-theme="dark"]
#perfilPage .perfil-badge--success,

body.dark
#perfilPage .perfil-badge--success {

  border-color:
    #28523a;

  background:
    #0d2116;

  color:
    #9ee4b9;

}


html[data-theme="dark"]
#perfilPage .perfil-badge--warning,

body[data-theme="dark"]
#perfilPage .perfil-badge--warning,

body.dark
#perfilPage .perfil-badge--warning {

  border-color:
    #59430e;

  background:
    #211805;

  color:
    #f0c36c;

}


html[data-theme="dark"]
#perfilPage .perfil-badge--danger,

body[data-theme="dark"]
#perfilPage .perfil-badge--danger,

body.dark
#perfilPage .perfil-badge--danger {

  border-color:
    #613030;

  background:
    #241010;

  color:
    #f19a9a;

}


/* =========================================================
   DARK PHOTO BUTTON
   ========================================================= */

html[data-theme="dark"]
#perfilPage .perfil-photo-btn,

body[data-theme="dark"]
#perfilPage .perfil-photo-btn,

body.dark
#perfilPage .perfil-photo-btn {

  border-color:
    #303030;

  background:
    #101010;

  color:
    #ffffff;

}


html[data-theme="dark"]
#perfilPage .perfil-photo-btn:hover,

body[data-theme="dark"]
#perfilPage .perfil-photo-btn:hover,

body.dark
#perfilPage .perfil-photo-btn:hover {

  border-color:
    #484848;

  background:
    #171717;

}


html[data-theme="dark"]
#perfilPage .perfil-photo-btn--danger,

body[data-theme="dark"]
#perfilPage .perfil-photo-btn--danger,

body.dark
#perfilPage .perfil-photo-btn--danger {

  border-color:
    #613030;

  background:
    #241010;

  color:
    #f19a9a;

}


/* =========================================================
   DARK ACTION BUTTONS
   ========================================================= */

html[data-theme="dark"]
.perfil-action-btn--secondary,

body[data-theme="dark"]
.perfil-action-btn--secondary,

body.dark
.perfil-action-btn--secondary {

  border-color:
    #303030;

  background:
    #101010;

  color:
    #ffffff;

}


html[data-theme="dark"]
.perfil-action-btn--secondary:hover:not(:disabled),

body[data-theme="dark"]
.perfil-action-btn--secondary:hover:not(:disabled),

body.dark
.perfil-action-btn--secondary:hover:not(:disabled) {

  border-color:
    #484848;

  background:
    #171717;

}


html[data-theme="dark"]
.perfil-action-btn--ghost,

body[data-theme="dark"]
.perfil-action-btn--ghost,

body.dark
.perfil-action-btn--ghost {

  color:
    #ffffff;

}


html[data-theme="dark"]
.perfil-action-btn--primary,

body[data-theme="dark"]
.perfil-action-btn--primary,

body.dark
.perfil-action-btn--primary {

  border-color:
    #ffffff;

  background:
    #ffffff;

  color:
    #050505;

}


html[data-theme="dark"]
.perfil-action-btn--primary svg,

body[data-theme="dark"]
.perfil-action-btn--primary svg,

body.dark
.perfil-action-btn--primary svg {

  color:
    #050505;

  stroke:
    #050505;

}


html[data-theme="dark"]
.perfil-action-btn--primary:hover:not(:disabled),

body[data-theme="dark"]
.perfil-action-btn--primary:hover:not(:disabled),

body.dark
.perfil-action-btn--primary:hover:not(:disabled) {

  border-color:
    #e5e5e5;

  background:
    #e5e5e5;

  color:
    #050505;

}


/* =========================================================
   DARK MODAL
   ========================================================= */

html[data-theme="dark"]
.perfil-modal,

body[data-theme="dark"]
.perfil-modal,

body.dark
.perfil-modal {

  border-color:
    #303030;

  background:
    #080808;

  color:
    #ffffff;

  box-shadow:
    0 22px 60px
    rgba(0, 0, 0, .55);

}


html[data-theme="dark"]
.perfil-modal__header,

body[data-theme="dark"]
.perfil-modal__header,

body.dark
.perfil-modal__header {

  border-color:
    #2c2c2c;

  background:
    #080808;

}


html[data-theme="dark"]
.perfil-modal__eyebrow,

html[data-theme="dark"]
.perfil-modal__header h2,

body[data-theme="dark"]
.perfil-modal__eyebrow,

body[data-theme="dark"]
.perfil-modal__header h2,

body.dark
.perfil-modal__eyebrow,

body.dark
.perfil-modal__header h2 {

  color:
    #ffffff;

}


html[data-theme="dark"]
.perfil-modal__header p,

body[data-theme="dark"]
.perfil-modal__header p,

body.dark
.perfil-modal__header p {

  color:
    #d0d0d0;

}


/* =========================================================
   DARK MODAL CLOSE
   ========================================================= */

html[data-theme="dark"]
.perfil-modal__close,

body[data-theme="dark"]
.perfil-modal__close,

body.dark
.perfil-modal__close {

  border-color:
    #343434;

  background:
    #111111;

  color:
    #ffffff;

}


html[data-theme="dark"]
.perfil-modal__close:hover,

body[data-theme="dark"]
.perfil-modal__close:hover,

body.dark
.perfil-modal__close:hover {

  border-color:
    #505050;

  background:
    #191919;

}


/* =========================================================
   DARK MODAL FOOTER
   ========================================================= */

html[data-theme="dark"]
.perfil-modal__footer,

body[data-theme="dark"]
.perfil-modal__footer,

body.dark
.perfil-modal__footer {

  border-color:
    #2c2c2c;

  background:
    #0c0c0c;

}


/* =========================================================
   DARK EDIT FORM
   ========================================================= */

html[data-theme="dark"]
.perfil-edit-field > span,

body[data-theme="dark"]
.perfil-edit-field > span,

body.dark
.perfil-edit-field > span {

  color:
    #ffffff;

}


html[data-theme="dark"]
.perfil-edit-field > small,

body[data-theme="dark"]
.perfil-edit-field > small,

body.dark
.perfil-edit-field > small {

  color:
    #c8c8c8;

}


html[data-theme="dark"]
.perfil-edit-control,

body[data-theme="dark"]
.perfil-edit-control,

body.dark
.perfil-edit-control {

  border-color:
    #343434;

  background:
    #101010;

  color:
    #ffffff;

}


html[data-theme="dark"]
.perfil-edit-control:focus-within,

body[data-theme="dark"]
.perfil-edit-control:focus-within,

body.dark
.perfil-edit-control:focus-within {

  border-color:
    #555555;

  background:
    #141414;

}


html[data-theme="dark"]
.perfil-edit-control input,

body[data-theme="dark"]
.perfil-edit-control input,

body.dark
.perfil-edit-control input {

  color:
    #ffffff;

}


html[data-theme="dark"]
.perfil-edit-control input::placeholder,

body[data-theme="dark"]
.perfil-edit-control input::placeholder,

body.dark
.perfil-edit-control input::placeholder {

  color:
    #a8a8a8;

}


/* =========================================================
   DARK PHOTO EDITOR
   ========================================================= */

html[data-theme="dark"]
.perfil-photo-editor__copy strong,

html[data-theme="dark"]
.perfil-photo-editor__file strong,

html[data-theme="dark"]
.perfil-delete-photo__copy strong,

body[data-theme="dark"]
.perfil-photo-editor__copy strong,

body[data-theme="dark"]
.perfil-photo-editor__file strong,

body[data-theme="dark"]
.perfil-delete-photo__copy strong,

body.dark
.perfil-photo-editor__copy strong,

body.dark
.perfil-photo-editor__file strong,

body.dark
.perfil-delete-photo__copy strong {

  color:
    #ffffff;

}


html[data-theme="dark"]
.perfil-photo-editor__copy span,

html[data-theme="dark"]
.perfil-photo-editor__file span,

html[data-theme="dark"]
.perfil-delete-photo__copy span,

body[data-theme="dark"]
.perfil-photo-editor__copy span,

body[data-theme="dark"]
.perfil-photo-editor__file span,

body[data-theme="dark"]
.perfil-delete-photo__copy span,

body.dark
.perfil-photo-editor__copy span,

body.dark
.perfil-photo-editor__file span,

body.dark
.perfil-delete-photo__copy span {

  color:
    #c8c8c8;

}


html[data-theme="dark"]
.perfil-photo-editor__file,

body[data-theme="dark"]
.perfil-photo-editor__file,

body.dark
.perfil-photo-editor__file {

  border-color:
    #343434;

  background:
    #101010;

  color:
    #ffffff;

}


/* =========================================================
   DARK TOAST
   ========================================================= */

html[data-theme="dark"]
.perfil-toast,

body[data-theme="dark"]
.perfil-toast,

body.dark
.perfil-toast {

  border-color:
    #393939;

  background:
    #101010;

  color:
    #ffffff;

}


html[data-theme="dark"]
.perfil-toast--success,

body[data-theme="dark"]
.perfil-toast--success,

body.dark
.perfil-toast--success {

  border-color:
    #28523a;

  background:
    #0d2116;

  color:
    #9ee4b9;

}


html[data-theme="dark"]
.perfil-toast--error,

body[data-theme="dark"]
.perfil-toast--error,

body.dark
.perfil-toast--error {

  border-color:
    #613030;

  background:
    #241010;

  color:
    #f19a9a;

}


html[data-theme="dark"]
.perfil-toast--info,

body[data-theme="dark"]
.perfil-toast--info,

body.dark
.perfil-toast--info {

  border-color:
    #494060;

  background:
    #17131f;

  color:
    #c8bdf0;

}


/* =========================================================
   MOUNT
   ========================================================= */

#perfilPageMount {

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow-x:
    clip !important;

  flex:
    1 1 auto !important;

  align-self:
    stretch !important;

  justify-self:
    stretch !important;

}


#perfilPageMount >
.perfil-page {

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

}


/* =========================================================
   PADRES
   ========================================================= */

main:has(#perfilPageMount),

.app-main:has(#perfilPageMount),

.main:has(#perfilPageMount),

.main-content:has(#perfilPageMount),

.app-content:has(#perfilPageMount),

.page-content:has(#perfilPageMount),

.content:has(#perfilPageMount),

.content-wrapper:has(#perfilPageMount),

.page-wrapper:has(#perfilPageMount),

.workspace:has(#perfilPageMount) {

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  overflow-x:
    clip !important;

}


/* =========================================================
   RESPONSIVE ≤ 1200
   ========================================================= */

@media (
  max-width: 1200px
) {

  #perfilPage .perfil-layout {

    grid-template-columns:
      230px minmax(0, 1fr);

  }


  #perfilPage .perfil-main {

    grid-template-columns:
      1fr;

  }


  #perfilPage .perfil-card--full {

    grid-column:
      auto;

  }

}


/* =========================================================
   RESPONSIVE ≤ 900
   ========================================================= */

@media (
  max-width: 900px
) {

  #perfilPage,
  .perfil-page {

    padding:
      14px !important;

  }


  #perfilPage .perfil-layout {

    grid-template-columns:
      1fr;

  }


  #perfilPage .perfil-summary {

    position:
      static;

    display:
      grid;

    grid-template-columns:
      70px minmax(0, 1fr) auto;

    align-items:
      center;

    column-gap:
      12px;

    row-gap:
      8px;

    padding:
      13px;

  }


  #perfilPage .perfil-summary__top {

    display:
      contents;

  }


  #perfilPage .perfil-avatar {

    width:
      70px;

    height:
      70px;

    flex-basis:
      70px;

    grid-column:
      1;

    grid-row:
      1 / 3;

  }


  #perfilPage .perfil-summary__identity {

    grid-column:
      2;

    grid-row:
      1;

    text-align:
      left;

  }


  #perfilPage .perfil-summary__photo-actions {

    grid-column:
      2;

    grid-row:
      2;

    justify-content:
      flex-start;

    margin-top:
      0;

  }


  #perfilPage .perfil-summary__badges {

    grid-column:
      3;

    grid-row:
      1;

    justify-content:
      flex-end;

    margin-top:
      0;

  }


  #perfilPage .perfil-summary__separator {

    display:
      none;

  }


  #perfilPage .perfil-summary__meta {

    grid-column:
      3;

    grid-row:
      2;

    min-width:
      185px;

  }


  #perfilPage .perfil-summary__security {

    grid-column:
      1 / -1;

    margin-top:
      2px;

  }

}


/* =========================================================
   RESPONSIVE ≤ 700
   ========================================================= */

@media (
  max-width: 700px
) {

  #perfilPage .perfil-page__header {

    align-items:
      flex-start;

  }


  #perfilPage .perfil-page__header-actions {

    align-items:
      flex-end;

    flex-direction:
      column;

  }


  #perfilPage .perfil-page__header-badge {

    display:
      none;

  }


  #perfilPage .perfil-page__header h1 {

    font-size:
      25px;

  }


  #perfilPage .perfil-summary {

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

  }


  #perfilPage .perfil-summary__top {

    display:
      flex;

    flex-direction:
      row;

    align-items:
      center;

    width:
      100%;

  }


  #perfilPage .perfil-avatar {

    width:
      62px;

    height:
      62px;

    flex-basis:
      62px;

  }


  #perfilPage .perfil-summary__identity {

    text-align:
      left;

  }


  #perfilPage .perfil-summary__photo-actions {

    justify-content:
      flex-start;

    margin-top:
      10px;

  }


  #perfilPage .perfil-summary__badges {

    justify-content:
      flex-start;

    margin-top:
      11px;

  }


  #perfilPage .perfil-summary__separator {

    display:
      block;

    margin:
      12px 0;

  }


  #perfilPage .perfil-summary__meta {

    width:
      100%;

    min-width:
      0;

  }


  #perfilPage .perfil-fields,
  #perfilPage .perfil-fields--activity {

    grid-template-columns:
      1fr;

  }


  #perfilPage .perfil-field {

    border-right:
      0;

  }


  #perfilPage .perfil-field:nth-last-child(-n + 2) {

    border-bottom:
      1px solid var(--perfil-border);

  }


  #perfilPage .perfil-field:last-child {

    border-bottom:
      0;

  }


  .perfil-edit-grid {

    grid-template-columns:
      1fr;

  }

}


/* =========================================================
   RESPONSIVE ≤ 520
   ========================================================= */

@media (
  max-width: 520px
) {

  #perfilPage,
  .perfil-page {

    padding:
      10px !important;

  }


  #perfilPage .perfil-page__header {

    align-items:
      stretch;

    flex-direction:
      column;

    margin-bottom:
      12px;

  }


  #perfilPage .perfil-page__header-actions {

    width:
      100%;

    align-items:
      stretch;

  }


  #perfilPage .perfil-page__header-actions
  .perfil-action-btn {

    width:
      100%;

  }


  #perfilPage .perfil-page__overline {

    font-size:
      8px;

  }


  #perfilPage .perfil-page__header h1 {

    font-size:
      23px;

  }


  #perfilPage .perfil-page__header p {

    font-size:
      11px;

  }


  #perfilPage .perfil-layout {

    gap:
      10px;

  }


  #perfilPage .perfil-main {

    gap:
      10px;

  }


  #perfilPage .perfil-summary {

    padding:
      12px;

    border-radius:
      13px;

  }


  #perfilPage .perfil-summary__top {

    gap:
      10px;

  }


  #perfilPage .perfil-avatar {

    width:
      58px;

    height:
      58px;

    flex-basis:
      58px;

    font-size:
      18px;

  }


  #perfilPage .perfil-summary__identity strong {

    font-size:
      13px;

  }


  #perfilPage .perfil-summary__identity span {

    font-size:
      9px;

  }


  #perfilPage .perfil-card {

    border-radius:
      13px;

  }


  #perfilPage .perfil-card__header {

    min-height:
      54px;

    padding:
      10px 11px;

  }


  #perfilPage .perfil-card__header h2 {

    font-size:
      12.5px;

  }


  #perfilPage .perfil-card__header-icon,
  #perfilPage .perfil-card__edit {

    width:
      29px;

    height:
      29px;

    flex-basis:
      29px;

  }


  #perfilPage .perfil-field {

    min-height:
      62px;

    padding:
      10px 11px;

  }


  #perfilPage .perfil-field > strong {

    font-size:
      11px;

  }


  .perfil-modal-root {

    align-items:
      flex-end;

    padding:
      8px;

  }


  .perfil-modal,
  .perfil-modal--photo,
  .perfil-modal--confirm {

    width:
      100%;

    max-height:
      calc(100dvh - 16px);

    border-radius:
      14px;

  }


  .perfil-modal__header {

    min-height:
      66px;

    padding:
      11px 12px;

  }


  .perfil-modal__header h2 {

    font-size:
      15px;

  }


  .perfil-modal__header p {

    font-size:
      9px;

  }


  .perfil-modal__body {

    padding:
      12px;

  }


  .perfil-modal__footer {

    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    padding:
      9px 12px;

  }


  .perfil-modal__footer
  .perfil-action-btn {

    width:
      100%;

  }


  .perfil-photo-editor__preview
  .perfil-avatar {

    width:
      94px;

    height:
      94px;

    flex-basis:
      94px;

  }


  .perfil-delete-photo {

    align-items:
      flex-start;

  }


  .perfil-toast-root {

    top:
      60px;

    right:
      8px;

    width:
      calc(100vw - 16px);

  }

}


/* =========================================================
   RESPONSIVE ≤ 390
   ========================================================= */

@media (
  max-width: 390px
) {

  #perfilPage,
  .perfil-page {

    padding:
      8px !important;

  }


  #perfilPage .perfil-page__header h1 {

    font-size:
      21px;

  }


  #perfilPage .perfil-avatar {

    width:
      54px;

    height:
      54px;

    flex-basis:
      54px;

  }


  #perfilPage .perfil-summary__badges {

    gap:
      5px;

  }


  #perfilPage .perfil-badge {

    min-height:
      22px;

    padding:
      0 7px;

    font-size:
      8px;

  }


  #perfilPage .perfil-summary__meta {

    grid-template-columns:
      27px minmax(0, 1fr);

    padding:
      8px;

  }


  #perfilPage .perfil-summary__meta-icon {

    width:
      27px;

    height:
      27px;

  }


  #perfilPage .perfil-summary__security {

    padding:
      7px 8px;

  }


  #perfilPage .perfil-card__header {

    min-height:
      50px;

  }


  #perfilPage .perfil-card__header-copy > span {

    font-size:
      7.5px;

  }


  #perfilPage .perfil-card__header h2 {

    font-size:
      12px;

  }


  .perfil-modal__footer {

    grid-template-columns:
      1fr;

  }


  .perfil-delete-photo {

    flex-direction:
      column;

    align-items:
      center;

    text-align:
      center;

  }

}


/* =========================================================
   PANTALLAS GRANDES
   ========================================================= */

@media (
  min-width: 1400px
) {

  #perfilPage,
  .perfil-page {

    padding:
      20px !important;

  }


  #perfilPage .perfil-layout {

    grid-template-columns:
      270px minmax(0, 1fr);

  }


  #perfilPage .perfil-field > strong {

    font-size:
      12.5px;

  }

}


/* =========================================================
   PANTALLAS EXTRA GRANDES
   ========================================================= */

@media (
  min-width: 1700px
) {

  #perfilPage .perfil-layout {

    grid-template-columns:
      285px minmax(0, 1fr);

  }

}


/* =========================================================
   FOCUS
   ========================================================= */

#perfilPage button:focus-visible,
.perfil-modal button:focus-visible,
.perfil-modal input:focus-visible,
.perfil-toast button:focus-visible {

  outline:
    2px solid currentColor;

  outline-offset:
    2px;

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion: reduce
) {

  #perfilPage *,
  #perfilPage *::before,
  #perfilPage *::after,
  .perfil-modal *,
  .perfil-modal *::before,
  .perfil-modal *::after,
  .perfil-toast,
  .perfil-toast * {

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

  }

}/* =========================================================
   MI PERFIL · FULL WIDTH / FULL HEIGHT
   DARK MODE NEGRO REAL
   AGREGAR AL FINAL
   ========================================================= */


/* =========================================================
   APP CONTENT
   ========================================================= */

.app-content:has(#perfilPageMount) {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  min-height:
    100% !important;

  margin:
    0 !important;

  padding:
    10px 12px !important;
}


/* =========================================================
   MOUNT
   ========================================================= */

#perfilPageMount {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  min-height:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  flex:
    1 1 auto !important;

  align-self:
    stretch !important;

  justify-self:
    stretch !important;

  overflow-x:
    clip !important;

  overflow-y:
    visible !important;
}


/* =========================================================
   PAGE
   ========================================================= */

#perfilPage,
.perfil-page {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  min-height:
    calc(
      100dvh -
      var(--topbar-height, 68px) -
      20px
    ) !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow-x:
    clip !important;

  overflow-y:
    visible !important;
}


/* =========================================================
   CONTENT
   ========================================================= */

#perfilPage .perfil-content {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;
}


/* =========================================================
   LAYOUT
   ========================================================= */

#perfilPage .perfil-layout {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  grid-template-columns:
    270px
    minmax(
      0,
      1fr
    );
}


/* =========================================================
   MAIN
   ========================================================= */

#perfilPage .perfil-main {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;
}


/* =========================================================
   CARDS
   ========================================================= */

#perfilPage .perfil-card,
#perfilPage .perfil-summary {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;
}


/* =========================================================
   DARK MODE · TOKENS NEGRO REAL
   ========================================================= */

html[data-theme="dark"]
#perfilPage,

body[data-theme="dark"]
#perfilPage,

body.dark
#perfilPage {

  --perfil-bg:
    #000000;

  --perfil-surface:
    #050505;

  --perfil-surface-soft:
    #0a0a0a;

  --perfil-surface-hover:
    #111111;

  --perfil-border:
    #242424;

  --perfil-border-strong:
    #3a3a3a;

  --perfil-text:
    #ffffff;

  --perfil-text-soft:
    #d0d0d0;

  background:
    #000000 !important;

  color:
    #ffffff !important;
}


/* =========================================================
   DARK · APP CONTENT
   ========================================================= */

html[data-theme="dark"]
.app-content:has(#perfilPageMount),

body.dark
.app-content:has(#perfilPageMount) {
  background:
    #000000 !important;
}


/* =========================================================
   DARK · MOUNT
   ========================================================= */

html[data-theme="dark"]
#perfilPageMount,

body.dark
#perfilPageMount {
  background:
    #000000 !important;
}


/* =========================================================
   DARK · MAIN SURFACES
   ========================================================= */

html[data-theme="dark"]
#perfilPage .perfil-summary,

html[data-theme="dark"]
#perfilPage .perfil-card,

html[data-theme="dark"]
#perfilPage .perfil-card__header,

html[data-theme="dark"]
#perfilPage .perfil-field,

html[data-theme="dark"]
#perfilPage .perfil-loading,

html[data-theme="dark"]
#perfilPage .perfil-empty,

body.dark
#perfilPage .perfil-summary,

body.dark
#perfilPage .perfil-card,

body.dark
#perfilPage .perfil-card__header,

body.dark
#perfilPage .perfil-field,

body.dark
#perfilPage .perfil-loading,

body.dark
#perfilPage .perfil-empty {
  background:
    #050505 !important;

  border-color:
    #242424 !important;
}


/* =========================================================
   DARK · SECONDARY SURFACES
   ========================================================= */

html[data-theme="dark"]
#perfilPage .perfil-summary__meta,

html[data-theme="dark"]
#perfilPage .perfil-summary__meta-icon,

html[data-theme="dark"]
#perfilPage .perfil-summary__security,

html[data-theme="dark"]
#perfilPage .perfil-summary__security > div,

html[data-theme="dark"]
#perfilPage .perfil-card__header-icon,

html[data-theme="dark"]
#perfilPage .perfil-card__edit,

html[data-theme="dark"]
#perfilPage .perfil-photo-btn,

html[data-theme="dark"]
#perfilPage .perfil-badge,

html[data-theme="dark"]
#perfilPage .perfil-empty__icon,

body.dark
#perfilPage .perfil-summary__meta,

body.dark
#perfilPage .perfil-summary__meta-icon,

body.dark
#perfilPage .perfil-summary__security,

body.dark
#perfilPage .perfil-summary__security > div,

body.dark
#perfilPage .perfil-card__header-icon,

body.dark
#perfilPage .perfil-card__edit,

body.dark
#perfilPage .perfil-photo-btn,

body.dark
#perfilPage .perfil-badge,

body.dark
#perfilPage .perfil-empty__icon {
  background:
    #0a0a0a !important;

  border-color:
    #242424 !important;
}


/* =========================================================
   DARK · HOVER
   ========================================================= */

html[data-theme="dark"]
#perfilPage .perfil-card:hover,

html[data-theme="dark"]
#perfilPage .perfil-summary:hover,

html[data-theme="dark"]
#perfilPage .perfil-field:hover,

html[data-theme="dark"]
#perfilPage .perfil-card__edit:hover,

html[data-theme="dark"]
#perfilPage .perfil-photo-btn:hover,

body.dark
#perfilPage .perfil-card:hover,

body.dark
#perfilPage .perfil-summary:hover,

body.dark
#perfilPage .perfil-field:hover,

body.dark
#perfilPage .perfil-card__edit:hover,

body.dark
#perfilPage .perfil-photo-btn:hover {
  background:
    #111111 !important;

  border-color:
    #3a3a3a !important;
}


/* =========================================================
   DARK · TEXT
   ========================================================= */

html[data-theme="dark"]
#perfilPage,

html[data-theme="dark"]
#perfilPage *,

body.dark
#perfilPage,

body.dark
#perfilPage * {
  color:
    #ffffff;
}


/* =========================================================
   DARK · SECONDARY TEXT
   ========================================================= */

html[data-theme="dark"]
#perfilPage .perfil-page__header p,

html[data-theme="dark"]
#perfilPage .perfil-summary__identity span,

html[data-theme="dark"]
#perfilPage .perfil-summary__meta span,

html[data-theme="dark"]
#perfilPage .perfil-loading span:not(.perfil-spinner),

html[data-theme="dark"]
#perfilPage .perfil-empty > span,

body.dark
#perfilPage .perfil-page__header p,

body.dark
#perfilPage .perfil-summary__identity span,

body.dark
#perfilPage .perfil-summary__meta span,

body.dark
#perfilPage .perfil-loading span:not(.perfil-spinner),

body.dark
#perfilPage .perfil-empty > span {
  color:
    #d0d0d0 !important;
}


/* =========================================================
   DARK · AVATAR
   ========================================================= */

html[data-theme="dark"]
#perfilPage .perfil-avatar,

html[data-theme="dark"]
.perfil-modal .perfil-avatar,

body.dark
#perfilPage .perfil-avatar,

body.dark
.perfil-modal .perfil-avatar {
  background:
    #0a0a0a !important;

  border-color:
    #050505 !important;

  outline-color:
    #3a3a3a !important;

  color:
    #ffffff !important;
}


/* =========================================================
   DARK · HEADER BADGE
   ========================================================= */

html[data-theme="dark"]
#perfilPage .perfil-page__header-badge,

body.dark
#perfilPage .perfil-page__header-badge {
  background:
    #050505 !important;

  border-color:
    #242424 !important;

  color:
    #ffffff !important;
}


/* =========================================================
   DARK · SECONDARY BUTTON
   ========================================================= */

html[data-theme="dark"]
.perfil-action-btn--secondary,

body.dark
.perfil-action-btn--secondary {
  background:
    #0a0a0a !important;

  border-color:
    #242424 !important;

  color:
    #ffffff !important;
}


html[data-theme="dark"]
.perfil-action-btn--secondary:hover:not(:disabled),

body.dark
.perfil-action-btn--secondary:hover:not(:disabled) {
  background:
    #111111 !important;

  border-color:
    #3a3a3a !important;
}


/* =========================================================
   DARK · GHOST BUTTON
   ========================================================= */

html[data-theme="dark"]
.perfil-action-btn--ghost,

body.dark
.perfil-action-btn--ghost {
  color:
    #ffffff !important;
}


html[data-theme="dark"]
.perfil-action-btn--ghost:hover:not(:disabled),

body.dark
.perfil-action-btn--ghost:hover:not(:disabled) {
  background:
    #111111 !important;

  border-color:
    #242424 !important;
}


/* =========================================================
   DARK · PRIMARY BUTTON
   ========================================================= */

html[data-theme="dark"]
.perfil-action-btn--primary,

body.dark
.perfil-action-btn--primary {
  background:
    #ffffff !important;

  border-color:
    #ffffff !important;

  color:
    #050505 !important;
}


html[data-theme="dark"]
.perfil-action-btn--primary svg,

body.dark
.perfil-action-btn--primary svg {
  color:
    #050505 !important;

  stroke:
    #050505 !important;
}


/* =========================================================
   DARK · MODAL
   ========================================================= */

html[data-theme="dark"]
.perfil-modal,

body.dark
.perfil-modal {
  background:
    #050505 !important;

  border-color:
    #333333 !important;

  color:
    #ffffff !important;
}


/* =========================================================
   DARK · MODAL HEADER
   ========================================================= */

html[data-theme="dark"]
.perfil-modal__header,

body.dark
.perfil-modal__header {
  background:
    #050505 !important;

  border-color:
    #242424 !important;
}


/* =========================================================
   DARK · MODAL BODY
   ========================================================= */

html[data-theme="dark"]
.perfil-modal__body,

body.dark
.perfil-modal__body {
  background:
    #050505 !important;

  color:
    #ffffff !important;
}


/* =========================================================
   DARK · MODAL FOOTER
   ========================================================= */

html[data-theme="dark"]
.perfil-modal__footer,

body.dark
.perfil-modal__footer {
  background:
    #0a0a0a !important;

  border-color:
    #242424 !important;
}


/* =========================================================
   DARK · MODAL CLOSE
   ========================================================= */

html[data-theme="dark"]
.perfil-modal__close,

body.dark
.perfil-modal__close {
  background:
    #0a0a0a !important;

  border-color:
    #242424 !important;

  color:
    #ffffff !important;
}


html[data-theme="dark"]
.perfil-modal__close:hover,

body.dark
.perfil-modal__close:hover {
  background:
    #111111 !important;

  border-color:
    #3a3a3a !important;
}


/* =========================================================
   DARK · EDIT CONTROLS
   ========================================================= */

html[data-theme="dark"]
.perfil-edit-control,

body.dark
.perfil-edit-control {
  background:
    #0a0a0a !important;

  border-color:
    #242424 !important;

  color:
    #ffffff !important;
}


html[data-theme="dark"]
.perfil-edit-control:focus-within,

body.dark
.perfil-edit-control:focus-within {
  background:
    #111111 !important;

  border-color:
    #484848 !important;
}


html[data-theme="dark"]
.perfil-edit-control input,

body.dark
.perfil-edit-control input {
  color:
    #ffffff !important;
}


html[data-theme="dark"]
.perfil-edit-control input::placeholder,

body.dark
.perfil-edit-control input::placeholder {
  color:
    #a8a8a8 !important;
}


/* =========================================================
   DARK · PHOTO EDITOR
   ========================================================= */

html[data-theme="dark"]
.perfil-photo-editor__file,

body.dark
.perfil-photo-editor__file {
  background:
    #0a0a0a !important;

  border-color:
    #242424 !important;

  color:
    #ffffff !important;
}


/* =========================================================
   DARK · MODAL TEXT
   ========================================================= */

html[data-theme="dark"]
.perfil-modal__eyebrow,

html[data-theme="dark"]
.perfil-modal__header h2,

html[data-theme="dark"]
.perfil-edit-field > span,

html[data-theme="dark"]
.perfil-photo-editor__copy strong,

html[data-theme="dark"]
.perfil-photo-editor__file strong,

html[data-theme="dark"]
.perfil-delete-photo__copy strong,

body.dark
.perfil-modal__eyebrow,

body.dark
.perfil-modal__header h2,

body.dark
.perfil-edit-field > span,

body.dark
.perfil-photo-editor__copy strong,

body.dark
.perfil-photo-editor__file strong,

body.dark
.perfil-delete-photo__copy strong {
  color:
    #ffffff !important;
}


/* =========================================================
   DARK · MODAL SECONDARY TEXT
   ========================================================= */

html[data-theme="dark"]
.perfil-modal__header p,

html[data-theme="dark"]
.perfil-edit-field > small,

html[data-theme="dark"]
.perfil-photo-editor__copy span,

html[data-theme="dark"]
.perfil-photo-editor__file span,

html[data-theme="dark"]
.perfil-delete-photo__copy span,

body.dark
.perfil-modal__header p,

body.dark
.perfil-edit-field > small,

body.dark
.perfil-photo-editor__copy span,

body.dark
.perfil-photo-editor__file span,

body.dark
.perfil-delete-photo__copy span {
  color:
    #d0d0d0 !important;
}


/* =========================================================
   DARK · TOAST
   ========================================================= */

html[data-theme="dark"]
.perfil-toast,

body.dark
.perfil-toast {
  background:
    #0a0a0a !important;

  border-color:
    #333333 !important;

  color:
    #ffffff !important;
}


/* =========================================================
   RESPONSIVE ≤ 900
   ========================================================= */

@media (
  max-width: 900px
) {

  .app-content:has(#perfilPageMount) {
    padding:
      8px !important;
  }


  #perfilPage,
  .perfil-page {
    min-height:
      calc(
        100dvh -
        var(--topbar-height, 68px) -
        16px
      ) !important;

    padding:
      0 !important;
  }


  #perfilPage .perfil-layout {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   RESPONSIVE ≤ 620
   ========================================================= */

@media (
  max-width: 620px
) {

  .app-content:has(#perfilPageMount) {
    padding:
      6px !important;
  }


  #perfilPage,
  .perfil-page {
    min-height:
      calc(
        100dvh -
        var(--topbar-height, 68px) -
        12px
      ) !important;

    padding:
      0 !important;
  }

}