/* =========================================================================
   QUOMYA — ARQUITECTURA DE INFORMACIÓN V1
   Ola: S4.11A (revisión del propietario)
   Depende de: qy-tokens-v1.css, qy-foundation-v1.css, qy-shell-v1.css

   Reviste EXCLUSIVAMENTE lo que S4.11A añade o reordena:

     1. retroceso en pantallas profundas
     2. pantalla "Más"
     3. Personalización / Apariencia dentro de Ajustes
     4. Legal y privacidad dentro del tema activo
     5. jerarquía de la pantalla de acceso

   Ninguna regla de este archivo toca Registro, Nueva Venta, Evolución ni
   Objetivos: esas pantallas pertenecen a S4.11B y S4.11C.

   ------------------------------------------------------------------------
   PRINCIPIO DE ANIDAMIENTO (fase 19)
   ------------------------------------------------------------------------
   Una sección normal no puede parecer {[(<>)]}.

   Todo lo que se dibuja aquí separa jerarquía con ESPACIO, CAMBIO TONAL DE
   SUPERFICIE, DIVISOR, RAÍL DE ACENTO o SOMBRA SUAVE, nunca con otro
   rectángulo redondeado dentro del anterior. Donde había una tarjeta que solo
   contenía un título, la tarjeta desaparece y queda el título.

   Los tokens son los canónicos, así que cada superficie de este archivo
   cambia de tema sola: no hay ni un literal de color.
   ========================================================================= */

/* =========================================================================
   0. ESPACIO SUPERIOR: UN SOLO DUEÑO (fase 3)

   Medido, no supuesto. Antes de S4.11A el primer pixel de contenido de una
   ruta interna caía alrededor de 141 px del borde en un móvil de 390:

      ~96 px  banda de marca repetida (retirada)
       24 px  padding-block-start de la raíz de cada pantalla
       21 px  padding-block-start de la cabecera de página

   Retirar la banda deja 45 px, y de esos, 24 son un relleno que ya no cumple
   ninguna función: se calibró cuando la banda iba encima y hacía falta
   separarse de ella. Ahora hay DOS rellenos superiores encadenados para un
   solo borde superior.

   Se le da un único dueño: la cabecera de página -- o la barra de retroceso
   en las pantallas profundas --, que es el primer elemento de toda pantalla
   interna. El relleno del armazón aporta el margen de seguridad y el inset de
   iOS; el de la raíz de pantalla se anula.

   Resultado medido: ~20 px en móvil, con la barra de estado respetada.

   Se EXCLUYE `.qy-auth-screen`: acceso, verificación, puerta de beta y
   arranque no llevan cabecera de página -- su primer elemento es la propia
   marca -- así que ahí el relleno de la raíz sí es el único que hay. Su
   ajuste vive en la sección 5.
   ========================================================================= */

.qy-shell__main #view-root > .screen:not(.qy-auth-screen) {
  padding-top: 0;
}

/* =========================================================================
   1. RETROCESO EN PANTALLAS PROFUNDAS (fase 4)

   Lo monta `router.js` en las doce rutas que declaran padre, y solo en ellas.
   Los destinos de primer nivel NO lo reciben: allí el menú es la navegación y
   un botón de volver sería ruido.

   Es discreto a propósito -- texto y flecha, sin relleno ni borde en reposo --
   porque es una salida, no una acción. Lo que sí conserva es el objetivo
   táctil completo: se toca con el pulgar en la esquina superior izquierda,
   que es donde la mano ya lo busca.
   ========================================================================= */

.qy-back-bar {
  display: flex;
  align-items: center;
  padding-block: var(--qy-space-2) 0;
}

