.feriados-container {
    max-width: 900px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.card-destaque {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    gap: 20px;
}

.data-badge-lg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 12px;
    padding: 10px 18px;
    min-width: 75px;
}

    .data-badge-lg .mes {
        font-size: 0.75rem;
        font-weight: 700;
        color: #0284c7;
    }

    .data-badge-lg .dia {
        font-size: 1.75rem;
        font-weight: 800;
        color: #0f172a;
        line-height: 1;
    }

.destaque-info {
    flex: 1;
}

.tag-proximo {
    font-size: 0.7rem;
    font-weight: 700;
    color: #d97706;
}

.titulo-destaque {
    margin: 4px 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}

.subtitulo-destaque {
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
}

.destaque-dias {
    text-align: center;
    border-left: 1px solid #e2e8f0;
    padding-left: 20px;
}

    .destaque-dias .numero {
        font-size: 2rem;
        font-weight: 800;
        color: #0f172a;
        line-height: 1;
        display: block;
    }

    .destaque-dias .rotulo {
        font-size: 0.7rem;
        color: #64748b;
        font-weight: 600;
    }

.filtros-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.input-busca {
    position: relative;
    flex: 1;
    min-width: 240px;
}

    .input-busca i {
        position: absolute;
        left: 14px;
        top: 12px;
        color: #94a3b8;
    }

    .input-busca input {
        width: 100%;
        padding: 9px 12px 9px 38px;
        border: 1px solid #cbd5e1;
        border-radius: 20px;
        outline: none;
        font-size: 0.9rem;
    }

.btn-group-filtros {
    display: flex;
    gap: 6px;
}

.btn-filtro {
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}

    .btn-filtro.active {
        background: #0f172a;
        color: #fff;
        border-color: #0f172a;
    }

.btn-csv {
    background: #0284c7;
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 6px 14px;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Seções e Timeline */
.secao-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

    .secao-header h4 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 700;
        color: #0f172a;
    }

.badge-contagem {
    background: #e2e8f0;
    color: #475569;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
}

.timeline-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-timeline {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 18px;
    gap: 16px;
}

.data-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #0369a1;
    color: #fff;
    border-radius: 8px;
    padding: 6px 10px;
    min-width: 50px;
}

    .data-mini .mes {
        font-size: 0.65rem;
        font-weight: 700;
    }

    .data-mini .dia {
        font-size: 1.1rem;
        font-weight: 800;
        line-height: 1;
    }

    .data-mini.inativa {
        background: #94a3b8;
    }

.card-timeline .detalhes {
    flex: 1;
}

    .card-timeline .detalhes .nome {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 700;
        color: #0f172a;
    }

    .card-timeline .detalhes .info-data {
        font-size: 0.8rem;
        color: #64748b;
        display: block;
    }

    .card-timeline .detalhes .descricao {
        font-size: 0.75rem;
        color: #94a3b8;
    }

.status-tags {
    display: flex;
    align-items: center;
    gap: 8px;
}

.badge-custom {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
}

.badge-nacional {
    background: #e0f2fe;
    color: #0369a1;
}

.badge-estadual {
    background: #dcfce7;
    color: #15803d;
}

.badge-municipal {
    background: #dfe2f3;
    color: #7e22ce;
}

.badge-facultativo {
    background: #fef3c7;
    color: #b45309;
}

.badge-dias {
    font-size: 0.75rem;
    color: #0284c7;
    background: #f0f9ff;
    padding: 4px 8px;
    border-radius: 8px;
}

    .badge-dias.passado {
        color: #64748b;
        background: #f1f5f9;
    }
/* ==========================================================
   RESPONSIVIDADE (Tablets e Dispositivos Menores < 768px)
   ========================================================== */
@media (max-width: 768px) {
    .btn-group-filtros {
        overflow-x: auto;
        padding-bottom: 6px;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .btn-group-filtros::-webkit-scrollbar {
        display: none;
    }

    .btn-filtro,
    .btn-csv {
        flex-shrink: 0;
    }
}

/* ==========================================================
   RESPONSIVIDADE (Mobile < 576px)
   ========================================================== */
@media (max-width: 576px) {
    .feriados-container {
        padding: 0 10px;
    }

    /* 1. Card de Destaque */
    .card-destaque {
        flex-direction: column;
        text-align: center;
        padding: 16px;
        gap: 12px;
    }

    .data-badge-lg {
        width: 100%;
        max-width: 120px;
        padding: 8px;
    }

    .destaque-dias {
        border-left: none;
        border-top: 1px solid #e2e8f0;
        padding-left: 0;
        padding-top: 12px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

        .destaque-dias .numero {
            font-size: 1.5rem;
        }

    .filtros-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .input-busca {
        min-width: 100%;
    }

    .btn-filtro,
    .btn-csv {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    /* 3. Cards da Linha do Tempo */
    .card-timeline {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px;
        gap: 12px;
        position: relative;
    }

    .data-mini {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        gap: 6px;
        padding: 4px;
    }

        .data-mini .dia {
            font-size: 1rem;
        }

    .card-timeline .detalhes {
        width: 100%;
    }

        .card-timeline .detalhes .nome {
            font-size: 0.9rem;
        }

    .status-tags {
        width: 100%;
        justify-content: space-between;
        border-top: 1px dashed #f1f5f9;
        padding-top: 8px;
    }

    /* 4. Cabeçalho de Seção */
    .secao-header {
        align-items: flex-start;
        gap: 8px;
    }

        .secao-header h4 {
            font-size: 1rem;
        }
}