body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

.card {
    border-radius: 10px;
    overflow: hidden;
}

.card-header {
    font-weight: 600;
}

.form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}
/* ===== RESPONSIVIDADE PARA MOBILE ===== */

@media (max-width: 768px) {
    /* Header responsivo */
    header .row {
        text-align: center;
    }
    
    header .col-md-6.text-end {
        text-align: center !important;
        margin-top: 1rem;
    }
    
    header .btn {
        margin: 0.25rem;
        font-size: 0.9rem;
    }
    
    /* Ajustes no main */
    .container {
        padding: 0 15px;
    }
    
    /* Cards de eventos */
    .col-md-4 {
        margin-bottom: 1.5rem;
    }
    
    .card-event {
        margin: 0 10px;
    }
    
    /* Calendário */
    #calendar {
        font-size: 0.8rem;
    }
    
    .fc .fc-toolbar {
        flex-direction: column;
        gap: 1rem;
    }
    
    .fc .fc-toolbar-title {
        font-size: 1.2rem;
    }
    
    /* Modal responsivo */
    .modal-lg {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .modal-body .row {
        flex-direction: column;
    }
    
    /* Footer responsivo */
    footer .row > div {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    footer .text-end {
        text-align: center !important;
    }
    
    /* Botões nos cards */
    .card-footer .btn {
        font-size: 0.8rem;
        padding: 0.375rem 0.75rem;
    }
}

@media (max-width: 576px) {
    /* Ajustes para telas muito pequenas */
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.3rem !important;
    }
    
    h3 {
        font-size: 1.1rem !important;
    }
    
    .lead {
        font-size: 1rem;
    }
    
    /* Header mais compacto */
    header {
        padding: 1rem 0 !important;
    }
    
    /* Cards em coluna única */
    .row {
        margin-left: -5px;
        margin-right: -5px;
    }
    
    .col-md-4 {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    /* Calendário mais compacto */
    .fc .fc-daygrid-day-frame {
        min-height: 60px !important;
    }
    
    .fc .fc-col-header-cell-cushion {
        font-size: 0.7rem;
        padding: 2px 4px;
    }
    
    /* Botões com ícones apenas */
    .btn .bi + span {
        display: none;
    }
    
    .btn {
        padding: 0.5rem;
    }
}

@media (max-width: 480px) {
    /* Ajustes finos para mobile */
    body {
        font-size: 14px;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .card-title {
        font-size: 1rem;
    }
    
    /* Modal full screen */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100vh;
    }
    
    .modal-content {
        height: 100%;
        border-radius: 0;
    }
    
    /* Melhorar toque em botões */
    .btn, a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Ajuste no footer */
    footer {
        padding: 2rem 0 !important;
    }
}

/* Melhorias gerais para mobile */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects em dispositivos touch */
    .card-event:hover {
        transform: none;
        box-shadow: none;
    }
    
    /* Melhora a experiência de toque */
    .btn:active, .btn:focus {
        transform: scale(0.98);
    }
}

/* Garante que imagens sejam responsivas */
img {
    max-width: 100%;
    height: auto;
}

/* Melhora a legibilidade em mobile */
@media (max-width: 768px) {
    body {
        line-height: 1.5;
    }
    
    p, li {
        font-size: 16px; /* Tamanho mínimo para boa leitura */
    }
}