/* =========================================================
   NAI HUB · CONFIGURACIÓN
   NEURO APRENDIZAJE INFANTIL

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

   ESTILO:
   - MISMA LÍNEA VISUAL QUE USUARIOS
   - PREMIUM
   - COMPACTO
   - MODERNO
   - ELEGANTE
   - TEXTO NEGRO / BLANCO
   - SIN GRISES DÉBILES
   - SIN GLOW
   - FULL RESPONSIVE
   - SIN SCROLL HORIZONTAL
   ========================================================= */


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

#configuracionPage,
.configuracion-page {
  --cfg-bg:
    #f5f6f8;

  --cfg-surface:
    #ffffff;

  --cfg-surface-soft:
    #f7f8fa;

  --cfg-surface-hover:
    #f0f2f5;

  --cfg-border:
    #d5dae2;

  --cfg-border-strong:
    #b6bdc8;

  --cfg-text:
    #050505;

  --cfg-violet:
    #6253a2;

  --cfg-violet-soft:
    rgba(98, 83, 162, .08);

  --cfg-blue:
    #31476f;

  --cfg-success:
    #115d39;

  --cfg-success-bg:
    #eaf7ef;

  --cfg-success-border:
    #b8ddc8;

  --cfg-warning:
    #704500;

  --cfg-warning-bg:
    #fff5da;

  --cfg-warning-border:
    #e8ce8b;

  --cfg-danger:
    #8d1c1c;

  --cfg-danger-bg:
    #fff0ef;

  --cfg-danger-border:
    #efb3ae;

  --cfg-radius:
    14px;

  --cfg-radius-sm:
    9px;

  --cfg-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:
    hidden !important;

  box-sizing:
    border-box !important;

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

  background:
    transparent;
}


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

#configuracionPage *,
#configuracionPage *::before,
#configuracionPage *::after,
.configuracion-page *,
.configuracion-page *::before,
.configuracion-page *::after {
  box-sizing:
    border-box;
}


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

#configuracionPage .configuracion-page__header {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  margin-bottom:
    14px;
}


/* =========================================================
   HEADING
   ========================================================= */

#configuracionPage .configuracion-page__heading {
  min-width:
    0;
}


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

#configuracionPage .configuracion-page__overline {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  margin-bottom:
    4px;

  color:
    #050505;

  font-size:
    8px;

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}


#configuracionPage .configuracion-page__overline-dot {
  width:
    5px;

  height:
    5px;

  flex:
    0 0 5px;

  border-radius:
    50%;

  background:
    var(--cfg-violet);
}


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

#configuracionPage .configuracion-page__heading h1 {
  margin:
    0;

  color:
    #050505;

  font-size:
    27px;

  font-weight:
    900;

  line-height:
    1.05;

  letter-spacing:
    -.045em;
}


#configuracionPage .configuracion-page__heading p {
  max-width:
    680px;

  margin:
    6px 0 0;

  color:
    #050505;

  font-size:
    11.5px;

  font-weight:
    650;

  line-height:
    1.4;
}


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

#configuracionPage .configuracion-page__actions {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;
}


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

#configuracionPage .configuracion-btn {
  min-height:
    35px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    0 12px;

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

  border-radius:
    9px;

  background:
    #ffffff;

  color:
    #050505;

  font-family:
    inherit;

  font-size:
    9.5px;

  font-weight:
    800;

  line-height:
    1;

  white-space:
    nowrap;

  cursor:
    pointer;

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


#configuracionPage .configuracion-btn svg {
  width:
    14px;

  height:
    14px;

  flex:
    0 0 14px;

  stroke-width:
    2.2;
}


#configuracionPage .configuracion-btn:hover:not(:disabled) {
  border-color:
    var(--cfg-border-strong);

  transform:
    translateY(-1px);
}


#configuracionPage .configuracion-btn:active:not(:disabled) {
  transform:
    scale(.97);
}


#configuracionPage .configuracion-btn:disabled {
  cursor:
    not-allowed;

  opacity:
    .45;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

#configuracionPage .configuracion-btn--primary {
  border-color:
    #423970;

  background:
    linear-gradient(
      120deg,
      #31476f 0%,
      #51488a 50%,
      #6655a4 100%
    );

  color:
    #ffffff;
}


#configuracionPage .configuracion-btn--primary:hover:not(:disabled) {
  border-color:
    #362e61;

  background:
    linear-gradient(
      120deg,
      #2b4168 0%,
      #493f80 50%,
      #5d4d99 100%
    );
}


/* =========================================================
   SECONDARY BUTTON
   ========================================================= */

#configuracionPage .configuracion-btn--secondary {
  background:
    var(--cfg-surface-soft);

  color:
    #050505;
}


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

#configuracionPage .configuracion-btn-spinner {
  width:
    13px;

  height:
    13px;

  flex:
    0 0 13px;

  border:
    2px solid rgba(255, 255, 255, .35);

  border-top-color:
    #ffffff;

  border-radius:
    50%;

  animation:
    configuracionSpin
    650ms
    linear
    infinite;
}


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

#configuracionPage .configuracion-content {
  width:
    100%;

  min-width:
    0;

  max-width:
    none;

  overflow-x:
    hidden;
}


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

#configuracionPage .configuracion-layout {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  align-items:
    start;

  gap:
    14px;
}


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

#configuracionPage .configuracion-main {
  min-width:
    0;

  display:
    grid;

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

  gap:
    14px;
}


#configuracionPage .configuracion-main >
.configuracion-card:first-child {
  grid-column:
    1 / -1;
}


/* =========================================================
   SIDE
   ========================================================= */

#configuracionPage .configuracion-side {
  min-width:
    0;

  position:
    sticky;

  top:
    12px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;
}


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

#configuracionPage .configuracion-card {
  width:
    100%;

  min-width:
    0;

  overflow:
    hidden;

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

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

  background:
    var(--cfg-surface);

  color:
    #050505;

  transition:
    border-color var(--cfg-transition),
    transform var(--cfg-transition);
}


#configuracionPage .configuracion-card:hover {
  border-color:
    var(--cfg-border-strong);

  transform:
    translateY(-1px);
}


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

#configuracionPage .configuracion-card__header {
  min-height:
    66px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    11px 13px;

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

  background:
    var(--cfg-surface);

  color:
    #050505;
}


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

#configuracionPage .configuracion-card__title {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


#configuracionPage .configuracion-card__title >
div:last-child {
  min-width:
    0;
}


#configuracionPage .configuracion-card__title >
div:last-child >
span {
  display:
    block;

  color:
    #050505;

  font-size:
    7.8px;

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    .10em;

  text-transform:
    uppercase;
}


#configuracionPage .configuracion-card__title h2 {
  margin:
    4px 0 0;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    13px;

  font-weight:
    900;

  line-height:
    1.2;

  letter-spacing:
    -.02em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#configuracionPage .configuracion-card__title p {
  margin:
    4px 0 0;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    8.5px;

  font-weight:
    600;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

#configuracionPage .configuracion-card__icon {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    9px;

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

  color:
    #050505;
}


#configuracionPage .configuracion-card__icon svg {
  width:
    16px;

  height:
    16px;

  stroke-width:
    2.2;
}


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

#configuracionPage .configuracion-card__body {
  width:
    100%;

  min-width:
    0;

  padding:
    13px;

  background:
    var(--cfg-surface);
}


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

#configuracionPage .configuracion-fields {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    12px;
}


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

#configuracionPage .configuracion-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}


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

#configuracionPage .configuracion-field__label {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  color:
    #050505;
}


#configuracionPage .configuracion-field__label svg {
  width:
    12px;

  height:
    12px;

  flex:
    0 0 12px;

  stroke-width:
    2.2;
}


#configuracionPage .configuracion-field__label > span {
  overflow:
    hidden;

  color:
    #050505;

  font-size:
    8.5px;

  font-weight:
    800;

  line-height:
    1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   INPUT / SELECT
   ========================================================= */

#configuracionPage .configuracion-field input,
#configuracionPage .configuracion-field select {
  width:
    100%;

  min-width:
    0;

  height:
    39px;

  padding:
    0 10px;

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

  border-radius:
    9px;

  outline:
    none;

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

  color:
    #050505;

  font-family:
    inherit;

  font-size:
    10px;

  font-weight:
    700;

  transition:
    border-color var(--cfg-transition),
    background var(--cfg-transition);
}


#configuracionPage .configuracion-field input:hover,
#configuracionPage .configuracion-field select:hover {
  border-color:
    var(--cfg-border-strong);
}


#configuracionPage .configuracion-field input:focus,
#configuracionPage .configuracion-field select:focus {
  border-color:
    var(--cfg-violet);

  background:
    #ffffff;
}


#configuracionPage .configuracion-field input::placeholder {
  color:
    #050505;

  opacity:
    .70;

  font-weight:
    600;
}


/* =========================================================
   FIELD HELPER
   ========================================================= */

#configuracionPage .configuracion-field >
small {
  color:
    #050505;

  font-size:
    7.8px;

  font-weight:
    600;

  line-height:
    1.35;
}


