/* The "orden de servicio" ticket: the booking summary on /reservar/ step 5 and the status card on /cita/.
   A shop work-order slip: notched sides at the tear line, a dashed perforation, a rubber stamp for the status. */
.ticket { position: relative; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; margin: 0 0 20px; overflow: hidden; }
.ticket-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 16px; border-bottom: 2px dashed var(--line); }
.ticket-head::before, .ticket-head::after { content: ""; position: absolute; bottom: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); }
.ticket-head::before { left: -11px; }
.ticket-head::after { right: -11px; }
.ticket-title { min-width: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.ticket-code { flex: none; white-space: nowrap; font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; letter-spacing: .06em; line-height: 1; }
.ticket-code.pending { white-space: nowrap; font-size: .8rem; font-weight: 700; letter-spacing: .03em; color: var(--ink-3); text-transform: uppercase; border: 1px dashed var(--ink-3); border-radius: 6px; padding: 4px 8px; }
.ticket-rows { display: grid; grid-template-columns: minmax(84px, auto) 1fr; gap: 10px 14px; margin: 0; padding: 18px; }
.ticket-rows dt { color: var(--ink-3); font-size: .88rem; padding-top: .1em; }
.ticket-rows dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ticket-rows dd.big { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; line-height: 1.1; text-transform: none; }
.ticket-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px 18px 16px; background: var(--bg-3); border-top: 1px solid var(--line); }
.ticket-foot .fine { margin: 2px 0 0; }
.ticket-amount-label { font-weight: 700; }
.ticket-amount { font-family: var(--font-head); font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--ink); white-space: nowrap; }
.stamp { display: table; margin: 16px 18px -6px auto; transform: rotate(-6deg); padding: 4px 10px 2px; border: 3px solid currentColor; border-radius: 6px; font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; letter-spacing: .08em; text-transform: uppercase; color: var(--red-2); opacity: .92; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0,0,0,.75) 61%, #000 75%); mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0,0,0,.75) 61%, #000 75%); }
.stamp.grey { color: var(--ink-3); }
.stamp.amber { color: #ffc247; }
@media (prefers-reduced-motion: no-preference) { .stamp.hit { animation: stamp-hit .35s cubic-bezier(.2,1.6,.4,1) both; } }
@keyframes stamp-hit { from { transform: rotate(-6deg) scale(1.8); opacity: 0; } to { transform: rotate(-6deg) scale(1); opacity: .92; } }
.fine { font-size: .85rem; }
@media (max-width: 440px) { .ticket-title { font-size: .92rem; letter-spacing: .04em; } .ticket-code { font-size: 1.45rem; } }