/* Pantalla de arranque mientras se descarga WebAssembly (antes de que Avalonia pinte). Blanco y negro, como VESTA. */
html, body { margin: 0; height: 100%; overflow: hidden; background: #FFFFFF; overscroll-behavior: none; }
body { -webkit-tap-highlight-color: transparent; }
#out { height: 100%; }
.splash {
    position: absolute; inset: 0; display: flex; flex-direction: column; gap: 22px;
    align-items: center; justify-content: center; pointer-events: none;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: #FFFFFF; color: #0A0A0A;
}
.splash .marca { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: 0.42em; text-indent: 0.42em; }
.splash p { margin: 0; color: #5F5F5B; font-size: 14px; }
.splash .bar { width: 120px; height: 3px; border-radius: 2px; background: #E6E6E3; overflow: hidden; }
.splash .bar::after {
    content: ""; display: block; width: 40%; height: 100%; background: #0A0A0A; border-radius: 2px;
    animation: carga 1.1s ease-in-out infinite;
}
@keyframes carga { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@media (prefers-color-scheme: dark) {
    html, body { background: #0A0A0A; }
    .splash { background: #0A0A0A; color: #F5F5F3; }
    .splash p { color: #A3A39E; }
    .splash .bar { background: #2A2A28; }
    .splash .bar::after { background: #F5F5F3; }
}
@media (prefers-reduced-motion: reduce) { .splash .bar::after { animation: none; width: 100%; } }
.splash.splash-close { transition: opacity 200ms; opacity: 0; display: none; }

/* ── Visor de documentos sobre la aplicación (documentos.abrir en main.js): blanco y negro, como VESTA ─────────────── */
.visor {
    --visor-fondo: #FFFFFF; --visor-texto: #0A0A0A; --visor-borde: #E6E6E3; --visor-suave: #F5F5F4;
    position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
    background: rgba(10, 10, 10, 0.55); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
    .visor { --visor-fondo: #141414; --visor-texto: #F5F5F3; --visor-borde: #2A2A28; --visor-suave: #1C1C1B; background: rgba(0, 0, 0, 0.7); }
}
.visor-panel {
    display: flex; flex-direction: column; width: min(1100px, 100vw - 32px); height: min(92vh, 100vh - 32px);
    background: var(--visor-fondo); color: var(--visor-texto); border: 1px solid var(--visor-borde); border-radius: 22px; overflow: hidden;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.35);
}
.visor-barra { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--visor-borde); }
.visor-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.visor-boton {
    display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--visor-borde);
    background: var(--visor-suave); color: var(--visor-texto); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.visor-principal { background: var(--visor-texto); color: var(--visor-fondo); border-color: var(--visor-texto); }
.visor-cuerpo { flex: 1; min-height: 0; background: var(--visor-suave); display: flex; align-items: center; justify-content: center; overflow: auto; }
.visor-marco { width: 100%; height: 100%; border: 0; background: #FFFFFF; }
.visor-imagen { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 600px) {
    .visor { align-items: stretch; }
    .visor-panel { width: 100vw; height: 100vh; border-radius: 0; border: 0; }
    .visor-barra { padding-top: calc(env(safe-area-inset-top, 0px) + 10px); }
}