/* Página pública: la marca, el registro de una prueba gratis y la confirmación. Sobria, con un solo color de acento, claro u oscuro según el equipo. */
:root {
  --tinta: #14181f; --apagado: #5b6472; --fondo: #f5f6f9; --superficie: #ffffff; --hundido: #eceef3; --borde: #e1e4eb; --borde-fuerte: #c9cfda;
  --acento: #3b3dad; --acento-fuerte: #2d2f8f; --acento-suave: #e8e8f7; --sobre-acento: #ffffff;
  --ok: #2c7a4b; --ok-suave: #e3f3ea; --aviso: #a85a06; --aviso-suave: #fbeedb; --peligro: #b3261e; --peligro-suave: #fbe7e5;
  --sombra: 0 1px 2px rgba(20, 24, 31, .06), 0 8px 24px rgba(20, 24, 31, .06);
  --radio: 10px; --radio-grande: 16px;
  --ancho: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #eef0f5; --apagado: #a3acbb; --fondo: #0f1218; --superficie: #171b23; --hundido: #1d222c; --borde: #272d39; --borde-fuerte: #384052;
    --acento: #8f91ee; --acento-fuerte: #aeb0f5; --acento-suave: #23264a; --sobre-acento: #10122e;
    --ok: #6cc98f; --ok-suave: #16301f; --aviso: #f0a64d; --aviso-suave: #35260f; --peligro: #f28b82; --peligro-suave: #3a1c1a;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 16px/1.55 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(2rem, 5.4vw, 3.35rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
h3 { font-size: 1.05rem; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--acento); }
a:hover { color: var(--acento-fuerte); }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
.contenedor { width: min(var(--ancho), 100% - 2rem); margin-inline: auto; }
.apagado { color: var(--apagado); }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Barra superior */
.barra { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--fondo) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borde); }
.barra .contenedor { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.marca { display: inline-flex; align-items: center; gap: .6rem; color: var(--tinta); text-decoration: none; font-weight: 700; letter-spacing: -.01em; font-size: 1.1rem; }
.marca:hover { color: var(--tinta); }
.marca-icono { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--acento); color: var(--sobre-acento); font-size: .8rem; font-weight: 800; letter-spacing: 0; }
.menu { margin-left: auto; display: flex; align-items: center; gap: .3rem; }
.menu a { color: var(--apagado); text-decoration: none; padding: .45rem .7rem; border-radius: 8px; font-size: .95rem; }
.menu a:hover { color: var(--tinta); background: var(--hundido); }
.menu .boton { color: var(--sobre-acento); }
@media (max-width: 760px) { .menu a.enlace-seccion { display: none; } }
@media (max-width: 480px) { .marca, .menu a { white-space: nowrap; } .marca { font-size: 1rem; gap: .45rem; } .menu a { padding: .4rem .5rem; font-size: .9rem; } }

/* Botones: rellenos, sin borde, del mismo tamaño en una fila */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .55rem 1.2rem; border: 0; border-radius: var(--radio); background: var(--acento); color: var(--sobre-acento); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.boton:hover { background: var(--acento-fuerte); color: var(--sobre-acento); }
.boton.suave { background: var(--acento-suave); color: var(--acento); }
.boton.suave:hover { background: color-mix(in srgb, var(--acento-suave) 80%, var(--acento)); color: var(--acento); }
.boton.chico { min-height: 38px; padding: .35rem .95rem; font-size: .95rem; }
.boton[disabled] { opacity: .55; cursor: default; }
.fila-botones { display: flex; flex-wrap: wrap; gap: .75rem; }
.fila-botones .boton { min-width: 12.5rem; }