.qy-back-button {
  display: inline-flex;
  align-items: center;
  gap: var(--qy-space-2);
  /* El alto mínimo se respeta; el margen negativo lateral solo devuelve el
     relleno del propio botón para que el texto quede alineado con el título
     de la pantalla, no desplazado a su derecha. */
  min-height: var(--qy-touch-min);
  margin-left: calc(var(--qy-space-2) * -1);
  padding: 0 var(--qy-space-2);
  font: var(--qy-text-body-md);
  font-weight: 600;
  color: var(--qy-color-text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--qy-radius-md);
  cursor: pointer;
  transition: color var(--qy-motion-fast) var(--qy-motion-ease),
    background var(--qy-motion-fast) var(--qy-motion-ease);
}

.qy-back-button:hover {
  color: var(--qy-color-text-primary);
  background: var(--qy-color-hover);
}

.qy-back-button:focus-visible {
  outline: none;
  box-shadow: var(--qy-focus-ring);
}

/*
   Flecha dibujada con bordes, no con un glifo: se comprobó en S4.2 que los
   caracteres de flecha no existen en el `cmap` de Plus Jakarta Sans y caerían
   en fuente de reserva. Es decorativa -- el botón dice "Volver" en texto real,
   así que nada depende de este dibujo.
*/
.qy-back-button__icon {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

/* La cabecera de página que va justo debajo ya no necesita su propio aire
   superior: lo aporta la barra de retroceso. */
.qy-back-bar + .qy-page-header,
.qy-back-bar + .screen-header {
  padding-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .qy-back-button {
    transition: none;
  }
}

/* =========================================================================
   2. PANTALLA "MÁS" (fase 6)

   Antes era una hoja inferior sobre la ruta activa: un panel corto flotando
   sobre una pantalla mayoritariamente negra. Ahora es una ruta completa con
   cabecera propia.

   ANIDAMIENTO: un grupo NO es una tarjeta con un título dentro. El título del
   grupo va suelto sobre el fondo, como antetítulo, y solo la lista de
   destinos es superficie. Un marco por grupo, no dos.
   ========================================================================= */

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

.qy-more-screen {
  display: grid;
  gap: var(--qy-space-6);
  align-content: start;
  padding-bottom: var(--qy-space-4);
  color: var(--qy-color-text-primary);
}

.qy-more-group {
  display: grid;
  gap: var(--qy-space-2);
  min-width: 0;
}

.qy-more-group__title {
  margin: 0;
  font: var(--qy-text-label-md);
  letter-spacing: var(--qy-tracking-label);
  text-transform: uppercase;
  color: var(--qy-color-text-tertiary);
}

/*
   La lista es UNA superficie con divisores internos, no una tarjeta por
   destino. Cinco tarjetas apiladas con sus cinco bordes eran precisamente el
   "borde tras borde" que el propietario señaló.
*/
.qy-more-group__list {
  display: grid;
  overflow: hidden;
  background: var(--qy-color-surface-1);
  border: 1px solid var(--qy-color-border);
  border-radius: var(--qy-radius-xl);
  box-shadow: var(--qy-elevation-card);
}

.qy-more-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--qy-space-4);
  width: 100%;
  min-height: 64px;
  padding: var(--qy-space-3) var(--qy-space-4);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--qy-color-border);
  text-align: left;
  cursor: pointer;
  transition: background var(--qy-motion-fast) var(--qy-motion-ease);
}

.qy-more-item:first-child {
  border-top: 0;
}

.qy-more-item:hover {
  background: var(--qy-color-hover);
}

.qy-more-item:focus-visible {
  outline: none;
  box-shadow: var(--qy-focus-ring);
}

/*
   El icono reutiliza las MISMAS máscaras que la barra lateral y el menú
   inferior, declaradas en qy-shell-v1.css. No se introduce ningún activo
   nuevo ni ninguna fuente de iconos.
*/
.qy-more-item__icon {
  flex: none;
  display: block;
  width: 22px;
  height: 22px;
  background-color: var(--qy-color-brand-text);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 21px 21px;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 21px 21px;
}

.qy-more-item[data-route="charts"] .qy-more-item__icon {
  -webkit-mask-image: var(--qy-icon-charts);
  mask-image: var(--qy-icon-charts);
}

