/* ==========================================================================
   QUOMYA — AJUSTES V1
   Ola S4.8. Todo el archivo está acotado a `.qy-ajustes-screen`.

   Ni el motor de conceptos, ni el de objetivos, ni el de calendario, ni la
   persistencia se tocan. `settings.module.js` conserva sus manejadores, sus
   ids, sus `name` y sus `data-action`; aquí solo se reviste el marcado que ya
   emitía, más el nuevo armazón de columnas.

   `renderObjectivesSettingsSection()` es la MISMA función que renderiza la
   ruta dedicada de S4.6. Sus reglas viven duplicadas bajo
   `.qy-ajustes-objectives` a propósito: `qy-objetivos-v1.css` está acotado a
   `.qy-objetivos-screen` y no debe ampliarse, porque ampliarlo convertiría
   cualquier ajuste visual de Ajustes en un cambio de la pantalla Objetivos.
   Comportamiento compartido, revestimiento contextual.
   ========================================================================== */

.qy-ajustes-screen,
.qy-ajustes-screen * {
  box-sizing: border-box;
}

.qy-ajustes-screen {
  display: grid;
  gap: var(--qy-space-6);
  padding-block: var(--qy-space-6) var(--qy-space-4);
  color: var(--qy-color-text-primary);
  overflow: visible;
}

/* ---- armazón de columnas -------------------------------------------------
   Tres contenedores coherentes, nunca `order` sobre paneles sueltos: el orden
   del DOM (cuenta -> configuración -> secundarios) es ya el orden de lectura
   correcto en móvil, y en escritorio solo se reubican los tres bloques. */

.qy-ajustes-grid {
  display: grid;
  gap: var(--qy-space-6);
  align-content: start;
  min-width: 0;
}

.qy-ajustes-col {
  display: grid;
  gap: var(--qy-space-5);
  align-content: start;
  min-width: 0;
}

/*
 * El reparto en dos columnas no arranca en 1024 sino en 1280. La barra lateral
 * del armazón ya ocupa 280 px, así que a 1024 una columna lateral dejaba la
 * configuración real —conceptos y objetivos— en 294 px y la fila de concepto
 * colapsaba su celda de nombre a cero; a 1180 la fila medía 436 px y seguía sin
 * caber la rejilla de cuatro columnas, que necesita 504 px. A 1280 mide 536 px.
 * Umbral medido, no supuesto.
 */
@media (min-width: 1280px) {
  /*
   * `grid-template-rows: min-content 1fr` es obligatorio: la columna de
   * configuración ocupa las dos filas y, con filas implícitas, el algoritmo
   * repartía su altura entre ambas y abría un hueco enorme bajo la tarjeta de
   * cuenta. Fijando la primera fila a `min-content`, la segunda absorbe el
   * excedente y los accesos secundarios suben a donde deben.
   */
  .qy-ajustes-grid {
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    grid-template-rows: min-content 1fr;
    align-items: start;
    align-content: start;
  }

  .qy-ajustes-col--account {
    grid-column: 1;
    grid-row: 1;
  }

  .qy-ajustes-col--main {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .qy-ajustes-col--aside {
    grid-column: 1;
    grid-row: 2;
  }
}

/* ---- superficie común de panel ------------------------------------------
   `.settings-panel` es un <details> real: se conserva el plegado, que es la
   afordancia que la pantalla ya tenía, y se le da el cuerpo de tarjeta de
   Stitch. `styles.css` y `compact-visual-v15-14-2.css` lo pintan en claro con
   literales, así que se sobreescribe con la misma prioridad y tokens S4.1. */

.qy-ajustes-screen .settings-panel,
.qy-ajustes-screen > .qy-ajustes-grid .card:not(.settings-inner-card) {
  border: 1px solid var(--qy-color-border-strong) !important;
  border-radius: var(--qy-radius-xl) !important;
  background: var(--qy-color-surface-1) !important;
  box-shadow: var(--qy-elevation-card) !important;
}

.qy-ajustes-screen .settings-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qy-space-3);
  min-height: var(--qy-touch-min);
  padding: var(--qy-space-4) var(--qy-space-5);
  color: var(--qy-color-text-primary) !important;
  font: var(--qy-text-headline-md);
  background: transparent !important;
  cursor: pointer;
}

