/* ══════════════════════════════════════════════════════════════════════════
   toca.css — «Lo que te toca» (equipo-mejoras round 1, 2026-10-22; D6). ONE row piece for every kind (components/kit/Toca.tsx) on the
   kit's tokens (equipo.css :root): papel and crema; vino for the verb and the name; terracota only on an urgent row and always with its
   word (M34-3); Eighties only for a folded row's count, Quicksand for every word; 16 px floor; every tap ≥ 44 px; only transform and
   opacity move. The row: the kind's glyph in a round tile (a task, where a door row has a square) · what · the date in words under it ·
   the verb at its end — the whole row is the tap. Variety comes from the glyph and the verb, never a second shell.
   The frozen sheets (equipo, equipo-v2, salas, juego, mapa, llegar, escritorio) are untouched; the desk variant lives in consola.css
   «toca · diseno». Kill = this file's link in app/layout.tsx (one line) — nothing reads it until a face draws ListaToca.
   ══════════════════════════════════════════════════════════════════════════ */

.toca { container: toca / inline-size; }
.toca .section-head { margin-bottom: 10px; }
.toca-filas { background: var(--papel); border-radius: var(--r-tarjeta); overflow: hidden; }

/* ---- the row (phone): glyph · title on the first line; the date at the left and the verb at the right of the second ---- */
.toca-fila {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "ic t t" "ic c v";
  column-gap: 14px; row-gap: 4px; align-items: center;
  min-height: 64px; padding: 14px 16px; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--d-1) var(--suave);
}
.toca-fila + .toca-fila, .toca-filas > .toca-mas, .toca-mas > .toca-fila { border-top: 1px solid var(--linea); }
.toca-fila:active { transform: scale(.985); }
.toca-fila:focus-visible, .toca-mas > summary:focus-visible { outline: 3px solid var(--vino); outline-offset: -3px; }

.toca-ic, .toca-n { grid-area: ic; align-self: start; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--crema); color: var(--vino); }
.toca-ic .ico { width: 22px; height: 22px; }
/* A folded row: its count where the glyph goes («4» · «Días pedidos»), the house's number letter. */
.toca-n { font-family: var(--f-display); font-weight: 400; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; padding-top: 3px; }

.toca-t { grid-area: t; min-width: 0; font-size: var(--t-cuerpo); font-weight: 700; line-height: 1.3; color: var(--tinta); overflow-wrap: break-word; }
.toca-quien { font-weight: 700; color: var(--vino); }

.toca-cuando { grid-area: c; min-width: 0; font-size: var(--t-apoyo); font-weight: 600; line-height: 1.35; color: var(--gris); }
/* Urgent: the word in its pill right after the title (it never splits the date), and the date in terracota — never colour alone. */
.toca-urgente { display: inline-block; margin: 0 0 0 8px; padding: 0 10px; border-radius: var(--r-pastilla); background: var(--espera-claro); color: var(--espera-tinta); font-size: var(--t-apoyo); font-weight: 700; line-height: 1.5; white-space: nowrap; vertical-align: 1px; }
.toca-fila[data-urgente] .toca-cuando { color: var(--espera-tinta); }

.toca-verbo { grid-area: v; justify-self: end; display: inline-flex; align-items: center; gap: 2px; font-size: var(--t-cuerpo); font-weight: 700; line-height: 1.3; color: var(--vino); white-space: nowrap; }
.toca-verbo .ico { width: 18px; height: 18px; }

/* ---- «y N más»: one tap opens the rest in place (a native details — no script, no screen to go to) ---- */
.toca-mas > summary { display: block; min-height: var(--blanco); padding: 11px 16px; text-align: center; font-size: var(--t-cuerpo); font-weight: 700; line-height: 1.4; color: var(--vino); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.toca-mas > summary::-webkit-details-marker { display: none; }
.toca-mas > summary > span { vertical-align: middle; }
.toca-mas > summary .ico { width: 18px; height: 18px; margin-left: 4px; vertical-align: middle; transition: transform var(--d-2) var(--suave); }
.toca-mas[open] > summary .ico { transform: rotate(180deg); }

/* ---- a wide column (a computer's 760 px, a desk): one line per row, the date and the verb in their own aligned columns ---- */
@container toca (min-width: 600px) {
  .toca-fila { grid-template-columns: 40px minmax(0, 1fr) 12em 7.5em; grid-template-areas: "ic t c v"; column-gap: 16px; min-height: 60px; padding: 10px 18px; }
  .toca-ic, .toca-n { align-self: center; }
  .toca-cuando { text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  .toca-fila, .toca-mas > summary .ico { transition: none; }
  .toca-fila:active { transform: none; }
}