/* =========================================================
   NUMBER CONTROL
   ========================================================= */

#configuracionPage .configuracion-number-control {
  width:
    100%;

  min-width:
    0;

  height:
    39px;

  display:
    flex;

  align-items:
    center;

  overflow:
    hidden;

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

  border-radius:
    9px;

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

  transition:
    border-color var(--cfg-transition),
    background var(--cfg-transition);
}


#configuracionPage .configuracion-number-control:hover {
  border-color:
    var(--cfg-border-strong);
}


#configuracionPage .configuracion-number-control:focus-within {
  border-color:
    var(--cfg-violet);

  background:
    #ffffff;
}


#configuracionPage .configuracion-number-control input {
  min-width:
    0;

  flex:
    1;

  height:
    100%;

  padding:
    0 10px;

  border:
    0;

  border-radius:
    0;

  background:
    transparent;

  outline:
    none;
}


#configuracionPage .configuracion-number-control >
span {
  flex:
    0 0 auto;

  padding:
    0 10px;

  color:
    #050505;

  font-size:
    8px;

  font-weight:
    750;

  white-space:
    nowrap;
}


/* =========================================================
   THEME FIELD
   ========================================================= */

#configuracionPage .configuracion-field--theme {
  grid-column:
    1 / -1;
}


/* =========================================================
   THEME OPTIONS
   ========================================================= */

#configuracionPage .configuracion-theme-options {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    7px;
}


/* =========================================================
   THEME OPTION
   ========================================================= */

#configuracionPage .configuracion-theme-option {
  position:
    relative;

  min-width:
    0;

  min-height:
    62px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  padding:
    9px;

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

  border-radius:
    10px;

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

  color:
    #050505;

  font-family:
    inherit;

  text-align:
    left;

  cursor:
    pointer;

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


#configuracionPage .configuracion-theme-option:hover {
  border-color:
    var(--cfg-border-strong);

  background:
    #ffffff;

  transform:
    translateY(-1px);
}


#configuracionPage .configuracion-theme-option.is-active {
  border-color:
    rgba(98, 83, 162, .42);

  background:
    var(--cfg-violet-soft);
}


/* =========================================================
   THEME ICON
   ========================================================= */

#configuracionPage .configuracion-theme-option__icon {
  width:
    30px;

  height:
    30px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    8px;

  background:
    #ffffff;

  color:
    #050505;
}


#configuracionPage .configuracion-theme-option__icon svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2.2;
}


/* =========================================================
   THEME COPY
   ========================================================= */

#configuracionPage .configuracion-theme-option__copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


#configuracionPage .configuracion-theme-option__copy strong {
  overflow:
    hidden;

  color:
    #050505;

  font-size:
    9px;

  font-weight:
    850;

  line-height:
    1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#configuracionPage .configuracion-theme-option__copy small {
  overflow:
    hidden;

  color:
    #050505;

  font-size:
    7.5px;

  font-weight:
    600;

  line-height:
    1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   THEME CHECK
   ========================================================= */

#configuracionPage .configuracion-theme-option__check {
  width:
    18px;

  height:
    18px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    50%;

  background:
    #ffffff;

  color:
    #050505;
}


#configuracionPage .configuracion-theme-option.is-active
.configuracion-theme-option__check {
  border-color:
    var(--cfg-violet);

  background:
    var(--cfg-violet);

  color:
    #ffffff;
}


#configuracionPage .configuracion-theme-option__check svg {
  width:
    10px;

  height:
    10px;

  stroke-width:
    2.8;
}


/* =========================================================
   SWITCH
   ========================================================= */

#configuracionPage .configuracion-switch {
  position:
    relative;

  min-width:
    0;

  min-height:
    73px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  padding:
    10px;

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

  border-radius:
    10px;

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

  cursor:
    pointer;

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


#configuracionPage .configuracion-switch:hover {
  border-color:
    var(--cfg-border-strong);

  background:
    #ffffff;

  transform:
    translateY(-1px);
}


#configuracionPage .configuracion-switch >
input {
  position:
    absolute;

  opacity:
    0;

  pointer-events:
    none;
}


/* =========================================================
   SWITCH ICON
   ========================================================= */

#configuracionPage .configuracion-switch__icon {
  width:
    34px;

  height:
    34px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    9px;

  background:
    #ffffff;

  color:
    #050505;
}


#configuracionPage .configuracion-switch__icon svg {
  width:
    15px;

  height:
    15px;

  stroke-width:
    2.2;
}


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

#configuracionPage .configuracion-switch__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


#configuracionPage .configuracion-switch__content strong {
  overflow:
    hidden;

  color:
    #050505;

  font-size:
    9px;

  font-weight:
    850;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#configuracionPage .configuracion-switch__content small {
  color:
    #050505;

  font-size:
    7.6px;

  font-weight:
    600;

  line-height:
    1.35;
}


/* =========================================================
   SWITCH CONTROL
   ========================================================= */

#configuracionPage .configuracion-switch__control {
  position:
    relative;

  width:
    36px;

  height:
    21px;

  flex:
    0 0 36px;

  display:
    block;

  border:
    1px solid #aeb5c0;

  border-radius:
    999px;

  background:
    #e5e7eb;

  transition:
    border-color var(--cfg-transition),
    background var(--cfg-transition);
}


#configuracionPage .configuracion-switch__control >
span {
  position:
    absolute;

  top:
    3px;

  left:
    3px;

  width:
    13px;

  height:
    13px;

  border-radius:
    50%;

  background:
    #050505;

  transition:
    transform var(--cfg-transition),
    background var(--cfg-transition);
}


#configuracionPage .configuracion-switch >
input:checked ~
.configuracion-switch__control {
  border-color:
    #51438f;

  background:
    #6253a2;
}


#configuracionPage .configuracion-switch >
input:checked ~
.configuracion-switch__control >
span {
  background:
    #ffffff;

  transform:
    translateX(15px);
}


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

#configuracionPage .configuracion-card--summary
.configuracion-card__body {
  padding:
    10px;
}


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

#configuracionPage .configuracion-summary-list {
  display:
    grid;

  gap:
    6px;
}


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

#configuracionPage .configuracion-summary-item {
  min-width:
    0;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  padding:
    8px;

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

  border-radius:
    9px;

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

  color:
    #050505;

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


#configuracionPage .configuracion-summary-item:hover {
  border-color:
    var(--cfg-border-strong);

  background:
    #ffffff;

  transform:
    translateX(1px);
}


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

#configuracionPage .configuracion-summary-item__icon {
  width:
    30px;

  height:
    30px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    8px;

  background:
    #ffffff;

  color:
    #050505;
}


#configuracionPage .configuracion-summary-item__icon svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2.2;
}


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

#configuracionPage .configuracion-summary-item__copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


#configuracionPage .configuracion-summary-item__copy span {
  overflow:
    hidden;

  color:
    #050505;

  font-size:
    7.5px;

  font-weight:
    700;

  line-height:
    1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#configuracionPage .configuracion-summary-item__copy strong {
  overflow:
    hidden;

  color:
    #050505;

  font-size:
    9px;

  font-weight:
    850;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   CHANGES STATUS
   ========================================================= */

#configuracionPage .configuracion-changes {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  margin-top:
    8px;

  padding:
    9px;

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

  border-radius:
    9px;

  color:
    #050505;
}


#configuracionPage .configuracion-changes--saved {
  border-color:
    var(--cfg-success-border);

  background:
    var(--cfg-success-bg);
}


#configuracionPage .configuracion-changes--pending {
  border-color:
    var(--cfg-warning-border);

  background:
    var(--cfg-warning-bg);
}


#configuracionPage .configuracion-changes__icon {
  width:
    31px;

  height:
    31px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid currentColor;

  border-radius:
    8px;

  color:
    #050505;
}


#configuracionPage .configuracion-changes__icon svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2.2;
}


#configuracionPage .configuracion-changes >
div:last-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


#configuracionPage .configuracion-changes strong {
  overflow:
    hidden;

  color:
    #050505;

  font-size:
    8.5px;

  font-weight:
    850;

  line-height:
    1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#configuracionPage .configuracion-changes span {
  color:
    #050505;

  font-size:
    7.5px;

  font-weight:
    600;

  line-height:
    1.3;
}


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

#configuracionPage .configuracion-card--help {
  overflow:
    hidden;
}


/* =========================================================
   HELP
   ========================================================= */

#configuracionPage .configuracion-help {
  display:
    grid;

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

  gap:
    10px;

  padding:
    12px;

  background:
    var(--cfg-surface);
}


/* =========================================================
   HELP ICON
   ========================================================= */

#configuracionPage .configuracion-help__icon {
  width:
    34px;

  height:
    34px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    9px;

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

  color:
    #050505;
}


#configuracionPage .configuracion-help__icon svg {
  width:
    15px;

  height:
    15px;

  stroke-width:
    2.2;
}


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

#configuracionPage .configuracion-help__content {
  min-width:
    0;
}