.qy-ajustes-screen .settings-panel > summary::-webkit-details-marker {
  display: none;
}

/*
 * Marcador propio: el triángulo nativo no es coloreable de forma fiable en
 * todos los motores y se perdía sobre el fondo oscuro. Es decorativo -- el
 * estado abierto/cerrado lo comunica el propio <details> a la API de
 * accesibilidad, no este glifo.
 */
.qy-ajustes-screen .settings-panel > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--qy-color-text-tertiary);
  border-bottom: 2px solid var(--qy-color-text-tertiary);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--qy-motion-fast) var(--qy-motion-ease);
}

.qy-ajustes-screen .settings-panel[open] > summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  .qy-ajustes-screen .settings-panel > summary::after {
    transition: none;
  }
}

.qy-ajustes-screen .settings-panel > summary:focus-visible {
  outline: none;
  box-shadow: var(--qy-focus-ring);
}

/* ---- tarjetas internas ---------------------------------------------------
   Dentro de un panel ya hay una superficie; la tarjeta interna se aplana para
   no encadenar tres bordes concéntricos. */

.qy-ajustes-screen .settings-inner-card {
  margin: 0;
  padding: 0 var(--qy-space-5) var(--qy-space-5);
  color: var(--qy-color-text-primary);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.qy-ajustes-screen .settings-inner-card + .settings-inner-card {
  padding-top: var(--qy-space-5);
  border-top: 1px solid var(--qy-color-border) !important;
}

.qy-ajustes-screen .settings-inner-card h3 {
  margin: 0 0 var(--qy-space-2);
  color: var(--qy-color-text-primary) !important;
  font: var(--qy-text-headline-md);
}

.qy-ajustes-screen .settings-inner-card > p,
.qy-ajustes-screen .settings-help-copy,
.qy-ajustes-screen .concept-visibility-help {
  margin: 0 0 var(--qy-space-4);
  color: var(--qy-color-text-secondary) !important;
  font: var(--qy-text-body-md);
}

.qy-ajustes-screen .concept-visibility-help {
  margin: calc(var(--qy-space-2) * -1) 0 0;
  padding-inline: var(--qy-space-3);
  font: var(--qy-text-label-md);
}

/* ---- cuenta --------------------------------------------------------------
   El correo, el plan y el rol son los del usuario real (`appState.currentUser`).
   La referencia de Stitch añade avatar, nombre comercial y cambio de
   contraseña en línea: ninguno existe en el código, y ninguno se dibuja. */

/*
 * `.account-card-simple` viene de `styles.css` como fila flexible. En una
 * columna de 340 px eso partía el correo por la mitad de una palabra para
 * dejar sitio a los botones. Aquí se apila: identidad arriba, acciones abajo.
 */
.qy-ajustes-screen .qy-ajustes-account {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--qy-space-4);
  padding: var(--qy-space-5);
}

.qy-ajustes-screen .qy-ajustes-account h3 {
  margin: 0 0 var(--qy-space-1);
  color: var(--qy-color-text-primary) !important;
  font: var(--qy-text-headline-md);
}

.qy-ajustes-screen .qy-ajustes-account p {
  margin: 0 0 var(--qy-space-1);
  color: var(--qy-color-text-primary) !important;
  font: var(--qy-text-body-lg);
  overflow-wrap: anywhere;
}

.qy-ajustes-screen .qy-ajustes-account span {
  display: block;
  color: var(--qy-color-text-secondary) !important;
  font: var(--qy-text-body-md);
}

.qy-ajustes-screen .account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qy-space-2);
}

.qy-ajustes-screen .account-actions button {
  flex: 1 1 auto;
}

/* ---- admin ---------------------------------------------------------------
   Panel real y ya condicionado a `currentUser.isAdmin`. Se distingue por
   etiqueta y borde, no solo por color. */

