/*
 * «Pon en marcha {tu_asociacion}» en el Inicio de la Junta (9 nov 2026,
 * inicio-primeros-pasos.js; docs/inicio.md, «Pon en marcha»). Va arriba, antes
 * de la portada, mientras falte algo importante por preparar. Con la luz del
 * color de la asociación (--marca-acento), como el resto del Inicio:
 *
 *   1. La tarjeta y su cabecera
 *   2. La barra de «N de M hechos»
 *   3. El paso de ahora, en grande
 *   4. La lista de pasos
 *   5. Plegado («Ocultar por ahora»)
 *   6. Móvil
 */

/* #region 1. La tarjeta y su cabecera */
.inicio-pasos {
    position: relative;
    display: grid;
    gap: var(--espacio-4);
    padding: var(--espacio-5);
    margin-bottom: var(--espacio-5);
    overflow: hidden;
}

/* La luz del color de la asociación sobre el cristal de las tarjetas (gestion.css). */
.app-panel .contenido-gestion .inicio-pasos {
    border-color: color-mix(in srgb, var(--marca-acento) 35%, transparent);
    background:
        radial-gradient(36rem 12rem at 0% 0%, color-mix(in srgb, var(--marca-acento) 16%, transparent), transparent 70%),
        var(--panel-tarjeta-fondo);
}

.inicio-pasos[hidden] {
    display: none;
}

.inicio-pasos__cabecera {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-4);
}

.inicio-pasos__insignia {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--marca-boton), color-mix(in srgb, var(--marca-boton) 60%, #000));
    box-shadow: 0 10px 26px color-mix(in srgb, var(--marca-acento) 40%, transparent);
    color: var(--marca-sobre-boton);
}

.inicio-pasos__insignia .icono {
    width: 24px;
    height: 24px;
}

.inicio-pasos__textos {
    flex: 1;
    min-width: 0;
}

.inicio-pasos__textos h2 {
    margin: 0;
    font-size: var(--texto-h3);
    line-height: 1.2;
}

.inicio-pasos__textos p {
    margin: var(--espacio-1) 0 0;
    color: var(--rs-texto-secundario);
}

.inicio-pasos__ocultar {
    flex-shrink: 0;
    color: var(--rs-texto-tenue);
}
/* #endregion */

/* #region 2. La barra de «N de M hechos» */
.inicio-pasos__progreso {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
}

.inicio-pasos__progreso strong {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.inicio-pasos__barra {
    flex: 1;
    display: block;
    height: 10px;
    overflow: hidden;
    border-radius: var(--radio-pildora);
    background: rgb(255 255 255 / 0.08);
}

:root[data-theme="light"] .inicio-pasos__barra {
    background: rgb(16 20 26 / 0.08);
}

.inicio-pasos__barra > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--rs-exito) 70%, transparent), var(--rs-exito));
    box-shadow: 0 0 14px color-mix(in srgb, var(--rs-exito) 50%, transparent);
    transition: width 0.6s var(--curva, ease);
}
/* #endregion */

/* #region 3. El paso de ahora, en grande */
.inicio-pasos__ahora {
    display: flex;
    align-items: center;
    gap: var(--espacio-4);
    padding: var(--espacio-4) var(--espacio-5);
    border: 1px solid color-mix(in srgb, var(--marca-acento) 55%, transparent);
    border-radius: 16px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--marca-acento) 14%, transparent), transparent 80%);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca-acento) 8%, transparent);
}

.inicio-pasos__ahora-textos {
    flex: 1;
    min-width: 0;
}

.inicio-pasos__ahora-textos h3 {
    margin: 2px 0 0;
    font-size: 1.15rem;
    line-height: 1.25;
}

.inicio-pasos__ahora-textos p {
    margin: var(--espacio-1) 0 0;
    color: var(--rs-texto-secundario);
}

.inicio-pasos__ahora-textos p strong {
    color: var(--rs-aviso-texto);
    font-weight: 600;
}

.inicio-pasos__etiqueta {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
    color: var(--marca-acento);
    font-size: var(--texto-pequeno);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.inicio-pasos__etiqueta .icono {
    width: 16px;
    height: 16px;
    animation: inicio-pasos-flecha 1.6s ease-in-out infinite;
}

@keyframes inicio-pasos-flecha {
    50% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .inicio-pasos__etiqueta .icono {
        animation: none;
    }
}

.inicio-pasos__ir {
    flex-shrink: 0;
    white-space: nowrap;
}
/* #endregion */

/* #region 4. La lista de pasos */
.inicio-pasos__numero {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--rs-borde);
    border-radius: 50%;
    color: var(--rs-texto-secundario);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.inicio-pasos__numero .icono {
    width: 16px;
    height: 16px;
}

.inicio-pasos__numero--grande {
    width: 52px;
    height: 52px;
    border: 0;
    background: var(--marca-boton);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--marca-acento) 45%, transparent);
    color: var(--marca-sobre-boton);
    font-size: 1.5rem;
}