#configuracionPage .configuracion-help__content >
strong {
  display:
    block;

  color:
    #050505;

  font-size:
    9.5px;

  font-weight:
    850;

  line-height:
    1.2;
}


#configuracionPage .configuracion-help__content >
p {
  margin:
    4px 0 0;

  color:
    #050505;

  font-size:
    8px;

  font-weight:
    600;

  line-height:
    1.4;
}


/* =========================================================
   HELP ITEMS
   ========================================================= */

#configuracionPage .configuracion-help__items {
  display:
    grid;

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

  gap:
    5px;

  margin-top:
    9px;
}


#configuracionPage .configuracion-help__items span {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  color:
    #050505;

  font-size:
    7.5px;

  font-weight:
    700;

  line-height:
    1.2;
}


#configuracionPage .configuracion-help__items svg {
  width:
    10px;

  height:
    10px;

  flex:
    0 0 10px;

  stroke-width:
    2.4;
}


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

#configuracionPage .configuracion-loading {
  min-height:
    300px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    11px;

  padding:
    24px;

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

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

  background:
    var(--cfg-surface);

  color:
    #050505;
}


#configuracionPage .configuracion-loading >
div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


#configuracionPage .configuracion-loading strong {
  color:
    #050505;

  font-size:
    10.5px;

  font-weight:
    850;
}


#configuracionPage .configuracion-loading span:not(.configuracion-spinner) {
  color:
    #050505;

  font-size:
    8.5px;

  font-weight:
    600;
}


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

#configuracionPage .configuracion-spinner {
  width:
    24px;

  height:
    24px;

  flex:
    0 0 24px;

  border:
    2px solid var(--cfg-border);

  border-top-color:
    #050505;

  border-radius:
    50%;

  animation:
    configuracionSpin
    650ms
    linear
    infinite;
}


@keyframes configuracionSpin {

  to {
    transform:
      rotate(360deg);
  }

}


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

.configuracion-toast-container {
  position:
    fixed;

  top:
    62px;

  right:
    16px;

  z-index:
    1200;

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

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

  pointer-events:
    none;
}


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

.configuracion-toast {
  min-height:
    44px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  padding:
    8px 10px;

  border:
    1px solid #cfd4dd;

  border-radius:
    10px;

  background:
    #ffffff;

  color:
    #050505;

  opacity:
    0;

  transform:
    translateX(12px);

  transition:
    opacity 180ms ease,
    transform 180ms ease;
}


.configuracion-toast.is-visible {
  opacity:
    1;

  transform:
    translateX(0);
}


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

.configuracion-toast__icon {
  width:
    28px;

  height:
    28px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid currentColor;

  border-radius:
    8px;
}


.configuracion-toast__icon svg {
  width:
    13px;

  height:
    13px;

  stroke-width:
    2.2;
}


.configuracion-toast >
span {
  color:
    inherit;

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1.35;
}


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

.configuracion-toast--success {
  border-color:
    var(--cfg-success-border);

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

  color:
    #0c5032;
}


.configuracion-toast--warning {
  border-color:
    var(--cfg-warning-border);

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

  color:
    #624000;
}


.configuracion-toast--error {
  border-color:
    var(--cfg-danger-border);

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

  color:
    #731717;
}


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

html[data-theme="dark"]
#configuracionPage,
body.dark
#configuracionPage,
.dark
#configuracionPage {
  --cfg-bg:
    #050505;

  --cfg-surface:
    #0b0b0d;

  --cfg-surface-soft:
    #111114;

  --cfg-surface-hover:
    #151519;

  --cfg-border:
    #29292f;

  --cfg-border-strong:
    #44444c;

  --cfg-text:
    #ffffff;

  --cfg-violet:
    #a495dc;

  --cfg-violet-soft:
    rgba(164, 149, 220, .10);

  color:
    #ffffff !important;
}


/* =========================================================
   DARK TEXTS
   ========================================================= */

html[data-theme="dark"] #configuracionPage .configuracion-page__overline,
html[data-theme="dark"] #configuracionPage .configuracion-page__heading h1,
html[data-theme="dark"] #configuracionPage .configuracion-page__heading p,
html[data-theme="dark"] #configuracionPage .configuracion-btn--secondary,
html[data-theme="dark"] #configuracionPage .configuracion-card,
html[data-theme="dark"] #configuracionPage .configuracion-card__header,
html[data-theme="dark"] #configuracionPage .configuracion-card__title > div:last-child > span,
html[data-theme="dark"] #configuracionPage .configuracion-card__title h2,
html[data-theme="dark"] #configuracionPage .configuracion-card__title p,
html[data-theme="dark"] #configuracionPage .configuracion-card__icon,
html[data-theme="dark"] #configuracionPage .configuracion-field__label,
html[data-theme="dark"] #configuracionPage .configuracion-field__label > span,
html[data-theme="dark"] #configuracionPage .configuracion-field input,
html[data-theme="dark"] #configuracionPage .configuracion-field select,
html[data-theme="dark"] #configuracionPage .configuracion-field > small,
html[data-theme="dark"] #configuracionPage .configuracion-number-control > span,
html[data-theme="dark"] #configuracionPage .configuracion-theme-option,
html[data-theme="dark"] #configuracionPage .configuracion-theme-option__icon,
html[data-theme="dark"] #configuracionPage .configuracion-theme-option__copy strong,
html[data-theme="dark"] #configuracionPage .configuracion-theme-option__copy small,
html[data-theme="dark"] #configuracionPage .configuracion-switch,
html[data-theme="dark"] #configuracionPage .configuracion-switch__icon,
html[data-theme="dark"] #configuracionPage .configuracion-switch__content strong,
html[data-theme="dark"] #configuracionPage .configuracion-switch__content small,
html[data-theme="dark"] #configuracionPage .configuracion-summary-item,
html[data-theme="dark"] #configuracionPage .configuracion-summary-item__icon,
html[data-theme="dark"] #configuracionPage .configuracion-summary-item__copy span,
html[data-theme="dark"] #configuracionPage .configuracion-summary-item__copy strong,
html[data-theme="dark"] #configuracionPage .configuracion-changes,
html[data-theme="dark"] #configuracionPage .configuracion-changes__icon,
html[data-theme="dark"] #configuracionPage .configuracion-changes strong,
html[data-theme="dark"] #configuracionPage .configuracion-changes span,
html[data-theme="dark"] #configuracionPage .configuracion-help__icon,
html[data-theme="dark"] #configuracionPage .configuracion-help__content > strong,
html[data-theme="dark"] #configuracionPage .configuracion-help__content > p,
html[data-theme="dark"] #configuracionPage .configuracion-help__items span,
html[data-theme="dark"] #configuracionPage .configuracion-loading,
html[data-theme="dark"] #configuracionPage .configuracion-loading strong,
html[data-theme="dark"] #configuracionPage .configuracion-loading span,
body.dark #configuracionPage .configuracion-page__overline,
body.dark #configuracionPage .configuracion-page__heading h1,
body.dark #configuracionPage .configuracion-page__heading p,
body.dark #configuracionPage .configuracion-btn--secondary,
body.dark #configuracionPage .configuracion-card,
body.dark #configuracionPage .configuracion-card__header,
body.dark #configuracionPage .configuracion-card__title > div:last-child > span,
body.dark #configuracionPage .configuracion-card__title h2,
body.dark #configuracionPage .configuracion-card__title p,
body.dark #configuracionPage .configuracion-card__icon,
body.dark #configuracionPage .configuracion-field__label,
body.dark #configuracionPage .configuracion-field__label > span,
body.dark #configuracionPage .configuracion-field input,
body.dark #configuracionPage .configuracion-field select,
body.dark #configuracionPage .configuracion-field > small,
body.dark #configuracionPage .configuracion-number-control > span,
body.dark #configuracionPage .configuracion-theme-option,
body.dark #configuracionPage .configuracion-theme-option__icon,
body.dark #configuracionPage .configuracion-theme-option__copy strong,
body.dark #configuracionPage .configuracion-theme-option__copy small,
body.dark #configuracionPage .configuracion-switch,
body.dark #configuracionPage .configuracion-switch__icon,
body.dark #configuracionPage .configuracion-switch__content strong,
body.dark #configuracionPage .configuracion-switch__content small,
body.dark #configuracionPage .configuracion-summary-item,
body.dark #configuracionPage .configuracion-summary-item__icon,
body.dark #configuracionPage .configuracion-summary-item__copy span,
body.dark #configuracionPage .configuracion-summary-item__copy strong,
body.dark #configuracionPage .configuracion-changes,
body.dark #configuracionPage .configuracion-changes__icon,
body.dark #configuracionPage .configuracion-changes strong,
body.dark #configuracionPage .configuracion-changes span,
body.dark #configuracionPage .configuracion-help__icon,
body.dark #configuracionPage .configuracion-help__content > strong,
body.dark #configuracionPage .configuracion-help__content > p,
body.dark #configuracionPage .configuracion-help__items span,
body.dark #configuracionPage .configuracion-loading,
body.dark #configuracionPage .configuracion-loading strong,
body.dark #configuracionPage .configuracion-loading span {
  color:
    #ffffff !important;
}


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