.qy-ajustes-screen .qy-ajustes-admin {
  border-color: var(--qy-color-border-interactive) !important;
}

.qy-ajustes-screen .admin-button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qy-space-2);
}

/* ---- conceptos: cabecera de columnas -------------------------------------
   Decorativa (`aria-hidden`): cada fila ya enuncia su tipo, su valor y su
   estado en texto, así que la cabecera no aporta información nueva a quien
   navega con lector de pantalla y sí ruido. Solo aparece donde hay anchura
   suficiente para que las columnas se alineen de verdad. */

.qy-ajustes-screen .qy-concept-table-head {
  display: none;
}

.qy-ajustes-screen .list {
  display: grid;
  gap: var(--qy-space-2);
}

/* ---- conceptos: fila ------------------------------------------------------ */

.qy-ajustes-screen .concept-accordion {
  min-width: 0;
  border: 1px solid var(--qy-color-border) !important;
  border-radius: var(--qy-radius-lg) !important;
  background: var(--qy-color-surface-2) !important;
  box-shadow: none !important;
}

.qy-ajustes-screen .concept-accordion > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--qy-space-2) var(--qy-space-4);
  min-height: var(--qy-touch-min);
  padding: var(--qy-space-3) var(--qy-space-4);
  background: transparent !important;
  cursor: pointer;
}

.qy-ajustes-screen .concept-accordion > summary::-webkit-details-marker {
  display: none;
}

.qy-ajustes-screen .concept-accordion > summary:focus-visible {
  outline: none;
  box-shadow: var(--qy-focus-ring);
}

