/* Prueba 3 · Línea del tiempo (v3, sobre menta): fichas de leche que sobresalen y se levantan al arrastrarlas; al darles la vuelta,
   tinta con la fecha en girasol. «Comprobar» siempre a mano en el pie. */
.tl{--tl-h:104px;--tl-gap:10px;flex:1;display:flex;flex-direction:column;gap:var(--sp-3);-webkit-user-select:none;user-select:none}
.tl-hint{margin:0;text-wrap:balance;font:400 var(--t-m)/1 var(--display);color:var(--tinta)}
.tl-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.tl-list{position:relative;list-style:none;margin:0;padding:0 0 5px;display:flex;flex-direction:column;gap:var(--tl-gap)}
.tl-card{position:relative;height:var(--tl-h);perspective:900px;transition:transform .2s ease;will-change:transform}
.tl-card.is-lifted{z-index:6;transition:none}
.tl-card.is-settling{z-index:6}

/* el giro: delante la foto con «?» (leche), detrás fecha y sitio (tinta) */
.tl-flip{
  position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.3,.7,.2,1);transition-delay:calc(var(--i,0) * 130ms);
}
.tl-card.is-flipped .tl-flip{transform:rotateY(180deg)}
.tl-face{
  position:absolute;inset:0;display:flex;align-items:center;gap:12px;padding:4px 6px;border-radius:var(--r-tesela);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.tl-front{background:var(--leche);color:var(--tinta);box-shadow:0 5px 0 var(--menta-d)}
.tl-back{transform:rotateY(180deg);background:var(--tinta);color:#fff;box-shadow:0 5px 0 var(--tinta-d)}
/* levantada: crece un poco y el canto se hace más alto, como si se despegara */
.tl-card.is-lifted .tl-face{box-shadow:0 0 0 3px var(--tinta),0 12px 0 3px var(--menta-d)}
.tl-card.is-wrong .tl-front{box-shadow:inset 0 0 0 3px var(--tomate),0 5px 0 var(--menta-d)}
.tl-list.is-solved .tl-back{box-shadow:0 0 0 3px var(--lima),0 8px 0 3px var(--tinta-d)}

/* la miniatura es el asa de arrastre: solo ella lleva touch-action: none, así el resto de la tarjeta deja desplazar la página */
.tl-handle,.tl-thumb-box{position:relative;flex:none;width:72px;height:96px;border-radius:16px;overflow:hidden;background:var(--tinta)}
.tl-thumb-box{margin-left:4px}
.tl-handle{touch-action:none;cursor:grab;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.tl-list.is-dragging .tl-handle{cursor:grabbing}
.tl-list.is-solved .tl-handle{cursor:default}
.tl-thumb{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.tl-grip{
  position:absolute;left:50%;top:6px;width:32px;height:14px;margin-left:-16px;border-radius:7px;pointer-events:none;
  background:radial-gradient(circle,#fff 1.6px,transparent 2.1px) 0 0/8px 14px,var(--tinta);
}
.tl-handle:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}

.tl-q{
  flex:1;align-self:stretch;display:grid;place-items:center;padding-top:6px;border-radius:16px;border:2.5px dashed var(--leche-d);
  font:400 54px/1 var(--display);color:#B9AE9C;
}
.tl-moves{flex:none;display:flex;flex-direction:column;gap:6px}
.tl-move{
  display:grid;place-items:center;width:44px;height:44px;border-radius:14px; /* 44 × 44: el mínimo para el dedo */
  background:var(--crema);color:var(--tinta);scroll-margin:110px 0;transition:background-color .1s;
}
.tl-move:active:not(:disabled){background:var(--girasol)}
.tl-move:disabled{opacity:.3;cursor:default}
.tl-move:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}

.tl-when{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding-top:3px}
.tl-when b{text-wrap:balance;font:400 clamp(26px,8vw,32px)/.95 var(--display);color:var(--girasol)}
.tl-when span{font:700 15px/1.2 var(--ui);color:#fff}

/* pie: «Comprobar» siempre a mano aunque la lista sea más alta que la pantalla (con el menta de fondo, que se funde arriba) */
.tl-foot{
  position:sticky;bottom:0;z-index:8;display:flex;flex-direction:column;gap:var(--sp-3);
  margin:auto calc(-1 * var(--g)) -28px;padding:22px var(--g) calc(14px + var(--sab));
  background:linear-gradient(rgba(74,219,156,0),var(--menta) 24px);
}
.tl-feedback{display:flex;flex-direction:column}
.tl-feedback:empty{display:none}

@media (max-width:359px){
  .tl{--tl-h:96px}
  .tl-handle,.tl-thumb-box{width:66px;height:88px}
  .tl-q{font-size:44px}
}
@media (prefers-reduced-motion:reduce){
  .tl-card,.tl-flip{transition-duration:.01ms !important;transition-delay:0s !important}
}