/* Componentes reutilizables. Prefijo c-, estados is-/has-. BEM: bloque__elemento--modificador */

/* Botones */
.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  background: var(--c-azulejo);
  color: var(--c-on-azulejo);
  font-weight: 700;
  font-size: var(--t-md);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}

.c-button:hover {
  background: var(--c-azulejo-strong);
  color: var(--c-on-azulejo);
}

.c-button:active {
  transform: translateY(1px);
}

.c-button[disabled],
.c-button[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

.c-button--secondary {
  background: var(--c-paper);
  color: var(--c-ink);
  border-color: var(--c-rule-strong);
}

.c-button--secondary:hover {
  background: var(--c-cal);
  color: var(--c-ink);
}

.c-button--quiet {
  background: none;
  color: var(--c-azulejo);
  padding-inline: var(--s-3);
}

.c-button--quiet:hover {
  background: var(--c-azulejo-wash);
  color: var(--c-azulejo-strong);
}

.c-button--danger {
  background: var(--c-error);
  color: #fff;
}

.c-button--danger:hover {
  background: var(--c-error);
  filter: brightness(0.92);
  color: #fff;
}

/* Abre una acción delicada (eliminar, desactivar): rojo sin rellenar; la confirmación
   final, ya con .c-button--danger. */
.c-button--danger-outline {
  background: var(--c-paper);
  color: var(--c-error);
  border-color: color-mix(in srgb, var(--c-error) 40%, var(--c-rule));
}

.c-button--danger-outline:hover {
  background: var(--c-error-wash);
  color: var(--c-error);
}

.c-button--block {
  width: 100%;
}

.c-button--small {
  min-height: 2.25rem;
  padding-inline: var(--s-3);
  font-size: var(--t-sm);
}

/* Campos */
.c-field {
  display: grid;
  gap: var(--s-1);
}

.c-field__label {
  font-weight: 650;
  font-size: var(--t-sm);
}

.c-field__hint {
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}

.c-field__error {
  font-size: var(--t-sm);
  color: var(--c-error);
}

.c-input,
.c-select,
.c-textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--radius-m);
  background: var(--c-paper);
  color: var(--c-ink);
}

.c-textarea {
  min-height: 5.5rem;
  resize: vertical;
}

.c-input:focus,
.c-select:focus,
.c-textarea:focus {
  outline: 3px solid var(--c-azulejo-wash);
  border-color: var(--c-azulejo);
}

.c-input[aria-invalid='true'] {
  border-color: var(--c-error);
}

/* Control segmentado (Email / Enlace) */
.c-segmented {
  display: inline-grid;
  grid-auto-flow: column;
  padding: 3px;
  border-radius: var(--radius-m);
  background: var(--c-cal);
  border: 1px solid var(--c-rule);
}

.c-segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.c-segmented label {
  white-space: nowrap;
  padding: var(--s-1) var(--s-4);
  border-radius: calc(var(--radius-m) - 3px);
  font-weight: 650;
  font-size: var(--t-sm);
  cursor: pointer;
  color: var(--c-ink-soft);
}

.c-segmented input:checked + label {
  background: var(--c-paper);
  color: var(--c-ink);
  box-shadow: 0 1px 2px rgb(20 27 52 / 0.15);
}

.c-segmented input:focus-visible + label {
  outline: 3px solid var(--c-focus);
}

/* Lista de emails en "chips" */
.c-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  align-items: center;
  min-height: 2.75rem;
  padding: var(--s-1) var(--s-2);
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  cursor: text;
}

.c-chips:focus-within {
  border-color: var(--c-azulejo);
}

.c-chips__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  max-width: 100%;
  padding: 2px 4px 2px 10px;
  border-radius: 999px;
  background: var(--c-azulejo-wash);
  color: var(--c-azulejo-strong);
  font-size: var(--t-sm);
  font-weight: 600;
}

.c-chips__chip.is-invalid {
  background: var(--c-error-wash);
  color: var(--c-error);
}

.c-chips__chip button {
  width: 1.4rem;
  height: 1.4rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  line-height: 1;
}

.c-chips__chip button:hover {
  background: rgb(36 67 182 / 0.15);
}

.c-chips input {
  flex: 1 1 10rem;
  min-width: 8rem;
  border: 0;
  padding: var(--s-1);
  background: none;
  outline: none;
}