html[data-theme="dark"] #configuracionPage .configuracion-card,
html[data-theme="dark"] #configuracionPage .configuracion-card__header,
html[data-theme="dark"] #configuracionPage .configuracion-card__body,
body.dark #configuracionPage .configuracion-card,
body.dark #configuracionPage .configuracion-card__header,
body.dark #configuracionPage .configuracion-card__body {
  background:
    #0b0b0d;
}


/* =========================================================
   DARK INPUTS
   ========================================================= */

html[data-theme="dark"] #configuracionPage .configuracion-field input,
html[data-theme="dark"] #configuracionPage .configuracion-field select,
html[data-theme="dark"] #configuracionPage .configuracion-number-control,
body.dark #configuracionPage .configuracion-field input,
body.dark #configuracionPage .configuracion-field select,
body.dark #configuracionPage .configuracion-number-control {
  border-color:
    #33333a;

  background:
    #111114;

  color:
    #ffffff;
}


html[data-theme="dark"] #configuracionPage .configuracion-field input:focus,
html[data-theme="dark"] #configuracionPage .configuracion-field select:focus,
html[data-theme="dark"] #configuracionPage .configuracion-number-control:focus-within,
body.dark #configuracionPage .configuracion-field input:focus,
body.dark #configuracionPage .configuracion-field select:focus,
body.dark #configuracionPage .configuracion-number-control:focus-within {
  border-color:
    #a495dc;

  background:
    #151519;
}


/* =========================================================
   DARK CARDS INTERNAS
   ========================================================= */

html[data-theme="dark"] #configuracionPage .configuracion-card__icon,
html[data-theme="dark"] #configuracionPage .configuracion-theme-option,
html[data-theme="dark"] #configuracionPage .configuracion-theme-option__icon,
html[data-theme="dark"] #configuracionPage .configuracion-theme-option__check,
html[data-theme="dark"] #configuracionPage .configuracion-switch,
html[data-theme="dark"] #configuracionPage .configuracion-switch__icon,
html[data-theme="dark"] #configuracionPage .configuracion-summary-item,
html[data-theme="dark"] #configuracionPage .configuracion-summary-item__icon,
html[data-theme="dark"] #configuracionPage .configuracion-help__icon,
body.dark #configuracionPage .configuracion-card__icon,
body.dark #configuracionPage .configuracion-theme-option,
body.dark #configuracionPage .configuracion-theme-option__icon,
body.dark #configuracionPage .configuracion-theme-option__check,
body.dark #configuracionPage .configuracion-switch,
body.dark #configuracionPage .configuracion-switch__icon,
body.dark #configuracionPage .configuracion-summary-item,
body.dark #configuracionPage .configuracion-summary-item__icon,
body.dark #configuracionPage .configuracion-help__icon {
  border-color:
    #33333a;

  background:
    #111114;
}


/* =========================================================
   DARK HOVERS
   ========================================================= */

html[data-theme="dark"] #configuracionPage .configuracion-theme-option:hover,
html[data-theme="dark"] #configuracionPage .configuracion-switch:hover,
html[data-theme="dark"] #configuracionPage .configuracion-summary-item:hover,
body.dark #configuracionPage .configuracion-theme-option:hover,
body.dark #configuracionPage .configuracion-switch:hover,
body.dark #configuracionPage .configuracion-summary-item:hover {
  background:
    #151519;
}


/* =========================================================
   DARK THEME ACTIVE
   ========================================================= */

html[data-theme="dark"] #configuracionPage .configuracion-theme-option.is-active,
body.dark #configuracionPage .configuracion-theme-option.is-active {
  border-color:
    rgba(164, 149, 220, .45);

  background:
    rgba(164, 149, 220, .10);
}


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

html[data-theme="dark"] #configuracionPage .configuracion-btn--secondary,
body.dark #configuracionPage .configuracion-btn--secondary {
  border-color:
    #33333a;

  background:
    #111114;

  color:
    #ffffff;
}


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

html[data-theme="dark"] #configuracionPage .configuracion-spinner,
body.dark #configuracionPage .configuracion-spinner {
  border-color:
    #34343b;

  border-top-color:
    #ffffff;
}


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

html[data-theme="dark"] .configuracion-toast,
body.dark .configuracion-toast {
  border-color:
    #393940;

  background:
    #111114;

  color:
    #ffffff;
}


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

#configuracionPageMount {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow-x:
    hidden !important;

  flex:
    1 1 auto !important;

  align-self:
    stretch !important;

  justify-self:
    stretch !important;
}


#configuracionPageMount >
.configuracion-page {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;
}


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

main:has(#configuracionPageMount),
.app-main:has(#configuracionPageMount),
.main:has(#configuracionPageMount),
.main-content:has(#configuracionPageMount),
.app-content:has(#configuracionPageMount),
.page-content:has(#configuracionPageMount),
.content:has(#configuracionPageMount),
.content-wrapper:has(#configuracionPageMount),
.page-wrapper:has(#configuracionPageMount),
.workspace:has(#configuracionPageMount) {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  overflow-x:
    hidden !important;
}


/* =========================================================
   RESPONSIVE ≤ 1250
   ========================================================= */

@media (
  max-width: 1250px
) {

  #configuracionPage .configuracion-layout {
    grid-template-columns:
      minmax(0, 1fr)
      285px;
  }


  #configuracionPage .configuracion-main {
    grid-template-columns:
      1fr;
  }


  #configuracionPage .configuracion-main >
  .configuracion-card:first-child {
    grid-column:
      auto;
  }

}


/* =========================================================
   RESPONSIVE ≤ 1050
   ========================================================= */

@media (
  max-width: 1050px
) {

  #configuracionPage .configuracion-layout {
    grid-template-columns:
      1fr;
  }


  #configuracionPage .configuracion-side {
    position:
      static;

    display:
      grid;

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

    gap:
      14px;
  }


  #configuracionPage .configuracion-summary-list {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


/* =========================================================
   RESPONSIVE ≤ 850
   ========================================================= */

@media (
  max-width: 850px
) {

  #configuracionPage,
  .configuracion-page {
    padding:
      13px !important;
  }


  #configuracionPage .configuracion-page__header {
    align-items:
      flex-end;

    gap:
      12px;
  }


  #configuracionPage .configuracion-fields {
    grid-template-columns:
      1fr;
  }


  #configuracionPage .configuracion-field--theme {
    grid-column:
      auto;
  }


  #configuracionPage .configuracion-side {
    grid-template-columns:
      1fr;
  }


  #configuracionPage .configuracion-summary-list {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


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

@media (
  max-width: 700px
) {

  #configuracionPage,
  .configuracion-page {
    padding:
      10px !important;
  }


  #configuracionPage .configuracion-page__header {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  #configuracionPage .configuracion-page__actions {
    width:
      100%;
  }


  #configuracionPage .configuracion-page__actions
  .configuracion-btn {
    flex:
      1;
  }


  #configuracionPage .configuracion-page__heading h1 {
    font-size:
      24px;
  }


  #configuracionPage .configuracion-page__heading p {
    font-size:
      10.5px;
  }


  #configuracionPage .configuracion-theme-options {
    grid-template-columns:
      1fr;
  }


  #configuracionPage .configuracion-theme-option {
    min-height:
      57px;
  }


  #configuracionPage .configuracion-summary-list {
    grid-template-columns:
      1fr;
  }


  #configuracionPage .configuracion-help__items {
    grid-template-columns:
      1fr;
  }

}


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

@media (
  max-width: 520px
) {

  #configuracionPage,
  .configuracion-page {
    padding:
      8px !important;
  }


  #configuracionPage .configuracion-page__header {
    margin-bottom:
      10px;
  }


  #configuracionPage .configuracion-page__overline {
    font-size:
      7.5px;
  }


  #configuracionPage .configuracion-page__heading h1 {
    font-size:
      22px;
  }


  #configuracionPage .configuracion-page__heading p {
    font-size:
      10px;
  }


  #configuracionPage .configuracion-page__actions {
    display:
      grid;

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

    gap:
      6px;
  }


  #configuracionPage .configuracion-page__actions
  .configuracion-btn {
    width:
      100%;

    min-width:
      0;

    padding:
      0 8px;

    font-size:
      8.5px;
  }


  #configuracionPage .configuracion-layout,
  #configuracionPage .configuracion-main,
  #configuracionPage .configuracion-side {
    gap:
      10px;
  }


  #configuracionPage .configuracion-card {
    border-radius:
      12px;
  }


  #configuracionPage .configuracion-card__header {
    min-height:
      60px;

    padding:
      10px;
  }


  #configuracionPage .configuracion-card__title {
    gap:
      8px;
  }


  #configuracionPage .configuracion-card__icon {
    width:
      31px;

    height:
      31px;

    flex-basis:
      31px;
  }


  #configuracionPage .configuracion-card__title h2 {
    font-size:
      12px;
  }


  #configuracionPage .configuracion-card__title p {
    white-space:
      normal;

    font-size:
      7.8px;
  }


  #configuracionPage .configuracion-card__body {
    padding:
      10px;
  }


  #configuracionPage .configuracion-fields {
    gap:
      10px;
  }


  #configuracionPage .configuracion-field input,
  #configuracionPage .configuracion-field select,
  #configuracionPage .configuracion-number-control {
    height:
      38px;
  }


  #configuracionPage .configuracion-theme-option {
    grid-template-columns:
      29px
      minmax(0, 1fr)
      18px;

    padding:
      8px;
  }


  #configuracionPage .configuracion-theme-option__icon {
    width:
      29px;

    height:
      29px;
  }


  #configuracionPage .configuracion-switch {
    min-height:
      67px;

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

    gap:
      8px;

    padding:
      9px;
  }


  #configuracionPage .configuracion-switch__icon {
    width:
      31px;

    height:
      31px;
  }


  #configuracionPage .configuracion-switch__content small {
    font-size:
      7.2px;
  }


  #configuracionPage .configuracion-help {
    grid-template-columns:
      31px
      minmax(0, 1fr);

    padding:
      10px;
  }


  #configuracionPage .configuracion-help__icon {
    width:
      31px;

    height:
      31px;
  }

}