/* Portada */
.portada { padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 4rem); }
.portada .contenedor { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.portada p.sub { margin-top: 1.1rem; font-size: 1.15rem; color: var(--apagado); max-width: 34rem; }
.portada .fila-botones { margin-top: 1.7rem; }
.portada .nota { margin-top: .9rem; font-size: .9rem; color: var(--apagado); }
@media (max-width: 880px) { .portada .contenedor { grid-template-columns: minmax(0, 1fr); } }

/* La vista previa de la administración, dibujada con CSS */
.vista { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); box-shadow: var(--sombra); overflow: hidden; }
.vista-barra { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; background: #1b1f27; color: #fff; font-size: .8rem; font-weight: 600; }
.vista-barra .marca-icono { width: 22px; height: 22px; font-size: .6rem; border-radius: 6px; }
.vista-cuerpo { padding: 1rem; display: grid; gap: .8rem; }
.vista-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.vista-kpi { border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: 10px; padding: .55rem .7rem; }
.vista-kpi span { display: block; font-size: .72rem; color: var(--apagado); }
.vista-kpi strong { font-size: 1.15rem; letter-spacing: -.02em; }
.vista-grafica { border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: 10px; padding: .7rem .8rem .5rem; }
.vista-grafica > span { font-size: .72rem; color: var(--apagado); }
.barras { display: flex; align-items: flex-end; gap: .45rem; height: 96px; margin-top: .5rem; }
.barras i { flex: 1; background: var(--acento); border-radius: 4px 4px 0 0; opacity: .88; }
.b1 { height: 38%; } .b2 { height: 52%; } .b3 { height: 44%; } .b4 { height: 66%; } .b5 { height: 58%; } .b6 { height: 80%; } .b7 { height: 100%; }
.vista-fila { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .35rem 0; border-top: 1px solid var(--borde); font-size: .82rem; }
.vista-fila:first-of-type { border-top: 0; }
.etiqueta { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 600; padding: .05rem .5rem; border-radius: 99px; background: var(--hundido); color: var(--apagado); white-space: nowrap; }
.etiqueta.ok { background: var(--ok-suave); color: var(--ok); }
.etiqueta.aviso { background: var(--aviso-suave); color: var(--aviso); }
.etiqueta.acento { background: var(--acento-suave); color: var(--acento); }

/* Secciones */
.seccion { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.seccion.fondo { background: var(--superficie); border-block: 1px solid var(--borde); }
.seccion .cabecera { max-width: 40rem; margin-bottom: 2rem; }
.seccion .cabecera p { margin-top: .7rem; color: var(--apagado); font-size: 1.05rem; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: var(--radio-grande); padding: 1.15rem 1.2rem; }
.seccion.fondo .tarjeta { background: var(--fondo); }
.tarjeta .icono { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--acento-suave); color: var(--acento); margin-bottom: .8rem; }
.tarjeta .icono svg { width: 22px; height: 22px; }
.tarjeta p { margin-top: .4rem; color: var(--apagado); font-size: .96rem; }
.proximamente { margin-top: 1.4rem; font-size: .95rem; color: var(--apagado); }

.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; counter-reset: paso; }
@media (max-width: 760px) { .pasos { grid-template-columns: minmax(0, 1fr); } }
.paso { background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 1.15rem 1.2rem; }
.paso::before { counter-increment: paso; content: counter(paso); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); font-weight: 700; font-size: .9rem; margin-bottom: .7rem; }
.paso p { margin-top: .35rem; color: var(--apagado); font-size: .96rem; }