/* Avisos (flash, errores de formulario) */
.c-notice {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-m);
  border: 1px solid var(--c-rule);
  background: var(--c-paper);
}

.c-notice--success {
  border-color: transparent;
  background: var(--c-ok-wash);
  color: var(--c-ok);
}

.c-notice--error {
  border-color: transparent;
  background: var(--c-error-wash);
  color: var(--c-error);
}

.c-notice--info {
  border-color: transparent;
  background: var(--c-albero-wash);
}

/* Etiquetas de estado: pastilla con un punto del color del estado. */
.c-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 10px;
  border: 1px solid var(--c-rule);
  border-radius: 999px;
  background: var(--c-cal);
  color: var(--c-ink-soft);
  font-size: var(--t-xs);
  font-weight: 650;
  line-height: 1.6;
  white-space: nowrap;
}

.c-badge[class*='c-badge--']::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.c-badge--ready {
  background: var(--c-ok-wash);
  border-color: transparent;
  color: var(--c-ok);
}

.c-badge--expired,
.c-badge--deleted {
  color: var(--c-ink-soft);
}

.c-badge--blocked {
  background: var(--c-error-wash);
  border-color: transparent;
  color: var(--c-error);
}

.c-badge--uploading {
  background: var(--c-albero-wash);
  border-color: transparent;
  color: var(--c-ink);
}

/* Tablas: el marco lo pone .c-table-wrap (tarjeta con desplazamiento horizontal). */
.c-table-wrap {
  overflow-x: auto;
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sheet);
}

.c-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-sm);
}

.c-table th,
.c-table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-rule);
  text-align: left;
  vertical-align: middle;
}

.c-table th:first-child,
.c-table td:first-child {
  padding-left: var(--s-5);
}

.c-table th:last-child,
.c-table td:last-child {
  padding-right: var(--s-5);
}

.c-table th {
  padding-block: var(--s-2);
  background: var(--c-cal);
  color: var(--c-ink-soft);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.c-table tbody tr:last-child td {
  border-bottom: 0;
}

.c-table tbody tr:hover td {
  background: color-mix(in srgb, var(--c-cal) 55%, var(--c-paper));
}

.c-table .is-num {
  text-align: right;
  white-space: nowrap;
}

.c-table a {
  font-weight: 600;
  text-decoration: none;
}

.c-table a:hover {
  text-decoration: underline;
}

/* Tabla dentro de una tarjeta: sin un segundo marco. */
.c-sheet > .c-table-wrap,
.c-table-wrap--flush {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.c-sheet > .c-table-wrap:last-child {
  border-radius: 0 0 var(--radius-l) var(--radius-l);
}

/* Diálogo modal (<dialog> nativo: foco y Escape accesibles de serie) */
.c-dialog {
  width: min(28rem, calc(100vw - 2rem));
  padding: var(--s-6);
  border: 0;
  border-radius: var(--radius-l);
  background: var(--c-paper);
  color: var(--c-ink);
  box-shadow: var(--shadow-pop);
}

.c-dialog::backdrop {
  background: var(--c-overlay);
}

.c-dialog h2 {
  font-size: var(--t-xl);
  margin-bottom: var(--s-2);
}

/* Código de verificación de 6 dígitos */
.c-code-input {
  font-size: var(--t-2xl);
  font-weight: 800;
  letter-spacing: 0.45em;
  text-align: center;
  font-stretch: var(--stretch-wide);
}

/* Medidor de uso */
.c-meter {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--c-cal);
  border: 1px solid var(--c-rule);
  overflow: hidden;
}

.c-meter__fill {
  height: 100%;
  width: 0;
  background: var(--c-albero);
}

/* Estado vacío */
.c-empty {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  padding: var(--s-7) var(--s-5);
  border: 1px dashed var(--c-rule-strong);
  border-radius: var(--radius-l);
  background: var(--c-paper);
  color: var(--c-ink-soft);
  text-align: center;
}

.c-empty .c-button {
  margin-top: var(--s-2);
}

.c-sheet > .c-empty {
  border: 0;
  border-radius: 0;
  background: none;
}

/* Hoja de papel (descarga, factura, detalle) */
.c-sheet {
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sheet);
}

.c-sheet__section {
  padding: var(--s-5) var(--s-6);
}

.c-sheet__section + .c-sheet__section {
  border-top: 1px solid var(--c-rule);
}

