/* Página inicial (index.html) — SWISH Design System.
   Mismo lenguaje visual que Automatización de Reportes (design_handoff_automatizacion_reportes/):
   cabecera de página + tarjetas blancas (.rp-card de swish-components.css). Namespace .home-.
   Tokens de design-tokens.css, importado desde styles.css. */

.home-app {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
    /* width: body.sidebar-active es flex; sin esto el main se encoge a su contenido. */
    width: 100%;
    min-width: 0;
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--space-7) var(--space-8) var(--space-10);
    box-sizing: border-box;
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.home-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.home-header h1 {
    margin: 0;
}

.home-lead {
    margin: 0;
    max-width: 560px;
    color: var(--grey-600); /* --grey-500 no llega a 4,5:1 sobre el fondo gris */
}

.home-header .rp-eyebrow {
    color: var(--grey-600);
}

/* ── Secciones por categoría ─────────────────────────────────────────────── */
.home-tools {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}

.home-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.home-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--grey-500);
}

.home-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 10px;
    /* Blanco, no --grey-100: sobre el fondo de página (--grey-100) no se vería. */
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--grey-500);
}

.home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4);
}

/* ── Tarjeta de acceso ───────────────────────────────────────────────────── */
.home-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.home-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.home-card:focus-visible {
    outline: 2px solid var(--grey-700);
    outline-offset: 2px;
}

.home-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--coral-100);
    color: var(--coral-500);
}

.home-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-1);
}

.home-card-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
}

.home-card-desc {
    font-size: 13px;
    line-height: 1.4;
    color: var(--grey-500);
}

.home-card-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 13px;
    font-weight: 700;
    color: var(--coral-500);
}

.home-card:hover .home-card-cta {
    color: var(--coral-600);
}

/* ── Carga y vacío ───────────────────────────────────────────────────────── */
.home-card--skeleton {
    min-height: 150px;
}

.home-card--skeleton:hover {
    box-shadow: var(--shadow-card);
    transform: none;
}

.home-skel {
    display: block;
    width: 70%;
    height: 12px;
    border-radius: var(--radius-sm);
    background: var(--grey-100);
    animation: home-skel-pulse 1.4s ease-in-out infinite;
}

.home-skel--icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.home-skel--short {
    width: 40%;
}

@keyframes home-skel-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.home-empty {
    max-width: 560px;
}

.home-empty-title {
    margin: 0;
    font-size: 18px;
    color: var(--ink);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
    .home-app {
        padding: var(--space-5) var(--space-4) var(--space-8);
    }
}

@media (max-width: 420px) {
    .home-grid {
        grid-template-columns: 1fr;
    }
}