@charset "utf-8";
/* CSS Document */
/*##########################################################################
#
#  FISICA.NET - DESIGN SYSTEM
#  Versão 1.1
#
#  Guia oficial de identidade visual do site
#
###########################################################################*/



/*##########################################################################
#
#  BOXES SEMÂNTICOS
#
#  🔵 Azul      → Conceitos, teoria, definições
#  🟢 Verde     → Resoluções, exemplos, aplicações
#  🟡 Amarelo   → Dicas, observações, estudo
#  🟠 Laranja   → Exercícios, ENEM, vestibulares
#  🔴 Vermelho  → Atenção, erros comuns, avisos
#  🟣 Roxo      → Física Moderna, Relatividade, Quântica
#  🩵 Ciano     → Tecnologia, Engenharia, aplicações
#  ⚪ Cinza     → História da Física, biografias
#  ⚫ Escuro    → Documentos históricos, citações clássicas
#  🟨 Dourado   → Conceitos fundamentais, fórmulas essenciais
#
###########################################################################*/

.presentation-blue{
    background:#eef6ff;
    border-left:5px solid #4285F4;
    border-radius:10px;
    padding:20px;
    margin:1.5rem 0;
}

.presentation-green{
    background:#eefbf2;
    border-left:5px solid #34A853;
    border-radius:10px;
    padding:20px;
    margin:1.5rem 0;
}

.presentation-yellow{
    background:#fff9e8;
    border-left:5px solid #FBBC05;
    border-radius:10px;
    padding:20px;
    margin:1.5rem 0;
}

.presentation-orange{
    background:#fff5ec;
    border-left:5px solid #FF6D01;
    border-radius:10px;
    padding:20px;
    margin:1.5rem 0;
}

.presentation-red{
    background:#fff2f2;
    border-left:5px solid #EA4335;
    border-radius:10px;
    padding:20px;
    margin:1.5rem 0;
}

.presentation-purple{
    background:#f5f0ff;
    border-left:5px solid #7E57C2;
    border-radius:10px;
    padding:20px;
    margin:1.5rem 0;
}

.presentation-cyan{
    background:#eefcff;
    border-left:5px solid #00ACC1;
    border-radius:10px;
    padding:20px;
    margin:1.5rem 0;
}

.presentation-gray{
    background:#f5f5f5;
    border-left:5px solid #757575;
    border-radius:10px;
    padding:20px;
    margin:1.5rem 0;
}

.presentation-dark{
    background:#263238;
    color:#fff;
    border-left:5px solid #000;
    border-radius:10px;
    padding:20px;
    margin:1.5rem 0;
}

.presentation-gold{
    background:#fffbea;
    border-left:5px solid #C9A227;
    border-radius:10px;
    padding:20px;
    margin:1.5rem 0;
}



/*##########################################################################
#
#  CORES DOS TÍTULOS
#
###########################################################################*/

.cor-logo-azul{
    color:#4285F4;
}

.cor-logo-verde{
    color:#34A853;
}

.cor-logo-amarelo{
    color:#FBBC05;
}

.cor-logo-vermelho{
    color:#EA4335;
}

.laranja-vibrant-orange{
    color:#FF6D01;
}

.cor-logo-roxo{
    color:#7E57C2;
}

.cor-logo-ciano{
    color:#00ACC1;
}

.cor-logo-cinza{
    color:#757575;
}

.cor-logo-dark{
    color:#263238;
}

.cor-logo-gold{
    color:#C9A227;
}



/*##########################################################################
#
#  PALETA OFICIAL
#
###########################################################################*/

.azul-blueberry{
    background:#4285F4;
    color:#fff;
}

.verde-sea-green{
    background:#34A853;
    color:#fff;
}

.amarelo-selective-yellow{
    background:#FBBC05;
    color:#fff;
}

.laranja-vibrant-orange-bg{
    background:#FF6D01;
    color:#fff;
}

.vermelho-cinnabar{
    background:#EA4335;
    color:#fff;
}

.roxo-amethyst{
    background:#7E57C2;
    color:#fff;
}

.ciano-turquoise{
    background:#00ACC1;
    color:#fff;
}

.rosa-cerise{
    background:#D81B60;
    color:#fff;
}

