/* Reset básico e fontes */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* --- IMAGEM DE FUNDO E FALLBACK --- */
    background-image: url('anotar-pressao-diaria.jpg'); 
    background-size: cover; 
    background-position: center center; 
    background-attachment: fixed; 
    background-color: #f0f2f5; /* Cor de fundo suave se imagem falhar */
}

/* === CABEÇALHO PADRÃO === */
.header-compact { background-color: #007bff; padding: 15px 20px; border-bottom: 2px solid #0056b3; width: 100%; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.header-compact-content { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 1140px; margin: 0 auto; text-align: center; }
.header-logo { height: 45px; margin-right: 20px; flex-shrink: 0; }
.header-compact-text h1 { font-size: 1.4em; margin: 0 0 3px 0; color: #ffffff; font-weight: 600; }
.header-compact-text p { font-size: 1em; margin: 0; color: #ffc107; font-weight: 500; }
/* === FIM CABEÇALHO PADRÃO === */


/* Container principal */
.container { max-width: calc(100% * 4 / 9); min-width: 310px; margin: 30px auto; padding: 0 15px; width: 100%; flex-grow: 1; }

/* Cabeçalho específico do App */
.app-header { padding: 15px 20px; display: flex; align-items: center; justify-content: center; border-radius: 8px; margin-bottom: 25px; color: #ffffff; 
    /* Efeito Vidro */
    background-color: rgba(0, 123, 255, 0.85); 
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }
.app-header .heart-icon { color: #dc3545; font-size: 2em; margin-right: 15px; line-height: 1; flex-shrink: 0; }
.app-header h1 { font-size: 1.5em; font-weight: 500; text-align: center; }


/* Cards com efeito vidro */
.card { border-radius: 10px; padding: 20px; margin-bottom: 25px; 
    /* Efeito Vidro */
    background-color: rgba(255, 255, 255, 0.85); /* Levemente mais opaco */
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); /* Blur um pouco menor */
    border: 1px solid rgba(255, 255, 255, 0.4); /* Borda mais visível */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); }
.card h2 { color: #0056b3; margin: -20px -20px 15px -20px; padding: 10px 20px; border-bottom: 1px solid rgba(0, 123, 255, 0.2); font-size: 1.3em; border-radius: 10px 10px 0 0; background-color: rgba(230, 242, 255, 0.6); /* Fundo título mais opaco */ }

/* Formulário */
.input-section form { display: grid; gap: 15px; }
.form-group { display: flex; flex-direction: column; }
.form-group label { margin-bottom: 5px; font-weight: 500; color: #333; }
.form-group input[type="datetime-local"], .form-group input[type="number"] { padding: 10px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; font-size: 1rem; background-color: rgba(255, 255, 255, 0.8); } /* Input mais opaco */
.form-group input:focus { outline: none; border-color: rgba(0, 123, 255, 0.6); box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15); background-color: rgba(255, 255, 255, 0.95); }

/* Botões */
.btn { padding: 10px 15px; font-size: 1rem; border: none; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; text-align: center; font-weight: 500; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.btn-primary { background-color: #007bff; color: #ffffff; }
.btn-primary:hover { background-color: #0056b3; box-shadow: 0 4px 8px rgba(0,0,0,0.15); transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.98); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.btn-danger { background-color: #dc3545; color: #ffffff; }
.btn-danger:hover { background-color: #c82333; box-shadow: 0 4px 8px rgba(0,0,0,0.15); transform: translateY(-1px); }
.btn-danger:active { transform: scale(0.98); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.btn-info { background-color: #17a2b8; color: #ffffff; }
.btn-info:hover { background-color: #138496; box-shadow: 0 4px 8px rgba(0,0,0,0.15); transform: translateY(-1px); }
.btn-info:active { transform: scale(0.98); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* Seção Histórico */
.filter-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.filter-controls label { font-weight: 500; color: #333; }
.filter-controls select, .filter-controls input { padding: 8px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; font-size: 0.95rem; background-color: rgba(255, 255, 255, 0.8); }
.filter-controls .btn { padding: 8px 12px; }
.table-container { max-height: 400px; overflow-y: auto; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; margin-bottom: 15px; background-color: rgba(255, 255, 255, 0.6); } /* Fundo tabela mais opaco */
#historyTable { width: 100%; border-collapse: collapse; }
#historyTable th, #historyTable td { padding: 10px 8px; text-align: left; border-bottom: 1px solid rgba(0, 0, 0, 0.1); font-size: 0.9rem; color: #212529; }
#historyTable th { background-color: rgba(233, 236, 239, 0.8); font-weight: 600; position: sticky; top: 0; z-index: 1; backdrop-filter: blur(3px); } /* Header tabela mais opaco */
#historyTable tbody tr:nth-child(even) { background-color: rgba(248, 249, 250, 0.6); }
#historyTable tbody tr:hover { background-color: rgba(226, 230, 234, 0.8); }

/* Placeholder AdSense */
.adsense-placeholder-middle { border: 1px dashed #adb5bd; background-color: rgba(233, 236, 239, 0.85); margin-bottom: 25px; }
.adsense-placeholder-middle h2 { background-color: transparent; border-bottom: none; margin: -10px 0 10px 0; padding: 0; text-align: center; font-size: 0.9em; color: #6c757d; }

/* Gráfico */
.chart-section .btn { margin-top: 20px; }
.chart-container { position: relative; min-height: 280px; width: 100%; padding: 10px; background: rgba(255,255,255,0.6); border-radius: 4px; } /* Fundo gráfico mais opaco */

/* Container Botão Info */
.info-button-container { text-align: center; margin-top: 15px; margin-bottom: 25px; }
.info-button-container .btn-info { display: inline-block; padding: 12px 25px; font-size: 1.05rem; }

/* === RODAPÉ PADRÃO === */
.tool-footer { text-align: center; padding: 20px 15px; margin-top: 30px; font-size: 0.9em; background-color: #343a40; color: #adb5bd; width: 100%; flex-shrink: 0; }
.tool-footer-links a { color: #ced4da; text-decoration: none; margin: 0 5px; }
.tool-footer-links a:hover { color: #ffffff; text-decoration: underline; }
.tool-footer div { margin-top: 8px; color: #ced4da; }
/* === FIM RODAPÉ PADRÃO === */


/* Responsividade */
@media (max-width: 992px) { .container { max-width: 70%; } }
@media (max-width: 768px) {
     .header-compact-content { flex-direction: column; } .header-logo { margin-right: 0; margin-bottom: 10px; } .header-compact-text h1 { font-size: 1.3em; } .header-compact-text p { font-size: 0.95em; }
    .container { max-width: 95%; margin: 20px auto; }
    .app-header { padding: 10px 15px; margin-bottom: 20px;} .app-header h1 { font-size: 1.3em; } .app-header .heart-icon { font-size: 1.8em; margin-right: 10px; }
     .filter-controls { flex-direction: column; align-items: stretch; } .filter-controls select, .filter-controls input, .filter-controls button { width: 100%; }
     #historyTable th, #historyTable td { font-size: 0.85rem; padding: 8px 5px; }
     .card { padding: 15px; border-radius: 8px;} .card h2 { margin: -15px -15px 15px -15px; padding: 8px 15px; font-size: 1.2em; border-radius: 8px 8px 0 0; }
     .adsense-placeholder-middle { padding: 15px; }
     .info-button-container .btn-info { padding: 10px 20px; font-size: 1rem; } 
}
@media (max-width: 480px) {
     .header-logo { height: 40px; } .header-compact-text h1 { font-size: 1.2em; } .header-compact-text p { font-size: 0.9em; }
    .container { max-width: 98%; padding: 0 10px; margin: 15px auto; }
    .app-header { padding: 8px 10px; } .app-header h1 { font-size: 1.15em; } .app-header .heart-icon { font-size: 1.6em; margin-right: 8px; }
    .card { padding: 12px; border-radius: 8px; } .card h2 { margin: -12px -12px 12px -12px; padding: 6px 12px; font-size: 1.1em; border-radius: 8px 8px 0 0;}
    .btn { padding: 10px 12px; font-size: 0.9rem; }
    #historyTable th, #historyTable td { font-size: 0.75rem; padding: 6px 4px; }
    .form-group input[type="datetime-local"], .form-group input[type="number"] { font-size: 0.95rem; }
    .tool-footer { padding: 15px 10px; font-size: 0.85em; }
    .adsense-placeholder-middle h2 { font-size: 0.8em; }
     .info-button-container .btn-info { width: 90%; } 
}