/* Estabilidad visual: cada pantalla aparece completa y quieta desde el primer cuadro (ver docs/estabilidad.md y pruebas/estabilidad.mjs).
   Solo reserva espacio y suaviza la llegada de datos; no cambia colores, letras ni acomodo. */

/* cada pantalla ocupa al menos el alto de la ventana: el pie nunca se asoma mientras llegan los datos y luego brinca hacia abajo */
body.portal main.pg{min-height:100vh;min-height:100svh}

/* lo que llega de la red aparece de una vez, con un desvanecido corto (solo opacidad: no mueve nada) */
@keyframes estEntra{from{opacity:0}to{opacity:1}}
.est-entra{animation:estEntra var(--dur-1) var(--curva-entra) both}
@media(prefers-reduced-motion:reduce){.est-entra{animation:none}}

/* machote (esqueleto) mientras llegan los datos: bloques del mismo alto que lo que va a llegar */
.est-esq{border-radius:var(--radio-2);background:rgba(255,255,255,.045);background:color-mix(in srgb,currentColor 6%,transparent);position:relative;overflow:hidden}
.est-esq::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.05) 50%,transparent 70%);animation:estBrillo 1.4s linear infinite;transform:translateX(-100%)}
@keyframes estBrillo{to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.est-esq::after{animation:none}}

/* El Club: la fila de historias y la de hashtags guardan su alto antes de que lleguen; la lista guarda lugar para tres publicaciones */
.cm-hoy:empty{min-height:var(--est-hoy,110px)}
.cm-hashrow:empty{min-height:var(--est-hash,42px)}
.cm-esq-post{display:block;height:220px;margin:0 0 16px}
.cm-esq-post:first-child{height:300px}

/* Tabla de precios: fila de filtros y renglones del mismo alto que los de verdad */
.tp-esq-filtro{height:39px;border-radius:var(--radio-2)}
.tp-esq-fila{display:block;height:330px}

/* Cotizador: cuerpo reservado mientras llega el taller */
.ct-esq{display:block;height:min(70vh,620px)}

/* abrir la app con sesión guardada (html.con-sesion, ver <head>): Inicio sale desde el primer cuadro con su machote encima;
   lo de verdad ya ocupa su lugar debajo (invisible) y aparece de una vez cuando llega la cuenta (datos.js quita .esperando-cuenta) */
/* mientras el navegador todavía está leyendo la página (antes del primer ir()), con sesión solo se ve el fondo: nunca la portada */
html.con-sesion body:not([data-p]){visibility:hidden}
.est-inicio{display:none}
html.esperando-cuenta #inicio{position:relative}
html.esperando-cuenta #inicio > :not(.est-inicio){visibility:hidden}
html.esperando-cuenta .est-inicio{display:block;position:absolute;left:16px;right:16px;top:10px;z-index:2}
html.esperando-cuenta header.top .avatar{visibility:hidden}
.est-ini-sal{display:flex;gap:16px;align-items:center;margin:24px 0 20px}
.est-ini-av{display:block;width:56px;height:56px;border-radius:50%;flex:none}
.est-ini-sal div{flex:1}
.est-ini-l1{display:block;height:30px;width:58%;border-radius:var(--radio-2)}
.est-ini-l2{display:block;height:22px;width:42%;margin-top:12px;border-radius:var(--radio-pildora)}
.est-ini-bloque{display:block;height:150px;margin:0 0 16px}
.est-ini-tjs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.est-ini-tjs i{display:block;height:170px}
@media(min-width:900px){.est-ini-tjs{grid-template-columns:repeat(3,1fr)}.est-ini-tjs i{height:210px}}
/* «Hoy» (hoy.js): buscador, Citas de hoy, Cotizaciones y «Nueva cotización» con su alto de verdad */
.est-ini-hoy{display:grid;gap:12px;margin:18px 0 22px}
.est-ini-busca{display:block;height:52px;border-radius:var(--radio-2)}
.est-ini-blq{display:block;height:132px}
.est-ini-nueva{display:block;height:56px;border-radius:var(--radio-2)}
/* «Lo nuevo en el Club» dentro del machote de Inicio: título y tres tarjetas del mismo tamaño que las de verdad (club-inicio.css) */
.est-ini-ci{margin:0 0 var(--esp-5)}
.est-ini-l3{display:block;height:26px;width:52%;margin:0 0 var(--esp-3);border-radius:var(--radio-1)}
.est-ini-cif{display:flex;gap:var(--esp-3);overflow:hidden}
.est-ini-cif i{display:block;flex:none;width:220px;height:196px}
@media(min-width:900px){.est-ini-cif i{width:240px}}

/* barra de abajo siempre pegada abajo de lo que se ve (estable.js): se recorre lo que iOS se desfasa y se esconde con el teclado abierto */
nav.abajo{translate:0 var(--est-barra-y,0px)}
html.est-teclado nav.abajo{visibility:hidden;pointer-events:none}
/* en la app instalada, sin rebote al llegar arriba o abajo (el rebote arrastraba la barra) */
@media(display-mode:standalone){html,body{overscroll-behavior-y:none}}