.cinza-slate{
    background:#607D8B;
    color:#fff;
}

.teal-ocean{
    background:#00897B;
    color:#fff;
}

.dourado-imperial{
    background:#C9A227;
    color:#fff;
}



/*##########################################################################
#
#  SIGNIFICADO DAS CORES
#
###########################################################################

🔵 presentation-blue
   Conceitos • Definições • Introduções • Teoria

🟢 presentation-green
   Resoluções • Exemplos • Aplicações • Demonstrações

🟡 presentation-yellow
   Dicas • Estratégias • Observações • Resumos

🟠 presentation-orange
   Exercícios • ENEM • Vestibulares • Desafios

🔴 presentation-red
   Atenção • Erros comuns • Pegadinhas • Avisos

🟣 presentation-purple
   Física Moderna • Relatividade • Mecânica Quântica • Cosmologia

🩵 presentation-cyan
   Engenharia • Tecnologia • Aplicações • Inteligência Artificial

⚪ presentation-gray
   História • Biografias • Cronologias • Curiosidades

⚫ presentation-dark
   Fontes originais • Artigos clássicos • Cartas • Documentos históricos

🟨 presentation-gold
   Fórmulas fundamentais • Leis da Física • Conceitos-chave
   Resumos finais • Ideias essenciais

###########################################################################*/



/*##########################################################################
#
#  EMOJIS PADRÃO
#
###########################################################################

📘 Estudo
📖 Leitura
📝 Exercícios
🎯 Objetivo
💡 Curiosidade
🔬 Experimento
🧪 Laboratório
⚙️ Engenharia
🚀 Tecnologia
📈 Aplicações
🎓 Ensino
⭐ Destaque
✅ Resolução
⚠️ Atenção
❌ Erro comum
👨‍🔬 Cientista
📜 História
🌍 Cotidiano
💻 Simulações
🏆 Conceito fundamental
💎 Fórmula essencial

###########################################################################*/

.titulo-orange{

    display:inline-block;

    background:#FF6D01;

    color:#fff;

    padding:.35rem .9rem;

    border-radius:6px;

    font-weight:bold;

    margin-bottom:1rem;

}


.section-title{

    display:block;

    width:100%;

    padding:8px 18px;

    margin:0 0 20px 0;

    color:#fff;

    font-size:1.15rem;

    font-weight:700;

    line-height:1.2;

}

.section-title-blue{
    background:#4285F4;
}

.section-title-green{
    background:#34A853;
}

.section-title-yellow{
    background:#FBBC05;
    color:#222;
}

.section-title-orange{
    background:#FF6D01;
}

.section-title-red{
    background:#EA4335;
}

.section-title-purple{
    background:#7E57C2;
}

.section-title-cyan{
    background:#00ACC1;
}

.section-title-gray{
    background:#757575;
}

.section-title-dark{
    background:#263238;
}

.section-title-gold{
    background:#C9A227;
}





.section-header{
    position:relative;
    margin-bottom:1.5rem;
    min-height:56px;
}

.section-icon{

    position:absolute;

    left:0;

    top:6px;

    width:52px;

    height:52px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#62d68b;

    border-radius:8px;

    font-size:2rem;

    z-index:10;

    box-shadow:0 3px 8px rgba(0,0,0,.25);

}

.section-title{

    display:block;

    margin-left:22px;

    padding:10px 20px 10px 72px;

    font-size:1.25rem;

    font-weight:bold;

    color:#fff;

    line-height:1.2;

}

.section-title-gold{
    background:#C9A227;
}



.presentation-blue{
    --accent:#4285F4;
    background:#eef6ff;
    border-left:5px solid var(--accent);
    ...
}

.presentation-green{
    --accent:#34A853;
    background:#eefbf2;
    border-left:5px solid var(--accent);
    ...
}

.presentation-yellow{
    --accent:#FBBC05;
    background:#fff9e8;
    border-left:5px solid var(--accent);
    ...
}

.presentation-orange{
    --accent:#FF6D01;
    background:#fff5ec;
    border-left:5px solid var(--accent);
    ...
}

.presentation-red{
    --accent:#EA4335;
    background:#fff2f2;
    border-left:5px solid var(--accent);
    ...
}

