/* Rediseño neutro "startup" (2026-07-27, decisión del PO): las pantallas
   internas (dashboard, editor, admin, login) son herramienta de trabajo, no
   invitación — fondo blanco, grises neutros y un solo acento casi negro.
   Este override vive aquí y no en tokens.css a propósito: dashboard.css solo
   lo cargan las pantallas internas, así que la landing y la invitación
   conservan la paleta romántica de la marca sin tocarse. */
:root {
  --color-bg: #F7F7F8;
  --color-surface: #FFFFFF;
  --color-muted: #E4E4E7;
  --color-primary: #18181B;
  --color-primary-dark: #000000;
  --color-text: #18181B;
  --color-text-soft: #71717A;
  --color-success: #16A34A;
  --color-error: #DC2626;
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.07);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.dashboard-header {
  background: #fff;
  border-bottom: 1px solid var(--color-muted);
  padding: 0.9rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 50;
}

.dashboard-header-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard-header .brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* Solo el monograma, sin el nombre al lado — mismo criterio que la landing.
   El activo es blanco (nació para la barra verde); invert(1) lo vuelve negro
   sobre la barra clara sin necesitar un segundo archivo. */
.dashboard-header .brand-monograma {
  height: 1.8rem;
  width: auto;
  display: block;
  filter: invert(1);
}

.dashboard-header nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.dashboard-header nav a {
  color: var(--color-text-soft);
  text-decoration: none;
  font-size: 0.9rem;
}

.dashboard-header nav a:hover {
  color: var(--color-text);
}

.dashboard-header nav button {
  background: transparent;
  border: 1px solid var(--color-muted);
  color: var(--color-text-soft);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background-color var(--transition-soft), color var(--transition-soft);
}

.dashboard-header nav button:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.dashboard-content {
  max-width: 960px;
  margin: 2.5rem auto;
  padding: 0 1.5rem;
}

.dashboard-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.plan-badge {
  background: var(--color-surface);
  border: 1px solid var(--color-muted);
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-sm);
  margin: 0;
  font-size: 0.9rem;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  transition: transform var(--transition-soft), box-shadow var(--transition-soft);
  display: inline-block;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

.clients-filter {
  width: 100%;
  max-width: 320px;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  display: block;
}

.text-muted {
  color: var(--color-text-soft);
  font-size: 0.85rem;
}

.dashboard-table select {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  background: #fff;
}

.dashboard-table-wrapper {
  overflow-x: auto;
}

.dashboard-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.dashboard-table th,
.dashboard-table td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-muted);
  font-size: 0.92rem;
}

.dashboard-table th {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-text-soft);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dashboard-table tr:last-child td {
  border-bottom: none;
}

.status-badge {
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  text-transform: capitalize;
  font-weight: 600;
}

.status-draft {
  background: #FEF3C7;
  color: #92400E;
}

.status-published {
  background: #DCFCE7;
  color: #15803D;
}

.status-archived {
  background: #F4F4F5;
  color: #71717A;
}

.status-panel {
  padding-top: 1.25rem;
}

/* Bloqueo Total Post-Registro (V1.9): pantalla de espera para clientes en
   plan Free, sin pago activado todavia. */
.locked-panel {
  max-width: 560px;
  margin: 3rem auto;
  text-align: center;
  padding: 2.5rem 2rem;
}

.locked-panel .block-note {
  margin-bottom: 1.5rem;
}

.status-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-secondary {
  background: transparent;
  color: var(--color-text-soft);
  border: 1px solid var(--color-muted);
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color var(--transition-soft);
}

.btn-secondary:hover {
  background: var(--color-surface);
}

/* Fondo fotografico (2026-07-24). Lo comparten login y registro: son la misma
   puerta de entrada y separarlos daria dos marcas distintas.
   El velo va en diagonal, mas cerrado del lado izquierdo, que es donde se
   apoya la tarjeta blanca del formulario — asi despega del fondo sin tener
   que oscurecer la foto entera. */
.auth-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--color-bg);
  background-image:
    linear-gradient(100deg, rgba(30, 27, 22, 0.66) 0%, rgba(30, 27, 22, 0.46) 48%, rgba(30, 27, 22, 0.26) 100%),
    url('/img/login-fondo.webp');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  padding: 2rem 1.25rem;
}

/* En escritorio la tarjeta se recorre a la izquierda: si se queda centrada
   le tapa la cara a la novia y parece un accidente, no una composicion. */
@media (min-width: 900px) {
  .auth-page {
    justify-content: flex-start;
    padding-left: 9vw;
  }
}

@media (max-width: 640px) {
  .auth-page {
    /* Recorte vertical propio: la version apaisada perderia la mayor parte
       de su ancho en una pantalla de telefono. */
    background-image:
      linear-gradient(180deg, rgba(30, 27, 22, 0.5) 0%, rgba(30, 27, 22, 0.62) 100%),
      url('/img/login-fondo-movil.webp');
  }
}

