/* Renta 210 — trazabilidad de las casillas del 210.
   Depende de los tokens de styles.css: no define ningún color propio.
   Se carga DESPUÉS de styles.css. */

/* ---- la casilla como cosa consultable ---------------------------------- */
.f210-casilla[data-traza],
.f210-celda[data-traza] {
  cursor: pointer;
  transition: background 120ms ease;
}
.f210-casilla[data-traza]:hover,
.f210-celda[data-traza]:hover { background: var(--papel-2); }
.f210-casilla[data-traza]:focus-visible,
.f210-celda[data-traza]:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.f210-casilla[aria-expanded="true"],
.f210-celda[aria-expanded="true"] { background: var(--acento-tenue); }

/* El número de la casilla insinúa que se puede consultar: al pasar por
   encima toma el color del acento. Nada más: el impreso no tiene botones. */
.f210-casilla[data-traza]:hover .f210-num,
.f210-celda[data-traza]:hover .f210-num { border-color: var(--acento); color: var(--acento); }

/* ---- el renglón de origen ---------------------------------------------- */
.traza {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--papel-3);
  border-top: var(--borde-estructural);
  border-left: 3px solid var(--acento);
  padding: var(--e-3) var(--e-5);
  box-shadow: 0 -8px 24px -18px rgba(0, 0, 0, 0.6);
}
.traza[hidden] { display: none !important; }
.traza-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4); }
.traza-cab .etiqueta {
  font-size: var(--t-min); text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; color: var(--acento);
}
.traza-rot { font-size: var(--t-base); font-weight: 600; margin-top: var(--e-1); max-width: 74ch; }
.traza-txt { font-size: var(--t-aux); color: var(--tinta-2); margin-top: var(--e-1); max-width: 88ch; }
.traza-txt .cifra { font-weight: 600; color: var(--tinta); }
.traza-mando { display: flex; gap: var(--e-3); flex-wrap: wrap; margin-top: var(--e-3); }
.traza-mando .btn { padding: 7px 14px; }
.traza-mando .btn:not(.plano) { background: var(--tinta); color: var(--papel-3); border-color: var(--tinta); }
.traza-mando .btn.plano { background: var(--papel-3); color: var(--tinta); }

/* Sobre la barra móvil de estado, no debajo. */
@media (max-width: 759px) {
  .traza { bottom: 44px; padding: var(--e-3) 16px; }
  .traza-rot { font-size: var(--t-aux); }
}

/* ---- el soporte al que lleva ------------------------------------------- */
.folio.traza-destacado {
  outline: 2px solid var(--acento); outline-offset: 4px;
  animation: traza-señal 2400ms ease-out;
}
@keyframes traza-señal {
  0%, 60% { background-color: var(--acento-tenue); }
  100% { background-color: transparent; }
}

@media print {
  .traza { display: none !important; }
  .f210-casilla[data-traza], .f210-celda[data-traza] { cursor: auto; background: transparent !important; }
  .folio.traza-destacado { outline: 0; animation: none; }
}

/* ---- los papeles concretos detrás de la cifra --------------------------- */
.traza-sub {
  font-size: var(--t-min); text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600; color: var(--tinta-2); margin-top: var(--e-3);
}
.traza-docs { list-style: none; margin: var(--e-1) 0 0; padding: 0; max-width: 100ch; }
.traza-docs li {
  font-size: var(--t-aux); color: var(--tinta-2);
  padding: 2px 0; border-top: var(--borde-fino);
  display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: baseline;
}
.traza-docs li:first-child { border-top: 0; }
.traza-doc { font-weight: 600; color: var(--tinta); }
.traza-monto { font-family: var(--f-cifra); color: var(--tinta); }
.traza-cita { font-style: italic; }