.prueba { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 2rem; align-items: center; background: var(--acento); color: var(--sobre-acento); border-radius: var(--radio-grande); padding: clamp(1.5rem, 4vw, 2.6rem); }
@media (max-width: 760px) { .prueba { grid-template-columns: minmax(0, 1fr); } }
.prueba h2 { color: var(--sobre-acento); }
.prueba p { margin-top: .6rem; opacity: .9; }
.prueba ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.prueba li { display: flex; gap: .6rem; align-items: flex-start; }
.prueba li::before { content: "✓"; font-weight: 800; }
.prueba .boton { background: var(--sobre-acento); color: var(--acento); margin-top: 1.2rem; }
.prueba .boton:hover { background: var(--sobre-acento); filter: brightness(.94); }
@media (prefers-color-scheme: dark) { .prueba { background: #23264a; color: #eef0ff; } .prueba h2 { color: #fff; } .prueba .boton { background: var(--acento); color: var(--sobre-acento); } }

.preguntas { display: grid; gap: .7rem; max-width: 46rem; }
details { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .2rem 1rem; }
summary { cursor: pointer; padding: .8rem 0; font-weight: 600; }
details p { padding: 0 0 .9rem; color: var(--apagado); }

.pie { border-top: 1px solid var(--borde); padding: 2rem 0 3rem; color: var(--apagado); font-size: .92rem; }
.pie .contenedor { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
.pie nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.pie a { color: var(--apagado); }
.pie a:hover { color: var(--tinta); }

pre.correo { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: .92rem; margin: .6rem 0 0; }
.bandeja { grid-template-columns: minmax(0, 1fr); }

/* Registro y confirmación */
.pagina-formulario { padding: clamp(1.8rem, 5vw, 3.5rem) 0 4rem; }
.pagina-formulario .contenedor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 880px) { .pagina-formulario .contenedor { grid-template-columns: minmax(0, 1fr); } }
.pagina-formulario.centrada .contenedor { grid-template-columns: minmax(0, 520px); justify-content: center; }
.explicacion p { margin-top: .8rem; color: var(--apagado); font-size: 1.05rem; }
.explicacion ul { margin: 1.2rem 0 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.explicacion li { display: flex; gap: .6rem; }
.explicacion li::before { content: "✓"; color: var(--ok); font-weight: 800; }
.formulario { background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: var(--radio-grande); padding: 1.4rem; box-shadow: var(--sombra); }
.formulario h2 { font-size: 1.35rem; margin-bottom: 1rem; }
.campo { display: grid; gap: .3rem; margin: 0 0 1rem; }
.campo label { font-size: .88rem; font-weight: 600; }
.campo input, .campo select { width: 100%; min-height: 44px; padding: .55rem .75rem; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie); color: var(--tinta); font: inherit; }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.campo .ayuda { font-size: .84rem; color: var(--apagado); }
.campo .ayuda.ok { color: var(--ok); }
.campo .ayuda.malo { color: var(--peligro); }
.dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .8rem; }
@media (max-width: 520px) { .dos { grid-template-columns: minmax(0, 1fr); } }
.casilla { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; margin: .2rem 0 1.1rem; }
.casilla input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--acento); flex: none; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.error { color: var(--peligro); background: var(--peligro-suave); border-left: 4px solid var(--peligro); border-radius: 8px; padding: .6rem .8rem; margin: 0 0 1rem; font-size: .92rem; }
.error:empty { display: none; }
.aviso-ok { background: var(--ok-suave); color: var(--tinta); border-left: 4px solid var(--ok); border-radius: 10px; padding: 1rem 1.1rem; }
.aviso-ok strong { display: block; margin-bottom: .3rem; }
.formulario .boton { width: 100%; }
.requisitos { margin: .4rem 0 0; padding: 0; list-style: none; display: grid; gap: .2rem; font-size: .84rem; color: var(--apagado); }
.requisitos li::before { content: "○ "; }
.requisitos li.listo { color: var(--ok); }
.requisitos li.listo::before { content: "● "; }
.legal { padding: clamp(1.8rem, 5vw, 3rem) 0 4rem; }
.legal .contenedor { max-width: 760px; }
.legal h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin-bottom: 1rem; }
.legal h2 { font-size: 1.2rem; margin: 1.6rem 0 .5rem; }
.legal p, .legal li { color: var(--apagado); }
.legal ul { padding-left: 1.2rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.separado { margin-top: .9rem; }
.aviso-ok .boton { width: auto; }

/* La casilla antirrobot de Turnstile (solo se ve cuando el servidor la tiene configurada). */
.antirrobot { min-height: 65px; margin: .25rem 0 .5rem; }
.antirrobot[hidden] { display: none; }

/* Aplicaciones (descargas de la caja para Windows y Android) */
code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; }
.aplicaciones-portada { padding: clamp(2.2rem, 6vw, 4.2rem) 0 clamp(1.4rem, 3vw, 2.4rem); }
.aplicaciones-portada .sub { margin-top: 1rem; font-size: 1.15rem; color: var(--apagado); max-width: 38rem; }
.fichas-cortas { margin: 1.4rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .5rem .6rem; }
.fichas-cortas li { padding: .35rem .8rem; border: 1px solid var(--borde-fuerte); border-radius: 99px; font-size: .88rem; color: var(--apagado); background: var(--superficie); }
.descargas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; align-items: start; }
@media (max-width: 820px) { .descargas { grid-template-columns: minmax(0, 1fr); } }
.descarga { background: var(--fondo); border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: var(--radio-grande); padding: 1.3rem 1.3rem 1rem; }
.descarga-cabecera { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.descarga-cabecera h2 { font-size: 1.5rem; }
.descarga-dibujo { width: 72px; height: 63px; color: var(--acento); flex: none; }
.ficha { display: grid; grid-template-columns: repeat(3, auto); gap: .2rem 1.6rem; margin: 0 0 1.1rem; justify-content: start; }
.ficha dt { font-size: .75rem; color: var(--apagado); }
.ficha dd { margin: 0; font-weight: 700; letter-spacing: -.01em; }
.descarga-estado.vacio { color: var(--apagado); padding: .8rem 1rem; background: var(--hundido); border-radius: var(--radio); margin-bottom: 1rem; }
.descarga-estado .etiqueta { margin: -.4rem 0 1rem; }
.archivo { display: grid; gap: .45rem; margin-bottom: 1rem; }
.archivo .boton { justify-self: start; min-width: 15rem; }
.nombre-archivo { font-size: .82rem; word-break: break-all; }
.descarga > details { background: transparent; border: 0; border-top: 1px solid var(--borde); border-radius: 0; padding: 0; margin-top: .2rem; }
.descarga > details > summary { padding: .8rem 0; }
.verificar { background: transparent; border: 0; border-top: 1px dashed var(--borde-fuerte); border-radius: 0; padding: 0; }
.verificar summary { padding: .5rem 0; font-weight: 500; font-size: .9rem; color: var(--apagado); }
.huella { display: grid; gap: .3rem; padding-bottom: .8rem; }
.huella code { font-size: .78rem; word-break: break-all; background: var(--hundido); padding: .45rem .6rem; border-radius: 8px; }
.huella .boton { justify-self: start; }
.pasos-cortos { padding-left: 1.2rem; display: grid; gap: .6rem; margin: 0 0 1rem; color: var(--apagado); }
.pasos-cortos strong { color: var(--tinta); }
.linea-pasos { list-style: none; counter-reset: linea; margin: 0; padding: 0; max-width: 46rem; }
.linea-pasos li { counter-increment: linea; position: relative; padding: 0 0 1.7rem 3.3rem; }
.linea-pasos li::before { content: counter(linea); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); display: grid; place-items: center; font-weight: 700; }
.linea-pasos li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 40px; bottom: 6px; width: 2px; background: var(--borde-fuerte); }
.linea-pasos p { margin-top: .35rem; color: var(--apagado); }
.direccion { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .8rem; }
.direccion code { font-size: 1rem; background: var(--hundido); border: 1px solid var(--borde-fuerte); padding: .5rem .8rem; border-radius: 8px; user-select: all; word-break: break-all; }

