/* ── La carga (23-sep-2026) ──────────────────────────────────────────────
   Pedro eligió la opción D de vista-previa-carga.html:
   · Al abrir la app, el nombre y una barra de luz que corre, en vez de la
     pantalla morada vacía mientras se piden /yo y /mi-panel.
   · Al cambiar de pantalla, el esqueleto de lo que viene (título, columnas,
     tablero, chat) con un brillo que lo recorre, en vez de "Cargando…". */

/* ── Al abrir ─────────────────────────────────────────────────────────── */
.carga-inicio{
  position:fixed; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  animation:carga-asoma .5s ease both .15s;
}
@keyframes carga-asoma{ from{ opacity:0 } to{ opacity:1 } }
.carga-logo{ font-family:var(--display); font-weight:200; font-size:30px; letter-spacing:.5em; padding-left:.5em; color:var(--tinta) }
.carga-barra{ position:relative; width:180px; height:2px; margin-top:22px; border-radius:2px; background:rgba(238,237,245,.08); overflow:hidden }
.carga-barra i{ position:absolute; top:0; bottom:0; width:40%; background:linear-gradient(90deg, transparent, #b9a5ff, #3fd0c8, transparent); animation:carga-corre 1.4s ease-in-out infinite }
@keyframes carga-corre{ from{ left:-40% } to{ left:100% } }

/* ── Al cambiar de pantalla ───────────────────────────────────────────── */
.esq{ padding:44px 40px 56px; animation:carga-asoma .3s ease both }
.esq-l{
  display:block; border-radius:10px;
  background:linear-gradient(90deg, rgba(238,237,245,.04) 0%, rgba(238,237,245,.09) 20%, rgba(238,237,245,.04) 40%);
  background-size:250% 100%; animation:esq-brillo 1.6s linear infinite;
}
@keyframes esq-brillo{ from{ background-position:100% 0 } to{ background-position:-150% 0 } }

.esq-cols{ display:flex; gap:10px; height:440px; margin-top:30px }
.esq-cols .esq-l{ flex:1; border-radius:22px }
.esq-cols .esq-l:first-child{ flex:1.4 }

.esq-tablero{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.6fr); gap:22px; margin-top:30px }
.esq-tablero > div{ display:flex; flex-direction:column; gap:22px }
.esq-tablero .esq-l{ border-radius:24px }

.esq-chat{ display:flex; flex-direction:column; gap:22px; max-width:740px; min-height:60vh; margin:0 auto; padding-top:10px }
.esq-chat .esq-l{ border-radius:18px }

.esq-lista{ display:flex; flex-direction:column; gap:10px; margin-top:30px; max-width:1100px }
.esq-lista .esq-l{ border-radius:14px }

@media (max-width:860px){
  .esq{ padding:22px 18px 40px }
  .esq-cols{ height:260px }
  .esq-tablero{ grid-template-columns:1fr }
}
@media (prefers-reduced-motion:reduce){ .carga-barra i, .esq-l{ animation:none } .carga-inicio, .esq{ animation:none } }