.auth-form,
.dashboard-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 380px;
  width: 100%;
  background: var(--color-surface);
  padding: 2.25rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* Solo la tarjeta de login/registro, no las del dashboard: sobre una foto
   necesita una sombra mas profunda para despegarse; sobre el fondo liso del
   dashboard esa misma sombra se veria exagerada. */
.auth-form {
  box-shadow: 0 24px 60px rgba(20, 17, 13, 0.45);
}

.dashboard-form {
  border: 1px solid var(--color-muted);
}

.auth-form h1 {
  margin-top: 0;
  text-align: center;
}

.auth-form label,
.dashboard-form label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-soft);
}

.auth-form input,
.dashboard-form input,
.dashboard-form select {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: var(--font-sans);
  background: #fff;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.theme-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.theme-picker .theme-card {
  flex: 1 1 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 0.6rem;
  background: #fff;
  color: var(--color-text);
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition-soft), box-shadow var(--transition-soft), transform var(--transition-soft);
}

.theme-picker .theme-card:hover {
  transform: translateY(-1px);
  box-shadow: none;
}

.theme-picker .theme-card.is-active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.theme-card-swatches {
  display: flex;
  gap: 0.3rem;
}

.theme-card-swatches .swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.theme-card-sample {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-text);
}

.theme-card-name {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

@media (max-width: 480px) {
  .theme-picker {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.35rem;
    margin: 0 -0.1rem;
  }

  .theme-picker .theme-card {
    flex: 0 0 78%;
    scroll-snap-align: center;
  }
}

.auth-form button,
.dashboard-form button {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.95rem;
  transition: transform var(--transition-soft), box-shadow var(--transition-soft);
}

.auth-form button:hover,
.dashboard-form button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

.form-message {
  min-height: 1.2rem;
  font-size: 0.88rem;
  font-weight: 600;
}

.auth-alt {
  text-align: center;
  font-size: 0.9rem;
}

.editor-section {
  margin-bottom: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-muted);
}

.block-editor-card {
  background: var(--color-surface);
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-card);
}

.block-editor-card h3 {
  margin-top: 0;
  font-size: 1.1rem;
}

.block-editor-card form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 480px;
}

.block-editor-card input,
.block-editor-card textarea {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: var(--font-sans);
  background: #fff;
}

.block-editor-card textarea {
  resize: vertical;
  min-height: 2.6rem;
  line-height: 1.5;
}

.block-editor-card button {
  align-self: flex-start;
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform var(--transition-soft);
}

.block-editor-card button:hover {
  transform: translateY(-1px);
}

.block-editor-card input:disabled,
.block-editor-card button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.block-editor-card .block-note a {
  color: var(--color-primary);
  font-weight: 600;
}

.block-note {
  color: var(--color-text-soft);
  font-size: 0.9rem;
}

.optional-tag {
  font-size: 0.68rem;
  font-weight: normal;
  color: var(--color-text-soft);
  border: 1px solid var(--color-muted);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  margin-left: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: normal !important;
}

.inline-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  max-width: 480px;
}

.inline-form input {
  flex: 1;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-sans);
}

/* El campo de pases es corto; el nombre se queda con el espacio */
.inline-form input[type='number'] {
  flex: 0 0 72px;
}

.inline-form button {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 0.65rem 1.3rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* Quien invita + adultos/ninos (2026-07-26): el formulario crece a mas
   controles, asi que puede envolver en pantallas angostas. */
.inline-form {
  flex-wrap: wrap;
}

.inline-form select {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-sans);
}

.guest-count-field {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--color-text-soft);
}

.guest-count-field input[type='number'] {
  flex: 0 0 64px;
}

.guest-list {
  list-style: none;
  padding: 0;
  max-width: 640px;
}

.guest-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-muted);
}

.guest-breakdown,
.guest-invited-by {
  font-size: 0.78rem;
  color: var(--color-text-soft);
  white-space: nowrap;
}

.guest-passes {
  margin-left: auto;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  border: 1px solid var(--color-muted);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  white-space: nowrap;
}

.remove-guest-btn {
  background: none;
  border: 1px solid var(--color-error);
  color: var(--color-error);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  font-size: 0.82rem;
}

/* Acomodo de mesas (2026-07-27): vive en el panel principal, sobre quienes
   ya confirmaron. El select guarda al momento; el borde verde confirma sin
   robar la atencion (se va solo), el rojo se queda porque significa que el
   cambio NO quedo guardado. */
.rsvp-table-select {
  margin-left: auto;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--color-text);
  transition: border-color var(--transition-soft);
}

.rsvp-table-select.is-saved {
  border-color: var(--color-success);
}

.rsvp-table-select.is-error {
  border-color: var(--color-error);
}

.tables-block {
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-muted);
}

.tables-summary-title {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin: 0 0 0.6rem;
}

.tables-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.table-chip {
  background: var(--color-bg);
  border: 1px solid var(--color-muted);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.82rem;
  color: var(--color-text-soft);
}

.table-chip strong {
  color: var(--color-text);
}

.table-chip.is-unassigned {
  border-style: dashed;
}