/* =========================================================
   RESPONSIVE ≤ 380
   ========================================================= */

@media (
  max-width: 380px
) {

  #configuracionPage,
  .configuracion-page {
    padding:
      7px !important;
  }


  #configuracionPage .configuracion-page__heading h1 {
    font-size:
      20px;
  }


  #configuracionPage .configuracion-page__actions {
    grid-template-columns:
      1fr;
  }


  #configuracionPage .configuracion-card__title p {
    display:
      none;
  }


  #configuracionPage .configuracion-theme-option__copy small {
    display:
      none;
  }


  #configuracionPage .configuracion-theme-option {
    min-height:
      51px;
  }


  #configuracionPage .configuracion-switch {
    grid-template-columns:
      29px
      minmax(0, 1fr)
      auto;
  }


  #configuracionPage .configuracion-switch__content small {
    display:
      none;
  }


  #configuracionPage .configuracion-summary-item {
    padding:
      7px;
  }


  #configuracionPage .configuracion-help__content >
  p {
    font-size:
      7.5px;
  }

}


/* =========================================================
   LARGE SCREENS
   ========================================================= */

@media (
  min-width: 1500px
) {

  #configuracionPage,
  .configuracion-page {
    padding:
      20px !important;
  }


  #configuracionPage .configuracion-layout {
    grid-template-columns:
      minmax(0, 1fr)
      340px;
  }


  #configuracionPage .configuracion-card__body {
    padding:
      14px;
  }


  #configuracionPage .configuracion-fields {
    gap:
      14px;
  }

}


/* =========================================================
   EXTRA LARGE
   ========================================================= */

@media (
  min-width: 1800px
) {

  #configuracionPage .configuracion-layout {
    grid-template-columns:
      minmax(0, 1fr)
      360px;
  }

}


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

#configuracionPage button:focus-visible,
#configuracionPage input:focus-visible,
#configuracionPage select:focus-visible {
  outline:
    2px solid currentColor;

  outline-offset:
    2px;
}


/* =========================================================
   REMOVE HORIZONTAL OVERFLOW
   ========================================================= */

#configuracionPage,
#configuracionPage .configuracion-content,
#configuracionPage .configuracion-layout,
#configuracionPage .configuracion-main,
#configuracionPage .configuracion-side,
#configuracionPage .configuracion-card,
#configuracionPage .configuracion-card__body,
#configuracionPage .configuracion-fields,
#configuracionPage .configuracion-field,
#configuracionPage .configuracion-theme-options,
#configuracionPage .configuracion-theme-option,
#configuracionPage .configuracion-switch,
#configuracionPage .configuracion-summary-list,
#configuracionPage .configuracion-summary-item,
#configuracionPage .configuracion-help {
  max-width:
    100%;

  min-width:
    0;
}


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

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

  #configuracionPage *,
  #configuracionPage *::before,
  #configuracionPage *::after,
  .configuracion-toast,
  .configuracion-toast::before,
  .configuracion-toast::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

}/* =========================================================
   CONFIGURACIÓN
   FIX ESTADO CAMBIOS · DARK MODE
   AGREGAR AL FINAL
   ========================================================= */


/* =========================================================
   GUARDADO · DARK
   ========================================================= */

html[data-theme="dark"]
#configuracionPage
.configuracion-changes--saved,

body[data-theme="dark"]
#configuracionPage
.configuracion-changes--saved,

body.dark
#configuracionPage
.configuracion-changes--saved {

  border-color:
    #28523a !important;

  background:
    #0d2116 !important;

  color:
    #9ee4b9 !important;

}


html[data-theme="dark"]
#configuracionPage
.configuracion-changes--saved
.configuracion-changes__icon,

body[data-theme="dark"]
#configuracionPage
.configuracion-changes--saved
.configuracion-changes__icon,

body.dark
#configuracionPage
.configuracion-changes--saved
.configuracion-changes__icon {

  border-color:
    #3a6d4e !important;

  background:
    #10291b !important;

  color:
    #9ee4b9 !important;

}


html[data-theme="dark"]
#configuracionPage
.configuracion-changes--saved
strong,

html[data-theme="dark"]
#configuracionPage
.configuracion-changes--saved
span,

body[data-theme="dark"]
#configuracionPage
.configuracion-changes--saved
strong,

body[data-theme="dark"]
#configuracionPage
.configuracion-changes--saved
span,

body.dark
#configuracionPage
.configuracion-changes--saved
strong,

body.dark
#configuracionPage
.configuracion-changes--saved
span {

  color:
    #9ee4b9 !important;

}


/* =========================================================
   PENDIENTE · DARK
   ========================================================= */

html[data-theme="dark"]
#configuracionPage
.configuracion-changes--pending,

body[data-theme="dark"]
#configuracionPage
.configuracion-changes--pending,

body.dark
#configuracionPage
.configuracion-changes--pending {

  border-color:
    #59430e !important;

  background:
    #211805 !important;

  color:
    #f0c36c !important;

}


html[data-theme="dark"]
#configuracionPage
.configuracion-changes--pending
.configuracion-changes__icon,

body[data-theme="dark"]
#configuracionPage
.configuracion-changes--pending
.configuracion-changes__icon,

body.dark
#configuracionPage
.configuracion-changes--pending
.configuracion-changes__icon {

  border-color:
    #74591a !important;

  background:
    #2b2108 !important;

  color:
    #f0c36c !important;

}


html[data-theme="dark"]
#configuracionPage
.configuracion-changes--pending
strong,

html[data-theme="dark"]
#configuracionPage
.configuracion-changes--pending
span,

body[data-theme="dark"]
#configuracionPage
.configuracion-changes--pending
strong,

body[data-theme="dark"]
#configuracionPage
.configuracion-changes--pending
span,

body.dark
#configuracionPage
.configuracion-changes--pending
strong,

body.dark
#configuracionPage
.configuracion-changes--pending
span {

  color:
    #f0c36c !important;

}


/* =========================================================
   SVG
   ========================================================= */

html[data-theme="dark"]
#configuracionPage
.configuracion-changes svg,

body[data-theme="dark"]
#configuracionPage
.configuracion-changes svg,

body.dark
#configuracionPage
.configuracion-changes svg {

  stroke:
    currentColor !important;

}/* =========================================================
   CONFIGURACIÓN · SIDEBAR PERSONALIZABLE
   AGREGAR AL FINAL
   ========================================================= */


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

#configuracionPage .configuracion-card--sidebar,
#configuracionPage .configuracion-card--sidebar-admin {
  grid-column:
    1 / -1;
}


/* =========================================================
   SIDEBAR COUNTER
   ========================================================= */

#configuracionPage .configuracion-sidebar-counter {
  min-width:
    58px;

  min-height:
    38px;

  display:
    flex;

  align-items:
    baseline;

  justify-content:
    center;

  gap:
    3px;

  padding:
    7px 9px;

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

  border-radius:
    9px;

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

  color:
    #050505;
}


#configuracionPage .configuracion-sidebar-counter strong {
  color:
    #050505;

  font-size:
    14px;

  font-weight:
    900;

  line-height:
    1;
}


#configuracionPage .configuracion-sidebar-counter span {
  color:
    #050505;

  font-size:
    8px;

  font-weight:
    750;

  line-height:
    1;
}


/* =========================================================
   SIDEBAR GRID
   ========================================================= */

#configuracionPage .configuracion-sidebar-grid {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    9px;
}


/* =========================================================
   SIDEBAR MODULE
   ========================================================= */

#configuracionPage .configuracion-sidebar-module {
  position:
    relative;

  min-width:
    0;

  min-height:
    70px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  padding:
    10px;

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

  border-radius:
    10px;

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

  color:
    #050505;

  cursor:
    pointer;

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


#configuracionPage .configuracion-sidebar-module:hover {
  border-color:
    var(--cfg-border-strong);

  background:
    #ffffff;

  transform:
    translateY(-1px);
}


