:root {
    --bg: #0d121a;
    --text: #e2e2e2;
    --hoForte:hsla(6,78%,57%,1.00);
    --viForte:hsla(24,100%,54%,1.00);
    --atForte:hsla(48,100%,49%,1.00);
    --siForte:#009688;
    --teForte:hsla(204,100%,57%,1.00);
    --ceForte:hsla(222,100%,50%,1.00);
    --fiForte:hsla(265,79%,59%,1.00);
}

/* ==================================================
   LAYOUT: header / [sidebar + main] / footer
================================================== */

/* O rodapé fica sempre no fim da tela, mesmo em páginas curtas */
body {
    min-height: 100vh;
    min-height: 100dvh;      /* celular: desconta a barra do navegador */
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: #caced3;
    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 1rem;
}

/* Sidebar (260px) + conteúdo (o resto) */
#pagina {
    flex: 1;                 /* ocupa o espaço que sobra e empurra o footer */
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 15px;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    margin-top:10px
    
}

/* Celular e tablet: uma coluna só (depois escondemos a sidebar aqui) */
@media (max-width: 950px) {
    #pagina {
        grid-template-columns: minmax(0, 1fr);
        padding: 20px 16px;
    }
}

#main{
    margin-right: 15px;
}


/* ==========================================
   ESTILOS DOS ALERTAS (MENSAGENS DO SISTEMA)
   ========================================== */

/* Base para todos os alertas (.ms) */
.ms {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espaço entre o ícone e o texto */
    padding: 14px 20px;
    margin: 15px auto; /* Centraliza a caixa na tela */
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    animation: fadeInAlert 0.4s ease-out; /* Animação suave ao aparecer */
    letter-spacing: 1px;
}

/* Deixa o ícone levemente maior que o texto */
.ms i {
    font-size: 1.2rem;
}

/* --- Alerta de ERRO (Vermelho) --- */
.ms.erro {
    background-color: rgba(220, 38, 38, 0.89); /* Fundo avermelhado transparente */
    color: #f5f5f5;                           /* Texto vermelho claro */
    border: 1px solid rgba(220, 38, 38, 0.3); /* Borda sutil */
}

/* --- Alerta de SUCESSO (Verde) --- */
.ms.sucesso {
    background-color: rgba(9, 70, 31, 0.575);
    color: #86efac;
    border: 1px solid rgba(22, 163, 74, 0.3);
}

/* --- Alerta de AVISO (Amarelo/Laranja) --- */
.ms.alerta {
    background-color: rgba(201, 144, 22, 0.74);
    color: #f3f3f0;
    border: 1px solid rgba(202, 138, 4, 0.3);
}

/* Animação para a mensagem surgir suavemente na tela */
@keyframes fadeInAlert {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Cor de cada seção (header, chamadas...): o elemento usa a variável --cor */
.cor-home  { --cor: var(--hoForte); }
.cor-video { --cor: var(--viForte); }
.cor-ator  { --cor: var(--atForte); }
.cor-site  { --cor: var(--siForte); }
.cor-tema  { --cor: var(--teForte); }
.cor-cena  { --cor: var(--ceForte); }
.cor-filme { --cor: var(--fiForte); }