/**
 * Estilos propios de la aplicación, sobre el design system.
 *
 * Aquí va solo lo que no es un componente reutilizable: la pantalla de acceso, el
 * indicador de sincronización y el formulario dinámico del cuestionario. Todo lo
 * demás sale de `/ds/css`.
 */

/* ==================== Pantalla de acceso ==================== */

.app-auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--ds-space-6);
  background: var(--ds-bg);
}

.app-auth__panel {
  width: 100%;
  max-width: 26rem;
}

.app-auth__brand {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-5);
}

.app-auth__logo {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--ds-radius-md);
  display: grid;
  place-items: center;
  background: var(--ds-accent-soft);
  color: var(--ds-accent);
  font-weight: var(--ds-weight-bold);
  font-size: var(--ds-text-lg);
}

/**
 * El correo ya escrito, en el segundo paso del acceso.
 *
 * No es un campo: es el dato que se acaba de dar, con la forma de corregirlo al
 * lado. Se muestra porque el segundo paso pregunta por algo que depende de él
 * —la contraseña de esa cuenta, el código que fue a ese buzón— y sin verlo no
 * hay cómo notar que se escribió mal.
 */
.app-auth__identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-bg);
}

/* ==================== Estado de sincronización ==================== */

.app-sync {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 0.25rem 0.6rem;
  border-radius: var(--ds-radius-full);
  /* Relleno en lugar de contorno: es una pastilla de estado, no una caja. */
  background: var(--ds-surface-sunken);
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
  white-space: nowrap;
}

.app-sync__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ds-success);
  flex: none;
}

.app-sync[data-state="pending"] .app-sync__dot { background: var(--ds-warning); }
.app-sync[data-state="offline"] .app-sync__dot { background: var(--ds-text-subtle); }
.app-sync[data-state="error"] .app-sync__dot { background: var(--ds-danger); }

.app-sync[data-state="syncing"] .app-sync__dot {
  background: var(--ds-accent);
  animation: app-sync-pulse 1s ease-in-out infinite;
}

@keyframes app-sync-pulse {
  50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .app-sync[data-state="syncing"] .app-sync__dot { animation: none; }
}

/* Marca lo que todavía no llegó al servidor. */
.app-local-badge {
  font-size: var(--ds-text-xs);
  color: var(--ds-warning);
}

/* ==================== Cuestionario dinámico ==================== */

.app-question {
  display: grid;
  gap: var(--ds-space-2);
  padding: var(--ds-space-4) 0;
  border-bottom: 1px solid var(--ds-border);
}

.app-question:last-child { border-bottom: 0; }

.app-question__label {
  font-weight: var(--ds-weight-semibold);
  display: flex;
  gap: var(--ds-space-2);
  align-items: baseline;
}

.app-question__required { color: var(--ds-danger); }

.app-question__hint {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
}

.app-choice-list {
  display: grid;
  gap: var(--ds-space-2);
}

/*
 * Una opción del cuestionario. Acá el contorno **sí** significa algo: es lo que
 * se elige, y la línea es lo que dice cuál está elegida. Se dibuja siempre en
 * transparente para que marcar una no mueva a las de al lado.
 */
.app-choice {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-sunken);
  cursor: pointer;
  transition: background var(--ds-duration-fast) var(--ds-ease),
              border-color var(--ds-duration-fast) var(--ds-ease);
}

.app-choice:hover { background: var(--ds-surface-hover); }

.app-choice:has(input:checked) {
  border-color: var(--ds-accent);
  background: var(--ds-accent-soft);
}

.app-choice input { accent-color: var(--ds-accent); }

/* Es el control que más se toca en el campo, y muchas veces de pie: área grande
   y sin doble toque para acercar. El pellizco de la página sigue disponible. */
@media (pointer: coarse) {
  .app-choice {
    min-height: 48px;
    touch-action: manipulation;
  }

  .app-choice input {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* Entrega de muestras: producto + cantidad. */
.app-delivery-row {
  display: grid;
  grid-template-columns: 1fr 6rem auto;
  gap: var(--ds-space-2);
  align-items: end;
}

@media (max-width: 520px) {
  .app-delivery-row { grid-template-columns: 1fr 5rem auto; }
}


/* ==================== Etiquetas del doctor ==================== */

.app-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}

/*
 * Una etiqueta que se toca. Apagada es un contorno tenue —dice «esto se puede
 * poner» sin afirmar nada—; encendida toma el color de su tono, el mismo con el
 * que después se ve en la lista. Es de los casos donde el borde sí significa
 * algo: marca lo que está seleccionado.
 */
.app-tags__toggle {
  min-height: 32px;
  padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-full);
  background: none;
  color: var(--ds-text-muted);
  font: inherit;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--ds-duration-fast) var(--ds-ease),
              color var(--ds-duration-fast) var(--ds-ease),
              border-color var(--ds-duration-fast) var(--ds-ease);
}

