/* ========================================================================
   ESTILOS ORÇAMENTO PESSOAL - v5 (PWA Header/Footer + Ajustes Finais)
   ======================================================================== */

/* --- Reset Básico e Estilos Globais --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-image: url('calculadora-orçamentox.jpg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: #e0f2fe;
    line-height: 1.6;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    position: relative;
    font-size: 16.5px; /* <<< Aumentei a fonte base ligeiramente */
}
/* Overlay */
body::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 25, 51, 0.5); /* Opacidade do overlay */
    z-index: -1;
}


/* === CABEÇALHO PADRÃO DA FERRAMENTA === */
.header-compact {
    width: 100%;
    background-color: #1e40af; /* Azul */
    color: white;
    padding: 0.7rem 1rem; /* Padding ajustado */
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    position: sticky;
    top: 0;
    left: 0;
}

.header-compact-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center; /* <<< CENTRALIZA O CONTEÚDO */
    gap: 1.2rem; /* Espaço aumentado */
    flex-wrap: wrap; /* Permite quebra em telas menores */
    text-align: center; /* Centraliza texto em caso de quebra */
}

.header-logo {
    height: 60px; /* <<< LOGO AUMENTADO */
    width: auto;
    display: block;
    border-radius: 4px;
}

.header-compact-text {
     text-align: left; /* Alinha texto dentro do bloco à esquerda */
     /* Adapta melhor quando quebra */
     flex-basis: 300px; /* Largura base */
     flex-grow: 1; /* Permite crescer */
}

.header-compact-text h1 {
    font-size: 1.4em; /* <<< FONTE AUMENTADA */
    margin: 0;
    font-weight: 600;
    line-height: 1.2;
}

.header-compact-text p {
    font-size: 0.9em; /* <<< FONTE AUMENTADA */
    margin: 0;
    opacity: 0.9;
    line-height: 1.3;
    color: #facc15; /* <<< SEGUNDA LINHA EM AMARELO */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); /* Sombra para legibilidade */
}
/* === FIM DO CABEÇALHO PADRÃO === */


/* --- Barra de Título --- */
.title-bar {
    width: 100%;
    max-width: 1200px;
    background-color: #2563eb;
    color: white;
    text-align: center;
    padding: 0.7rem 1rem;
    margin: 1.5rem auto 2rem auto; /* <<< ESPAÇO ACIMA ADICIONADO */
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    z-index: 9;
}
.title-bar h2 {
    font-size: 1.6em; /* <<< FONTE AUMENTADA */
    font-weight: 600; margin: 0; padding: 0; border: none; color: white; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}


/* --- Container Principal --- */
.main-container { width: 100%; max-width: 1200px; flex-grow: 1; padding: 0 1rem; margin-left: auto; margin-right: auto; }

/* --- Grid de Conteúdo (Layout dos Cards) --- */
.content-grid {
    display: grid; gap: 1.8rem; width: 100%; grid-template-columns: 1fr;
    grid-template-areas: "form" "history" "summary" "ads" "chart" "csv";
}
@media (min-width: 992px) {
    .content-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "form     history" "summary  ads" "chart    csv";
    }
    #transaction-card { grid-area: form; } #history-card { grid-area: history; }
    #summary-card { grid-area: summary; } #adsense-placeholder { grid-area: ads; }
    #chart-card { grid-area: chart; } #csv-card { grid-area: csv; }
}


/* --- Estilo Base dos Cards com Efeito Vidro --- */
.card {
    background: rgba(30, 41, 59, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); padding: 1.8rem;
    color: #f1f5f9; overflow: hidden;
}
.card h2 {
    color: #f1f5f9; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 0.8rem; font-size: 1.4em; /* <<< FONTE AUMENTADA */ font-weight: 600;
}

/* --- Estilos Específicos dos Cards --- */

