#ticket-render {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  /* min(360px, 100%) y no solo 360px: en un celular el ticket se salía del panel. */
  max-width: min(360px, 100%);
  margin: var(--space-5) auto;
  text-align: center;
  font-family: var(--font-body);
  color: var(--color-text);
}

.ticket-logo { width: 64px; margin: 0 auto var(--space-3); display: block; }
.ticket-negocio { font-family: var(--font-display); font-size: var(--text-xl); margin: 0 0 var(--space-1); }
.ticket-fecha, .ticket-cliente, .ticket-artista { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-1); }

.ticket-lineas {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}
.ticket-linea { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; font-size: var(--text-sm); }
/* La etiqueta nunca se parte: si el dato es largo (una fecha con artista) es el valor el
   que baja de renglón. Antes "Confirmed time" y "Session 1" se partían en dos. */
.ticket-linea-desc { white-space: nowrap; }
.ticket-linea-precio { min-width: 0; text-align: right; }
.ticket-linea-desc { text-align: left; padding-right: var(--space-3); }

.ticket-metodo { color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-3) 0 0; }
.ticket-total { font-size: var(--text-lg); font-weight: 700; color: var(--color-gold-bright); margin: var(--space-2) 0 0; }

.ticket-acciones { display: flex; gap: var(--space-2); justify-content: center; margin: var(--space-4) 0; flex-wrap: wrap; }

/* ---------- Bloques compartidos por los tickets de cita y de pedido ----------
   Viven aquí (y no en citas.css) porque tienda.html y reservar.html también
   renderizan estos tickets y no cargan citas.css. El panel de citas afina
   tamaños y jerarquía con reglas propias bajo .ticket-preview. */

.ticket-productos {
  list-style: none;
  padding: var(--space-4) 0 0;
  margin: var(--space-4) 0 0;
  border-top: 1px dashed var(--color-border);
}

.ticket-producto {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
}

.ticket-producto-desc { text-align: left; padding-right: var(--space-3); }
.ticket-producto-precio { color: var(--color-text-muted); white-space: nowrap; }

.ticket-montos {
  margin: var(--space-4) 0 0;
  border-top: 1px solid var(--color-border-soft);
}

.ticket-monto {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border-soft);
}

.ticket-monto:last-child { border-bottom: none; }
.ticket-monto > span:first-child { color: var(--color-text-muted); text-align: left; flex: 0 0 auto; }
/* Sin nowrap: una fecha larga ("22 de septiembre de 2026 a las 04:29 p.m.") no cabe
   en el ancho del ticket y se salía del recuadro. Los montos son cortos y no parten. */
.ticket-monto > span:last-child { font-weight: 600; flex: 1; text-align: right; word-break: break-word; }
.ticket-monto-resta > span:last-child { color: var(--color-gold-bright); }

.ticket-contacto {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
}

.ticket-contacto-titulo {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gold);
  margin: 0 0 var(--space-2);
}

.ticket-contacto-fila { display: flex; gap: var(--space-3); padding: 2px 0; text-align: left; }

.ticket-contacto-etiqueta {
  flex: 0 0 76px;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-faint);
}

.ticket-contacto-valor {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  word-break: break-word;
}

.ticket-nota {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-style: italic;
  margin: var(--space-3) 0 0;
  line-height: 1.5;
}
/* Cada sesión de una cita dice qué es: el tipo y el nombre del servicio en su renglón, y
   la descripción (si la hay) en letra chica debajo de la fecha. */
.ticket-sesion-que { display: block; font-weight: 600; }

.ticket-sesion-desc {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 400;
  color: var(--color-text-faint);
  white-space: normal;
}
/* ---------- Descuentos en el ticket ----------
   El renglón descuento va en verde: es dinero que no se cobró, y así no se confunde con el
   total cuando el cliente lo lee de reojo. */
.ticket-linea-dcto {
  font-style: normal;
  font-size: .85em;
  font-weight: 700;
  color: #7FB58C;
  white-space: nowrap;
}

.ticket-linea-descuento .ticket-linea-desc,
.ticket-linea-descuento .ticket-linea-precio { color: #7FB58C; }

.ticket-monto-descuento span:last-child { color: #7FB58C; }