.app-tags__toggle:hover { border-color: var(--ds-border-strong); color: var(--ds-text); }
.app-tags__toggle:disabled { opacity: 0.6; cursor: progress; }

.app-tags__toggle[aria-pressed="true"] { border-color: transparent; }

.app-tags__toggle--success[aria-pressed="true"] { background: var(--ds-success-soft); color: var(--ds-success); }
.app-tags__toggle--warning[aria-pressed="true"] { background: var(--ds-warning-soft); color: var(--ds-warning); }
.app-tags__toggle--info[aria-pressed="true"]    { background: var(--ds-info-soft);    color: var(--ds-info); }

/* La derivada no se toca: es la consecuencia de una fecha, no una opinión. */
.app-tags__derived {
  align-self: center;
  height: 32px;
  padding-inline: var(--ds-space-3);
}

/*
 * Una nota, de cita o de doctor. La barra de la izquierda dice «esto lo escribió
 * alguien» sin rodear el texto con una caja, y cambia de color cuando la escribió
 * administración: son dos voces en la misma ficha, y saber cuál habla cambia
 * cómo se lee.
 */
.app-note {
  display: grid;
  gap: 2px;
  padding: var(--ds-space-3);
  border-left: 3px solid var(--ds-border-strong);
  border-radius: 0 var(--ds-radius-lg) var(--ds-radius-lg) 0;
  background: var(--ds-surface-sunken);
}

.app-note p { margin: 0; }

.app-note--admin { border-left-color: var(--ds-accent); }

/* ==================== Aviso de tratamiento de datos ==================== */

/*
 * El aviso de ubicación (ADR-002). No es una tarjeta más: es un texto legal que
 * hay que poder leer entero, y de ahí que en el teléfono el modal vaya a
 * pantalla completa.
 */
.app-consent {
  display: grid;
  gap: var(--ds-space-4);
}

/*
 * Cada punto separado del siguiente, con una barra que lo ancla.
 *
 * Es uno de los pocos lugares donde el borde se justifica sin marcar ni
 * seleccionar nada: el aviso se recorre con la vista buscando un punto concreto
 * —«¿quién puede verlo?»— y como párrafo corrido no se puede volver a él.
 */
.app-consent__item {
  display: grid;
  gap: var(--ds-space-1);
  padding-left: var(--ds-space-3);
  border-left: 2px solid var(--ds-border);
}

.app-consent__item p { margin: 0; }

/* ==================== Mi actividad ==================== */

/*
 * La jornada como línea de tiempo. Venía del prototipo (`mock-activity`) y sube
 * acá al implementarse la pantalla.
 *
 * No va al design system: es la forma de **esta** pantalla, no un componente que
 * otra vaya a reutilizar. Subir al design system algo que se usa una sola vez lo
 * convierte en un catálogo de casos particulares.
 */
.app-activity {
  display: grid;
  gap: var(--ds-space-1);
}

/* Tres columnas: hora, riel y contenido. El riel es un borde de la columna del
   medio, así la línea se dibuja sola y sigue el alto real de cada movimiento. */
.app-activity__item {
  display: grid;
  /*
   * La primera columna la mide **la hora**, que es lo que nunca se puede partir.
   *
   * Eran 4rem —64px— y «20:29 hrs» necesita 76: se partía en «20:29» y «hrs», y
   * con el relativo debajo cada renglón de la bitácora se llevaba tres líneas
   * para decir una hora. En el teléfono, donde las filas son quince, eso es
   * media pantalla de aire. El relativo sí envuelve: «hace 19 horas» en dos
   * líneas se sigue leyendo, y una hora cortada al medio no.
   */
  grid-template-columns: 4.75rem 1rem minmax(0, 1fr);
  gap: var(--ds-space-3);
  align-items: start;
}

/* La hora entera o nada: es el dato que ordena la lista. */
.app-activity__time > strong {
  white-space: nowrap;
}