/* Cabecera de tarjeta: título (y acciones) separados del contenido. */
.c-sheet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--c-rule);
}

.c-sheet__head h2 {
  font-size: var(--t-md);
  font-weight: 700;
}

.c-sheet__head p {
  color: var(--c-ink-soft);
  font-size: var(--t-sm);
}

/* Campo con botón de copiar */
.c-copy {
  display: flex;
  gap: var(--s-2);
}

.c-copy input {
  flex: 1;
  min-width: 0;
  font-size: var(--t-sm);
}

/* Datos en filas etiqueta/valor */
.c-facts {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) 1fr;
  gap: var(--s-2) var(--s-5);
  margin: 0;
}

.c-facts dt {
  color: var(--c-ink-soft);
  font-size: var(--t-sm);
  font-stretch: var(--stretch-condensed);
  font-weight: 600;
  padding-top: 0.1em;
}

.c-facts dd {
  margin: 0;
}

/* Pestañas de filtro: control segmentado sobre el contenido. */
.c-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: var(--s-4);
  padding: 3px;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-m);
  background: var(--c-paper);
}

.c-tabs a {
  padding: var(--s-1) var(--s-3);
  border-radius: calc(var(--radius-m) - 3px);
  color: var(--c-ink-soft);
  font-size: var(--t-sm);
  font-weight: 650;
  text-decoration: none;
}

.c-tabs a:hover {
  color: var(--c-ink);
}

.c-tabs a[aria-current='page'] {
  background: var(--c-azulejo-wash);
  color: var(--c-azulejo-strong);
}

/* Casilla o radio con su texto al lado (condiciones, motivos de denuncia…) */
.c-check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  cursor: pointer;
}

.c-check input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--c-azulejo);
}

/* Cita de texto aportado por otra persona (denuncias) */
.quote {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--c-albero);
  background: var(--c-cal);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  white-space: normal;
}

/* Control segmentado a todo el ancho (dos mitades iguales) */
.c-segmented--fill {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.c-segmented--fill label {
  text-align: center;
}

.c-button--large {
  min-height: 3.25rem;
  font-size: var(--t-lg);
}

/* Interruptor: <input type="checkbox" role="switch" class="c-switch"> */
.c-switch {
  appearance: none;
  flex: none;
  position: relative;
  width: 2.5rem;
  height: 1.5rem;
  margin: 0;
  border-radius: 999px;
  background: var(--c-rule-strong);
  cursor: pointer;
  transition: background var(--duration) var(--ease-out);
}

.c-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(1.5rem - 6px);
  height: calc(1.5rem - 6px);
  border-radius: 50%;
  background: var(--c-paper);
  box-shadow: 0 1px 2px rgb(20 27 52 / 0.3);
  transition: transform var(--duration) var(--ease-out);
}

.c-switch:checked {
  background: var(--c-azulejo);
}

.c-switch:checked::after {
  transform: translateX(1rem);
}

.c-switch:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.c-switch:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Marca de función de pago ("Pro") junto a una opción. Peso normal explícito: si no,
   hereda la negrita del nombre de la opción. */
.c-pro {
  display: inline-block;
  margin-left: var(--s-1);
  padding: 0 7px;
  border-radius: 999px;
  background: var(--c-pro);
  color: var(--c-on-pro);
  font-size: var(--t-xs);
  font-weight: 400;
  line-height: 1.6;
  vertical-align: 1px;
}

/* Indicadores (KPI): tarjetas con un dato grande. */
.c-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--s-4);
}

/* :where() = sin especificidad: el hueco de una .l-stack que la contenga sigue mandando. */
:where(.c-kpis) {
  margin: 0;
}

/* Seis indicadores: dos filas de tres en escritorio. */
@media (min-width: 56rem) {
  .c-kpis--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.c-kpi {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sheet);
}

.c-kpi__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-m);
  background: var(--c-azulejo-wash);
  color: var(--c-azulejo);
}

.c-kpi__label {
  color: var(--c-ink-soft);
  font-size: var(--t-sm);
  font-weight: 600;
}

