/* =======================================================
   FisicaNET 2026 — CSS Único
   Arquitetura: BEM + Utility-first + Componentes
   Identidade visual preservada
   Autor: Copilot + Prof. Alberto Ricardo Präss
======================================================= */

/* =======================================================
   0. RESET & BASE
======================================================= */

@charset "utf-8";

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #FFFFFF !important;
    color: #1A1A1A;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    font-size: 17px;
    overflow-x: hidden;
}

a {
    color: #006699;
    text-decoration: none;
}

a:hover {
    color: #F00;
    text-decoration: underline;
}

h1, h2, h3, h4 {
    color: #006699;
}

/* Removendo o bug de centralização */
h1::before,
h2::before,
h3::before,
h4::before,
p::before {
    content: none !important;
}

h1, h2, h3, h4 {
    text-align: center;
}


/* =======================================================
   1. UTILITÁRIOS (Utility-first)
======================================================= */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.mx-auto { margin-left: auto; margin-right: auto; }

.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }

.fisica-space { height: 50px; }

/* =======================================================
   2. TÍTULOS (BEM)
======================================================= */

.titulo,
.subtitulo {
    display: inline-block;
    padding: 8px 12px;
    margin: 10px 0;
    border-radius: 10px;
    font-weight: bold;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #ffffff, #e6f2ff);
    border: 2px solid #004080;
    color: #004080;
}

