/* Fold · N1 · INICIO «TE NECESITAN» (te-necesitan.js, 07/10/2026). Un mensaje de Fold más del hilo: el folio de papel de
   siempre (estilos.css) y, dentro, como mucho tres cosas en lista, sin tarjetas, sin barra de desplazamiento propia y sin
   versalitas. El folio es un objeto de papel de color fijo en los dos temas, así que aquí se usan las tintas fijas del
   folio (--tinta, --tinta-apagada) y el cobalto oscuro (--cobalto-hover), que dan AA sobre el papel claro y sobre el
   blanco. Ni rojo ni candados: lo que pide atención lleva un punto ámbar y lo que espera tu visto bueno, uno cobalto
   (el texto ya dice qué es: el color nunca es la única señal). Clases con el prefijo tn-. */

.tn .tn-cabeza { margin: 0 0 10px; font-weight: 650; line-height: 1.35; }
.tn .tn-cabeza:focus { outline: none; }
.tn .tn-nada { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
.tn .tn-nada:focus { outline: none; }

.tn .tn-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tn .tn-cosa { position: relative; padding-left: 18px; min-width: 0; }
.tn .tn-cosa::before { content: ''; position: absolute; left: 1px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--ambar); }
.tn .tn-cosa.tn-pendiente::before { background: var(--cobalto); }

.tn .tn-que { margin: 0 0 2px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; font-feature-settings: 'tnum' 1; }
.tn .tn-porque { margin: 0 0 2px; font-size: .9rem; line-height: 1.45; color: var(--tinta-apagada); overflow-wrap: anywhere; font-feature-settings: 'tnum' 1; }
.tn .tn-fuente { margin: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; font-size: .8rem; line-height: 1.45; color: var(--tinta-apagada); font-feature-settings: 'tnum' 1; }
.tn .tn-fuente-texto { min-width: 0; overflow-wrap: anywhere; }

/* El botón de texto de la interfaz en calma, con el cobalto que se lee sobre el papel del folio. */
.tn .tn-accion { min-height: 36px; padding: 0 6px; font-size: .84rem; color: var(--acento-texto); white-space: nowrap; }
.tn .tn-accion:hover { text-decoration: underline; }
.tn .tn-accion:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 1px; }
.tn .tn-accion:active { transform: scale(.975); }
@media (pointer: coarse) { .tn .tn-accion { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .tn .tn-accion:active { transform: none; } }

/* Lo que se abre con «Ver»: las filas, sobre costuras finas (como las filas de datos de una respuesta). Crece con el
   hilo; nunca se desplaza por dentro. */
.tn .tn-detalle { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--tinta-linea); }
.tn .tn-detalle[hidden] { display: none; }
.tn .tn-detalle li { padding: 6px 0; border-bottom: 1px solid var(--tinta-linea); font-size: .86rem; line-height: 1.4; color: var(--tinta); overflow-wrap: anywhere; font-feature-settings: 'tnum' 1; }

/* En estrecho, el texto de la fuente va en su línea y el botón debajo, a la izquierda (se alcanza con el pulgar). */
@media (max-width: 640px) {
  .tn .tn-fuente { flex-direction: column; align-items: flex-start; }
  .tn .tn-accion { margin-left: -6px; }
}