.inicio-pasos__lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.inicio-pasos__paso a {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    height: 100%;
    padding: var(--espacio-2) var(--espacio-3);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: 12px;
    color: var(--rs-texto);
    text-decoration: none;
    transition: background var(--duracion-hover, 0.15s), border-color var(--duracion-hover, 0.15s);
}

.inicio-pasos__paso a:hover {
    border-color: var(--rs-borde-fuerte);
    background: var(--rs-hover);
}

.inicio-pasos__paso a:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

.inicio-pasos__paso-textos {
    display: grid;
    flex: 1;
    min-width: 0;
}

.inicio-pasos__paso-titulo {
    font-weight: 600;
    line-height: 1.3;
}

.inicio-pasos__paso-textos small {
    color: var(--rs-texto-tenue);
}

/* Hecho: en verde y en segundo plano. */
.inicio-pasos__paso--hecho .inicio-pasos__numero {
    border-color: transparent;
    background: color-mix(in srgb, var(--rs-exito) 20%, transparent);
    color: var(--rs-exito-texto);
}

.inicio-pasos__paso--hecho .inicio-pasos__paso-titulo {
    color: var(--rs-texto-secundario);
    font-weight: 500;
}

.inicio-pasos__paso--hecho small {
    color: var(--rs-exito-texto);
}

/* El de ahora: con el color de la asociación y su flecha. */
.inicio-pasos__paso--ahora a {
    border-color: color-mix(in srgb, var(--marca-acento) 60%, transparent);
    background: color-mix(in srgb, var(--marca-acento) 10%, transparent);
}

.inicio-pasos__paso--ahora .inicio-pasos__numero {
    border-color: transparent;
    background: var(--marca-boton);
    color: var(--marca-sobre-boton);
}

.inicio-pasos__paso--ahora small {
    color: var(--marca-acento);
    font-weight: 600;
}

.inicio-pasos__flecha {
    flex-shrink: 0;
    color: var(--marca-acento);
}
/* #endregion */

/* #region 5. Plegado («Ocultar por ahora») */
.inicio-pasos--plegado {
    padding: var(--espacio-1);
}

.inicio-pasos__abrir {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    width: 100%;
    padding: var(--espacio-2) var(--espacio-4);
    border: 0;
    background: none;
    color: var(--rs-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.inicio-pasos__abrir:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

/* El progreso, en un anillo pequeño alrededor del icono. */
.inicio-pasos__anillo {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, var(--rs-fondo) 76%, transparent 78%),
        conic-gradient(var(--rs-exito) var(--progreso), rgb(127 127 127 / 0.25) 0);
    color: var(--marca-acento);
}

.inicio-pasos__anillo .icono {
    width: 16px;
    height: 16px;
}

.inicio-pasos__abrir-texto {
    flex: 1;
    min-width: 0;
    font-weight: 600;
}

.inicio-pasos__abrir-ir {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--espacio-1);
    color: var(--marca-acento);
    font-size: var(--texto-pequeno);
    font-weight: 600;
}
/* #endregion */

/* #region 6. Móvil */
@media (max-width: 640px) {
    .inicio-pasos {
        padding: var(--espacio-4);
    }

    .inicio-pasos__insignia {
        display: none;
    }

    /* El título a todo lo ancho; «Ocultar por ahora», debajo. */
    .inicio-pasos__cabecera {
        flex-wrap: wrap;
        gap: var(--espacio-2);
    }

    .inicio-pasos__textos {
        flex-basis: 100%;
    }

    /* Compacto: en el móvil, la lista enseña solo lo que falta (lo hecho ya lo cuenta la barra). */
    .inicio-pasos__paso--hecho {
        display: none;
    }

    .inicio-pasos__ahora {
        flex-wrap: wrap;
        padding: var(--espacio-4);
    }

    .inicio-pasos__ahora-textos {
        flex-basis: calc(100% - 52px - var(--espacio-4));
    }

    .inicio-pasos__ir {
        justify-content: center;
        width: 100%;
    }

    .inicio-pasos__lista {
        grid-template-columns: 1fr;
    }

    .inicio-pasos__abrir-ir {
        display: none;
    }
}
/* #endregion */