/* Card: Resumo Financeiro */
.summary-values { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.8rem; }
.summary-item { padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.summary-item:last-child { border-bottom: none; padding-bottom: 0; }
.summary-label { display: block; font-size: 0.95em; /* <<< FONTE AUMENTADA */ color: #cbd5e1; margin-bottom: 0.3rem; }
.summary-value { display: block; font-size: 1.7em; /* <<< FONTE AUMENTADA */ font-weight: 700; line-height: 1.2; word-wrap: break-word; min-height: 1.2em; }
#current-balance { color: #67e8f9; } #total-income.income-color { color: #4ade80; } #total-expenses.expense-color { color: #f87171; }
.goal-section { margin-top: 1.5rem; background-color: rgba(15, 23, 42, 0.4); padding: 1.2rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; gap: 1rem; }
.goal-section label { font-weight: 600; color: #f1f5f9; margin-bottom: 0; font-size: 1em; /* <<< FONTE AUMENTADA */ }
.goal-section input[type="number"] { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #f1f5f9; padding: 0.7rem; width: 100%; border-radius: 6px; font-size: 1.05em; /* <<< FONTE AUMENTADA */ }
.goal-section input[type="number"]::placeholder { color: #94a3b8; }
.goal-section input[type="number"]:focus { border-color: #f97316; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.3); background-color: rgba(255, 255, 255, 0.15); outline: none;}
#set-goal-btn { background: linear-gradient(to right, #f97316, #ea580c); color: white; padding: 0.8rem 1.5rem; font-size: 1rem; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.2s ease; align-self: flex-start; width: auto; }
#set-goal-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(234, 88, 12, 0.4); }
#goal-progress { font-weight: 600; color: #f1f5f9; margin-top: 0.2rem; font-size: 1em; /* <<< FONTE AUMENTADA */ }
#clear-data-btn { display: block; width: 100%; margin-top: 1.8rem; padding: 0.7rem 1.2rem; background-color: rgba(239, 68, 68, 0.7); color: white; border: 1px solid rgba(252, 165, 165, 0.5); border-radius: 6px; cursor: pointer; font-size: 0.95em; /* <<< FONTE AUMENTADA */ font-weight: 500; text-align: center; transition: all 0.2s ease; }
#clear-data-btn:hover { background-color: #dc2626; border-color: #b91c1c; transform: scale(1.02); box-shadow: 0 3px 8px rgba(220, 38, 38, 0.4); }

/* Formulário de Transação */
#transaction-form .form-group { margin-bottom: 1.5rem; }
#transaction-form label { color: #cbd5e1; font-weight: 600; margin-bottom: 0.5rem; display: block; font-size: 1em; /* <<< FONTE AUMENTADA */ }
#transaction-form input[type="number"],
#transaction-form input[type="date"],
#transaction-form select { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #f1f5f9; width: 100%; padding: 0.8rem; border: 1px solid; border-radius: 6px; font-size: 1.05em; /* <<< FONTE AUMENTADA */ transition: border-color 0.2s ease, box-shadow 0.2s ease; }
#transaction-form input::placeholder { color: #94a3b8; }
#transaction-form select option { color: #334155; background-color: #ffffff; }
#transaction-form input:focus,
#transaction-form select:focus { border-color: #60a5fa; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3); outline: none;}
#subcategory:disabled { background-color: rgba(100, 116, 139, 0.4); border-color: rgba(100, 116, 139, 0.5); opacity: 0.6; cursor: not-allowed; color: #94a3b8; }
#transaction-form button[type="submit"] { background: linear-gradient(to right, #10b981, #059669); color: white; padding: 0.9rem 1.5rem; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; width: 100%; font-size: 1.15em; /* <<< FONTE AUMENTADA */ font-weight: 600; margin-top: 1rem; box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3); }
#transaction-form button[type="submit"]:hover { background: linear-gradient(to right, #059669, #047857); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(16, 185, 129, 0.4); }
#alert-container { margin-top: 1.5rem; }
.alert { padding: 0.9rem 1.2rem; border-radius: 8px; text-align: center; font-weight: 600; border: 1px solid transparent; font-size: 1em; /* <<< FONTE AUMENTADA */ display: none; animation: fadeIn 0.3s ease-out; }
.alert.error   { background-color: rgba(254, 202, 202, 0.8); color: #991b1b; border-color: rgba(252, 165, 165, 0.9); } .alert.warning { background-color: rgba(254, 240, 190, 0.8); color: #92400e; border-color: rgba(253, 186, 116, 0.9); } .alert.success { background-color: rgba(187, 247, 208, 0.8); color: #14532d; border-color: rgba(110, 231, 183, 0.9); } .alert.info    { background-color: rgba(191, 219, 254, 0.8); color: #1e40af; border-color: rgba(147, 197, 253, 0.9); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Histórico (Mostrando Subcategoria Apenas) */
#transaction-list { max-height: 320px; overflow-y: auto; margin-top: 1rem; padding-right: 0.5rem; border: none; border-radius: 0; padding: 0; list-style: none;}
#transaction-list::-webkit-scrollbar { width: 8px; } #transaction-list::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; } #transaction-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 4px; } #transaction-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }
.no-transactions { text-align: center; padding: 1.5rem; color: #94a3b8; font-style: italic; background: none; border: none; }
#transaction-list li { background-color: rgba(255, 255, 255, 0.08); padding: 0.8rem 1rem; margin-bottom: 0.6rem; border-radius: 8px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; border: 1px solid rgba(255, 255, 255, 0.1); border-left-width: 6px; gap: 0.8rem; transition: background-color 0.2s ease; }
#transaction-list li:hover { background-color: rgba(255, 255, 255, 0.15); }
#transaction-list li.income { border-left-color: #4ade80; } #transaction-list li.expense { border-left-color: #f87171; }
#transaction-list li .date { color: #cbd5e1; font-size: 0.85em; /* <<< FONTE AUMENTADA */ flex-basis: 80px; flex-shrink: 0; font-weight: 500; }
#transaction-list li .details { display: flex; align-items: center; flex-grow: 1; min-width: 100px; text-align: left; }
#transaction-list li .subcategory-display { font-size: 1em; /* <<< FONTE AUMENTADA */ color: #f1f5f9; font-weight: 600; }
#transaction-list li .amount-delete { display: flex; align-items: center; gap: 0.8rem; flex-shrink: 0; }
#transaction-list li .amount { font-weight: 700; color: #ffffff; font-size: 1.1em; /* <<< FONTE AUMENTADA */ }
#transaction-list li.income .amount { color: #a7f3d0; } #transaction-list li.expense .amount { color: #fecaca; }
.delete-btn { background-color: rgba(254, 226, 226, 0.2); color: #fca5a5; border: 1px solid rgba(252, 165, 165, 0.5); padding: 0.3rem 0.6rem; cursor: pointer; border-radius: 50%; font-size: 0.85rem; line-height: 1; font-weight: bold; transition: all 0.2s ease; }
.delete-btn:hover { background-color: #ef4444; color: white; border-color: #dc2626; transform: scale(1.1) rotate(90deg); }

/* Placeholder AdSense */
#adsense-placeholder { min-height: 100px; background-color: rgba(100, 116, 139, 0.3); border: 1px dashed rgba(255, 255, 255, 0.3); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #cbd5e1; font-size: 0.9em; text-align: center; padding: 1rem; }

/* Card: Gráfico */
.chart-container { height: 350px; margin-top: 1rem;}

/* Card: CSV */
.csv-actions { display: flex; flex-direction: column; gap: 1.2rem; }
.csv-explanation { background-color: rgba(15, 23, 42, 0.3); border: 1px dashed rgba(255, 255, 255, 0.2); padding: 1rem; border-radius: 8px; color: #cbd5e1; font-size: 0.95em; /* <<< FONTE AUMENTADA */ line-height: 1.5;}
.csv-explanation strong { color: #f1f5f9; } .csv-explanation p:last-child { margin-top: 0.5rem; }
.csv-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn { color: white; padding: 0.8rem 1.4rem; border: none; border-radius: 6px; cursor: pointer; font-size: 1em; /* <<< FONTE AUMENTADA */ text-align: center; transition: all 0.2s ease; display: inline-block; font-weight: 600; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); flex: 1; min-width: 140px; }
.btn-export { background: linear-gradient(to right, #3b82f6, #2563eb); } .btn-export:hover { background: linear-gradient(to right, #2563eb, #1d4ed8); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4); }
.btn-import { background: linear-gradient(to right, #14b8a6, #0d9488); } .btn-import:hover { background: linear-gradient(to right, #0d9488, #0f766e); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(20, 184, 166, 0.4); }
#import-csv-input { display: none; } #import-csv-input:focus-visible + label.btn-import { outline: 3px solid #14b8a6; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.3); }


/* === RODAPÉ PADRÃO DA FERRAMENTA (NOVO) === */
.tool-footer {
    width: 100%;
    background-color: #374151; /* Cinza escuro */
    color: #d1d5db; /* Texto cinza claro */
    padding: 1.5rem 1rem;
    margin-top: 3rem; /* Espaço acima */
    text-align: center;
    font-size: 0.9em; /* <<< FONTE AUMENTADA */
    line-height: 1.5;
    z-index: 10; /* Garante visibilidade */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.15); /* Sombra superior sutil */
}
.tool-footer-content { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.tool-footer-links a { color: #9ca3af; text-decoration: none; transition: color 0.2s ease; margin: 0 0.5rem; font-size: 1em; /* <<< FONTE AUMENTADA */ }
.tool-footer-links a:hover { color: #e5e7eb; text-decoration: underline; }
/* === FIM DO RODAPÉ PADRÃO === */


/* --- Responsividade --- */
@media (max-width: 991px) { /* Tablet e abaixo */
    .content-grid { grid-template-columns: 1fr; grid-template-areas: "form" "history" "summary" "ads" "chart" "csv"; }
    .title-bar h2 { font-size: 1.4em; /* Ajuste */ }
    .card { padding: 1.5rem; } .card h2 { font-size: 1.3em; }
    .header-compact-text h1 { font-size: 1.2em; } .header-compact-text p { font-size: 0.85em; }
    .header-logo { height: 50px; }
}

@media (max-width: 767px) { /* Celular */
    body { padding: 0 0.5rem; font-size: 16px; /* Reset fonte base mobile */ }
    .header-compact { padding: 0.5rem 0.8rem; } .header-logo { height: 40px; }
    .header-compact-text h1 { font-size: 1.15em; } .header-compact-text p { font-size: 0.8em; }
    .title-bar { padding: 0.6rem 1rem; border-radius: 0; margin: 1rem auto 1.5rem auto; } .title-bar h2 { font-size: 1.25em; }
    .main-container { padding: 0 0.5rem; } .content-grid { gap: 1.2rem; }
    .card { padding: 1.2rem; border-radius: 12px; } .card h2 { font-size: 1.2em; }
    .summary-value { font-size: 1.5em; }
    #transaction-form input, #transaction-form select { padding: 0.8rem; font-size: 1rem; }
    #transaction-form button[type="submit"] { padding: 0.8rem; font-size: 1.05rem; }
    #set-goal-btn { padding: 0.7rem 1.2rem; font-size: 1rem;}
    /* Histórico Mobile */
    #transaction-list { max-height: 350px; } #transaction-list li { align-items: flex-start; }
    #transaction-list li .date { flex-basis: 100%; margin-bottom: 0.4rem; font-size: 0.75em; text-align: left; }
    #transaction-list li .details { flex-basis: calc(70% - 10px); order: 2; }
    #transaction-list li .amount-delete { flex-basis: 30%; order: 3; justify-content: flex-end; align-items: center; }
    #transaction-list li .subcategory-display { font-size: 0.95em; } #transaction-list li .amount { font-size: 1em; }
    .delete-btn { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
    .csv-buttons { flex-direction: column; gap: 0.6rem; } .csv-buttons .btn { width: 100%; text-align: center; }
    .btn { padding: 0.8rem 1rem; font-size: 1rem; } /* Botões CSV mobile */
    .tool-footer { padding: 1.2rem 0.5rem; font-size: 0.85em; } .tool-footer-links a { margin: 0 0.3rem; }
}

@media (max-width: 480px) { /* Telas Muito Pequenas */
    .header-compact-content { gap: 0.8rem; }
    .header-logo { height: 35px; } .header-compact-text h1 { font-size: 1.1em; }
    .title-bar h2 { font-size: 1.15em; }
    .card { padding: 1rem; border-radius: 10px; } .card h2 { font-size: 1.1em; }
    .summary-value { font-size: 1.4em; }
    #transaction-form input, #transaction-form select, #transaction-form button { font-size: 0.95rem; padding: 0.7rem; }
    #transaction-form button[type="submit"] { padding: 0.8rem; }
    .btn { font-size: 0.95rem; padding: 0.7rem 1rem; }
    #transaction-list li .details { flex-basis: calc(65% - 8px); } #transaction-list li .amount-delete { flex-basis: 35%; }
    #transaction-list li .amount { font-size: 0.95em; }
}