.titulo:hover,
.subtitulo:hover {
    background: #004080;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Correção definitiva de centralização */
.col-12.text-center .titulo,
.col-12.text-center .subtitulo,
.col-12.text-center .laranja-vibrant-orange-inline {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
}

/* =======================================================
   3. BOTÕES (BEM)
======================================================= */

.btn {
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
    transition: 0.2s ease;
}

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

.btn--azul:hover {
    background: #2a64c7;
}

.btn--laranja {
    background: #FF6D01;
    color: #fff;
}

.btn--laranja:hover {
    background: #d85c00;
}




/* =======================================================
   4. CORES INLINE (BEM)
======================================================= */

[class$="-inline"] {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 5px;
    font-weight: bold;
    white-space: nowrap;
    text-align: center;
    color: #fff;
}

.laranja-vibrant-orange-inline { background: #FF6D01; }
.roxo-electric-violet-inline { background: #7E57C2; }
.ciano-tropical-lagoon-inline { background: #00ACC1; }
.rosa-watermelon-punch-inline { background: #EC407A; }
.lima-neon-lime-inline { background: #7CB342; }
.marrom-caramel-mocha-inline { background: #8D6E63; }
.azul-cosmic-nebula-inline { background: #1E3A8A; }
.ciano-quantum-glow-inline { background: #06B6D4; }
.roxo-dark-matter-inline { background: #5B21B6; }
.verde-laser-beam-inline { background: #10B981; }
.magenta-plasma-wave-inline { background: #D946EF; }
.verde-sea-green-inline { background: #2E8B57; }
.amarelo-selective-yellow-inline { background-color: #FBBC05; }

/* Blocos de cores maiores */

.azul-blueberry,
.vermelho-cinnabar,
.amarelo-selective-yellow,
.verde-sea-green,
.laranja-vibrant-orange {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 6px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    white-space: nowrap;
}



/* Cores individuais */
.azul-blueberry { background-color: #4285F4; }
.vermelho-cinnabar { background-color: #EA4335; }
.amarelo-selective-yellow { background-color: #FBBC05; }
.verde-sea-green { background-color: #34A853; }
.laranja-vibrant-orange { background-color: #FF6D01; }

/* Cores de texto */
.cor-azul-escuro {
	color: #395898;
}
.cor-azul-claro {
	color: #006699;
}
.cor-logo-azul {
	color: #4285F4;
}
.cor-logo-vermelho {
	color: #EA4335;
}
.cor-logo-verde {
	color: #34A853;
}
.cor-logo-amarelo {
	color: #FBBC05;
}



/* Estilo para Amarelo_Selective Yellow */
.amarelo-selective-yellow {
	background-color: #FBBC05;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	margin: 5px 0;
}

.verde-sea-green-inline {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 5px;
    font-weight: bold;
    white-space: nowrap;
    text-align: center;
    color: #fff;
    background: #2E8B57;
}

/* =======================================================
   5. COMPONENTES (BEM)
======================================================= */

.caixa-azul,
.caixa-vermelha {
    padding: 25px 30px;
    border-radius: 12px;
    color: white;
    text-align: justify;
    max-width: 800px;
    margin: 15px auto;
    line-height: 1.6;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.caixa-azul { background: #4285F4; }
.caixa-vermelha { background: #EA4335; }

.custom-blockquote {
    border-left: 5px solid #004080;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    margin-bottom: 30px;
}

/* =======================================================
   6. TEXTO OTIMIZADO (modo leitura premium)
======================================================= */

.texto-otimizado {
    max-width: 944px;
    margin: auto;
    padding: 15px 28px 25px;
    background: #f7f2e8;
    border-radius: 12px;
    font-family: "Georgia", serif;
    font-size: 1.08rem;
    line-height: 1.7;
    text-align: justify;
    hyphens: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.texto-otimizado p {
    margin-bottom: 1.25rem;
}

.texto-otimizado p:first-of-type::first-letter {
    font-size: 2.6rem;
    font-weight: bold;
    float: left;
    padding-right: 8px;
    color: #8b5e2a;
}

.texto-otimizado .text-center {
    background: #fff;
    padding: 12px;
    border-radius: 8px;
    border-left: 4px solid #8b5e2a;
}

/* =======================================================
   7. IMPRESSÃO
======================================================= */

@media print {

    .texto-otimizado {
        background: white !important;
        box-shadow: none !important;
    }

    .texto-otimizado p:first-of-type::first-letter {
        float: none !important;
        font-size: inherit !important;
        padding: 0 !important;
    }

    .copy-btn,
    .ref-icon {
        display: none !important;
    }

    .texto-otimizado hr {
        background: #000 !important;
        height: 1px !important;
    }
}



/* Espaçamento */
.fisica-space {
	height: 50px;
}
/* Imagens responsivas */
.img-fluid {
	max-width: 100%;
	height: auto;
}
.responsive-img {
	max-width: 300px;
	height: auto;
}
.image-container {
	text-align: center;
	margin: 20px 0;
}
.image-container .caption {
	font-size: 14px;
	color: #555;
	margin-top: 8px;
}
/* Linha grossa */
hr.thick {
	border: none;
	height: 5px;
	background-color: #000;
}


/* ==========================================================================
   TABELAS E MATEMÁTICA
   ========================================================================== */
.responsive-table {
	width: 100%;
	border-collapse: collapse;
}
.responsive-table th, .responsive-table td {
	border: 1px solid #000;
	padding: 5px;
	text-align: center;
}
#tabela-hidrostatica {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 10px;
	overflow: hidden;
	width: 100%;
	max-width: 1000px;
	border: none;
	font-size: 12px;
	color: #3880b0;
}
#tabela-hidrostatica th {
	font-size: 1em;
	background-color: #3880b0;
	color: white;
	padding: 1px 10px;
	text-align: center;
	border-left: 1px dotted white;
}
.tabela-hidrostatica td, .tabela-hidrostatica th {
	border: 0.5px dotted #f2f2f2;
	padding: 0 100px;
	text-align: center;
	color: #3880b0;
}
.tabela-hidrostatica td {
	border-bottom: 1px dotted white;
}
#tabela-hidrostatica tr:first-child th:first-child {
	border-top-left-radius: 10px;
}
#tabela-hidrostatica tr:first-child th:last-child {
	border-top-right-radius: 10px;
}
#tabela-hidrostatica tr:last-child td:first-child {
	border-bottom-left-radius: 10px;
}
#tabela-hidrostatica tr:last-child td:last-child {
	border-bottom-right-radius: 10px;
}
#tabela-hidrostatica tr:nth-child(odd) {
	background-color: white;
}
#tabela-hidrostatica tr:nth-child(even) {
	background-color: #CCC;
}
.math-block {
	overflow-x: auto;
}
.MathJax {
	font-size: 100%;
}