/*
 * En pantalla ancha, la columna de la hora deja de partirse.
 *
 * Los 4rem son del teléfono, donde el ancho es todo. En el escritorio —donde
 * esta misma lista es la actividad de otra persona, vista desde el panel— «hace
 * 2 minutos» caía en tres renglones al lado de una hora de cinco caracteres, y
 * el renglón entero quedaba con el alto de la fecha en vez del alto del hecho.
 */
@media (min-width: 768px) {
  .app-activity__item {
    grid-template-columns: 7.5rem 1rem minmax(0, 1fr);
  }
}

/*
 * El movimiento que se puede abrir es un `<button>`, y hay que devolverle lo que
 * el navegador le quita: el ancho completo, la alineación del texto a la
 * izquierda y la tipografía heredada. Sin esto, la fila abrible queda centrada y
 * con la fuente del sistema al lado de las que no lo son.
 */
.app-activity__item--interactive {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: var(--ds-radius-sm);
}

.app-activity__item--interactive:hover .app-activity__head strong {
  text-decoration: underline;
}

.app-activity__item--interactive:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
}

/*
 * Retroceso de una pantalla que no es un destino.
 *
 * Solo para las que **no** están en la navegación: la barra de pestañas y el
 * sidebar están siempre a la vista, así que en un destino este botón sería una
 * segunda salida encima de la que ya existe. La actividad de un día se abre desde
 * la lista y no tiene otra forma de volver.
 */
.app-back {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  background: none;
  border: 0;
  padding: var(--ds-space-2) 0;
  color: var(--ds-text-muted);
  font: inherit;
  cursor: pointer;
}

.app-back:hover { color: var(--ds-text); }

.app-back:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
  border-radius: var(--ds-radius-sm);
}

.app-activity__time {
  display: grid;
  gap: 1px;
  justify-items: end;
  text-align: right;
  padding-top: var(--ds-space-2);
  font-variant-numeric: tabular-nums;
}

.app-activity__rail {
  position: relative;
  align-self: stretch;
  justify-self: center;
  width: 2px;
  background: var(--ds-border);
}

.app-activity__item:last-child .app-activity__rail { background: transparent; }

.app-activity__rail::before {
  content: "";
  position: absolute;
  top: var(--ds-space-3);
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--ds-border-strong);
  background: var(--ds-surface);
}

/* Una llegada es el hito que ordena el resto del día: se marca más fuerte que
   un guardado de respuestas. */
.app-activity__item[data-kind="arrival"] .app-activity__rail::before {
  border-color: var(--ds-success);
  background: var(--ds-success-soft);
}

.app-activity__item[data-kind="consent"] .app-activity__rail::before {
  border-color: var(--ds-warning);
}

.app-activity__body {
  display: grid;
  gap: 2px;
  padding: var(--ds-space-2) 0 var(--ds-space-3);
  min-width: 0;
}

.app-activity__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2);
}

/*
 * El teléfono angosto: el riel adelgaza y los gaps se achican, pero la hora
 * conserva su ancho.
 *
 * Eran 3.25rem —52px— para un texto que mide 76: «20:29 hrs» se partía en dos
 * renglones y, con el relativo debajo, cada movimiento se llevaba tres líneas
 * para decir una hora. Con quince filas eso es media pantalla de aire. Lo que se
 * achica acá es lo que se puede achicar; el dato que ordena la lista, no.
 *
 * Este corte es el que manda en un teléfono, y es fácil no verlo: la regla base
 * y la de 768px están juntas cien líneas más arriba y esta quedó suelta al final
 * del bloque. Tocar solo la de arriba no cambia nada donde importa.
 */
@media (max-width: 560px) {
  .app-activity__item {
    grid-template-columns: 4.75rem 0.75rem minmax(0, 1fr);
    gap: var(--ds-space-2);
  }
}


/* ==================== Bloque de ubicación actual ==================== */

/*
 * Dónde estás y qué puedes atender sin moverte, en un solo bloque. Venía del
 * prototipo (`mock-place`) y sube acá al implementarse la pantalla de visitas.
 *
 * No es una tarjeta como las demás **a propósito**: el contorno de acento y la
 * cabecera tintada son lo que dice «acá estás parado» sin necesidad de leerlo.
 * Con `createCard` se veía igual que la tarjeta de otro centro que está a veinte
 * cuadras, y esa es justamente la distinción que la pantalla existe para hacer.
 */
.app-place {
  border: 1px solid var(--ds-accent);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-surface);
  overflow: hidden;
}

/* Más compacta: dice dónde estás, desde cuándo y las dos salidas. Los datos del
   GPS se fueron a la hoja de «Ver ubicación», que es donde se consultan. */