#configuracionPage .configuracion-sidebar-module > input {
  position:
    absolute;

  opacity:
    0;

  pointer-events:
    none;
}


/* =========================================================
   SIDEBAR MODULE ICON
   ========================================================= */

#configuracionPage .configuracion-sidebar-module__icon {
  width:
    34px;

  height:
    34px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    9px;

  background:
    #ffffff;

  color:
    #050505;

  transition:
    border-color var(--cfg-transition),
    background var(--cfg-transition),
    color var(--cfg-transition);
}


#configuracionPage .configuracion-sidebar-module__icon svg {
  width:
    15px;

  height:
    15px;

  stroke-width:
    2.2;
}


/* =========================================================
   SIDEBAR MODULE COPY
   ========================================================= */

#configuracionPage .configuracion-sidebar-module__copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


#configuracionPage .configuracion-sidebar-module__copy strong {
  overflow:
    hidden;

  color:
    #050505;

  font-size:
    9.5px;

  font-weight:
    850;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#configuracionPage .configuracion-sidebar-module__copy small {
  overflow:
    hidden;

  color:
    #050505;

  font-size:
    7.7px;

  font-weight:
    600;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   SIDEBAR MODULE CHECKED
   ========================================================= */

#configuracionPage .configuracion-sidebar-module:has(input:checked) {
  border-color:
    rgba(98, 83, 162, .42);

  background:
    var(--cfg-violet-soft);
}


#configuracionPage
.configuracion-sidebar-module:has(input:checked)
.configuracion-sidebar-module__icon {
  border-color:
    rgba(98, 83, 162, .40);

  background:
    #ffffff;

  color:
    var(--cfg-violet);
}


/* =========================================================
   SIDEBAR SWITCH
   ========================================================= */

#configuracionPage
.configuracion-sidebar-module
.configuracion-switch__control {
  position:
    relative;

  width:
    36px;

  height:
    21px;

  flex:
    0 0 36px;

  display:
    block;

  border:
    1px solid #aeb5c0;

  border-radius:
    999px;

  background:
    #e5e7eb;

  transition:
    border-color var(--cfg-transition),
    background var(--cfg-transition);
}


#configuracionPage
.configuracion-sidebar-module
.configuracion-switch__control >
span {
  position:
    absolute;

  top:
    3px;

  left:
    3px;

  width:
    13px;

  height:
    13px;

  border-radius:
    50%;

  background:
    #050505;

  transition:
    transform var(--cfg-transition),
    background var(--cfg-transition);
}


#configuracionPage
.configuracion-sidebar-module >
input:checked ~
.configuracion-switch__control {
  border-color:
    #51438f;

  background:
    #6253a2;
}


#configuracionPage
.configuracion-sidebar-module >
input:checked ~
.configuracion-switch__control >
span {
  background:
    #ffffff;

  transform:
    translateX(15px);
}


/* =========================================================
   ADMIN TOOLBAR
   ========================================================= */

#configuracionPage .configuracion-sidebar-admin-toolbar {
  width:
    100%;

  min-width:
    0;

  margin-bottom:
    11px;

  padding-bottom:
    11px;

  border-bottom:
    1px solid var(--cfg-border);
}


#configuracionPage .configuracion-sidebar-admin-toolbar
.configuracion-field {
  max-width:
    420px;
}


/* =========================================================
   ADMIN USER
   ========================================================= */

#configuracionPage .configuracion-sidebar-admin-user {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    10px;

  padding:
    9px 10px;

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

  border-radius:
    10px;

  background:
    var(--cfg-surface-soft);
}


#configuracionPage .configuracion-sidebar-admin-user__copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


#configuracionPage .configuracion-sidebar-admin-user__copy strong {
  overflow:
    hidden;

  color:
    #050505;

  font-size:
    10px;

  font-weight:
    900;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#configuracionPage .configuracion-sidebar-admin-user__copy span {
  overflow:
    hidden;

  color:
    #050505;

  font-size:
    7.8px;

  font-weight:
    700;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

#configuracionPage .configuracion-sidebar-empty {
  min-height:
    98px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    11px;

  padding:
    14px;

  border:
    1px dashed var(--cfg-border-strong);

  border-radius:
    10px;

  background:
    var(--cfg-surface-soft);
}


#configuracionPage .configuracion-sidebar-empty__icon {
  width:
    36px;

  height:
    36px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    9px;

  background:
    #ffffff;

  color:
    #050505;
}


#configuracionPage .configuracion-sidebar-empty__icon svg {
  width:
    16px;

  height:
    16px;

  stroke-width:
    2.2;
}


#configuracionPage .configuracion-sidebar-empty > div:last-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


#configuracionPage .configuracion-sidebar-empty strong {
  color:
    #050505;

  font-size:
    9.5px;

  font-weight:
    850;

  line-height:
    1.2;
}


#configuracionPage .configuracion-sidebar-empty span {
  color:
    #050505;

  font-size:
    7.8px;

  font-weight:
    600;

  line-height:
    1.35;
}


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

#configuracionPage .configuracion-sidebar-loading {
  min-height:
    90px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  padding:
    14px;

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

  border-radius:
    10px;

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

  color:
    #050505;
}


#configuracionPage .configuracion-sidebar-loading > span:last-child {
  color:
    #050505;

  font-size:
    8.5px;

  font-weight:
    750;
}


/* =========================================================
   DARK · COUNTER
   ========================================================= */

html[data-theme="dark"]
#configuracionPage
.configuracion-sidebar-counter,

body.dark
#configuracionPage
.configuracion-sidebar-counter {
  border-color:
    #33333a;

  background:
    #111114;

  color:
    #ffffff;
}


html[data-theme="dark"]
#configuracionPage
.configuracion-sidebar-counter strong,

html[data-theme="dark"]
#configuracionPage
.configuracion-sidebar-counter span,

body.dark
#configuracionPage
.configuracion-sidebar-counter strong,

body.dark
#configuracionPage
.configuracion-sidebar-counter span {
  color:
    #ffffff;
}


/* =========================================================
   DARK · MODULES
   ========================================================= */

html[data-theme="dark"]
#configuracionPage
.configuracion-sidebar-module,

body.dark
#configuracionPage
.configuracion-sidebar-module {
  border-color:
    #33333a;

  background:
    #111114;

  color:
    #ffffff;
}


html[data-theme="dark"]
#configuracionPage
.configuracion-sidebar-module:hover,

body.dark
#configuracionPage
.configuracion-sidebar-module:hover {
  border-color:
    #44444c;

  background:
    #151519;
}


html[data-theme="dark"]
#configuracionPage
.configuracion-sidebar-module__icon,

body.dark
#configuracionPage
.configuracion-sidebar-module__icon {
  border-color:
    #33333a;

  background:
    #0b0b0d;

  color:
    #ffffff;
}


html[data-theme="dark"]
#configuracionPage
.configuracion-sidebar-module__copy strong,

html[data-theme="dark"]
#configuracionPage
.configuracion-sidebar-module__copy small,

body.dark
#configuracionPage
.configuracion-sidebar-module__copy strong,

body.dark
#configuracionPage
.configuracion-sidebar-module__copy small {
  color:
    #ffffff;
}


html[data-theme="dark"]
#configuracionPage
.configuracion-sidebar-module:has(input:checked),

body.dark
#configuracionPage
.configuracion-sidebar-module:has(input:checked) {
  border-color:
    rgba(164, 149, 220, .44);

  background:
    rgba(164, 149, 220, .10);
}


html[data-theme="dark"]
#configuracionPage
.configuracion-sidebar-module:has(input:checked)
.configuracion-sidebar-module__icon,

body.dark
#configuracionPage
.configuracion-sidebar-module:has(input:checked)
.configuracion-sidebar-module__icon {
  border-color:
    rgba(164, 149, 220, .42);

  background:
    #151519;

  color:
    #c7baf2;
}


/* =========================================================
   DARK · ADMIN USER
   ========================================================= */

html[data-theme="dark"]
#configuracionPage
.configuracion-sidebar-admin-user,

body.dark
#configuracionPage
.configuracion-sidebar-admin-user {
  border-color:
    #33333a;

  background:
    #111114;
}


html[data-theme="dark"]
#configuracionPage
.configuracion-sidebar-admin-user__copy strong,

html[data-theme="dark"]
#configuracionPage
.configuracion-sidebar-admin-user__copy span,

body.dark
#configuracionPage
.configuracion-sidebar-admin-user__copy strong,

body.dark
#configuracionPage
.configuracion-sidebar-admin-user__copy span {
  color:
    #ffffff;
}


/* =========================================================
   DARK · EMPTY
   ========================================================= */

html[data-theme="dark"]
#configuracionPage
.configuracion-sidebar-empty,

body.dark
#configuracionPage
.configuracion-sidebar-empty {
  border-color:
    #44444c;

  background:
    #111114;
}


html[data-theme="dark"]
#configuracionPage
.configuracion-sidebar-empty__icon,

body.dark
#configuracionPage
.configuracion-sidebar-empty__icon {
  border-color:
    #33333a;

  background:
    #0b0b0d;

  color:
    #ffffff;
}