.qy-ajustes-screen .concept-accordion__ident {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.qy-ajustes-screen .concept-accordion__ident strong {
  color: var(--qy-color-text-primary) !important;
  font: var(--qy-text-body-lg);
  overflow-wrap: anywhere;
}

.qy-ajustes-screen .concept-accordion__ident small {
  color: var(--qy-color-text-tertiary) !important;
  font: var(--qy-text-label-md);
  letter-spacing: var(--qy-tracking-label);
  text-transform: uppercase;
}

.qy-ajustes-screen .concept-accordion__type {
  justify-self: start;
  padding: 2px var(--qy-space-2);
  color: var(--qy-color-text-secondary) !important;
  font: var(--qy-text-label-md);
  white-space: nowrap;
  background: var(--qy-color-surface-3);
  border-radius: var(--qy-radius-pill);
}

.qy-ajustes-screen .concept-accordion__value {
  color: var(--qy-color-brand-text) !important;
  font: var(--qy-text-financial);
  font-variant-numeric: var(--qy-font-numeric);
  white-space: nowrap;
}

.qy-ajustes-screen .concept-accordion > summary em {
  justify-self: end;
  padding: 2px var(--qy-space-2);
  color: var(--qy-color-text-secondary) !important;
  font: var(--qy-text-label-md);
  font-style: normal;
  white-space: nowrap;
  background: var(--qy-color-surface-3) !important;
  border: 1px solid var(--qy-color-border-strong);
  border-radius: var(--qy-radius-pill);
}

.qy-ajustes-screen .concept-config-form {
  display: grid;
  gap: var(--qy-space-4);
  padding: 0 var(--qy-space-4) var(--qy-space-4);
  border-top: 1px solid var(--qy-color-border);
  padding-top: var(--qy-space-4);
}

/*
 * La cabecera y las filas comparten UNA sola declaración de columnas para que
 * no puedan desalinearse: pistas fijas, no `auto`, porque el contenido de la
 * cabecera ("Tipo", "Valor") es más estrecho que el de las filas y con `auto`
 * cada rejilla habría medido lo suyo.
 *
 * El reparto en cuatro columnas exige 492 px de fila; se activa a partir de
 * 640 px de ventana, que es donde la fila mide ~566 px. Por debajo la fila se
 * apila, que es el comportamiento correcto en móvil.
 */
.qy-ajustes-screen .qy-ajustes-concepts {
  --qy-concept-cols: minmax(120px, 1fr) 104px 112px 120px;
}

@media (min-width: 640px) {
  .qy-ajustes-screen .qy-concept-table-head {
    display: grid;
    grid-template-columns: var(--qy-concept-cols);
    gap: var(--qy-space-4);
    padding: 0 var(--qy-space-4) var(--qy-space-2);
    color: var(--qy-color-text-tertiary);
    font: var(--qy-text-label-md);
    letter-spacing: var(--qy-tracking-label);
    text-transform: uppercase;
  }

  .qy-ajustes-screen .qy-concept-table-head span:nth-child(3) {
    text-align: right;
  }

  .qy-ajustes-screen .concept-accordion > summary {
    grid-template-columns: var(--qy-concept-cols);
  }

  .qy-ajustes-screen .concept-accordion__value {
    justify-self: end;
  }

  .qy-ajustes-screen .concept-accordion > summary em {
    justify-self: start;
  }
}

/* ---- formularios ---------------------------------------------------------
   Mismos campos reales; solo cambia su piel. */

.qy-ajustes-screen .form-grid {
  display: grid;
  gap: var(--qy-space-4);
}

.qy-ajustes-screen .grid-2 {
  display: grid;
  gap: var(--qy-space-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
  .qy-ajustes-screen .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.qy-ajustes-screen .form-field {
  display: grid;
  gap: var(--qy-space-1);
  min-width: 0;
}

.qy-ajustes-screen .form-field label {
  color: var(--qy-color-text-secondary) !important;
  font: var(--qy-text-label-md);
  background: transparent !important;
}

.qy-ajustes-screen .form-field input,
.qy-ajustes-screen .form-field select,
.qy-ajustes-screen .form-field textarea {
  min-height: var(--qy-touch-min);
  padding: 0 var(--qy-space-3);
  color: var(--qy-color-text-primary) !important;
  font: var(--qy-text-body-md);
  background: var(--qy-color-surface-1) !important;
  border: 1px solid var(--qy-color-border-interactive) !important;
  border-radius: var(--qy-radius-md) !important;
}

.qy-ajustes-screen .form-field input[type="number"] {
  font-variant-numeric: var(--qy-font-numeric);
}

.qy-ajustes-screen .form-field input::placeholder,
.qy-ajustes-screen .form-field textarea::placeholder {
  color: var(--qy-color-text-tertiary) !important;
}

.qy-ajustes-screen .form-field input:focus,
.qy-ajustes-screen .form-field select:focus,
.qy-ajustes-screen .form-field textarea:focus {
  border-color: var(--qy-color-brand) !important;
  outline: none !important;
  box-shadow: var(--qy-focus-ring) !important;
}

/*
 * Un campo deshabilitado sigue siendo información: el valor de un concepto
 * `manual` no se edita porque la comisión la escribe la venta. Se mantiene
 * legible en lugar de desvanecerlo por debajo del contraste mínimo.
 * `--qy-color-disabled-text` sobre `surface-3` mide 2,46:1 y se descartó; el
 * tono terciario da 4,52:1 y el campo sigue leyéndose como inactivo por su
 * relleno, su cursor y el propio atributo `disabled`, nunca solo por color.
 */
.qy-ajustes-screen .form-field input:disabled,
.qy-ajustes-screen .form-field select:disabled {
  color: var(--qy-color-text-tertiary) !important;
  background: var(--qy-color-surface-3) !important;
  border-color: var(--qy-color-border) !important;
  cursor: not-allowed;
}

/* ---- casillas ------------------------------------------------------------
   `compact-visual-v15-14-2.css` deja `.check-row` en 40 px; la etiqueta es el
   objetivo táctil real de una casilla de 18 px, así que sube al mínimo. */

.qy-ajustes-screen .check-row {
  display: flex;
  align-items: center;
  gap: var(--qy-space-3);
  min-height: var(--qy-touch-min);
  padding: var(--qy-space-2) var(--qy-space-3);
  color: var(--qy-color-text-primary) !important;
  font: var(--qy-text-body-md);
  background: var(--qy-color-surface-1) !important;
  border: 1px solid var(--qy-color-border) !important;
  border-radius: var(--qy-radius-md);
  cursor: pointer;
}

.qy-ajustes-screen .check-row input[type="checkbox"],
.qy-ajustes-screen .subconcept-check-item input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--qy-color-brand);
}

.qy-ajustes-screen .check-row:focus-within {
  border-color: var(--qy-color-brand) !important;
  box-shadow: var(--qy-focus-ring);
}

.qy-ajustes-screen .composite-config-box {
  display: grid;
  gap: var(--qy-space-2);
  padding: var(--qy-space-4);
  color: var(--qy-color-text-primary) !important;
  background: var(--qy-color-surface-1) !important;
  border: 1px solid var(--qy-color-border) !important;
  border-radius: var(--qy-radius-lg) !important;
}

.qy-ajustes-screen .composite-config-box > strong {
  color: var(--qy-color-text-primary) !important;
  font: var(--qy-text-body-lg);
}

.qy-ajustes-screen .composite-config-box > span {
  color: var(--qy-color-text-secondary) !important;
  font: var(--qy-text-body-md);
}

.qy-ajustes-screen .subconcept-check-grid {
  display: grid;
  gap: var(--qy-space-2);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .qy-ajustes-screen .subconcept-check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.qy-ajustes-screen .subconcept-check-item {
  display: flex;
  align-items: center;
  gap: var(--qy-space-3);
  min-height: var(--qy-touch-min);
  padding: var(--qy-space-2) var(--qy-space-3);
  background: var(--qy-color-surface-2) !important;
  border: 1px solid var(--qy-color-border) !important;
  border-radius: var(--qy-radius-md);
  cursor: pointer;
}

.qy-ajustes-screen .subconcept-check-item:focus-within {
  border-color: var(--qy-color-brand) !important;
  box-shadow: var(--qy-focus-ring);
}

.qy-ajustes-screen .subconcept-check-item strong {
  display: block;
  color: var(--qy-color-text-primary) !important;
  font: var(--qy-text-body-md);
  overflow-wrap: anywhere;
}

.qy-ajustes-screen .subconcept-check-item small {
  color: var(--qy-color-text-secondary) !important;
  font: var(--qy-text-label-md);
}

/* ---- botones -------------------------------------------------------------
   La acción destructiva conserva su confirmación (`window.confirm` en
   `handleDeleteConcept`) y NO se presenta como acción primaria: fondo suave,
   nunca relleno de marca. */

.qy-ajustes-screen .action-row,
.qy-ajustes-screen .concept-action-grid,
.qy-ajustes-screen .objective-action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qy-space-2);
}