.qy-more-item[data-route="calendar"] .qy-more-item__icon {
  -webkit-mask-image: var(--qy-icon-calendar);
  mask-image: var(--qy-icon-calendar);
}

.qy-more-item[data-route="settings"] .qy-more-item__icon {
  -webkit-mask-image: var(--qy-icon-settings);
  mask-image: var(--qy-icon-settings);
}

/*
   Legal y Ayuda no tenían máscara: no eran destinos de navegación primaria y
   nunca hizo falta dibujarlos. Sin una, la regla de arriba los pintaría como
   un cuadrado macizo. Se dibujan en el mismo sistema -- SVG en data-URI,
   trazo de 1.8, sin origen externo -- que las ocho que ya existían.
*/
:root {
  --qy-icon-legal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5 19 6v5.5c0 4-2.9 7.3-7 8.6-4.1-1.3-7-4.6-7-8.6V6l7-2.5Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M9.2 12.2l2 2 3.6-3.8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --qy-icon-feedback: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15a3 3 0 0 1-3 3H9l-4 3v-3.6A3 3 0 0 1 4 15V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v8Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M9 9.5h6M9 12.8h3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.qy-more-item[data-route="legal"] .qy-more-item__icon {
  -webkit-mask-image: var(--qy-icon-legal);
  mask-image: var(--qy-icon-legal);
}

.qy-more-item[data-route="feedback"] .qy-more-item__icon {
  -webkit-mask-image: var(--qy-icon-feedback);
  mask-image: var(--qy-icon-feedback);
}

.qy-more-item__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.qy-more-item__copy strong {
  font: var(--qy-text-body-lg);
  font-weight: 600;
  color: var(--qy-color-text-primary);
}

.qy-more-item__copy small {
  font: var(--qy-text-body-md);
  color: var(--qy-color-text-secondary);
  overflow-wrap: anywhere;
}

/* Galón: afordancia de "esto lleva a otro sitio". Decorativa; el destino lo
   dice el propio texto del elemento. */
.qy-more-item__chevron {
  flex: none;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--qy-color-text-tertiary);
  border-right: 2px solid var(--qy-color-text-tertiary);
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .qy-more-item {
    transition: none;
  }
}

/*
   En escritorio "Más" no aparece en la navegación -- la barra lateral ya lista
   todos los destinos --, pero la ruta sigue siendo alcanzable por historial o
   por enlace. Se le da la misma rejilla que al resto para que no quede una
   columna estrecha en 1440.
*/
@media (min-width: 900px) {
  .qy-more-screen {
    max-width: 760px;
  }
}

/* =========================================================================
   3. PERSONALIZACIÓN — APARIENCIA (fase 8)

   Radios reales, presentados como opciones tocables. El estado seleccionado
   NO se distingue solo por color: lleva relleno de marca, borde de marca y el
   propio `checked` del radio, que es lo que anuncia el lector de pantalla.
   ========================================================================= */

.qy-appearance-choice {
  display: grid;
  gap: var(--qy-space-2);
  margin: var(--qy-space-4) 0 0;
  padding: 0;
  border: 0;
}

.qy-appearance-choice__legend {
  padding: 0 0 var(--qy-space-2);
  font: var(--qy-text-label-md);
  letter-spacing: var(--qy-tracking-label);
  text-transform: uppercase;
  color: var(--qy-color-text-tertiary);
}

.qy-appearance-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--qy-space-3);
  min-height: var(--qy-touch-min);
  padding: var(--qy-space-3) var(--qy-space-4);
  background: var(--qy-color-surface-2);
  border: 1px solid var(--qy-color-border-strong);
  border-radius: var(--qy-radius-md);
  cursor: pointer;
  transition: background var(--qy-motion-fast) var(--qy-motion-ease),
    border-color var(--qy-motion-fast) var(--qy-motion-ease);
}

.qy-appearance-option.is-selected {
  background: var(--qy-color-brand-soft);
  border-color: var(--qy-color-brand);
}

.qy-appearance-option:hover {
  background: var(--qy-color-hover);
}