html[data-theme="dark"]
#configuracionPage
.configuracion-sidebar-empty strong,

html[data-theme="dark"]
#configuracionPage
.configuracion-sidebar-empty span,

body.dark
#configuracionPage
.configuracion-sidebar-empty strong,

body.dark
#configuracionPage
.configuracion-sidebar-empty span {
  color:
    #ffffff;
}


/* =========================================================
   DARK · LOADING
   ========================================================= */

html[data-theme="dark"]
#configuracionPage
.configuracion-sidebar-loading,

body.dark
#configuracionPage
.configuracion-sidebar-loading {
  border-color:
    #33333a;

  background:
    #111114;

  color:
    #ffffff;
}


html[data-theme="dark"]
#configuracionPage
.configuracion-sidebar-loading > span:last-child,

body.dark
#configuracionPage
.configuracion-sidebar-loading > span:last-child {
  color:
    #ffffff;
}


/* =========================================================
   RESPONSIVE ≤ 850
   ========================================================= */

@media (
  max-width: 850px
) {

  #configuracionPage .configuracion-sidebar-grid {
    grid-template-columns:
      1fr;
  }


  #configuracionPage .configuracion-sidebar-admin-toolbar
  .configuracion-field {
    max-width:
      none;
  }

}


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

@media (
  max-width: 520px
) {

  #configuracionPage .configuracion-sidebar-module {
    min-height:
      64px;

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

    gap:
      8px;

    padding:
      9px;
  }


  #configuracionPage .configuracion-sidebar-module__icon {
    width:
      31px;

    height:
      31px;
  }


  #configuracionPage .configuracion-sidebar-module__copy strong {
    font-size:
      9px;
  }


  #configuracionPage .configuracion-sidebar-module__copy small {
    font-size:
      7.2px;

    white-space:
      normal;
  }


  #configuracionPage .configuracion-sidebar-admin-user {
    align-items:
      flex-start;
  }


  #configuracionPage .configuracion-sidebar-counter {
    min-width:
      54px;

    min-height:
      34px;

    padding:
      6px 7px;
  }


  #configuracionPage .configuracion-sidebar-counter strong {
    font-size:
      13px;
  }

}


/* =========================================================
   RESPONSIVE ≤ 380
   ========================================================= */

@media (
  max-width: 380px
) {

  #configuracionPage .configuracion-sidebar-module {
    grid-template-columns:
      29px
      minmax(0, 1fr)
      auto;
  }


  #configuracionPage .configuracion-sidebar-module__icon {
    width:
      29px;

    height:
      29px;
  }


  #configuracionPage .configuracion-sidebar-module__copy small {
    display:
      none;
  }


  #configuracionPage .configuracion-sidebar-empty {
    grid-template-columns:
      31px
      minmax(0, 1fr);

    padding:
      10px;
  }


  #configuracionPage .configuracion-sidebar-empty__icon {
    width:
      31px;

    height:
      31px;
  }

}/* =========================================================
   CONFIGURACIÓN · FULL WIDTH / FULL HEIGHT
   DARK MODE NEGRO REAL
   AGREGAR AL FINAL
   ========================================================= */


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

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

  max-width:
    none !important;

  min-width:
    0 !important;

  min-height:
    100% !important;

  margin:
    0 !important;

  padding:
    10px 12px !important;

  overflow-x:
    clip !important;

  overflow-y:
    visible !important;
}


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

#configuracionPageMount {
  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
   ========================================================= */

#configuracionPage,
.configuracion-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
   ========================================================= */

#configuracionPage .configuracion-content {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;
}


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

#configuracionPage .configuracion-layout {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;
}


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

#configuracionPage .configuracion-main {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;
}


/* =========================================================
   SIDE
   ========================================================= */

#configuracionPage .configuracion-side {
  min-width:
    0 !important;
}


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

#configuracionPage .configuracion-card {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;
}


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

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

body.dark
#configuracionPage,

.dark
#configuracionPage {

  --cfg-bg:
    #000000;

  --cfg-surface:
    #050505;

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

  --cfg-surface-hover:
    #111111;

  --cfg-border:
    #242424;

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

  --cfg-text:
    #ffffff;

  --cfg-violet:
    #a495dc;

  --cfg-violet-soft:
    rgba(164, 149, 220, .10);

  background:
    #000000 !important;

  color:
    #ffffff !important;
}


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

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

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


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

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

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


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

html[data-theme="dark"]
#configuracionPage .configuracion-card,

html[data-theme="dark"]
#configuracionPage .configuracion-card__header,

html[data-theme="dark"]
#configuracionPage .configuracion-card__body,

html[data-theme="dark"]
#configuracionPage .configuracion-loading,

body.dark
#configuracionPage .configuracion-card,

body.dark
#configuracionPage .configuracion-card__header,

body.dark
#configuracionPage .configuracion-card__body,

body.dark
#configuracionPage .configuracion-loading {
  background:
    #050505 !important;

  border-color:
    #242424 !important;
}


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

html[data-theme="dark"]
#configuracionPage .configuracion-card__icon,

html[data-theme="dark"]
#configuracionPage .configuracion-field input,

html[data-theme="dark"]
#configuracionPage .configuracion-field select,

html[data-theme="dark"]
#configuracionPage .configuracion-number-control,

html[data-theme="dark"]
#configuracionPage .configuracion-theme-option,

html[data-theme="dark"]
#configuracionPage .configuracion-theme-option__icon,

html[data-theme="dark"]
#configuracionPage .configuracion-theme-option__check,

html[data-theme="dark"]
#configuracionPage .configuracion-switch,

html[data-theme="dark"]
#configuracionPage .configuracion-switch__icon,

html[data-theme="dark"]
#configuracionPage .configuracion-summary-item,

html[data-theme="dark"]
#configuracionPage .configuracion-summary-item__icon,

html[data-theme="dark"]
#configuracionPage .configuracion-help__icon,

html[data-theme="dark"]
#configuracionPage .configuracion-sidebar-counter,

html[data-theme="dark"]
#configuracionPage .configuracion-sidebar-module,

html[data-theme="dark"]
#configuracionPage .configuracion-sidebar-module__icon,

html[data-theme="dark"]
#configuracionPage .configuracion-sidebar-admin-user,

html[data-theme="dark"]
#configuracionPage .configuracion-sidebar-empty,

html[data-theme="dark"]
#configuracionPage .configuracion-sidebar-empty__icon,

html[data-theme="dark"]
#configuracionPage .configuracion-sidebar-loading,

body.dark
#configuracionPage .configuracion-card__icon,

body.dark
#configuracionPage .configuracion-field input,

body.dark
#configuracionPage .configuracion-field select,

body.dark
#configuracionPage .configuracion-number-control,

body.dark
#configuracionPage .configuracion-theme-option,

body.dark
#configuracionPage .configuracion-theme-option__icon,

body.dark
#configuracionPage .configuracion-theme-option__check,

body.dark
#configuracionPage .configuracion-switch,

body.dark
#configuracionPage .configuracion-switch__icon,

body.dark
#configuracionPage .configuracion-summary-item,

body.dark
#configuracionPage .configuracion-summary-item__icon,

body.dark
#configuracionPage .configuracion-help__icon,

body.dark
#configuracionPage .configuracion-sidebar-counter,

body.dark
#configuracionPage .configuracion-sidebar-module,

body.dark
#configuracionPage .configuracion-sidebar-module__icon,

body.dark
#configuracionPage .configuracion-sidebar-admin-user,

body.dark
#configuracionPage .configuracion-sidebar-empty,

body.dark
#configuracionPage .configuracion-sidebar-empty__icon,

body.dark
#configuracionPage .configuracion-sidebar-loading {
  background:
    #0a0a0a !important;

  border-color:
    #242424 !important;
}


/* =========================================================
   DARK · HOVERS
   ========================================================= */

html[data-theme="dark"]
#configuracionPage .configuracion-card:hover,

html[data-theme="dark"]
#configuracionPage .configuracion-theme-option:hover,

html[data-theme="dark"]
#configuracionPage .configuracion-switch:hover,

html[data-theme="dark"]
#configuracionPage .configuracion-summary-item:hover,

html[data-theme="dark"]
#configuracionPage .configuracion-sidebar-module:hover,

body.dark
#configuracionPage .configuracion-card:hover,

body.dark
#configuracionPage .configuracion-theme-option:hover,

body.dark
#configuracionPage .configuracion-switch:hover,

body.dark
#configuracionPage .configuracion-summary-item:hover,

body.dark
#configuracionPage .configuracion-sidebar-module:hover {
  background:
    #111111 !important;

  border-color:
    #3a3a3a !important;
}


/* =========================================================
   DARK · INPUT FOCUS
   ========================================================= */

html[data-theme="dark"]
#configuracionPage .configuracion-field input:focus,

html[data-theme="dark"]
#configuracionPage .configuracion-field select:focus,

html[data-theme="dark"]
#configuracionPage .configuracion-number-control:focus-within,