/* La sección de aplicaciones de la portada */
.aplicaciones-inicio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 46rem; }
@media (max-width: 640px) { .aplicaciones-inicio { grid-template-columns: minmax(0, 1fr); } }
.aplicacion-tarjeta { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: var(--radio-grande); color: var(--tinta); text-decoration: none; }
.aplicacion-tarjeta:hover { border-color: var(--acento); color: var(--tinta); box-shadow: var(--sombra); }
.aplicacion-tarjeta svg { width: 54px; height: 47px; color: var(--acento); flex: none; }
.aplicacion-tarjeta strong { display: block; font-size: 1.1rem; }
.aplicacion-tarjeta span { font-size: .9rem; color: var(--apagado); }

/* Estado del servicio */
.estado-portada { padding: clamp(2rem, 5vw, 3.4rem) 0 clamp(1.2rem, 3vw, 2rem); }
.estado-cinta { display: flex; align-items: center; gap: 1.1rem; padding: 1.3rem 1.5rem; border: 1px solid var(--borde); border-left: 6px solid var(--borde-fuerte); border-radius: var(--radio-grande); background: var(--superficie); }
.estado-cinta h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
.estado-cinta p { margin-top: .3rem; }
.estado-punto { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--borde-fuerte); }
.estado-cinta[data-nivel="ok"] { border-left-color: var(--ok); background: var(--ok-suave); }
.estado-cinta[data-nivel="ok"] .estado-punto { background: var(--ok); }
.estado-cinta[data-nivel="aviso"] { border-left-color: var(--aviso); background: var(--aviso-suave); }
.estado-cinta[data-nivel="aviso"] .estado-punto { background: var(--aviso); }
.estado-cinta[data-nivel="malo"] { border-left-color: var(--peligro); background: var(--peligro-suave); }
.estado-cinta[data-nivel="malo"] .estado-punto { background: var(--peligro); }
.estado-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.estado-cifras div { display: grid; gap: .2rem; align-content: start; }
.estado-cifras strong { font-size: clamp(1.4rem, 3.4vw, 2rem); letter-spacing: -.02em; }
@media (max-width: 640px) { .estado-cifras { grid-template-columns: minmax(0, 1fr); } }
.estado-subtitulo { font-size: 1.25rem; margin-bottom: 1rem; }
.estado-dias { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; height: 46px; }
.estado-dia { border-radius: 3px; background: var(--hundido); }
.estado-dia[data-nivel="ok"], .estado-clave[data-nivel="ok"] { background: var(--ok); }
.estado-dia[data-nivel="aviso"], .estado-clave[data-nivel="aviso"] { background: var(--aviso); }
.estado-dia[data-nivel="malo"], .estado-clave[data-nivel="malo"] { background: var(--peligro); }
.estado-dia[data-nivel="nada"], .estado-clave[data-nivel="nada"] { background: var(--hundido); border: 1px solid var(--borde-fuerte); }
.estado-leyenda { display: flex; justify-content: space-between; margin-top: .4rem; font-size: .82rem; }
.estado-claves { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; list-style: none; margin: 1rem 0 0; padding: 0; font-size: .85rem; }
.estado-claves li { display: flex; align-items: center; gap: .45rem; }
.estado-clave { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.estado-incidentes { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .6rem; max-width: 40rem; }
.estado-incidente { display: grid; gap: .1rem; padding: .7rem 1rem; background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--aviso); border-radius: var(--radio); }
.estado-nota { max-width: 40rem; font-size: .9rem; }

