/* Turnera · Barbería La Línea. Solo animamos transform y opacity. */
.t-nojs { margin: 0; }
.js .t-nojs { display: none; }
.t-app { display: none; }
.js .t-app { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.t-picker, .t-side { min-width: 0; }
.t-picker { display: grid; gap: 22px; }

.t-set { border: 0; padding: 0; margin: 0; min-width: 0; }
.t-set legend { padding: 0; margin-bottom: 12px; font-family: var(--font-display), Impact, sans-serif; text-transform: uppercase; font-size: 1.5rem; letter-spacing: .03em; line-height: 1; color: var(--hueso); }
.t-n { color: #ff8d86; }

/* inputs ocultos, etiqueta como chip */
.t-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.t-extra { margin-top: 12px; }
.t-chip, .t-day, .t-hour { position: relative; min-width: 0; }
.t-chip input, .t-day input, .t-hour input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.t-chip span, .t-day span, .t-hour span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; background: var(--papel); color: var(--tinta);
  border: 1.5px solid var(--tinta); border-radius: var(--radius); box-shadow: 3px 3px 0 var(--tinta); font-weight: 600; font-size: .9375rem; line-height: 1.15; text-align: center;
  transition: transform 160ms var(--ease-out), opacity 160ms var(--ease-out); }
.t-chip b { font-family: var(--font-display), Impact, sans-serif; font-weight: 400; letter-spacing: .03em; color: var(--rojo-hondo); }
.t-chip input:checked + span, .t-day input:checked + span, .t-hour input:checked + span { background: var(--rojo); color: #fff; box-shadow: 1px 1px 0 var(--tinta); transform: translate(2px, 2px); }
.t-chip input:checked + span b { color: #fff; }
.t-chip-extra span { border-style: dashed; }
.t-chip input:active + span, .t-day input:active + span, .t-hour input:active + span { transform: translate(2px, 2px) scale(.97); }
.t-chip input:focus-visible + span, .t-day input:focus-visible + span, .t-hour input:focus-visible + span { outline: 3px solid #fff; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .t-chip input:not(:checked):hover + span, .t-day input:not(:checked):hover + span, .t-hour input:not(:checked):hover + span { transform: translate(-1px, -1px); }
}

/* días: fila con scroll horizontal en móvil */
.t-days { display: flex; gap: 10px; overflow-x: auto; padding: 2px 4px 8px 2px; margin-inline: -2px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.t-day { flex: none; scroll-snap-align: start; }
.t-day span { flex-direction: column; gap: 2px; min-width: 64px; min-height: 60px; padding: 6px 10px; }
.t-day em { font-style: normal; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.t-day strong { font-family: var(--font-display), Impact, sans-serif; font-weight: 400; font-size: 1.375rem; line-height: 1; }
.t-day-hoy em::after { content: ' · hoy'; text-transform: lowercase; letter-spacing: 0; }

.t-hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; }
.t-hour span { font-variant-numeric: tabular-nums; padding: 0 6px; }
.t-hint { margin-top: 10px; font-size: .875rem; color: color-mix(in srgb, var(--hueso) 78%, transparent); }
.t-hint:empty, .t-hint[hidden] { display: none; }

.t-name label { display: block; margin-bottom: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .8125rem; }
.t-name label span { text-transform: none; letter-spacing: 0; font-weight: 400; color: color-mix(in srgb, var(--hueso) 78%, transparent); }
.t-name input { width: 100%; min-height: 48px; padding: 0 14px; font: inherit; color: var(--tinta); background: var(--papel); border: 1.5px solid var(--tinta); border-radius: var(--radius); box-shadow: 3px 3px 0 var(--tinta); }
.t-name input::placeholder { color: #6b675f; }
.t-name input:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ticket */
.t-side { display: grid; gap: 14px; align-content: start; }
.t-ticket-wrap { filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, .55)); }
.t-ticket { position: relative; background: var(--papel); color: var(--tinta); padding: 20px 22px 30px; border-radius: 2px; }
/* muescas laterales a la altura de la línea punteada y borde inferior en dientes (máscara: la sombra sigue la forma) */
.t-ticket { --cut: calc(100% - 78px);
  -webkit-mask: radial-gradient(circle 10px at 0 var(--cut), #0000 9.5px, #000 10px), radial-gradient(circle 10px at 100% var(--cut), #0000 9.5px, #000 10px), radial-gradient(circle 6px at 50% 100%, #0000 5.5px, #000 6px) 0 0 / 16px 100% repeat-x;
  -webkit-mask-composite: source-in, source-in;
  mask: radial-gradient(circle 10px at 0 var(--cut), #0000 9.5px, #000 10px), radial-gradient(circle 10px at 100% var(--cut), #0000 9.5px, #000 10px), radial-gradient(circle 6px at 50% 100%, #0000 5.5px, #000 6px) 0 0 / 16px 100% repeat-x;
  mask-composite: intersect; }
.t-top { display: grid; gap: 10px; padding-bottom: 14px; border-bottom: 1.5px solid var(--tinta); margin-bottom: 6px; }
.t-top h3 { font-size: 2.5rem; line-height: 1; letter-spacing: .04em; }
.t-pole { display: block; height: 10px; border: 1.5px solid var(--tinta); border-radius: 5px; background: repeating-linear-gradient(135deg, var(--rojo) 0 8px, var(--papel) 8px 14px, var(--azul) 14px 22px, var(--papel) 22px 28px); }
.t-rows { display: grid; }
.t-row { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid rgba(20, 20, 20, .14); }
.t-row dt { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #55524c; flex: none; }
.t-row dd, .t-total b { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.t-total { margin-top: 14px; border: 0; border-top: 2px dashed var(--tinta); padding-top: 16px; align-items: center; }
.t-total span { font-family: var(--font-display), Impact, sans-serif; text-transform: uppercase; font-size: 1.25rem; letter-spacing: .03em; }
.t-total b { font-family: var(--font-display), Impact, sans-serif; font-weight: 400; font-size: 2rem; line-height: 1; color: var(--rojo-hondo); }

.t-stamp { animation: t-stamp 220ms var(--ease-out); }
@keyframes t-stamp { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.t-send { width: 100%; }
.t-send[aria-disabled="true"] { background: #5a5f78; color: #fff; box-shadow: 3px 3px 0 rgba(0, 0, 0, .5); cursor: not-allowed; opacity: .85; }
.t-send[aria-disabled="true"]:active { transform: none; box-shadow: 3px 3px 0 rgba(0, 0, 0, .5); }
@media (hover: hover) and (pointer: fine) { .t-send[aria-disabled="true"]:hover { background: #5a5f78; } }
.t-send-hint { text-align: center; font-size: .875rem; color: color-mix(in srgb, var(--hueso) 85%, transparent); margin-top: -4px; }
.t-send-hint.is-ready { visibility: hidden; }
.t-demo { text-align: center; font-size: .8125rem; color: color-mix(in srgb, var(--hueso) 72%, transparent); }

/* tres pasos */
.t-steps { list-style: none; padding: 0; margin: 48px 0 0; display: grid; gap: 0; border-top: 1.5px solid color-mix(in srgb, var(--hueso) 40%, transparent); }
.t-steps li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px dashed color-mix(in srgb, var(--hueso) 35%, transparent); }
.t-steps b { grid-row: span 2; font-family: var(--font-display), Impact, sans-serif; font-weight: 400; font-size: 2.5rem; line-height: 1; color: #ff8d86; }
.t-steps span { font-family: var(--font-display), Impact, sans-serif; text-transform: uppercase; font-size: 1.375rem; letter-spacing: .03em; }
.t-steps p { color: color-mix(in srgb, var(--hueso) 82%, transparent); }

@media (min-width: 820px) {
  .js .t-app { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .t-side { position: sticky; top: 88px; }
  .t-days { overflow: visible; flex-wrap: wrap; }
  .t-steps { grid-template-columns: repeat(3, 1fr); gap: 28px; border-top: 0; margin-top: 64px; }
  .t-steps li { border: 1.5px solid color-mix(in srgb, var(--hueso) 40%, transparent); padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .t-stamp { animation: none; }
  .t-chip span, .t-day span, .t-hour span { transition: none; }
}