.presentation-purple{
    --accent:#7E57C2;
    background:#f5f0ff;
    border-left:5px solid var(--accent);
    ...
}

.presentation-cyan{
    --accent:#00ACC1;
    background:#eefcff;
    border-left:5px solid var(--accent);
    ...
}

.presentation-gray{
    --accent:#757575;
    background:#f5f5f5;
    border-left:5px solid var(--accent);
    ...
}

.presentation-gold{
    --accent:#C9A227;
    background:#fffbea;
    border-left:5px solid var(--accent);
    ...
}


.presentation-header{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:1.4rem;
}

.presentation-icon{
    width:58px;
    height:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:2rem;

    background:var(--accent);
    color:#fff;

    border-radius:10px;

    box-shadow:0 3px 8px rgba(0,0,0,.18);

    flex-shrink:0;
}

.presentation-title{
    flex:1;

    padding:.55rem 1rem;

    background:var(--accent);
    color:#fff;

    font-size:1.55rem;
    font-weight:700;

    border-radius:0;
}


/* ============================================
   CORES FISICANET
   ============================================ */

.section-icon-blue{
    background:#4285F4;
}

.section-icon-yellow{
    background:#FBBC05;
}

.section-icon-red{
    background:#EA4335;
}



.section-icon-azul-escuro{
    background:#395898;
}

.section-icon-vermelho{
    background:#EA4335;
}

.section-icon-laranja{
    background:#ff8c00;
}

.section-icon-amarelo{
    background:#f4c542;
}

.section-icon-verde{
    background:#62d68b;
}

.section-icon-green{
    background:#34A853; 
}
.section-icon-cinza{
    background:#444;
}

.section-icon-branco{
    background:#ffffff;
    color:#333;
}

.section-icon-gold{
    background:#C9A227;
}

.section-icon-orange{
    background:#FF6D01;
}

.section-icon-purple{
    background:#7E57C2;
}

.section-icon-cyan{
    background:#00ACC1;
}

/* ============================================
   CORES GOOGLE
   ============================================ */

.section-icon-google-blue{
    background:#4285F4;
}

.section-icon-google-red{
    background:#DB4437;
}

.section-icon-google-yellow{
    background:#F4B400;
}

.section-icon-google-green{
    background:#0F9D58;
}



/* ============================================
   BASE DO ÍCONE
   ============================================ */

.section-icon{
    position:absolute;
    left:0;
    top:6px;
    width:52px;
    height:52px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:8px;
    font-size:2rem;
    z-index:10;
    box-shadow:0 3px 8px rgba(0,0,0,.25);
}



/*
<div class="section-icon section-icon-google-blue">
    <i class="fa-solid fa-book"></i>
</div>

ou

<div class="section-icon section-icon-google-red">
    PDF
</div>
 */



/* Remove margens internas de qualquer elemento dentro de listas */
[class^="presentation-"] ol > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Controla o espaçamento entre itens da lista */
[class^="presentation-"] li {
    margin-bottom: 14px;
    line-height: 1.6;
}

/* Ajusta elementos internos como equações e parágrafos */
[class^="presentation-"] li .math,
[class^="presentation-"] li p {
    margin: 8px 0 !important;
}



@media (max-width: 768px) {

    /* Zera o espaço à esquerda */
    [class^="presentation-"] {
        padding-left: 8px !important;
        margin-left: 0 !important;
    }

    /* Ajusta o ícone para não empurrar o conteúdo */
    [class^="presentation-"] .section-icon {
        left: 4px !important;
        top: 8px !important;
        width: 42px !important;
        height: 42px !important;
        font-size: 1.6rem !important;
    }

    /* Ajusta o título para não ficar deslocado */
    [class^="presentation-"] .section-title {
        margin-left: 52px !important;
    }
}

@media (max-width: 768px) {

    /* Títulos das caixas presentation */
    [class^="presentation-"] .section-title {
        margin-left: 0 !important;
        padding: 10px 12px !important;
        font-size: 1.15rem !important;
        text-align: right !important;
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* Ícone ajustado para não empurrar o título */
    [class^="presentation-"] .section-icon {
        left: 8px !important;
        top: 10px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 1.5rem !important;
    }

    /* Caixa com menos espaço à esquerda */
    [class^="presentation-"] {
        padding-left: 10px !important;
    }
}