/* Nereida · Filas de cristal (Core 1.5.0; escala de texto de cinco tamaños desde la 1.6.0). Pensadas para ir sobre un fondo oscuro. */
.n-filas {
	--nf-on: #EBF8FF;
	--nf-muted: color-mix(in srgb, var(--nf-on) 50%, transparent);
	--nf-accent: var(--color-blue, #82D7FF);
	--nf-ok: var(--color-success, #22C55E);
	--nf-ink: var(--color-ink, #070035);
	--nf-ease: cubic-bezier(.22, 1, .36, 1);
	display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--nf-on) 5%, transparent);
}
.n-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; padding: 0 14px; border-radius: 12px; background: color-mix(in srgb, var(--nf-on) 7%, transparent); font-size: var(--font-kicker, 14px); font-weight: 500; color: var(--nf-on); }
.n-filas.is-js .n-fila { opacity: 0; translate: 0 8px; transition: opacity .5s var(--nf-ease), translate .6s var(--nf-ease); transition-delay: calc(.15s + var(--d) * .12s); }
.n-filas.is-js.is-in .n-fila { opacity: 1; translate: 0 0; }
.n-fila em { font-style: normal; font-size: var(--font-kicker, 14px); color: var(--nf-muted); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.n-fila-ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--nf-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-ok) 18%, transparent); animation: n-fila-pulso 2.4s ease-in-out infinite; animation-delay: calc(var(--d) * .4s); }
@keyframes n-fila-pulso { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-ok) 18%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--nf-ok) 6%, transparent); } }
.n-fila-ed svg { width: 15px; height: 15px; }
.n-fila-caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 3px; vertical-align: -.16em; background: var(--nf-accent); animation: n-fila-caret 1.1s steps(1) infinite; }
@keyframes n-fila-caret { 50% { opacity: 0; } }
.n-fila em.n-fila-tick { width: 22px; height: 22px; border-radius: 50%; justify-content: center; background: var(--nf-accent); }
.n-fila-tick svg { width: 12px; height: 12px; color: var(--nf-ink); }
.n-filas.is-js .n-fila em.n-fila-tick { background: transparent; box-shadow: inset 0 0 0 1.4px color-mix(in srgb, var(--nf-on) 30%, transparent); transition: background .4s var(--nf-ease), box-shadow .4s; transition-delay: calc(.4s + var(--d) * .2s); }
.n-filas.is-js .n-fila-tick svg { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .5s var(--nf-ease); transition-delay: calc(.55s + var(--d) * .2s); }
.n-filas.is-js.is-in .n-fila em.n-fila-tick { background: var(--nf-accent); box-shadow: none; }
.n-filas.is-js.is-in .n-fila-tick svg { stroke-dashoffset: 0; }
/* 1.7.0: etiqueta arriba («Ejemplo») y fecha real a la derecha. Con fechas, el texto de la fila no parte línea. */
.n-filas--tag { position: relative; padding-top: 38px; }
.n-filas-tag { position: absolute; top: 12px; right: 16px; font-size: 11.5px; font-weight: 500; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: var(--nf-muted); }
.n-filas--fechas .n-fila > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-fila em.n-fila-dia { font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--nf-on) 72%, transparent); }
/* 1.25.1: hasta 480 px, las filas con estado apilan nombre y estado. A ese ancho «Servidor propio · sin hosting
   compartido» no cabe en una línea a ningún tamaño legible: el nombre partía en dos y las filas cortas no, así que
   quedaban desiguales. */
@media (max-width: 480px) {
	.n-fila:has(> .n-fila-ok) { height: auto; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 9px 14px; line-height: 1.3; }
	.n-fila:has(> .n-fila-ok) em { line-height: 1.3; }
}
@media (prefers-reduced-motion: reduce) { .n-fila-ok::before, .n-fila-caret { animation: none; } }