/* BINAS Help Section — componente unificado (fuente de verdad para secciones de ayuda; alias legacy .module/.report/.home/.census/.data/.infraestructura/.ai-help-section → .binas-help-section, .help-card/-icon/-content/-actions → .binas-help-*) */

/* --- Custom properties --- */
.binas-help-section,
.module-help-section,
.report-help-section,
.home-help-section,
.census-help-section,
.data-help-section,
.infraestructura-help-section,
.ai-help-section {
    --hs-bg: var(--color-gray-50, var(--chakra-gray-50));
    --hs-padding: var(--spacing-5, 1.5rem) 0;
}

/* --- Section container --- */
.binas-help-section,
.module-help-section,
.report-help-section,
.home-help-section,
.census-help-section,
.data-help-section,
.infraestructura-help-section,
.ai-help-section {
    padding: var(--hs-padding);
    background: transparent;
}

/* --- Card --- */
.binas-help-card,
.binas-help-section .help-card,
.module-help-section .help-card,
.report-help-section .help-card,
.home-help-section .help-card,
.data-help-section .help-card,
.infraestructura-help-section .help-card,
.ai-help-section .help-card {
    background: var(--outlook-bg-primary);
    border: 1px solid var(--outlook-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
    display: flex;
    align-items: center;
    gap: var(--spacing-5);
}

/* --- Icon --- */
.binas-help-icon,
.binas-help-card .help-icon,
.binas-help-section .help-icon,
.module-help-section .help-icon,
.report-help-section .help-icon,
.home-help-section .help-icon,
.data-help-section .help-icon,
.infraestructura-help-section .help-icon,
.ai-help-section .help-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        rgba(74, 144, 226, 0.12),
        rgba(80, 184, 216, 0.12)
    );
    border-radius: var(--radius-md, 8px);
    font-size: 1.25rem;
    color: var(--palette-blue-primary);
}

/* --- Content --- */
.binas-help-content,
.binas-help-card .help-content,
.binas-help-section .help-content,
.module-help-section .help-content,
.report-help-section .help-content,
.home-help-section .help-content,
.data-help-section .help-content,
.infraestructura-help-section .help-content,
.ai-help-section .help-content {
    flex: 1;
    min-width: 0;
}

.binas-help-content h4,
.binas-help-card .help-content h4,
.help-card .help-content h4 {
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--outlook-text-primary, var(--chakra-gray-800));
    margin: 0 0 var(--spacing-1, 0.25rem);
}

.binas-help-content p,
.binas-help-card .help-content p,
.help-card .help-content p {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--outlook-text-tertiary, var(--color-gray-500));
    line-height: 1.5;
    margin: 0;
}

/* --- Actions --- */
.binas-help-actions,
.binas-help-card .help-actions,
.binas-help-section .help-actions,
.module-help-section .help-actions,
.report-help-section .help-actions,
.home-help-section .help-actions,
.data-help-section .help-actions,
.infraestructura-help-section .help-actions,
.ai-help-section .help-actions {
    flex-shrink: 0;
    display: flex;
    gap: var(--spacing-2, 0.5rem);
}

/* --- Responsive --- */
@media (max-width: 767.98px) {
    .binas-help-card,
    .binas-help-section .help-card,
    .module-help-section .help-card,
    .report-help-section .help-card,
    .home-help-section .help-card,
    .data-help-section .help-card,
    .infraestructura-help-section .help-card,
    .ai-help-section .help-card {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-4, 1rem);
        gap: var(--spacing-3, 0.75rem);
    }

    .binas-help-actions,
    .binas-help-card .help-actions,
    .help-card .help-actions {
        width: 100%;
        justify-content: center;
    }
}

/* --- .btn-help (botón de documentación/ayuda) --- */
.btn-help {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-2, 0.5rem) var(--spacing-4, 1rem);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--palette-blue-primary);
    background: var(--outlook-bg-primary);
    border: 1px solid rgba(var(--palette-blue-primary-rgb, 74, 144, 226), 0.3);
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
    transition: all 0.15s ease;
}

.btn-help:hover {
    background: rgba(var(--palette-blue-primary-rgb, 74, 144, 226), 0.1);
    border-color: var(--palette-blue-primary);
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .btn-help { transition: none; }
}