/*
    Indicador de carga del portal.

    Es la marca del portal en el centro, con dos anillos girando alrededor. Se
    usa en todas partes: al arrancar, al recuperar la sesion y mientras se piden
    datos, para que la espera sea siempre la misma y se reconozca.

    La marca se pinta como silueta y toma el color del tema, en lugar de ser una
    imagen de color fijo que en el tema oscuro quedaria casi invisible.
*/

.portal-cargador {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 1.15rem;
}

/*
    El arranque ocupa la pantalla entera y deja el indicador en el centro. Sin
    esto se quedaba pegado arriba, que era justo lo que se veia al abrir.
*/
.portal-boot.portal-cargador {
    position: fixed;
    inset: 0;
    justify-content: center;
    padding: 1.5rem;
}

.portal-cargador-marca {
    position: relative;
    display: grid;
    place-items: center;
    width: 7.5rem;
    height: 7.5rem;
}

/* Cuando ocupa una pantalla entera, se queda a media altura y no arriba. */
.page-shell > .portal-cargador,
.login-card-main > .portal-cargador {
    min-height: 55vh;
}

/* ── Anillos ── */

.portal-cargador-anillo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* El arco se dibuja con un degradado circular al que se le recorta el
       centro, que da un trazo mas limpio que un borde con lados invisibles. */
    background: conic-gradient(
        from 0deg,
        color-mix(in srgb, var(--accent) 0%, transparent) 0deg,
        color-mix(in srgb, var(--accent) 0%, transparent) 150deg,
        color-mix(in srgb, var(--accent) 45%, transparent) 250deg,
        var(--accent) 340deg,
        color-mix(in srgb, var(--accent) 0%, transparent) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
    animation: portal-cargador-giro 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.portal-cargador-anillo-interior {
    inset: 1.05rem;
    background: conic-gradient(
        from 180deg,
        color-mix(in srgb, var(--warm) 0%, transparent) 0deg,
        color-mix(in srgb, var(--warm) 0%, transparent) 250deg,
        color-mix(in srgb, var(--warm) 75%, transparent) 330deg,
        color-mix(in srgb, var(--warm) 0%, transparent) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    animation: portal-cargador-giro-inverso 2.3s linear infinite;
}

/* Halo suave que respira detras de la marca. */
.portal-cargador-marca::before {
    content: "";
    position: absolute;
    inset: 1.5rem;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--accent) 24%, transparent),
        color-mix(in srgb, var(--accent) 0%, transparent) 70%);
    animation: portal-cargador-latido 2.4s ease-in-out infinite;
}

/* ── La marca ── */

.portal-cargador-logo {
    position: relative;
    width: 3.9rem;
    height: 3.9rem;
    background: var(--accent);
    -webkit-mask: url("/images/marca-portal.png") center / contain no-repeat;
    mask: url("/images/marca-portal.png") center / contain no-repeat;
    animation: portal-cargador-marca 2.4s ease-in-out infinite;
}

.portal-cargador-texto {
    margin: 0;
    font-family: var(--body, sans-serif);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-muted, #98a8be);
    text-align: center;
}

@keyframes portal-cargador-giro {
    to { transform: rotate(360deg); }
}

@keyframes portal-cargador-giro-inverso {
    to { transform: rotate(-360deg); }
}

@keyframes portal-cargador-latido {
    0%, 100% { opacity: 0.45; transform: scale(0.92); }
    50% { opacity: 1; transform: scale(1.06); }
}

@keyframes portal-cargador-marca {
    0%, 100% { transform: scale(1); opacity: 0.88; }
    50% { transform: scale(1.07); opacity: 1; }
}

/* ── Tamaño reducido, para esperas dentro de una pantalla ── */

.portal-cargador-compacto .portal-cargador-marca {
    width: 5rem;
    height: 5rem;
}

.portal-cargador-compacto .portal-cargador-logo {
    width: 2.5rem;
    height: 2.5rem;
}

.portal-cargador-compacto .portal-cargador-anillo-interior {
    inset: 0.7rem;
}

.portal-cargador-compacto .portal-cargador-marca::before {
    inset: 1rem;
}

/* ── Capa centrada sobre la pantalla ── */

.portal-cargador-capa {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: color-mix(in srgb, var(--bg) 62%, transparent);
    backdrop-filter: blur(6px);
    animation: portal-cargador-entrada 0.22s ease;
}

@keyframes portal-cargador-entrada {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .portal-cargador-anillo,
    .portal-cargador-logo,
    .portal-cargador-marca::before,
    .portal-cargador-capa {
        animation-duration: 2.4s;
        animation-timing-function: linear;
    }

    .portal-cargador-logo,
    .portal-cargador-marca::before {
        animation: none;
    }
}