/**
 * =============================================================================
 * SECTION CARD - CSS CENTRALIZADO
 * =============================================================================
 * Estilos compartilhados para cards de seção
 *
 * Conteúdo:
 * - Section card base
 * - Section header
 * - Barra de combustível
 * - Labels e valores de informação
 * - Cards de resumo (compactos)
 * =============================================================================
 */

/* =============================================================================
   1. VARIÁVEIS CSS LOCAIS
   ============================================================================= */

.section-card,
.resumo-card {
    /* Cores */
    --sc-surface: var(--color-surface, #f8f9fa);
    --sc-surface-light: #fff;
    --sc-border: var(--color-border-light, #eee);
    --sc-text: var(--color-text, #212529);
    --sc-muted: var(--color-muted, #6c757d);
    --sc-empty: #adb5bd;
    --sc-fuel-bg: var(--color-surface, #e9ecef);

    /* Bordas */
    --sc-radius: 0.5rem;
    --sc-radius-pill: 10px;
    --sc-fuel-height: 20px;

    /* Transições */
    --sc-transition: 0.2s ease;
    --sc-transition-slow: 0.3s ease;

    /* Sombras */
    --sc-shadow: var(--shadow-card, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
    --sc-shadow-hover: var(--shadow-card-hover, 0 4px 8px rgba(0, 0, 0, 0.1));
}

/* =============================================================================
   2. CARDS DE SEÇÃO
   ============================================================================= */

.section-card {
    border: none;
    box-shadow: var(--sc-shadow);
    border-radius: var(--sc-radius);
    overflow: hidden;
    transition: box-shadow var(--sc-transition);
}

.section-card:hover {
    box-shadow: var(--sc-shadow-hover);
}

.section-header {
    background: linear-gradient(to right, var(--sc-surface), var(--sc-surface-light));
    padding: var(--fluid-space-md) var(--fluid-space-lg);
    border-bottom: 1px solid var(--sc-border);
}

.section-header h6 {
    margin: 0;
    font-size: var(--fluid-font-base);
    font-weight: 600;
}

.section-header i {
    margin-right: var(--fluid-space-sm);
}

/* =============================================================================
   3. BARRA DE COMBUSTÍVEL
   ============================================================================= */

.combustivel-bar {
    height: var(--sc-fuel-height);
    background-color: var(--sc-fuel-bg);
    border-radius: var(--sc-radius-pill);
    overflow: hidden;
}

.combustivel-level {
    height: 100%;
    border-radius: var(--sc-radius-pill);
    transition: width var(--sc-transition-slow), background-color var(--sc-transition-slow);
}

/* =============================================================================
   4. LABELS E VALORES
   ============================================================================= */

.info-label {
    font-weight: 600;
    color: var(--sc-muted);
    font-size: var(--fluid-font-sm);
}

.info-value {
    color: var(--sc-text);
    font-size: var(--fluid-font-base);
}

.info-value.empty {
    color: var(--sc-empty);
    font-style: italic;
}

/* =============================================================================
   5. CARDS DE RESUMO (COMPACTOS)
   ============================================================================= */

.resumo-card {
    border: none;
    box-shadow: var(--sc-shadow);
}

.resumo-card .card-body {
    padding: var(--fluid-space-md);
}

.resumo-card .info-label {
    font-size: var(--fluid-font-xs);
    margin-bottom: var(--fluid-space-xs) !important;
}

.resumo-card .info-value {
    font-size: var(--fluid-font-base);
}

.resumo-card i {
    font-size: var(--fluid-font-xl) !important;
}