/* Panel de control (2026-07-26): resumen de confirmaciones como pantalla
   principal del cliente al entrar al dashboard. */
.control-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-md, 10px);
  padding: 1.75rem 1.75rem 1.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-card);
}

.control-panel-heading h1 {
  margin: 0;
  font-size: 1.45rem;
}

.control-panel-date {
  margin: 0.2rem 0 1.4rem;
  color: var(--color-text-soft);
  font-size: 0.9rem;
}

.panel-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.panel-card {
  background: var(--color-bg);
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1rem;
  text-align: center;
}

.panel-card-number {
  display: block;
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.panel-card-yes .panel-card-number { color: var(--color-success); }
.panel-card-no .panel-card-number { color: var(--color-error); }
.panel-card-pending .panel-card-number { color: var(--color-text-soft); }

.panel-card-label {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.panel-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.panel-column h2 {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin: 0 0 0.6rem;
}

.panel-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.panel-column li {
  padding: 0.35rem 0;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--color-muted);
}

.panel-column li:last-child {
  border-bottom: none;
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.panel-link {
  color: var(--color-primary);
  font-size: 0.9rem;
}

.rsvp-summary {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.rsvp-summary li {
  background: var(--color-surface);
  border: 1px solid var(--color-muted);
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.admin-user-card {
  background: var(--color-surface);
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.5rem;
  max-width: 480px;
  box-shadow: var(--shadow-card);
}

/* Editor de ubicaciones (2026-07-25). Reemplaza el textarea con separadores
   "|", que el Product Owner reporto como poco intuitivo y dificil de teclear.
   Cada ubicacion es una ficha con campos propios. */
.places-editor {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.place-item {
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem 1.1rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.place-item legend {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  padding: 0 0.45rem;
}

/* Especificidad a proposito: ".block-editor-card button" (0,1,1) pinta TODOS
   los botones de la tarjeta con el verde primario, asi que estas reglas se
   califican con la tarjeta para ganarle. Es el mismo tropiezo que ya hubo en
   el selector de temas de V1.2. */
.block-editor-card .btn-quitar-place {
  align-self: flex-start;
  margin-top: 0.5rem;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.78rem;
  color: #a24a3f;
  text-decoration: underline;
  cursor: pointer;
  transform: none;
}

.block-editor-card .btn-quitar-place:hover {
  transform: none;
}

/* Agregar ubicacion y escuchar musica: acciones auxiliares, no el Guardar.
   Sin esto se veian los tres iguales y no se distinguia cual guarda. */
.block-editor-card .btn-secondary {
  align-self: flex-start;
  background: transparent;
  color: var(--color-text-soft);
  border: 1px solid var(--color-muted);
  padding: 0.45rem 1rem;
  font-size: 0.88rem;
}

.block-editor-card .btn-secondary:hover {
  background: var(--color-surface);
  transform: none;
}

/* Lista de confirmaciones en el dashboard (2026-07-27): pensada como lista
   de renglones y no como tabla — en el teléfono (donde más se consulta) las
   tablas anchas se aprietan; esto apila natural. */
.responses-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-card);
}

.responses-panel h2 {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin: 0 0 0.9rem;
}

.responses-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.responses-list li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-muted);
}

.responses-list li:last-child {
  border-bottom: none;
}

.response-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.response-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
}

.response-badge.is-yes {
  background: #DCFCE7;
  color: #15803D;
}

.response-badge.is-no {
  background: #FEE2E2;
  color: #B91C1C;
}

.response-meta {
  font-size: 0.82rem;
  color: var(--color-text-soft);
}

.response-comment {
  flex-basis: 100%;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-text-soft);
  margin: 0;
}

/* Móvil (2026-07-27): el dashboard se consulta más en el teléfono que en la
   computadora (decisión del PO). Las tres tarjetas se mantienen lado a lado
   pero compactas, y los paneles pierden padding sobrante. */
@media (max-width: 480px) {
  .dashboard-content {
    margin-top: 1.25rem;
    padding: 0 1rem;
  }

  .control-panel,
  .responses-panel {
    padding: 1.15rem 1.1rem 1.1rem;
  }

  .panel-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
  }

  .panel-card {
    padding: 0.8rem 0.4rem;
  }

  .panel-card-number {
    font-size: 1.55rem;
  }

  .panel-card-label {
    font-size: 0.6rem;
    letter-spacing: 0.06em;
  }

  .panel-actions .btn-primary {
    width: 100%;
    text-align: center;
  }

  /* El renglon de invitado no cabe en una linea de 390px (nombre +
     desglose + quien invita + pases + Quitar, los tres del medio con
     nowrap): desbordaba la pagina entera 51px. En movil se apila — el
     nombre toma su propia linea y los datos van debajo. */
  .guest-list li {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }

  .guest-list li .guest-name {
    flex-basis: 100%;
    font-weight: 600;
  }

  .guest-passes {
    margin-left: 0;
  }

  .remove-guest-btn {
    margin-left: auto;
  }
}