/* ==================== SUPERA GLIA - ESTILOS ==================== */

:root {
    --supera-orange: #F37021;
    --supera-orange-dark: #D85F15;
    --supera-orange-light: #FEF3EC;
    --supera-black: #231F20;
    --supera-gray: #4A4A4A;
}

* { 
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 
}

/* ==================== TRANSIÇÕES ==================== */
.sidebar-transition { 
    transition: all 0.3s ease; 
}

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar { 
    width: 6px; 
    height: 6px; 
}

::-webkit-scrollbar-track { 
    background: #f5f5f5; 
    border-radius: 3px; 
}

::-webkit-scrollbar-thumb { 
    background: #d1d5db; 
    border-radius: 3px; 
}

::-webkit-scrollbar-thumb:hover { 
    background: #9ca3af; 
}

/* ==================== LOGIN ==================== */
.login-bg { 
    background: linear-gradient(145deg, #F37021 0%, #E8601A 50%, #D85510 100%); 
}

/* ==================== LOADING ==================== */
#loading-screen { 
    position: fixed; 
    inset: 0; 
    background: linear-gradient(145deg, #F37021 0%, #E8601A 50%, #D85510 100%); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 9999; 
}

.loader { 
    width: 48px; 
    height: 48px; 
    border: 4px solid rgba(255,255,255,0.3); 
    border-top-color: white; 
    border-radius: 50%; 
    animation: spin 1s linear infinite; 
}

@keyframes spin { 
    to { transform: rotate(360deg); } 
}

/* ==================== ANIMAÇÕES ==================== */
@keyframes slideUp { 
    from { opacity: 0; transform: translateY(20px); } 
    to { opacity: 1; transform: translateY(0); } 
}

@keyframes pulse { 
    0%, 100% { opacity: 1; } 
    50% { opacity: 0.7; } 
}

.card-animate { 
    animation: slideUp 0.4s ease-out; 
}

/* ==================== CARDS DE TURMA ==================== */
.turma-card { 
    transition: all 0.2s ease; 
    animation: slideUp 0.4s ease-out; 
}

.turma-card:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); 
}

/* ==================== CHIPS DE ALUNO ==================== */
.aluno-chip { 
    transition: all 0.15s ease; 
    cursor: pointer; 
}

.aluno-chip:hover { 
    transform: scale(1.02); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
}

/* ==================== BARRA DE OCUPAÇÃO ==================== */
.ocupacao-bar { 
    transition: width 0.5s ease; 
}

/* ==================== MODAL ==================== */
.modal-overlay { 
    background: rgba(35,31,32,0.6); 
    backdrop-filter: blur(8px); 
}

/* ==================== BADGES ==================== */
.ausente-badge { 
    animation: pulse 2s infinite; 
}

/* ==================== IFRAMES ==================== */
.chatwoot-frame { 
    border: none; 
    width: 100%; 
    height: calc(100vh - 73px); 
}

/* ==================== BOTÕES SUPERA ==================== */
.btn-supera { 
    background: var(--supera-orange); 
    box-shadow: 0 4px 14px rgba(243, 112, 33, 0.4); 
}

.btn-supera:hover { 
    background: var(--supera-orange-dark); 
    transform: translateY(-1px); 
    box-shadow: 0 6px 20px rgba(243, 112, 33, 0.5); 
}

/* ==================== INPUTS ==================== */
input:focus, select:focus { 
    outline: none; 
    border-color: var(--supera-orange) !important; 
    box-shadow: 0 0 0 3px rgba(243, 112, 33, 0.15) !important; 
}

/* ==================== STAT CARDS ==================== */
.stat-card { 
    transition: all 0.2s ease; 
}

.stat-card:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 8px 24px rgba(0,0,0,0.1); 
}

/* ==================== TABELAS ==================== */
.table-container {
    overflow-x: auto;
}

.table-container table {
    width: 100%;
}

/* ==================== FILTROS ==================== */
.filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

/* ==================== RESPONSIVO ==================== */
@media (max-width: 768px) {
    .sidebar-transition {
        margin-left: 0 !important;
    }
}