body.dark
#configuracionPage .configuracion-field input:focus,

body.dark
#configuracionPage .configuracion-field select:focus,

body.dark
#configuracionPage .configuracion-number-control:focus-within {
  background:
    #111111 !important;

  border-color:
    #484848 !important;
}


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

html[data-theme="dark"]
#configuracionPage .configuracion-page__overline,

html[data-theme="dark"]
#configuracionPage .configuracion-page__heading h1,

html[data-theme="dark"]
#configuracionPage .configuracion-page__heading p,

html[data-theme="dark"]
#configuracionPage .configuracion-card,

html[data-theme="dark"]
#configuracionPage .configuracion-card__header,

html[data-theme="dark"]
#configuracionPage .configuracion-card__title > div:last-child > span,

html[data-theme="dark"]
#configuracionPage .configuracion-card__title h2,

html[data-theme="dark"]
#configuracionPage .configuracion-card__title p,

html[data-theme="dark"]
#configuracionPage .configuracion-card__icon,

html[data-theme="dark"]
#configuracionPage .configuracion-field__label,

html[data-theme="dark"]
#configuracionPage .configuracion-field__label > span,

html[data-theme="dark"]
#configuracionPage .configuracion-field input,

html[data-theme="dark"]
#configuracionPage .configuracion-field select,

html[data-theme="dark"]
#configuracionPage .configuracion-field > small,

html[data-theme="dark"]
#configuracionPage .configuracion-number-control > span,

html[data-theme="dark"]
#configuracionPage .configuracion-theme-option,

html[data-theme="dark"]
#configuracionPage .configuracion-theme-option__copy strong,

html[data-theme="dark"]
#configuracionPage .configuracion-theme-option__copy small,

html[data-theme="dark"]
#configuracionPage .configuracion-switch,

html[data-theme="dark"]
#configuracionPage .configuracion-switch__content strong,

html[data-theme="dark"]
#configuracionPage .configuracion-switch__content small,

html[data-theme="dark"]
#configuracionPage .configuracion-summary-item,

html[data-theme="dark"]
#configuracionPage .configuracion-summary-item__copy span,

html[data-theme="dark"]
#configuracionPage .configuracion-summary-item__copy strong,

html[data-theme="dark"]
#configuracionPage .configuracion-help__content > strong,

html[data-theme="dark"]
#configuracionPage .configuracion-help__content > p,

html[data-theme="dark"]
#configuracionPage .configuracion-help__items span,

html[data-theme="dark"]
#configuracionPage .configuracion-sidebar-counter,

html[data-theme="dark"]
#configuracionPage .configuracion-sidebar-counter strong,

html[data-theme="dark"]
#configuracionPage .configuracion-sidebar-counter span,

html[data-theme="dark"]
#configuracionPage .configuracion-sidebar-module,

html[data-theme="dark"]
#configuracionPage .configuracion-sidebar-module__copy strong,

html[data-theme="dark"]
#configuracionPage .configuracion-sidebar-module__copy small,

html[data-theme="dark"]
#configuracionPage .configuracion-sidebar-admin-user__copy strong,

html[data-theme="dark"]
#configuracionPage .configuracion-sidebar-admin-user__copy span,

html[data-theme="dark"]
#configuracionPage .configuracion-sidebar-empty strong,

html[data-theme="dark"]
#configuracionPage .configuracion-sidebar-empty span,

html[data-theme="dark"]
#configuracionPage .configuracion-sidebar-loading,

body.dark
#configuracionPage .configuracion-page__overline,

body.dark
#configuracionPage .configuracion-page__heading h1,

body.dark
#configuracionPage .configuracion-page__heading p,

body.dark
#configuracionPage .configuracion-card,

body.dark
#configuracionPage .configuracion-card__header,

body.dark
#configuracionPage .configuracion-card__title > div:last-child > span,

body.dark
#configuracionPage .configuracion-card__title h2,

body.dark
#configuracionPage .configuracion-card__title p,

body.dark
#configuracionPage .configuracion-card__icon,

body.dark
#configuracionPage .configuracion-field__label,

body.dark
#configuracionPage .configuracion-field__label > span,

body.dark
#configuracionPage .configuracion-field input,

body.dark
#configuracionPage .configuracion-field select,

body.dark
#configuracionPage .configuracion-field > small,

body.dark
#configuracionPage .configuracion-number-control > span,

body.dark
#configuracionPage .configuracion-theme-option,

body.dark
#configuracionPage .configuracion-theme-option__copy strong,

body.dark
#configuracionPage .configuracion-theme-option__copy small,

body.dark
#configuracionPage .configuracion-switch,

body.dark
#configuracionPage .configuracion-switch__content strong,

body.dark
#configuracionPage .configuracion-switch__content small,

body.dark
#configuracionPage .configuracion-summary-item,

body.dark
#configuracionPage .configuracion-summary-item__copy span,

body.dark
#configuracionPage .configuracion-summary-item__copy strong,

body.dark
#configuracionPage .configuracion-help__content > strong,

body.dark
#configuracionPage .configuracion-help__content > p,

body.dark
#configuracionPage .configuracion-help__items span,

body.dark
#configuracionPage .configuracion-sidebar-counter,

body.dark
#configuracionPage .configuracion-sidebar-counter strong,

body.dark
#configuracionPage .configuracion-sidebar-counter span,

body.dark
#configuracionPage .configuracion-sidebar-module,

body.dark
#configuracionPage .configuracion-sidebar-module__copy strong,

body.dark
#configuracionPage .configuracion-sidebar-module__copy small,

body.dark
#configuracionPage .configuracion-sidebar-admin-user__copy strong,

body.dark
#configuracionPage .configuracion-sidebar-admin-user__copy span,

body.dark
#configuracionPage .configuracion-sidebar-empty strong,

body.dark
#configuracionPage .configuracion-sidebar-empty span,

body.dark
#configuracionPage .configuracion-sidebar-loading {
  color:
    #ffffff !important;
}


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

html[data-theme="dark"]
#configuracionPage .configuracion-btn--secondary,

body.dark
#configuracionPage .configuracion-btn--secondary {
  background:
    #0a0a0a !important;

  border-color:
    #242424 !important;

  color:
    #ffffff !important;
}


html[data-theme="dark"]
#configuracionPage .configuracion-btn--secondary:hover:not(:disabled),

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

  border-color:
    #3a3a3a !important;
}


/* =========================================================
   DARK · THEME ACTIVE
   ========================================================= */

html[data-theme="dark"]
#configuracionPage .configuracion-theme-option.is-active,

body.dark
#configuracionPage .configuracion-theme-option.is-active {
  border-color:
    rgba(164, 149, 220, .48) !important;

  background:
    rgba(164, 149, 220, .10) !important;
}


/* =========================================================
   DARK · SIDEBAR MODULE ACTIVE
   ========================================================= */

html[data-theme="dark"]
#configuracionPage
.configuracion-sidebar-module:has(input:checked),

body.dark
#configuracionPage
.configuracion-sidebar-module:has(input:checked) {
  border-color:
    rgba(164, 149, 220, .48) !important;

  background:
    rgba(164, 149, 220, .10) !important;
}


html[data-theme="dark"]
#configuracionPage
.configuracion-sidebar-module:has(input:checked)
.configuracion-sidebar-module__icon,

body.dark
#configuracionPage
.configuracion-sidebar-module:has(input:checked)
.configuracion-sidebar-module__icon {
  background:
    #111111 !important;

  border-color:
    rgba(164, 149, 220, .45) !important;

  color:
    #d3c8f5 !important;
}


/* =========================================================
   DARK · HELP
   ========================================================= */

html[data-theme="dark"]
#configuracionPage .configuracion-help,

body.dark
#configuracionPage .configuracion-help {
  background:
    #050505 !important;
}


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

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

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

  border-color:
    #333333 !important;

  color:
    #ffffff !important;
}


/* =========================================================
   DARK · SPINNER
   ========================================================= */

html[data-theme="dark"]
#configuracionPage .configuracion-spinner,

body.dark
#configuracionPage .configuracion-spinner {
  border-color:
    #333333 !important;

  border-top-color:
    #ffffff !important;
}


/* =========================================================
   DARK · GUARDADO
   ========================================================= */

html[data-theme="dark"]
#configuracionPage .configuracion-changes--saved,

body.dark
#configuracionPage .configuracion-changes--saved {
  border-color:
    #28523a !important;

  background:
    #07160e !important;

  color:
    #9ee4b9 !important;
}


/* =========================================================
   DARK · PENDIENTE
   ========================================================= */

html[data-theme="dark"]
#configuracionPage .configuracion-changes--pending,

body.dark
#configuracionPage .configuracion-changes--pending {
  border-color:
    #59430e !important;

  background:
    #171004 !important;

  color:
    #f0c36c !important;
}


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

@media (
  max-width: 900px
) {

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


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

    padding:
      0 !important;
  }

}


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

@media (
  max-width: 620px
) {

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


  #configuracionPage,
  .configuracion-page {
    min-height:
      auto !important;

    padding:
      0 !important;
  }

}