.c-kpi__value {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.c-kpi__hint {
  grid-column: 1 / -1;
  color: var(--c-ink-soft);
  font-size: var(--t-xs);
}

.c-kpi .c-meter {
  grid-column: 1 / -1;
  margin-top: var(--s-1);
}

.c-kpi--alert .c-kpi__icon {
  background: var(--c-error-wash);
  color: var(--c-error);
}

@media (max-width: 30rem) {
  .c-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
  }

  .c-kpi {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--s-3) var(--s-4);
  }

  .c-kpi__icon {
    grid-row: auto;
    width: 2rem;
    height: 2rem;
    margin-bottom: var(--s-1);
  }

  .c-kpi__value {
    font-size: 1.35rem;
  }
}

/* Buscador: campo con la lupa dentro. */
.c-search {
  position: relative;
  flex: 1 1 18rem;
  min-width: 0;
}

.c-search svg {
  position: absolute;
  top: 50%;
  left: var(--s-3);
  color: var(--c-ink-soft);
  transform: translateY(-50%);
  pointer-events: none;
}

.c-search .c-input {
  padding-left: 2.5rem;
}

.c-kpis {
  padding: 0;
  list-style: none;
}

.c-kpi__value--small {
  font-size: var(--t-md);
  letter-spacing: 0;
}

/* Aviso con icono delante. */
.c-notice--icon {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* Tarjeta con una acción delicada (retirar, bloquear). */
.c-sheet--danger {
  border-color: color-mix(in srgb, var(--c-error) 30%, var(--c-rule));
}

.c-sheet--danger > .c-sheet__head h2 {
  color: var(--c-error);
}

.c-empty__icon {
  color: var(--c-ok);
}

/* Tabla apilada en móvil: cada fila, una ficha con «etiqueta: valor» (data-label en cada celda). */
@media (max-width: 40rem) {
  .c-table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .c-table--stack,
  .c-table--stack tbody,
  .c-table--stack tr,
  .c-table--stack td {
    display: block;
    width: 100%;
  }

  .c-table--stack tr {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--c-rule);
  }

  .c-table--stack tbody tr:last-child {
    border-bottom: 0;
  }

  .c-table--stack td,
  .c-table--stack td:first-child,
  .c-table--stack td:last-child,
  .c-table--stack td.is-num {
    padding: 2px 0;
    border: 0;
    text-align: left;
  }

  .c-table--stack tbody tr:hover td {
    background: none;
  }

  .c-table--stack td:first-child {
    margin-bottom: var(--s-1);
  }

  .c-table--stack td[data-label]::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 6.5rem;
    color: var(--c-ink-soft);
    font-size: var(--t-xs);
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

/* Paginación de un listado (al pie de su tarjeta). */
.c-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--c-rule);
  font-size: var(--t-sm);
}

.c-pagination__info {
  color: var(--c-ink-soft);
}

.c-pagination__pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-pagination__page,
.c-pagination__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--s-2);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-m);
  background: var(--c-paper);
  color: var(--c-ink);
  font-weight: 600;
  text-decoration: none;
}

.c-pagination__page:hover,
a.c-pagination__step:hover {
  border-color: var(--c-rule-strong);
  background: var(--c-cal);
  color: var(--c-ink);
}

.c-pagination__page[aria-current='page'] {
  border-color: var(--c-azulejo);
  background: var(--c-azulejo);
  color: var(--c-on-azulejo);
}

.c-pagination__step[aria-disabled='true'] {
  color: var(--c-ink-soft);
  opacity: 0.5;
}

.c-pagination__gap {
  padding: 0 var(--s-1);
  color: var(--c-ink-soft);
}

@media (max-width: 30rem) {
  /* En móvil, solo las flechas (el texto sigue ahí para lectores de pantalla). */
  .c-pagination__step span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

/* Paginación sola en su tarjeta (sin listado encima): sin línea superior. */
.c-sheet > .c-pagination:first-child {
  border-top: 0;
}

/* Desplegable propio sobre un <select> (lib/dropdown.js): un botón y su lista, que va
   fija (encima o debajo del botón) para que no la corte la tarjeta que lo contiene. */
.c-dropdown__button {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 2.75rem;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.c-dropdown__button:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.c-dropdown__button > svg {
  flex: none;
}

.c-dropdown__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-dropdown__chevron {
  color: var(--c-ink-soft);
  transition: transform var(--duration) var(--ease-out);
}

.c-dropdown__button[aria-expanded='true'] .c-dropdown__chevron {
  transform: rotate(180deg);
}

.c-dropdown__list {
  position: fixed;
  z-index: 50;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  margin: 0;
  padding: var(--s-2);
  list-style: none;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-l);
  background: var(--c-paper);
  color: var(--c-ink);
  box-shadow: 0 24px 60px -24px rgb(11 17 40 / 0.55);
  scrollbar-width: thin;
}

.c-dropdown__list:focus {
  outline: none;
}

.c-dropdown__option {
  display: flex;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-m);
  white-space: nowrap;
  cursor: pointer;
}