.app-place__head {
  display: grid;
  gap: var(--ds-space-2);
  padding: var(--ds-space-4) var(--ds-space-5);
  background: var(--ds-accent-soft);
}

.app-place__head .app-place__actions {
  margin-top: var(--ds-space-1);
}

/*
 * Sin ubicación registrada el bloque no puede verse igual de resuelto que con
 * ella: es un estado que hay que salir a completar, no un dato. Tampoco tiene
 * cuerpo: sin lugar no hay citas que listar.
 *
 * **Ya no es punteado.** El punteado quedó reservado para una sola cosa en todo
 * el proyecto: marcar que algo es de prueba —el aviso de prototipo, las cajas
 * del wireframe—. Usado también acá decía dos cosas distintas con la misma
 * línea, y la que más se ve es la equivocada: un representante veía su pantalla
 * real con el mismo borde que las maquetas.
 *
 * Lo que queda es un bloque de superficie hundida sin contorno: lo que dice que
 * falta algo es el texto y el botón, no una línea.
 */
.app-place[data-state="empty"] {
  border: none;
  background: var(--ds-surface-sunken);
}

.app-place[data-state="empty"] .app-place__head { background: transparent; }

.app-place__appts {
  display: grid;
  gap: var(--ds-space-3);
  padding: var(--ds-space-5);
  border-top: 1px solid var(--ds-border);
}

.app-place__appts-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-space-2);
}

.app-place__eyebrow {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
}

.app-place__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-3);
  font-size: var(--ds-text-2xl);
  font-weight: var(--ds-weight-semibold);
  line-height: 1.2;
  margin: 0;
}

.app-place__meta {
  display: grid;
  gap: var(--ds-space-1);
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
}

/* Botón de mapa + hora de la lectura. Se repite en cada lugar de la pantalla, y
   por eso es su propia clase y no un ajuste dentro del banner. En pantalla
   angosta el texto baja debajo del botón en vez de partirse en dos líneas
   apretadas al costado. */
.app-map-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2) var(--ds-space-3);
}

.app-map-row__meta {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
}

.app-place__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}

/*
 * El pie del bloque: cerrar la visita.
 *
 * Alineado a la derecha, que es donde termina de leerse el bloque, y separado
 * del cuerpo por la misma línea que separa la cabecera de las citas. Con el
 * botón suelto al final, sin la línea, parecía la última fila de la lista de
 * citas en lugar del cierre del bloque entero.
 */
.app-place__foot {
  display: flex;
  justify-content: flex-end;
  padding: var(--ds-space-4) var(--ds-space-5);
  border-top: 1px solid var(--ds-border);
}

/* En el teléfono ocupa el ancho: a esa altura de la pantalla es el objetivo más
   grande disponible y no compite con nada. */
@media (max-width: 767.98px) {
  .app-place__foot .ds-btn {
    width: 100%;
  }
}

/* ==================== Página de versión ==================== */

/*
 * Los cambios de cada versión.
 *
 * Con viñeta y sangría propia: son frases sueltas y sin marca se leen como un
 * párrafo partido. La sangría es la del marcador, no la del texto, para que la
 * segunda línea de un cambio largo quede alineada con la primera.
 */
/*
 * La lista de cambios: una etiqueta y un texto por fila.
 *
 * La rejilla vive en la **lista** y no en cada fila, y cada fila es
 * `display: contents`. Con la rejilla en la fila, cada una medía su propia
 * columna y el texto arrancaba en un lugar distinto según lo larga que fuera su
 * etiqueta —«Nuevo» y «Corregido» se llevan 30px de diferencia—, así que la
 * lista no tenía un borde izquierdo por el que recorrerla.
 *
 * `align-items: start` para que la etiqueta quede a la altura del primer
 * renglón y no flotando en el medio de un cambio de cuatro líneas.
 */
.app-changelog {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  row-gap: var(--ds-space-3);
  column-gap: var(--ds-space-3);
  margin: 0;
  padding: 0;
  color: var(--ds-text-muted);
  font-size: var(--ds-text-sm);
  line-height: 1.55;
  /* Sin viñeta: la etiqueta ya marca dónde empieza cada cambio, y las dos
     juntas hacen ruido en el margen. */
  list-style: none;
}

.app-changelog__item {
  display: contents;
}

/* En el teléfono angosto la etiqueta pasa arriba: en dos columnas le quedaban
   unos 190px al texto y cada cambio se partía en cinco renglones. */