.qy-appearance-option.is-selected:hover {
  background: var(--qy-color-brand-soft);
}

.qy-appearance-option input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--qy-color-brand);
}

.qy-appearance-option:focus-within {
  outline: none;
  box-shadow: var(--qy-focus-ring);
}

.qy-appearance-option__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.qy-appearance-option__copy strong {
  font: var(--qy-text-body-md);
  font-weight: 600;
  color: var(--qy-color-text-primary);
}

.qy-appearance-option__copy small {
  font: var(--qy-text-label-md);
  color: var(--qy-color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .qy-appearance-option {
    transition: none;
  }
}

/* =========================================================================
   4. LEGAL Y PRIVACIDAD DENTRO DEL TEMA (fase 12)

   `legal-beta-v15-18-5.css` consume mayoritariamente `--rt-*`, así que el
   ámbito `.qy-theme` que S4.11A añade a estas pantallas ya reapunta casi
   todo. Lo que queda aquí son los LITERALES que aquella hoja escribió a mano
   y que ningún token puede alcanzar: un degradado blanco-menta, un ámbar
   fijo y el marco del diálogo.

   NADA de contenido, versiones, aceptación o semántica de consentimiento se
   toca. Esto es revestimiento.
   ========================================================================= */

.qy-legal-screen {
  color: var(--qy-color-text-primary);
}

.qy-legal-screen .screen-header h2 {
  color: var(--qy-color-text-primary);
  font: var(--qy-text-headline-lg);
  letter-spacing: var(--qy-tracking-tight);
}

.qy-legal-screen .screen-header p {
  color: var(--qy-color-text-secondary);
  font: var(--qy-text-body-md);
}

/*
   `styles.css` y `compact-visual-v15-14-2.css` pintan `.card` en claro con
   literales y `!important`. Se iguala la prioridad, igual que hicieron
   qy-ajustes-v1.css y qy-auth-v1.css en sus olas.
*/
.qy-legal-screen .card {
  padding: var(--qy-space-5);
  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-xl) !important;
  box-shadow: var(--qy-elevation-card) !important;
}

.qy-legal-screen h3 {
  color: var(--qy-color-text-primary) !important;
  font: var(--qy-text-headline-md);
}

.qy-legal-screen p,
.qy-legal-screen .legal-gate-lead {
  color: var(--qy-color-text-secondary) !important;
}

.qy-legal-screen .legal-support-note {
  color: var(--qy-color-text-tertiary) !important;
}

/*
   `.legal-summary-box` traía un degradado `rgba(231,250,246,.86)` ->
   `rgba(255,255,255,.95)`: blanco casi puro, ilegible con tinta clara encima.
   Se sustituye por un rail de acento sobre superficie tonal, que además
   elimina un marco completo (fase 19).
*/
.qy-legal-screen .legal-summary-box {
  background: var(--qy-color-surface-2) !important;
  border: 1px solid var(--qy-color-border-strong) !important;
  border-left: 3px solid var(--qy-color-brand) !important;
  border-radius: var(--qy-radius-lg) !important;
}

.qy-legal-screen .legal-summary-box strong {
  color: var(--qy-color-text-primary) !important;
}

.qy-legal-screen .legal-summary-box p {
  color: var(--qy-color-text-secondary) !important;
}