.c-dropdown__option.is-active {
  background: var(--c-cal);
}

.c-dropdown__option[aria-selected='true'] {
  color: var(--c-azulejo);
  font-weight: 650;
}

.c-dropdown__option[aria-disabled='true'] {
  color: var(--c-ink-soft);
  cursor: not-allowed;
}

.c-dropdown__check {
  flex: none;
  margin-left: auto;
  visibility: hidden;
}

.c-dropdown__option[aria-selected='true'] .c-dropdown__check {
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .c-dropdown__chevron {
    transition: none;
  }
}

/* Menú lateral de secciones (páginas legales, «Mi cuenta»): una lista con la página actual
   marcada en el borde. En móvil, las entradas de la lista (ul) pasan a ser pastillas. */
.c-sidenav__label {
  margin: 0 0 var(--s-2);
  color: var(--c-ink-soft);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.c-sidenav ul,
.c-sidenav ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-sidenav a {
  display: block;
  padding: var(--s-1) var(--s-3);
  border-left: 2px solid var(--c-rule);
  color: var(--c-ink-soft);
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  text-decoration: none;
}

.c-sidenav a:hover {
  color: var(--c-ink);
  border-left-color: var(--c-rule-strong);
}

.c-sidenav a[aria-current='page'] {
  border-left-color: var(--c-azulejo);
  color: var(--c-ink);
  font-weight: 600;
}

@media (max-width: 59.99rem) {
  .c-sidenav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  .c-sidenav ul a {
    border: 1px solid var(--c-rule);
    border-radius: 999px;
  }

  .c-sidenav ul a[aria-current='page'] {
    border-color: var(--c-azulejo);
    background: var(--c-azulejo-wash);
  }
}

/* ── Ajustes por bloques («Mi cuenta», como el panel de cuenta de MEGA) ─────────
   Un panel por página (.c-settings) con bloques (__block): el título y su explicación a la
   izquierda (30 %) y los ajustes a la derecha, en filas (__row) separadas por una línea;
   los bloques, también separados por una línea. Si el panel es estrecho, el título va
   encima. Una fila puede ser un <details> que despliega una confirmación (__panel); un
   bloque puede acabar con sus botones (__actions), a la derecha. */
.c-settings {
  container-type: inline-size;
  padding: 0 clamp(var(--s-4), 4vw, var(--s-6));
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-l);
  background: var(--c-paper);
  box-shadow: var(--shadow-sheet);
}

.c-settings__block {
  display: grid;
  gap: var(--s-4) var(--s-7);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--c-rule);
}

.c-settings__block:last-child {
  border-bottom: 0;
}

@container (min-width: 38rem) {
  .c-settings__block:not(.c-settings__block--wide) {
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  }
}

.c-settings__intro {
  display: grid;
  align-content: start;
  gap: var(--s-1);
}

.c-settings__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-md);
  font-weight: 750;
  line-height: var(--lh-snug);
}

.c-settings__intro > p {
  color: var(--c-ink-soft);
  font-size: var(--t-sm);
}

.c-settings__block--danger .c-settings__title {
  color: var(--c-error);
}

.c-settings__body {
  display: grid;
  align-content: start;
  min-width: 0;
}

/* Número de paso delante del título, cuando los bloques se siguen en orden. El título
   va en su propio <span> para que, si ocupa dos líneas, no baje debajo del número. */
.c-settings__title:has(> .c-settings__step) {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.c-settings__step {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--c-azulejo);
  color: var(--c-on-azulejo);
  font-size: var(--t-sm);
  font-weight: 800;
}

/* Un selector segmentado ocupa lo que sus opciones, no toda la columna. */
.c-settings__body > .c-segmented {
  justify-self: start;
}

.c-settings__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Paginación de una lista de filas: una fila más, separada por su línea. */
.c-settings__body > .c-pagination {
  margin-top: var(--s-3);
  padding-inline: 0;
  padding-bottom: 0;
}

/* Filas: nombre y explicación a la izquierda; el dato, el campo o el botón a la derecha. */
.c-settings__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-3);
}