.qy-ajustes-screen .primary-btn,
.qy-ajustes-screen .secondary-btn,
.qy-ajustes-screen .danger-btn {
  min-height: var(--qy-touch-min);
  padding: 0 var(--qy-space-4);
  font: var(--qy-text-body-md);
  border-radius: var(--qy-radius-md) !important;
  cursor: pointer;
}

.qy-ajustes-screen .primary-btn {
  color: var(--qy-color-text-on-brand) !important;
  background: var(--qy-color-brand) !important;
  border: 1px solid var(--qy-color-brand) !important;
}

.qy-ajustes-screen .primary-btn:hover {
  background: var(--qy-color-brand-hover) !important;
  border-color: var(--qy-color-brand-hover) !important;
}

.qy-ajustes-screen .secondary-btn {
  color: var(--qy-color-text-primary) !important;
  background: var(--qy-color-surface-3) !important;
  border: 1px solid var(--qy-color-border-interactive) !important;
}

.qy-ajustes-screen .secondary-btn:hover {
  background: var(--qy-color-hover) !important;
}

.qy-ajustes-screen .danger-btn {
  color: var(--qy-color-cancelled-text) !important;
  background: var(--qy-color-cancelled-soft) !important;
  border: 1px solid var(--qy-color-cancelled) !important;
}

.qy-ajustes-screen .primary-btn:focus-visible,
.qy-ajustes-screen .secondary-btn:focus-visible,
.qy-ajustes-screen .danger-btn:focus-visible {
  outline: none;
  box-shadow: var(--qy-focus-ring) !important;
}