.qy-legal-screen .legal-summary-box a,
.qy-legal-screen .legal-inline-link {
  color: var(--qy-color-brand-text) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.qy-legal-screen .legal-brand-line span {
  color: var(--qy-color-text-primary) !important;
}

.qy-legal-screen .legal-brand-line em {
  color: var(--qy-color-text-tertiary) !important;
}

.qy-legal-screen .legal-status-chip.is-current {
  color: var(--qy-color-collected-text) !important;
  background: var(--qy-color-collected-soft) !important;
}

/* El ámbar fijo `#9A610D` estaba escrito a mano y no seguía a ningún token:
   sobre Deep Ink medía por debajo de AA. */
.qy-legal-screen .legal-status-chip.is-pending {
  color: var(--qy-color-pending-text) !important;
  background: var(--qy-color-pending-soft) !important;
}

.qy-legal-screen .legal-version-grid > div {
  background: var(--qy-color-surface-2) !important;
  border: 1px solid var(--qy-color-border) !important;
  border-radius: var(--qy-radius-md) !important;
}

.qy-legal-screen .legal-version-grid dt {
  color: var(--qy-color-text-tertiary) !important;
}

.qy-legal-screen .legal-version-grid dd {
  color: var(--qy-color-text-primary) !important;
}

.qy-legal-screen .legal-gate-checks .check-row,
.qy-legal-screen .legal-gate-checks .check-row span {
  color: var(--qy-color-text-secondary) !important;
}

.qy-legal-screen .legal-gate-checks .check-row strong {
  color: var(--qy-color-text-primary) !important;
}

.qy-legal-screen .check-row input[type="checkbox"] {
  accent-color: var(--qy-color-brand);
}

.qy-legal-screen .legal-version-note,
.qy-legal-screen .legal-gate-footnote {
  color: var(--qy-color-text-tertiary) !important;
}

.qy-legal-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-legal-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-legal-screen .danger-btn {
  color: var(--qy-color-error-text) !important;
  background: var(--qy-color-error-soft) !important;
  border: 1px solid var(--qy-color-error) !important;
}

.qy-legal-screen button:focus-visible {
  outline: none !important;
  box-shadow: var(--qy-focus-ring) !important;
}

/* ---- diálogo de documentos ----------------------------------------------
   Vive en `document.body` tras `initLegalDocumentDialog()`, así que lleva su
   propio `.qy-theme` en el marcado. Su tarjeta declaraba `--rt-surface` con
   respaldo `#ffffff` y un borde literal: con el ámbito puesto, el respaldo ya
   no se usa, pero el borde y la sombra sí necesitan token. */

.qy-legal-dialog .legal-dialog-card {
  background: var(--qy-color-surface-1) !important;
  border: 1px solid var(--qy-color-border-strong) !important;
  box-shadow: var(--qy-elevation-modal) !important;
}

.qy-legal-dialog .legal-dialog-header {
  border-bottom: 1px solid var(--qy-color-border) !important;
}

.qy-legal-dialog .legal-dialog-header span {
  color: var(--qy-color-brand-text) !important;
}

.qy-legal-dialog .legal-dialog-header h2 {
  color: var(--qy-color-text-primary) !important;
}

.qy-legal-dialog .legal-dialog-close {
  color: var(--qy-color-text-secondary) !important;
  background: var(--qy-color-surface-2) !important;
  border: 1px solid var(--qy-color-border-interactive) !important;
}

.qy-legal-dialog .legal-dialog-close:focus-visible {
  outline: none !important;
  box-shadow: var(--qy-focus-ring) !important;
}

.qy-legal-dialog .legal-dialog-content,
.qy-legal-dialog .legal-document-copy {
  color: var(--qy-color-text-secondary) !important;
}

.qy-legal-dialog .legal-document-copy h3,
.qy-legal-dialog .legal-document-copy h4,
.qy-legal-dialog .legal-document-copy strong {
  color: var(--qy-color-text-primary) !important;
}

.qy-legal-dialog .legal-document-copy a {
  color: var(--qy-color-brand-text) !important;
}

/* =========================================================================
   5. ACCESO — JERARQUÍA (fase 5)

   `qy-auth-v1.css` sigue siendo la hoja de la pantalla de acceso; aquí solo
   está lo que S4.11A REORDENA. Ni un color nuevo: los mismos tokens.
   ========================================================================= */

/*
   La cabecera deja de ser `.card`. Sin tarjeta, sin borde y sin sombra: la
   marca y el titular se apoyan directamente en el fondo y el primer marco de
   la pantalla es ya el del formulario. Un rectángulo concéntrico menos.
*/
.qy-auth-login .auth-hero {
  display: grid;
  gap: var(--qy-space-2);
  justify-items: start;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.qy-auth-login .auth-hero h2 {
  margin: var(--qy-space-1) 0 0;
  font: var(--qy-text-headline-lg);
  letter-spacing: var(--qy-tracking-tight);
}

/* La pantalla arranca más arriba: sin la banda de marca del armazón encima,
   los 32 px de S4.9 dejaban el logotipo flotando. */
.qy-auth-login {
  padding-block: var(--qy-space-4) var(--qy-space-6);
  gap: var(--qy-space-4);
}

/*
   EL LOCKUP EN TEMA CLARO.

   `quomya-logo-horizontal-light.svg` es el logotipo PARA fondo oscuro: lleva
   dentro una placa `<rect fill="#071A26" rx="48">`, porque su tipografía es
   clara y sin la placa desaparecería. S4.9 le dio al contenedor el color de
   la página para que la placa se fundiera con el fondo.

   En tema claro esa cuenta ya no sale: el contenedor se aclara, la placa no,
   y queda un rectángulo oscuro con un borde claro alrededor -- que parece un
   error de recorte.

   No se cambia el activo ni se añade un segundo <img> que habría que
   mantener sincronizado: se acepta la placa y se convierte en un CHIP DE
   MARCA deliberado, dándole el mismo Deep Ink que lleva dentro y retirando
   el borde. Deep Ink sobre off-white es identidad de Quomya, no un accidente.
*/
:root[data-qy-appearance-resolved="light"]
  .qy-auth-screen
  .auth-brand-lockup,
:root[data-qy-appearance-resolved="light"]
  .qy-auth-screen
  .beta-access-brand {
  background: #071a26;
  border-color: #071a26;
}

/*
   Código de invitación como divulgación progresiva.

   Es opcional y la mayoría de solicitudes no lo llevan, así que en reposo
   pesa una línea en lugar de un campo completo con etiqueta, entrada y nota.
   `setAuthMode` lo sigue mostrando y ocultando con el mismo atributo
   `hidden`, que un <details> respeta igual que un <div>.
*/
.qy-auth-screen .auth-invite-field[hidden] {
  display: none;
}

.qy-auth-screen .auth-invite-summary {
  display: flex;
  align-items: center;
  gap: var(--qy-space-2);
  min-height: var(--qy-touch-min);
  font: var(--qy-text-body-md);
  color: var(--qy-color-text-secondary);
  cursor: pointer;
  list-style: none;
}

.qy-auth-screen .auth-invite-summary::-webkit-details-marker {
  display: none;
}

/* Marcador propio: el triángulo nativo no es coloreable de forma fiable en
   todos los motores. Decorativo -- el estado lo comunica el propio <details>
   a la API de accesibilidad. */
.qy-auth-screen .auth-invite-summary::after {
  content: "";
  width: 8px;
  height: 8px;
  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-auth-screen .auth-invite-field[open] .auth-invite-summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.qy-auth-screen .auth-invite-summary:focus-visible {
  outline: none;
  box-shadow: var(--qy-focus-ring);
  border-radius: var(--qy-radius-sm);
}

/*
   "Opcional" deja de ir en versalitas.

   El propietario pidió reducir las mayúsculas. Aquí eran contraproducentes
   además de ruidosas: una anotación secundaria gritando en mayúsculas pesaba
   visualmente más que la pregunta a la que acompaña. `qy-auth-v1.css` la
   declara `text-transform: uppercase` para `.form-field > label > span`, y
   este resumen ya no es un `label`, pero se declara explícito para que el
   cambio sea intencional y no un efecto colateral del selector.
*/
.qy-auth-screen .auth-invite-summary span {
  padding: 2px var(--qy-space-2);
  font: var(--qy-text-label-md);
  letter-spacing: 0;
  text-transform: none;
  color: var(--qy-color-text-tertiary);
  background: var(--qy-color-surface-2);
  border-radius: var(--qy-radius-pill);
}

.qy-auth-screen .auth-invite-field > label {
  margin-top: var(--qy-space-3);
}

/* ---- control de visibilidad de la contraseña ----------------------------
   Pequeño, dentro del campo, sin fondo en reposo. Su nombre accesible es un
   texto real ("Mostrar contraseña" / "Ocultar contraseña") en un
   `.qy-visually-hidden`, y `aria-pressed` lleva el estado: no es un icono
   anónimo. */

.qy-auth-password__control {
  position: relative;
  display: block;
  min-width: 0;
}

/*
   El relleno derecho del campo deja sitio al botón para que el texto de la
   contraseña nunca pase por debajo del icono. `!important` porque
   `qy-auth-v1.css` declara `padding: 0 var(--qy-space-3)` con esa misma
   prioridad sobre los tres tipos de entrada.
*/
.qy-auth-password__control input[type="password"],
.qy-auth-password__control input[type="text"] {
  padding-right: calc(var(--qy-touch-min) + var(--qy-space-1)) !important;
}

/*
   Los puntos de ocultación se dibujan con la fuente del campo. Plus Jakarta
   Sans los renderiza grandes y muy separados, que es lo que el propietario
   describió como puntos enormes. Con `letter-spacing` normal y la pila del
   sistema para ESTE campo concreto vuelven a su tamaño habitual. El texto
   revelado (`type="text"`) recupera la tipografía del producto.
*/
.qy-auth-password__control input[type="password"] {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.08em;
}

.qy-auth-password__toggle {
  position: absolute;
  top: 50%;
  right: var(--qy-space-1);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--qy-color-text-tertiary);
  background: transparent;
  border: 0;
  border-radius: var(--qy-radius-sm);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color var(--qy-motion-fast) var(--qy-motion-ease);
}

.qy-auth-password__toggle:hover {
  color: var(--qy-color-text-primary);
}

.qy-auth-password__toggle:focus-visible {
  outline: none;
  box-shadow: var(--qy-focus-ring);
}

/*
   Ojo dibujado con máscara y `currentColor`, igual que los iconos de
   navegación. Cuando está pulsado (`aria-pressed="true"`, es decir,
   contraseña visible) el ojo aparece tachado: el dibujo también cambia, no
   solo el color.
*/
:root {
  --qy-icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.6 12S6 5.9 12 5.9 21.4 12 21.4 12 18 18.1 12 18.1 2.6 12 2.6 12Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='2.9' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
  --qy-icon-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.6 12S6 5.9 12 5.9c1.7 0 3.2.5 4.5 1.2M21.4 12s-1.2 2.2-3.5 3.9M9.3 9.4A2.9 2.9 0 0 0 12 14.9c.7 0 1.4-.3 1.9-.7' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.5 4.5l15 15' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

.qy-auth-password__toggle-icon {
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-image: var(--qy-icon-eye);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 20px 20px;
  mask-image: var(--qy-icon-eye);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 20px 20px;
}

.qy-auth-password__toggle[aria-pressed="true"]
  .qy-auth-password__toggle-icon {
  -webkit-mask-image: var(--qy-icon-eye-off);
  mask-image: var(--qy-icon-eye-off);
}

@media (prefers-reduced-motion: reduce) {
  .qy-auth-password__toggle,
  .qy-auth-screen .auth-invite-summary::after {
    transition: none;
  }
}

/*
   El aviso de privacidad deja de ser tarjeta con `<h3>`. Es una nota al pie:
   cierto, pertinente y subordinado. Como tarjeta pesaba lo mismo que el
   formulario de acceso.
*/
.qy-auth-login .auth-privacy-note {
  margin: 0;
  padding: 0 var(--qy-space-1);
  font: var(--qy-text-label-md);
  line-height: 18px;
  color: var(--qy-color-text-tertiary) !important;
}

/* ==========================================================================
   S4.11D — "MÁS": RITMO DE FILA Y GALONES CON CAJA REAL
   ========================================================================== */

/*
   9 — SEPARACIÓN ENTRE DESTINOS.

   Los destinos compartían una sola superficie con divisores de 1px y 64px de
   alto mínimo. Con descripciones de dos líneas, dos filas seguidas sumaban
   ~132px de texto continuo cortado por una línea apenas visible: leído en
   móvil, "Evolución" y "Calendario" se tocaban.

   No se rompe la superficie única -- eso reintroduciría el "borde tras borde"
   que S4.11A retiró a propósito --, se aumenta el ritmo: más aire vertical y
   un divisor que empieza donde empieza el texto, no en el borde de la
   tarjeta, para que la fila se lea como una unidad con principio claro.
*/
.qy-more-item {
  min-height: 72px;
  padding: var(--qy-space-4);
  gap: var(--qy-space-3);
  border-top: 0;
}

.qy-more-item + .qy-more-item {
  position: relative;
}

.qy-more-item + .qy-more-item::before {
  position: absolute;
  top: 0;
  right: var(--qy-space-4);
  left: calc(22px + var(--qy-space-3) + var(--qy-space-4));
  height: 1px;
  background: var(--qy-color-border);
  content: "";
}

.qy-more-item__copy {
  gap: var(--qy-space-1);
}

/*
   10 — RITMO DE LÍNEA COMPARABLE.

   Las descripciones se han acortado en `more.module.js` para que las cinco
   ocupen el mismo número de líneas a un mismo ancho. Esta altura mínima del
   bloque de texto absorbe el caso en que una de ellas sí pase a dos líneas en
   un ancho concreto, de modo que ninguna tarjeta quede visiblemente más corta
   que su hermana. No es un parche de píxel: es la altura de dos líneas del
   propio token tipográfico.
*/
.qy-more-item__copy small {
  overflow-wrap: normal;
  text-wrap: pretty;
}

/*
   12 / D / J — GALONES CON CAJA REAL.

   Un cuadrado de 8px con dos bordes y `rotate(45deg)` mide 8px de caja pero
   ~11.3px de tinta: sobresale ~1.6px por cada lado de su propia caja. Dentro
   de un contenedor con `overflow: hidden` -- que es justo lo que hace
   `.qy-more-group__list` -- ese exceso es recortable, y su centro óptico no
   coincide con el centro de la caja, así que el galón se ve descentrado
   respecto al texto de su fila.

   Se le da una caja cuadrada declarada que contiene la tinta con holgura y se
   dibuja el galón en un pseudo-elemento centrado dentro de ella. La caja no
   puede encogerse y la tinta nunca toca su borde.
*/
.qy-more-item__chevron,
.qy-back-button__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--qy-icon-box);
  height: var(--qy-icon-box);
  border: 0;
  transform: none;
  overflow: visible;
}

.qy-more-item__chevron::after,
.qy-back-button__icon::after {
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--qy-color-text-tertiary);
  border-right: 2px solid var(--qy-color-text-tertiary);
  content: "";
}

.qy-more-item__chevron::after {
  transform: rotate(45deg);
}

.qy-back-button__icon::after {
  border-top-color: currentColor;
  border-right-color: currentColor;
  transform: rotate(-135deg);
}

/*
   D — "Volver" conserva su alineación con el título.

   El galón pasó de una caja de 8px a una de 20px, así que sin corregir nada
   el texto se habría desplazado 8px a la derecha respecto al título de la
   pantalla. Se compensa con el hueco y con el margen negativo del propio
   botón, que es el mismo mecanismo que ya usaba: no se añade ningún
   desplazamiento nuevo, se recalcula el que había sobre la caja nueva.

     8 (relleno) + 20 (galón) + 4 (hueco) - 16 (margen) = 16
     que es el mismo origen de texto que antes de S4.11D.
*/
.qy-back-button {
  gap: var(--qy-space-1);
  margin-left: calc(var(--qy-space-4) * -1);
}

@media (max-width: 559px) {
  .qy-more-item {
    padding: var(--qy-space-4) var(--qy-space-4);
  }

  .qy-more-item + .qy-more-item::before {
    left: calc(22px + var(--qy-space-3) + var(--qy-space-4));
  }
}