/* Keres · pantalla de presentación y arranque (antes de que Avalonia pinte). Misma paleta que Styles/Theme.axaml. */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("/fuentes/IBMPlexSans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("/fuentes/IBMPlexSans-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("/fuentes/IBMPlexMono-400.woff2") format("woff2"); }

:root {
    color-scheme: dark;
    --fondo: #0D1113; --superficie: #161C20; --borde: #273036; --borde-fuerte: #3A464D;
    --texto: #E5EAEC; --texto-2: #A0ADB3; --texto-3: #7B8A91;
    --acento: #2FD0BF; --acento-solido: #19B5A5; --sobre-acento: #04201D; --aviso: #F2B63B; --critico: #F2605C;
}
:root[data-tema="claro"] {
    color-scheme: light;
    --fondo: #E8ECEE; --superficie: #FAFBFB; --borde: #CCD4D8; --borde-fuerte: #A9B5BB;
    --texto: #12181B; --texto-2: #46535A; --texto-3: #586870;
    --acento: #0A766F; --acento-solido: #0B7F77; --sobre-acento: #F4FBFA; --aviso: #8A5A00; --critico: #B42318;
}
@media (prefers-color-scheme: light) {
    :root[data-tema="sistema"] {
        color-scheme: light;
        --fondo: #E8ECEE; --superficie: #FAFBFB; --borde: #CCD4D8; --borde-fuerte: #A9B5BB;
        --texto: #12181B; --texto-2: #46535A; --texto-3: #586870;
        --acento: #0A766F; --acento-solido: #0B7F77; --sobre-acento: #F4FBFA; --aviso: #8A5A00; --critico: #B42318;
    }
}
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--fondo); overscroll-behavior: none; }
body { -webkit-tap-highlight-color: transparent; }
#out { position: fixed; inset: 0; }

.boot {
    position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
    padding: 16px; box-sizing: border-box; background: var(--fondo); color: var(--texto);
    font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13px;
    transition: opacity 160ms ease-out;
}
.boot.boot-fin { opacity: 0; pointer-events: none; }
.boot-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 16px; }
.boot-marca { display: flex; align-items: center; gap: 12px; }
.boot-marca svg { width: 40px; height: 40px; flex: none; }
.boot-marca h1 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .18em; }
.boot-marca p { margin: 2px 0 0; color: var(--texto-3); font-size: 11px; letter-spacing: .02em; }
.boot-barra { height: 2px; background: var(--borde); overflow: hidden; }
.boot-barra > span { display: block; height: 100%; width: 0; background: var(--acento); transition: width 140ms linear; }
.boot-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.boot-pasos li { display: flex; align-items: baseline; gap: 10px; color: var(--texto-3); }
.boot-pasos li::before { content: ""; flex: none; width: 7px; height: 7px; border: 1px solid var(--borde-fuerte); border-radius: 50%; transform: translateY(0); }
.boot-pasos li .meta { margin-left: auto; font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: var(--texto-3); }
.boot-pasos li.activo { color: var(--texto); }
.boot-pasos li.activo::before { border-color: var(--acento); background: transparent; box-shadow: inset 0 0 0 2px var(--fondo), inset 0 0 0 7px var(--acento); }
.boot-pasos li.hecho { color: var(--texto-2); }
.boot-pasos li.hecho::before { border-color: var(--acento); background: var(--acento); }
.boot-aviso { margin: 0; color: var(--aviso); font-size: 12px; }
.boot-error { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--superficie); border: 1px solid var(--borde); border-left: 2px solid var(--critico); border-radius: 3px; }
.boot-error[hidden], .boot-aviso[hidden] { display: none; }
.boot-error h2 { margin: 0; font-size: 14px; font-weight: 600; }
.boot-error p { margin: 0; color: var(--texto-2); }
.boot-error pre { margin: 0; padding: 7px 9px; background: var(--fondo); border: 1px solid var(--borde); border-radius: 2px; color: var(--texto-2);
    font: 11px/1.45 "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.boot-error button {
    align-self: flex-start; min-height: 34px; padding: 0 16px; border: 1px solid var(--acento-solido); border-radius: 3px; cursor: pointer;
    background: var(--acento-solido); color: var(--sobre-acento); font: 600 13px/1 inherit; font-family: inherit;
}
.boot-error button:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }
.boot.fallo .boot-barra > span { background: var(--critico); }
@media (prefers-reduced-motion: reduce) { .boot, .boot-barra > span { transition: none; } }