/* ---- vacíos --------------------------------------------------------------- */

.qy-ajustes-screen .empty-mini {
  display: grid;
  gap: var(--qy-space-1);
  padding: var(--qy-space-4);
  color: var(--qy-color-text-secondary) !important;
  background: var(--qy-color-surface-2) !important;
  border: 1px dashed var(--qy-color-border-strong) !important;
  border-radius: var(--qy-radius-lg) !important;
}

.qy-ajustes-screen .empty-mini strong {
  color: var(--qy-color-text-primary) !important;
}

/* ==========================================================================
   OBJETIVOS COMPARTIDOS DENTRO DE AJUSTES
   `renderObjectivesSettingsSection()` sin fork. Solo revestimiento.
   ========================================================================== */

.qy-ajustes-screen .qy-ajustes-objectives {
  display: grid;
  min-width: 0;
}

.qy-ajustes-screen .objectives-settings-list {
  display: grid;
  gap: var(--qy-space-2);
}

.qy-ajustes-screen .objective-settings-item {
  border: 1px solid var(--qy-color-border) !important;
  border-radius: var(--qy-radius-lg) !important;
  background: var(--qy-color-surface-2) !important;
  box-shadow: none !important;
}

.qy-ajustes-screen .objective-settings-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qy-space-3);
  min-height: var(--qy-touch-min);
  padding: var(--qy-space-3) var(--qy-space-4);
  background: transparent !important;
  cursor: pointer;
}

.qy-ajustes-screen
  .objective-settings-item
  > summary::-webkit-details-marker {
  display: none;
}

.qy-ajustes-screen .objective-settings-item > summary:focus-visible {
  outline: none;
  box-shadow: var(--qy-focus-ring);
}

.qy-ajustes-screen .objective-settings-item summary > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.qy-ajustes-screen .objective-settings-item summary strong {
  color: var(--qy-color-text-primary) !important;
  font: var(--qy-text-body-lg);
  overflow-wrap: anywhere;
}

.qy-ajustes-screen .objective-settings-item summary small {
  color: var(--qy-color-text-secondary) !important;
  font: var(--qy-text-label-md);
}

.qy-ajustes-screen .objective-settings-item summary em {
  flex: 0 0 auto;
  padding: 2px var(--qy-space-2);
  color: var(--qy-color-text-primary) !important;
  font: var(--qy-text-label-md);
  font-style: normal;
  font-variant-numeric: var(--qy-font-numeric);
  white-space: nowrap;
  background: var(--qy-color-surface-3) !important;
  border: 1px solid var(--qy-color-border-strong);
  border-radius: var(--qy-radius-pill);
}

.qy-ajustes-screen .objective-config-form {
  display: grid;
  gap: var(--qy-space-4);
  padding: var(--qy-space-4);
  border-top: 1px solid var(--qy-color-border);
}

/* ---- responsive ----------------------------------------------------------- */

@media (max-width: 559px) {
  .qy-ajustes-screen {
    gap: var(--qy-space-5);
    padding-top: var(--qy-space-5);
  }

  .qy-ajustes-grid,
  .qy-ajustes-col {
    gap: var(--qy-space-4);
  }

  .qy-ajustes-screen .settings-panel > summary,
  .qy-ajustes-screen .qy-ajustes-account {
    padding: var(--qy-space-4);
  }

  .qy-ajustes-screen .settings-inner-card {
    padding: 0 var(--qy-space-4) var(--qy-space-4);
  }

  .qy-ajustes-screen .settings-inner-card + .settings-inner-card {
    padding-top: var(--qy-space-4);
  }

  /*
   * En móvil cada acción ocupa su propia línea: dos botones de 48 px pegados
   * en un ancho de 390 px dejan los bordes a menos de 8 px y la acción
   * destructiva a un dedo de la de guardar.
   */
  .qy-ajustes-screen .concept-action-grid,
  .qy-ajustes-screen .objective-action-grid,
  .qy-ajustes-screen .action-row,
  .qy-ajustes-screen .admin-button-grid,
  .qy-ajustes-screen .account-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--qy-space-3);
  }
}

