/* ============================================================================
   Ajwebx — Instructivo de inicio v1.0
   Archivo: css/shell/inicio-v-1.0.css
   Creado:  2026-11-01
   Muestra una guía breve en el área de trabajo cuando hay sesión y no hay
   aplicaciones abiertas. Se oculta sola al abrir la primera app.
   ============================================================================ */

#inicio-instructivo
{
    position: absolute;
    inset: 0;
    z-index: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    pointer-events: none;
}

/* El atributo display="off" debe ganar al display:flex de arriba */
#inicio-instructivo[display="off"] {display: none;}

/* Mientras el menú de aplicaciones esté abierto, la guía no se ve detrás */
#main-app-menu:not([display="off"]) ~ #inicio-instructivo {display: none;}

.inicio-tarjeta
{
    width: 100%;
    max-width: 540px;
    padding: 30px 32px;

    background-color: var(--aj-s3, rgba(255, 255, 255, .9));
    -webkit-backdrop-filter: blur(var(--aj-blur-xl, 24px)) saturate(var(--aj-sat, 140%));
    backdrop-filter:         blur(var(--aj-blur-xl, 24px)) saturate(var(--aj-sat, 140%));
    border: 1px solid var(--aj-line, rgba(15, 23, 42, .08));
    border-radius: var(--aj-r-xl, 18px);
    box-shadow: var(--aj-sh2, 0 8px 24px rgba(2, 32, 71, .08)), var(--aj-edge, inset 0 1px 0 rgba(255, 255, 255, .75));
}

.inicio-icono
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    border-radius: var(--aj-r-lg, 14px);
    background-color: var(--aj-accent-soft, #E3F0FC);
}
.inicio-icono svg
{
    width: 24px;
    height: 24px;
    fill: var(--aj-link, #0B4F9E);
}

.inicio-titulo
{
    margin: 0 0 4px;
    font-family: textoB, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 20px;
    line-height: 1.2;
    color: var(--aj-ink, #1B2735);
}

.inicio-sub
{
    margin: 0 0 20px;
    font-family: textoL, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13.5px;
    color: var(--aj-ink-2, #4A5A6E);
}

.inicio-pasos
{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.inicio-pasos li
{
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.inicio-paso-icono
{
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--aj-accent-soft, #E3F0FC);
}
.inicio-paso-icono svg
{
    width: 15px;
    height: 15px;
    fill: var(--aj-link, #0B4F9E);
}

.inicio-pasos strong
{
    display: block;
    margin-bottom: 1px;
    font-family: textoB, system-ui, sans-serif;
    font-size: 13.5px;
    color: var(--aj-ink, #1B2735);
}
.inicio-pasos div span
{
    display: block;
    font-family: textoL, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: var(--aj-ink-2, #4A5A6E);
}

.inicio-pie
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--aj-line, rgba(15, 23, 42, .08));
}

.inicio-nota
{
    margin: 0;
    font-family: textoL, system-ui, sans-serif;
    font-size: 11.5px;
    color: var(--aj-ink-3, #5E7085);
}

.inicio-version
{
    font-family: textoL, system-ui, sans-serif;
    font-size: 11.5px;
    letter-spacing: .02em;
    color: var(--aj-ink-3, #5E7085);
    white-space: nowrap;
    user-select: text;
}

@media screen and (max-width: 560px)
{
    #inicio-instructivo {padding: 16px;}
    .inicio-tarjeta {padding: 22px 20px;}
    .inicio-titulo {font-size: 18px;}
}