/* El logo de la marca en la barra de arriba. */
.marca-logo { width: 34px; height: 34px; flex: none; border-radius: 9px; display: block; }
.marca-logo-chico { width: 22px; height: 22px; border-radius: 6px; }

/* >>> logo-cargando (generado desde marca/animacion/logo-cargando.css; no editar aquí) */
/* Animación de carga del logo de Tecnical 502: la T se arma, se desarma y los dos puntos giran en órbita antes de volver a empezar.
 *
 * Una sola línea de tiempo de 4,8 s (en «normal») que se repite sin saltos:
 *    0 –  6 %  aparece el punto azul
 *    6 – 18 %  sale la línea del punto azul hacia el centro
 *   18 – 28 %  sube el eje de la T
 *   25 – 31 %  se abre la barra de arriba
 *   30 – 40 %  sale la línea hacia el punto naranja (38 – 43 % aparece el punto)
 *   43 – 50 %  la T queda completa un instante
 *   50 – 60 %  la T se desarma en orden inverso: barra, eje, línea naranja, línea azul
 *   60 – 86 %  los dos puntos dan una vuelta completa en órbita alrededor del centro (con una estela)
 *   86 – 94 %  los puntos se apagan con un pequeño destello
 *   94 –100 %  vacío, y vuelve a empezar
 * Las mismas cifras están en LineaDeTiempoDelLogo.kt (apps) y en la guía de Flutter, Android nativo e iOS. Si se cambia una, se cambian todas.
 * La órbita es posible porque los dos puntos están a la misma distancia del centro (34 unidades): girar es solo rotar alrededor de (40, 44).
 *
 * Solo anima opacidad, transformaciones y el trazo (sin filtros ni sombras): es barato para la GPU. Con «reducir movimiento» en el sistema,
 * se queda quieta con la T completa.
 *
 * Se personaliza con variables CSS en el contenedor .lc-carga:
 *   --lc-duracion  4.8s    --lc-brillo  1 (0 = sin brillo)    --lc-grosor  3.5 (líneas diagonales)
 *   --lc-tinta (la T)      --lc-azul        --lc-naranja
 */