.c-settings__row:first-child {
  padding-top: 0;
}

.c-settings__row:last-child {
  padding-bottom: 0;
}

.c-settings__row + .c-settings__row {
  border-top: 1px solid var(--c-rule);
}

.c-settings__text {
  display: grid;
  flex: 1 1 14rem;
  gap: 2px;
  min-width: 0;
}

.c-settings__name {
  font-weight: 650;
  line-height: var(--lh-snug);
}

.c-settings__hint {
  color: var(--c-ink-soft);
  font-size: var(--t-sm);
}

.c-settings__hint--alert {
  color: var(--c-error);
  font-weight: 600;
}

/* Un dato que no se edita aquí. */
.c-settings__value {
  font-weight: 600;
  text-align: end;
}

/* Fila de un campo: la etiqueta y su explicación, y el campo de un ancho razonable. */
.c-settings__row--field {
  align-items: flex-start;
}

.c-settings__row--field > .c-settings__text {
  flex: 1 1 9rem;
  max-width: 13rem;
  padding-top: var(--s-2);
}

.c-settings__control {
  flex: 1 1 14rem;
  min-width: 0;
}

.c-settings__control > .c-input,
.c-settings__control > .c-select {
  max-width: 22rem;
}

/* Con icono (un dispositivo): icono, texto y acción; si no cabe, la acción baja bajo el texto. */
.c-settings__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-m);
  background: var(--c-cal);
  color: var(--c-ink-soft);
}

.c-settings__row:has(> .c-settings__icon) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

@container (max-width: 30rem) {
  .c-settings__row:has(> .c-settings__icon) {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .c-settings__row:has(> .c-settings__icon) > :last-child:not(.c-settings__text) {
    grid-column: 2;
    justify-self: start;
  }
}

/* Fila que se despliega: toda ella es el botón; lo de dentro (__panel) es la confirmación. */
.c-settings__row--expand {
  display: block;
  padding-block: 0;
}

.c-settings__row--expand > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-3);
  list-style: none;
  cursor: pointer;
}

.c-settings__row--expand:first-child > summary {
  padding-top: 0;
}

.c-settings__row--expand:last-child:not([open]) > summary {
  padding-bottom: 0;
}

.c-settings__row--expand > summary::-webkit-details-marker {
  display: none;
}

.c-settings__row--expand > summary:hover .c-button--secondary {
  background: var(--c-cal);
}

.c-settings__row--expand > summary:hover .c-button--danger-outline {
  background: var(--c-error-wash);
}

.c-settings__row--expand:not([open]) .c-settings__when-open,
.c-settings__row--expand[open] .c-settings__when-closed {
  display: none;
}

.c-settings__panel {
  display: grid;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--radius-m);
  background: var(--c-cal);
}

.c-settings__row--expand:last-child .c-settings__panel {
  margin-bottom: 0;
}

/* Campo y botón en una línea (un código de confirmación, por ejemplo). */
.c-settings__inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.c-settings__inline > .c-input {
  flex: 1 1 12rem;
  max-width: 18rem;
}

/* Botones del bloque, a la derecha (como «Guardar cambios»). */
.c-settings__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2) var(--s-3);
  padding-top: var(--s-4);
}

.c-settings__body > .c-settings__actions:first-child {
  padding-top: 0;
}

/* Botones al final del panel, fuera de un bloque (un formulario de varios bloques). */
.c-settings__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-2) var(--s-3);
  padding-block: var(--s-5);
}

/* ── Uso del plan: el espacio y lo enviado frente a sus límites (como MEGA) ─────── */
.c-usage {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-4) var(--s-7);
  padding: var(--s-5) clamp(var(--s-4), 4vw, var(--s-6));
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-l);
  background: var(--c-paper);
  box-shadow: var(--shadow-sheet);
}

.c-usage__item {
  display: grid;
  flex: 1 1 13rem;
  gap: var(--s-2);
  min-width: 0;
}

.c-usage__label {
  color: var(--c-ink-soft);
  font-size: var(--t-sm);
  font-weight: 650;
}

.c-usage__value {
  font-size: var(--t-sm);
}

.c-usage__value strong {
  margin-right: var(--s-1);
  font-size: var(--t-lg);
  font-weight: 800;
}

.c-usage__action {
  flex: none;
  align-self: center;
  margin-left: auto;
}