@media (max-width: 479.98px) {
  .app-changelog {
    grid-template-columns: 1fr;
    row-gap: var(--ds-space-1);
  }

  /* Un poco de aire antes de cada etiqueta, que ahora es lo que separa un
     cambio del anterior. */
  .app-changelog__item:not(:first-child) .ds-badge {
    margin-top: var(--ds-space-2);
  }
}


/* Red de seguridad: si aun así una etiqueta no entra, el botón se encoge y
   recorta en vez de empujar el borde de la tarjeta. */
.app-place__actions .ds-btn,
.app-place__appts-head .ds-btn {
  min-width: 0;
}

/* ==================== Botón de sincronizar y su estado ==================== */

/*
 * El botón y el estado que lo explica, apilados.
 *
 * En escritorio el encabezado de página alinea sus acciones a la derecha, así
 * que el estado se alinea a la derecha con el botón: quedan sobre el mismo eje y
 * se leen como una sola cosa.
 */
.app-sync-slot {
  display: grid;
  gap: var(--ds-space-2);
  justify-items: end;
}

/*
 * En tableta y teléfono el encabezado se apila y sus acciones ocupan el ancho,
 * con el botón estirado. Alineado a la derecha, el estado quedaría contra el
 * borde de la pantalla y lejos del texto que lo antecede; a la izquierda arranca
 * en el mismo margen que el título y que todo lo demás de la página.
 */
@media (max-width: 1023.98px) {
  .app-sync-slot {
    justify-items: start;
  }
}

/* ==================== Secciones de un formulario largo ==================== */

/*
 * El cuestionario y el cierre de una cita, dentro del panel.
 *
 * Estaban envueltos en `createCard`, y una tarjeta dentro de un panel que ya
 * tiene relleno propio deja el contenido a dos sangrías del borde: menos ancho
 * útil justo donde se escribe, que en un teléfono de 360px se nota. Lo que
 * separa una sección de la siguiente es la línea de arriba, no una caja.
 */
.app-form-section {
  display: grid;
  gap: var(--ds-space-3);
}

.app-form-section + .app-form-section {
  margin-top: var(--ds-space-5);
  padding-top: var(--ds-space-5);
  border-top: 1px solid var(--ds-border);
}

/*
 * Un bloque del alta de cita: el doctor, o el lugar.
 *
 * Cada uno es un buscador con su salida —«no está: registrarlo»— y, cuando se
 * elige esa salida, los campos del alta en su lugar. El bloque existe para que
 * ese cambio de contenido no se lea como que la pantalla se reemplazó: lo que
 * cambia es una parte, y el borde dice cuál.
 */
.app-form-block {
  display: grid;
  gap: var(--ds-space-3);
}

.app-form-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
}

/*
 * Lo elegido, debajo del buscador.
 *
 * El buscador se vacía al elegir —así se puede buscar otra cosa— y sin esta
 * línea no queda **ninguna** señal de qué quedó seleccionado: el formulario se
 * ve idéntico antes y después de elegir.
 */
.app-form-block__chosen {
  display: grid;
  gap: 1px;
  padding: var(--ds-space-2) var(--ds-space-3);
  border-radius: var(--ds-radius-md);
  background: var(--ds-accent-soft);
  color: var(--ds-text);
}

/* ==================== Perfil ==================== */

/*
 * La cabecera del perfil: avatar, nombre, puesto y correo.
 *
 * Es la única pantalla que habla de quien la está mirando, y empezaba con una
 * fila de «etiqueta: valor» como cualquier ficha de datos. El avatar se alinea
 * arriba y no al centro, por lo mismo que en la fila de una cita: centrado
 * apunta al puesto o al correo, que no son suyos.
 */
.app-profile-head {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  padding-bottom: var(--ds-space-3);
  border-bottom: 1px solid var(--ds-border);
}

.app-profile-head__text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

/* El correo no se parte a mitad de palabra ni desborda la tarjeta en un
   teléfono angosto: se corta donde puede. */
.app-profile-head__text span {
  overflow-wrap: anywhere;
}

/*
 * El botón de proponer, a ras del valor de la fila de al lado.
 *
 * Un botón trae su propio relleno horizontal, así que dentro de la lista de
 * datos empezaba doce píxeles a la derecha de los valores de arriba y abajo: en
 * una columna de once filas, esos doce píxeles se leen como si los datos
 * faltantes fueran de otra lista.
 */
.app-profile-data .ds-detail-list__value > .ds-btn {
  margin-inline-start: calc(var(--ds-space-3) * -1);
}