.lc-carga { --lc-duracion: 4.8s; --lc-brillo: 1; --lc-grosor: 3.5; --lc-azul: #5b5fe6; --lc-naranja: #f28c28; --lc-tinta: currentColor; display: inline-flex; align-items: center; gap: .65rem; vertical-align: middle; }
.lc-carga.lc-columna { flex-direction: column; text-align: center; }
.lc-carga.lc-centrado { display: flex; justify-content: center; padding: 1.6rem 0; }
.lc-carga .lc-texto { color: var(--apagado, inherit); }
.lc-tema-claro { --lc-tinta: #0e0e12; --lc-azul: #3b3eac; }
.lc-tema-oscuro { --lc-tinta: #ffffff; --lc-azul: #6d70f2; }
.lc-lenta { --lc-duracion: 6.5s; }
.lc-rapida { --lc-duracion: 3.2s; }

.lc-svg { display: block; flex: none; width: 32px; height: 32px; overflow: visible; }
.lc-t24 { width: 24px; height: 24px; } .lc-t32 { width: 32px; height: 32px; } .lc-t48 { width: 48px; height: 48px; } .lc-t64 { width: 64px; height: 64px; }
.lc-t96 { width: 96px; height: 96px; } .lc-t128 { width: 128px; height: 128px; } .lc-t256 { width: 256px; height: 256px; }

/* El estado base es el logo completo (lo que se ve con movimiento reducido o al detener la animación). */
.lc-linea { fill: none; stroke: var(--lc-tinta); stroke-width: var(--lc-grosor); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.lc-gruesa { fill: none; stroke: var(--lc-tinta); stroke-width: 13; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.lc-barra { stroke-dasharray: none; transform-box: fill-box; transform-origin: center; }
.lc-giro { transform-box: view-box; transform-origin: 40px 44px; }   /* el grupo de los puntos gira alrededor de la unión de las líneas */
.lc-nodo, .lc-brillo { transform-box: fill-box; transform-origin: center; }
.lc-nodo-azul { fill: var(--lc-azul); } .lc-nodo-naranja { fill: var(--lc-naranja); }
.lc-brillo { opacity: calc(.35 * var(--lc-brillo)); }
.lc-brillo-azul { fill: var(--lc-azul); } .lc-brillo-naranja { fill: var(--lc-naranja); }
.lc-estela { fill: none; stroke-width: 3; stroke-linecap: round; opacity: 0; }   /* la estela solo se ve durante la órbita */
.lc-estela-azul { stroke: var(--lc-azul); } .lc-estela-naranja { stroke: var(--lc-naranja); }
.lc-e1 { --lc-e: .55; } .lc-e2 { --lc-e: .38; } .lc-e3 { --lc-e: .22; } .lc-e4 { --lc-e: .10; }

.lc-carga .lc-anim { animation-duration: var(--lc-duracion); animation-iteration-count: infinite; animation-timing-function: linear; }
.lc-carga.lc-una-vez .lc-anim { animation-iteration-count: .47; animation-fill-mode: forwards; }  /* se detiene con la T completa */
.lc-carga.lc-detenida .lc-anim { animation-play-state: paused; }
.lc-nodo-azul.lc-anim { animation-name: lc-nodo-azul; }
.lc-nodo-naranja.lc-anim { animation-name: lc-nodo-naranja; }
.lc-brillo-azul.lc-anim { animation-name: lc-brillo-azul; }
.lc-brillo-naranja.lc-anim { animation-name: lc-brillo-naranja; }
.lc-linea-izq.lc-anim { animation-name: lc-linea-izq; }
.lc-linea-der.lc-anim { animation-name: lc-linea-der; }
.lc-tallo.lc-anim { animation-name: lc-tallo; }
.lc-barra.lc-anim { animation-name: lc-barra; }
.lc-giro.lc-anim { animation-name: lc-giro; }
.lc-estela.lc-anim { animation-name: lc-estela; }

@keyframes lc-nodo-azul {
  0% { opacity: 0; transform: scale(.3); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  6% { opacity: 1; transform: scale(1); }
  86% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  93%, 100% { opacity: 0; transform: scale(.3); }
}
@keyframes lc-nodo-naranja {
  0%, 38% { opacity: 0; transform: scale(.3); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  43% { opacity: 1; transform: scale(1); }
  88% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  94%, 100% { opacity: 0; transform: scale(.3); }
}
@keyframes lc-brillo-azul {
  0% { opacity: 0; transform: scale(.5); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  10%, 86% { opacity: calc(.35 * var(--lc-brillo)); transform: scale(1); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  89% { opacity: calc(.55 * var(--lc-brillo)); transform: scale(1.5); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  93%, 100% { opacity: 0; transform: scale(2); }
}
@keyframes lc-brillo-naranja {
  0%, 38% { opacity: 0; transform: scale(.5); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  45%, 88% { opacity: calc(.35 * var(--lc-brillo)); transform: scale(1); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  91% { opacity: calc(.55 * var(--lc-brillo)); transform: scale(1.5); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  94%, 100% { opacity: 0; transform: scale(2); }
}
/* Las líneas se dibujan con el trazo (pathLength = 1) y se esconden con opacidad 0 cuando están vacías, para que el extremo redondo no deje un punto. */
@keyframes lc-linea-izq {
  0%, 6% { stroke-dashoffset: 1; opacity: 0; }
  6.01% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  18% { stroke-dashoffset: 0; }
  55% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  60% { stroke-dashoffset: 1; opacity: 1; }
  60.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes lc-tallo {
  0%, 18% { stroke-dashoffset: 1; opacity: 0; }
  18.01% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  28% { stroke-dashoffset: 0; }
  51% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  56% { stroke-dashoffset: 1; opacity: 1; }
  56.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes lc-barra {
  0%, 25% { transform: scaleX(0); opacity: 0; }
  25.01% { transform: scaleX(0); opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  31% { transform: scaleX(1); }
  50% { transform: scaleX(1); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  54% { transform: scaleX(0); opacity: 1; }
  54.01%, 100% { transform: scaleX(0); opacity: 0; }
}
@keyframes lc-linea-der {
  0%, 30% { stroke-dashoffset: 1; opacity: 0; }
  30.01% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  40% { stroke-dashoffset: 0; }
  53% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  58% { stroke-dashoffset: 1; opacity: 1; }
  58.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
/* La órbita: una vuelta completa, suave al arrancar y al frenar; las estelas se ven solo mientras gira. */
@keyframes lc-giro {
  0%, 60% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  86%, 100% { transform: rotate(360deg); }
}
@keyframes lc-estela {
  0%, 60% { opacity: 0; animation-timing-function: ease-out; }
  64% { opacity: calc(var(--lc-e) * var(--lc-brillo)); }
  82% { opacity: calc(var(--lc-e) * var(--lc-brillo)); animation-timing-function: ease-in; }
  86%, 100% { opacity: 0; }
}

/* La pastilla de «operación en curso» (POS.operacion): aparece abajo, al centro, solo si algo tarda. */
.lc-flotante { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2000; max-width: calc(100vw - 32px); padding: .45rem 1.1rem .45rem .75rem;
  background: var(--superficie, #ffffff); color: var(--texto, #15181d); border: 1px solid var(--borde, #d9dbef); border-radius: 999px; box-shadow: 0 6px 24px rgba(15, 17, 21, .18); font-size: .9rem; }
.lc-flotante .lc-carga { gap: .55rem; }
.lc-flotante .lc-texto { color: inherit; }

/* Movimiento reducido: la T completa y quieta. */
@media (prefers-reduced-motion: reduce) {
  .lc-carga .lc-anim { animation: none !important; }
}
/* <<< logo-cargando */