/* ==========================================
   VARIÁVEIS DE COR (TEMA CLARO - CAFÉ ENCORPADO)
========================================= */
:root {
    --fundo-pagina: #EFEBE4; 
    --fundo-header: #4E342E; 
    --texto-header: #FFFFFF;
    --card-bg-principal: #FFFFFF;
    --card-bg-destaque: #E6DED5; 
    --fundo-orcamento: #E6DED5;
    --texto-primario: #3E2723; 
    --texto-secundario: #5D4037;
    --cor-borda: #D4C4B7; 
    --input-bg: #FFFFFF;
    --botao-bg: #5D4037; 
    --botao-hover: #3E2723;
    --destaque-sucesso: #2E7D32; 
    --badge-bg: #5D4037;
    --badge-texto: #FFFFFF;

    /* Variáveis do Desenho Técnico (SVG) */
    --svg-linha: #4E342E;
    --svg-tracejado: #795548;
    --svg-cota: #D84315;
    --svg-borda: #3E2723;
    --svg-fundo-vidro: #E0F7FA;
}

/* ==========================================
   VARIÁVEIS DE COR (TEMA ESCURO - GRAFITE & CARAMELO)
========================================= */
.dark-theme {
    --fundo-pagina: #1A1A1C; 
    --fundo-header: #121213; 
    --texto-header: #EAEAEA;
    --card-bg-principal: #242426; 
    --card-bg-destaque: #2C2C2F; 
    --fundo-orcamento: #2C2C2F;
    --texto-primario: #F0F0F0; 
    --texto-secundario: #A0A0A5; 
    --cor-borda: #3A3A3D; 
    --input-bg: #1A1A1C;
    --botao-bg: #A38263; 
    --botao-hover: #B89675;
    --destaque-sucesso: #D4B483; 
    --badge-bg: #A38263;
    --badge-texto: #1A1A1C;

    --svg-linha: #A0A0A5;
    --svg-tracejado: #66666B;
    --svg-cota: #D4B483; 
    --svg-borda: #EAEAEA; 
    --svg-fundo-vidro: #2A3036; 
}

/* ==========================================
   RESET BASE E TRANSIÇÕES
========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: var(--fundo-pagina); color: var(--texto-primario); line-height: 1.6; overflow-x: hidden; transition: background-color 0.4s ease, color 0.4s ease; }

/* ==========================================
   CABEÇALHO TEMÁTICO (SLIM)
========================================= */
.header-cafe { background-color: var(--fundo-header); color: var(--texto-header); display: flex; justify-content: space-between; align-items: center; padding: 15px 40px; margin-bottom: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-bottom: 3px solid var(--cor-borda); transition: background-color 0.4s ease; }
.header-text { text-align: left; }
.header-text h1 { font-size: 1.5em; margin-bottom: 2px; font-weight: 600; letter-spacing: 0.5px; }
.header-text p { color: rgba(255, 255, 255, 0.8); font-size: 0.85em; margin: 0; }
.btn-tema { background-color: rgba(255, 255, 255, 0.1); color: var(--texto-header); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px; padding: 8px 16px; font-size: 0.85em; cursor: pointer; transition: all 0.3s; margin: 0; }
.btn-tema:hover { background-color: rgba(255,255,255,0.2); transform: scale(1.02); }

/* ==========================================
   ARQUITETURA DE LAYOUT (DASHBOARD)
========================================= */
.container-grid { max-width: 800px; margin: 0 auto; padding: 0 20px 40px 20px; transition: max-width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); }

@media (min-width: 1000px) {
    .container-grid.calculado { max-width: 1600px; }
    .container-grid.calculado .coluna-controles { display: flex; gap: 30px; align-items: flex-start; }
    .container-grid.calculado .coluna-controles > section { flex: 1; margin-bottom: 60px; }
    .resultado-layout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; margin-top: 40px; }
}

@media (max-width: 768px) {
    .header-cafe { flex-direction: column; text-align: center; padding: 20px; gap: 15px; }
    .header-text { text-align: center; }
}