@media (min-width: 1180px) {
  .qy-ajustes-screen {
    gap: var(--qy-space-8);
    padding-block: var(--qy-space-8);
  }

  .qy-ajustes-grid {
    gap: var(--qy-space-6);
  }
}

/* ==========================================================================
   S4.11D — LOS CAMPOS CABEN EN SU HÁBITAT
   ========================================================================== */

/*
   14 / B — CONTROLES DE FORMULARIO.

   Los campos de Ajustes declaraban `min-height: var(--qy-touch-min)` (48px) y
   `padding: 0 var(--qy-space-3)`. Sobre un `<input>` de una línea eso es
   correcto -- el navegador centra el texto en la caja --, pero sobre un
   `<select>` y sobre un `<textarea>` no:

   - el `<select>` dibuja su flecha nativa dentro del relleno derecho de 12px,
     así que el texto de la opción más larga acaba pegado o por debajo de
     ella;
   - el `<textarea>` NO centra: con relleno vertical cero, el texto arranca
     pegado al borde superior de una caja de 48px y deja el resto vacío. Eso
     es lo que hacía que el formulario de conceptos pareciera sobredimensionado
     respecto al espacio disponible.

   Se declara relleno vertical real, se reserva sitio para la flecha del
   select y el textarea recupera una altura propia acorde a su contenido.
*/
.qy-ajustes-screen .form-field input,
.qy-ajustes-screen .form-field select,
.qy-ajustes-screen .form-field textarea {
  width: 100%;
  min-width: 0;
  padding: var(--qy-space-3) !important;
}

.qy-ajustes-screen .form-field select {
  padding-right: var(--qy-space-8) !important;
}

.qy-ajustes-screen .form-field textarea {
  min-height: 96px;
  line-height: 1.45;
  resize: vertical;
}

/* Un campo numérico corto no necesita el ancho de una columna entera: se
   queda con el suyo y deja de parecer un hueco vacío con un "0" al fondo. */
@media (max-width: 559px) {
  .qy-ajustes-screen .form-field input[type="number"] {
    max-width: 180px;
  }
}

/*
   C — LA FILA DE CONCEPTO NO PUEDE COLISIONAR.

   En móvil la fila reparte dos columnas y cuatro hijos: el nombre a la
   izquierda y las fichas de tipo, valor y visibilidad a la derecha. Las tres
   fichas llevan `white-space: nowrap`, así que en la columna `auto` empujan
   sin límite y el nombre -- que sí puede encoger hasta cero -- paga la
   diferencia.

   Se acota la columna de fichas y se les permite plegarse entre ellas. El
   nombre conserva un mínimo legible y ninguna ficha se monta sobre él.
*/
.qy-ajustes-screen .concept-accordion > summary {
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: start;
  row-gap: var(--qy-space-2);
}

.qy-ajustes-screen .concept-accordion__type,
.qy-ajustes-screen .concept-accordion__value,
.qy-ajustes-screen .concept-accordion > summary em {
  align-self: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qy-ajustes-screen .concept-accordion__ident strong {
  overflow-wrap: break-word;
}

/*
   E — "PERSONALIZACIÓN" DEJA DE ABRIR UN HUECO MUERTO.

   El texto de ayuda bajo "Apariencia" ocupaba tres líneas para decir algo que
   se dice en una, y su margen inferior heredado abría un vacío mayor que el
   propio bloque de opciones que introduce. La copia se ha acortado en
   `settings.module.js`; aquí se cierra el espacio que sobraba.
*/
.qy-ajustes-screen .qy-ajustes-appearance .settings-help-copy {
  margin-bottom: 0;
  max-width: 46ch;
}

.qy-ajustes-screen .qy-appearance-choice {
  margin-top: var(--qy-space-3);
}

.qy-ajustes-screen .qy-ajustes-appearance .settings-inner-card {
  gap: var(--qy-space-2);
}