/* =============================================
   LIFE ADVISOR — Layout Definitivo + Modo Escuro
   📱 Mobile-First | 💻 3 colunas | Centro 400px
   ============================================= */

/* 🌙 BASE — Modo Claro (padrão) */
:root {
    --cor-primaria: #2c3e50;
    /* Fase 5: verde e vermelho escurecidos para o texto branco por cima passar 4.5:1.
       O #27ae60 dava 2.87:1, muito abaixo do mínimo legível. */
    --cor-destaque: #1d7a43;
    --cor-aviso: #f39c12;          /* só para bordas e preenchimentos, nunca texto */
    --cor-perigo: #c0392b;
    --cor-fundo: #f8f9fa;
    --cor-cartao: #ffffff;
    --texto: #333333;
    --texto-claro: #677074;        /* era #7f8c8d, que dava 3.48:1 */
    /* Cores só para TEXTO. O âmbar e o dourado vivos são bonitos mas ilegíveis em
       fundo claro, por isso o texto usa versões escuras e os enfeites usam as vivas. */
    --texto-positivo: #1d7a43;
    --texto-negativo: #c0392b;
    --texto-aviso: #8c5800;
    --texto-dourado: #8a6508;
    /* O que fica por cima das cores de marca. No tema claro elas são escuras, logo
       branco; no escuro são vivas, e aí o branco dava 2.10:1. */
    --sobre-destaque: #ffffff;
    --sobre-perigo: #ffffff;
    --sobre-primaria: #ffffff;
    --linha-divisoria: #e0e0e0;
    --borda-suave: 14px;
    --sombra-leve: 0 2px 12px rgba(0,0,0,0.08);
    --padding-lados: 20px;
    --padding-centro: 16px;
    --largura-centro: 400px;
}

/* ✅ ESCOLHA MANUAL — Modo Escuro (tem PRIORIDADE sobre automático!) */
:root.tema-escuro {
    --cor-primaria: #4ecdc4;
    --cor-destaque: #2ecc71;
    /* Vivo, para o texto escuro por cima se ler. Se ficasse o vermelho escuro do tema
       claro, o texto escuro sobre ele dava 3.53:1. */
    --cor-perigo: #e74c3c;
    --cor-fundo: #121212;
    --cor-cartao: #1e1e1e;
    --texto: #e8e8e8;
    --texto-claro: #9e9e9e;
    --texto-positivo: #58d68d;
    --texto-negativo: #ec7063;
    --texto-aviso: #f0b357;
    --texto-dourado: #e6c860;
    --sobre-destaque: #08150f;
    --sobre-perigo: #1f0805;
    --sobre-primaria: #0c1b17;
    --linha-divisoria: #3a3a3a;
    --sombra-leve: 0 2px 12px rgba(0,0,0,0.3);
}

/* ✅ ESCOLHA MANUAL — Modo Claro (respeita mesmo em sistema escuro!) */
:root.tema-claro {
    --cor-primaria: #2c3e50;
    --cor-destaque: #1d7a43;
    --cor-perigo: #c0392b;
    --cor-fundo: #f8f9fa;
    --cor-cartao: #ffffff;
    --texto: #333333;
    --texto-claro: #677074;
    --texto-positivo: #1d7a43;
    --texto-negativo: #c0392b;
    --texto-aviso: #8c5800;
    --texto-dourado: #8a6508;
    --sobre-destaque: #ffffff;
    --sobre-perigo: #ffffff;
    --sobre-primaria: #ffffff;
    --linha-divisoria: #e0e0e0;
    --sombra-leve: 0 2px 12px rgba(0,0,0,0.08);
}

/* 🌙 DETEÇÃO AUTOMÁTICA — Só ativa se NÃO houver escolha manual */
@media (prefers-color-scheme: dark) {
    :root:not(.tema-claro):not(.tema-escuro) {
        --cor-primaria: #4ecdc4;
        --cor-destaque: #2ecc71;
        --cor-perigo: #e74c3c;
        --cor-fundo: #121212;
        --cor-cartao: #1e1e1e;
        --texto: #e8e8e8;
        --texto-claro: #9e9e9e;
        --texto-positivo: #58d68d;
        --texto-negativo: #ec7063;
        --texto-aviso: #f0b357;
        --texto-dourado: #e6c860;
        --sobre-destaque: #08150f;
        --sobre-perigo: #1f0805;
        --sobre-primaria: #0c1b17;
        --linha-divisoria: #3a3a3a;
        --sombra-leve: 0 2px 12px rgba(0,0,0,0.3);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    height: 100%;
    min-height: 100vh;
}

body {
    background: var(--cor-fundo);
    color: var(--texto);
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    font-size: 16px;
    transition: background 0.3s ease, color 0.3s ease;
}

/* =============================================
   📱 TELEMÓVEL — Padrão (Mobile-First)
   ============================================= */

.layout-pagina {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}

.painel-esquerdo,
.painel-direito {
    display: none;
}

.conteudo-centro {
    /* Sem o width, o "margin: 0 auto" desliga o alargamento do item de grelha e a coluna
       passa a ser medida pelo conteúdo. Isso fazia o ecrã com o conteúdo mais estreito
       ficar visivelmente mais apertado do que os outros. */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* =============================================
   💻 ECRÃS GRANDES — 3 Colunas (≥ 768px)
   ============================================= */

@media (min-width: 768px) {
    .layout-pagina {
        display: grid !important;
        grid-template-columns: 1fr var(--largura-centro) 1fr !important;
    }

    .painel-esquerdo,
    .painel-direito {
        display: block !important;
        padding: var(--padding-lados);
        background: rgba(44, 62, 80, 0.05);
        min-height: 100vh;
    }

    .conteudo-centro {
        padding: 0;
        max-width: var(--largura-centro) !important;
        width: var(--largura-centro) !important;
        margin: 0 auto;
        background: var(--cor-fundo);
        min-height: 100vh;
        border-left: 2px solid var(--linha-divisoria);
        border-right: 2px solid var(--linha-divisoria);
    }
}

/* ✅ Painéis no Modo Escuro */
@media (min-width: 768px) {
    .tema-escuro .painel-esquerdo,
    .tema-escuro .painel-direito {
        background: rgba(44, 62, 80, 0.3);
    }
}

@media (min-width: 768px) and (prefers-color-scheme: dark) {
    :root:not(.tema-claro) .painel-esquerdo,
    :root:not(.tema-claro) .painel-direito {
        background: rgba(44, 62, 80, 0.3);
    }
}

/* =============================================
   🧩 COMPONENTES
   ============================================= */

header {
    text-align: center;
    margin: 0;
    position: relative;
    flex-shrink: 0;
    padding: 5px 12px 6px;
    border-bottom: 1px solid var(--linha-divisoria);
    background: var(--cor-fundo);
    z-index: 10;
}

#btn-tema {
    position: absolute;
    top: 10px;
    right: 16px;
    padding: 6px 10px;
    font-size: 1.3rem;
    min-height: auto;
    background: transparent;
    border: none;
    cursor: pointer;
}

header h1 {
    font-size: 1.4rem;
    color: var(--cor-primaria);
    margin-bottom: 4px;
    padding-right: 40px;
}

header p {
    color: var(--texto-claro);
    font-size: 0.8rem;
    line-height: 1.35;
}

.cartao {
    background: var(--cor-cartao);
    border-radius: var(--borda-suave);
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: var(--sombra-leve);
    width: 100%;
}

.cartao h2 {
    font-size: 1.05rem;
    margin-bottom: 12px;
    color: var(--cor-primaria);
    border-bottom: 1px solid var(--linha-divisoria);
    padding-bottom: 8px;
}

.cartao h3 {
    font-size: 0.98rem;
    margin: 4px 0 10px;
    color: var(--cor-primaria);
}

.cartao p {
    margin-bottom: 8px;
    color: var(--texto);
    font-size: 0.98rem;
}

.destaque { border-left: 4px solid var(--cor-destaque); }
.aviso   { border-left: 4px solid var(--cor-aviso); }

.botoes-acao {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

button {
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.2s, background 0.3s ease;
    min-height: 48px;
    color: var(--texto);
}

button:active { transform: scale(0.97); }
button:hover { opacity: 0.92; }

.btn-principal   { background: var(--cor-destaque); color: var(--sobre-destaque); }
.btn-secundario  { background: var(--cor-primaria); color: var(--sobre-primaria); }
.btn-terciario   { background: var(--linha-divisoria); color: var(--texto); }

/* =============================================
   ✅ NAVEGAÇÃO — ORDEM CORRIGIDA!
   ============================================= */

.navegacao {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 4px 10px 5px;
    margin: 0;
    border-top: 1px solid var(--linha-divisoria);
    background: var(--cor-fundo);
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

/* ✅ BOTÃO — EMPILHA EMOJI + TEXTO */
.navegacao button {
    padding: 4px 4px;
    font-size: 0.7rem;
    background: var(--cor-cartao);
    border: 1px solid var(--linha-divisoria);
    /* 46px mantém o alvo de toque acima dos 44 recomendados, com o rodapé baixo */
    min-height: 46px;
    color: var(--texto);

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}

.navegacao button:hover,
.navegacao button:active {
    background: var(--cor-destaque);
    color: var(--sobre-destaque);
    border-color: var(--cor-destaque);
}

.tema-escuro .navegacao button {
    background: #2a2a2a;
    border-color: #444444;
}

@media (prefers-color-scheme: dark) {
    :root:not(.tema-claro) .navegacao button {
        background: #2a2a2a;
        border-color: #444444;
    }
}

.navegacao button.ativo {
    background: var(--cor-destaque) !important;
    color: var(--sobre-destaque) !important;
    border-color: var(--cor-destaque) !important;
}

/* ✅ Botões de ação em linha em ecrãs maiores */
@media (min-width: 600px) {
    .botoes-acao { flex-direction: row; justify-content: stretch; }
    .botoes-acao button { flex: 1; }
}

/* =============================================
   📱 SISTEMA DE TELAS — Mostrar/Esconder
   ============================================= */

.tela {
    display: none;
    animation: aparecer 0.3s ease;
    flex-grow: 1;
    overflow-y: auto;
    padding: 16px;
}

.tela.ativa {
    display: block;
}

@keyframes aparecer {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =============================================
   📌 FIXAR CABEÇALHO TOPO + NAVEGAÇÃO BAIXO
   ============================================= */

.conteudo-centro {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* =============================================
   📅🕐 ESTILOS — ÍCONES DATA & HORA
   ============================================= */

.campo-data-wrapper,
.campo-hora-wrapper {
    position: relative;
    flex: 1;
    min-width: 110px;
}

.campo-data-wrapper input,
.campo-hora-wrapper input {
    width: 100%;
    padding-right: 52px;
    box-sizing: border-box;
    background: var(--cor-cartao);
    color: var(--texto);
    border: 1px solid var(--linha-divisoria);
    border-radius: 10px;
    /* O lado direito fica reservado para o ícone. Um "padding: 12px" aqui anulava o
       espaço e o ícone passava por cima do texto da data.
       As medidas vêm do controlo nativo: a caixa de data pede cerca de 119px só para
       "dd/mm/yyyy" a 0.85rem, e a de hora cerca de 66px. */
    padding: 12px 34px 12px 10px;
    font-size: 0.85rem;
}

.campo-data-wrapper .icone-data {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: #2ecc71;
    border-radius: 7px;
    font-size: 15px;
    pointer-events: none;
    z-index: 1;
}

.campo-hora-wrapper .icone-hora {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: #f37eb5;
    border-radius: 7px;
    font-size: 15px;
    pointer-events: none;
    z-index: 1;
}

/* Seletor nativo por baixo do ícone */
.campo-data-wrapper input::-webkit-calendar-picker-indicator,
.campo-hora-wrapper input::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0;
    top: 0;
    width: 34px;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* =============================================
   📝 FORMULÁRIOS E INPUTS GERAIS
   ============================================= */

input, select, textarea {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--linha-divisoria);
    background: var(--cor-cartao);
    color: var(--texto);
    font-size: 0.95rem;
}

:focus-visible {
    outline: 2px solid var(--cor-destaque);
    outline-offset: 2px;
}

::placeholder {
    color: var(--texto-claro);
    opacity: 1;
}

.tela-boas-vindas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.6s ease;
}
.conteudo-boas-vindas { text-align: center; padding: 2rem; }
.icone-boas-vindas { width: 160px; height: 160px; margin-bottom: 2rem; filter: drop-shadow(0 0 30px rgba(212,175,55,0.6)); }
.nome-app { color: #FFD700; font-size: 3rem; margin: 0 0 0.5rem 0; text-shadow: 0 0 20px rgba(255,215,0,0.5); }
.slogan { color: #CBD5E1; font-size: 1.05rem; margin-bottom: 2.5rem; }
.btn-comecar { background: linear-gradient(135deg, #D4AF37, #FFD700); color: #0F172A; border: none; padding: 1rem 2.5rem; font-size: 1.1rem; font-weight: bold; border-radius: 50px; cursor: pointer; box-shadow: 0 0 20px rgba(212,175,55,0.5); transition: transform 0.3s ease; }
.btn-comecar:hover { transform: scale(1.05); }
.escondida { opacity: 0; pointer-events: none; }

/* 📅 Destaques para tarefas */
.tarefa.hoje {
  border-left: 4px solid var(--cor-aviso);
  background: linear-gradient(90deg, rgba(243,156,18,0.08), transparent);
}
.tarefa.atrasada {
  border-left: 4px solid var(--cor-perigo);
  background: linear-gradient(90deg, rgba(231,76,60,0.08), transparent);
}
/* =============================================
   🧩 COMPONENTES — Fase 1
   Estilos que antes viviam em atributos inline no HTML e no JavaScript.
   ============================================= */

/* --- Botões de ícone no cabeçalho --- */
.btn-icone {
    position: absolute;
    top: 10px;
    padding: 6px 10px;
    font-size: 1.3rem;
    min-height: auto;
    background: transparent;
    border: none;
    cursor: pointer;
}

/* --- Grelha do resumo --- */
.grelha-resumo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.resumo-item {
    text-align: center;
    padding: 10px;
    background: var(--cor-fundo);
    border-radius: 10px;
}

.resumo-icone    { font-size: 1.4rem; }
.resumo-valor    { font-weight: bold; }
.resumo-etiqueta { font-size: 0.85rem; color: var(--texto-claro); }

/* --- Campos de formulário --- */
.campo-bloco    { margin: 10px 0; }
.campo-etiqueta { display: block; font-size: 0.9rem; color: var(--texto-claro); margin-bottom: 4px; }

.linha-campos {
    display: flex;
    gap: 10px;
    margin: 10px 0;
}

.btn-largo { width: 100%; margin-top: 10px; }

textarea { resize: none; }

/* --- Listas vazias --- */
.vazio {
    color: var(--texto-claro);
    font-style: italic;
    text-align: center;
    padding: 1.6rem 0;
}

/* --- Linha com corpo à esquerda e ações à direita --- */
.linha-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.item-corpo  { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.item-acoes  { display: flex; gap: 4px; flex-shrink: 0; }

.btn-circulo {
    background: var(--cor-destaque);
    color: var(--sobre-destaque);
    border: 1px solid transparent;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
}

.btn-circulo-vazio {
    background: transparent;
    color: var(--texto-claro);
    border-color: var(--linha-divisoria);
}

.btn-remover {
    background: transparent;
    color: var(--texto-negativo);
    border: none;
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    font-size: 1rem;
}

.btn-apagar {
    padding: 8px 14px;
    font-size: 0.85rem;
    min-height: 40px;
    background: var(--cor-perigo);
    color: var(--sobre-perigo);
    border-radius: 8px;
}

/* --- Etiquetas de prazo --- */
.etiqueta-prazo { font-size: 0.85rem; display: inline-block; margin-bottom: 4px; }
.prazo-atraso   { color: var(--texto-negativo); font-weight: bold; }
.prazo-hoje     { color: var(--texto-aviso); font-weight: bold; }
.prazo-perto    { color: var(--texto-aviso); }
.prazo-longe    { color: var(--texto-claro); }

.tarefa.feita { opacity: 0.6; }
.tarefa.feita strong { text-decoration: line-through; }

/* --- Dinheiro --- */
.saldo-grande { font-size: 2rem; font-weight: bold; margin: 8px 0; }

.totais-linha {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.valor-positivo { color: var(--texto-positivo); }
.valor-negativo { color: var(--texto-negativo); }

.movimento {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--linha-divisoria);
}

.movimento:last-child { border-bottom: none; }
.movimento-desc   { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.movimento-valor  { font-weight: bold; white-space: nowrap; }

/* --- Objetivos --- */
.objetivo-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.objetivo-nome    { font-size: 1.05rem; margin: 0; overflow-wrap: anywhere; }
.objetivo-percent { font-weight: bold; font-size: 1.1rem; white-space: nowrap; }
.objetivo-completo { color: var(--texto-dourado); }

.barra {
    height: 14px;
    background: var(--linha-divisoria);
    border-radius: 7px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.barra-preenchida {
    height: 100%;
    border-radius: 7px;
    background: linear-gradient(90deg, #2c3e50, #3498db);
    transition: width 0.5s ease;
}

/* 💎 A 100% a barra fica dourada */
.barra-dourada {
    background: linear-gradient(90deg, #D4AF37, #FFD700);
    box-shadow: 0 0 8px rgba(212,175,55,0.4);
}

.metas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.meta {
    padding: 8px 12px;
    min-height: 40px;
    border-radius: 8px;
    font-size: 0.85rem;
    background: var(--cor-fundo);
    border: 1px solid var(--linha-divisoria);
    color: var(--texto);
}

.meta-feita {
    background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(255,215,0,0.15));
    color: var(--texto-dourado);
    text-decoration: line-through;
    border-color: rgba(212,175,55,0.4);
}





/* --- Encontros --- */
.encontro {
    padding: 12px 0;
    border-bottom: 1px solid var(--linha-divisoria);
}

.encontro:last-child   { border-bottom: none; }
.encontro-passado      { opacity: 0.55; }
.encontro-nome         { font-size: 1rem; margin: 0 0 4px; overflow-wrap: anywhere; }
.encontro-data         { font-size: 0.9rem; color: var(--texto-claro); margin: 0; }
.encontro-notas        { font-size: 0.9rem; opacity: 0.8; margin: 6px 0 0; overflow-wrap: anywhere; }

/* =============================================
   💾 PAINEL — OS MEUS DADOS
   ============================================= */

.painel-dados {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9999;
}

.painel-dados[hidden] { display: none; }

.painel-caixa {
    background: var(--cor-cartao);
    color: var(--texto);
    border-radius: var(--borda-suave);
    padding: 22px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}

.painel-caixa h3 { color: var(--cor-primaria); margin-bottom: 10px; }

.painel-nota {
    font-size: 0.9rem;
    color: var(--texto-claro);
    margin-bottom: 10px;
}

.painel-contagem {
    font-size: 0.85rem;
    color: var(--texto-claro);
    padding: 8px 10px;
    background: var(--cor-fundo);
    border-radius: 8px;
    margin-bottom: 14px;
}

.painel-botoes { display: flex; flex-direction: column; gap: 8px; }

.painel-aviso {
    margin-top: 14px;
    font-size: 0.88rem;
    padding: 10px;
    border-radius: 8px;
    overflow-wrap: anywhere;
}

.painel-aviso-ok   { background: rgba(39,174,96,0.14);  color: var(--texto-positivo); }
.painel-aviso-erro { background: rgba(231,76,60,0.14);  color: var(--texto-negativo); }





/* --- Aviso de abertura direta do ficheiro --- */
.aviso-ficheiro {
    margin-top: 1.6rem;
    max-width: 320px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #FCD34D;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(252,211,77,0.4);
    border-radius: 10px;
    padding: 12px;
    text-align: left;
}

.aviso-ficheiro code {
    background: rgba(255,255,255,0.1);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.btn-comecar:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* No tema escuro a cor primária é clara, por isso texto branco por cima não se lê */




/* =============================================
   ☀️ ECRÃ HOJE — Fase 2
   O ecrã é feito para ser lido em quinze segundos e fechado.
   ============================================= */

.cartao.proposta {
    border-left: 4px solid var(--cor-primaria);
}

.texto-proposta {
    font-size: 1.08rem;
    line-height: 1.55;
    margin-bottom: 12px;
}

/* 👉 A ação que acontece fora do ecrã */
.acao-real {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--texto-positivo);
    background: rgba(39,174,96,0.12);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
}

.tema-escuro .acao-real { background: rgba(46,204,113,0.14); }

@media (prefers-color-scheme: dark) {
    :root:not(.tema-claro) .acao-real { background: rgba(46,204,113,0.14); }
}

.botoes-proposta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.botoes-proposta[hidden] { display: none; }

@media (min-width: 340px) {
    .botoes-proposta { grid-template-columns: 1fr 1fr; }
    #btn-confirmar { grid-column: 1 / -1; }
}

.botoes-proposta button { font-size: 0.92rem; padding: 12px 10px; }

/* Resposta curta depois de o utilizador escolher */
.resposta-assistente {
    font-size: 0.98rem;
    font-style: italic;
    color: var(--texto-claro);
    padding: 10px 0 0;
    margin: 0;
}

/* Lista do que está a ficar para trás */
.lista-pendentes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pendente-item {
    font-size: 0.94rem;
    line-height: 1.5;
    padding: 10px 0 10px 14px;
    border-left: 3px solid var(--cor-aviso);
    border-bottom: 1px solid var(--linha-divisoria);
    margin-bottom: 8px;
}

.pendente-item:last-child { border-bottom: none; margin-bottom: 0; }

/* =============================================
   🧭 NAVEGAÇÃO DE CINCO BOTÕES
   O agrupamento final das áreas continua a ser decisão da Fase 3.
   ============================================= */

.navegacao.nav-cinco {
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding: 4px 6px 5px;
}

.navegacao.nav-cinco button {
    font-size: 0.6rem;
    padding: 3px 2px;
    gap: 0;
    white-space: normal;
    line-height: 1.15;
    min-height: 46px;
}

/* O emoji fica um pouco maior do que a etiqueta, sem esticar o botão */
.navegacao button span:first-child { font-size: 1.2em; line-height: 1.05; }

@media (min-width: 380px) {
    .navegacao.nav-cinco button { font-size: 0.64rem; }
}

/* =============================================
   🧭 CABEÇALHO COM BARRA DE ATALHOS — Fase 3
   Sete ecrãs não cabem num rodapé. Dinheiro e Compras vivem aqui.
   ============================================= */

.barra-acoes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
}

.acoes-lado { display: flex; gap: 2px; flex: 0 0 auto; }

/* Deixa de ser absoluto: agora vive dentro da barra */
.btn-icone {
    position: static;
    padding: 3px 6px;
    font-size: 1.15rem;
    min-height: 32px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    line-height: 1;
}

#btn-dados, #btn-tema { position: static; left: auto; right: auto; }

.btn-icone.ativo {
    background: var(--cor-destaque);
    border-radius: 8px;
}

header h1 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: 1.02rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 379px) {
    header h1 { font-size: 0.9rem; }
    .btn-icone { font-size: 1.05rem; padding: 3px 5px; min-height: 32px; }
}

/* Nos ecrãs mais estreitos a saudação ainda tinha de encolher para não ser cortada */
@media (max-width: 339px) {
    header h1 { font-size: 0.8rem; }
    .btn-icone { font-size: 1rem; padding: 3px 4px; }
    header { padding: 5px 8px 6px; }
}

/* =============================================
   🔁 ROTINAS
   ============================================= */

.momento { margin-bottom: 18px; }
.momento:last-child { margin-bottom: 0; }

.momento-titulo {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--texto-claro);
    margin: 0 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--linha-divisoria);
}

.rotina {
    padding: 10px 0;
    border-bottom: 1px solid var(--linha-divisoria);
}

.rotina:last-child { border-bottom: none; }
.rotina-feita strong { text-decoration: line-through; opacity: 0.7; }

.rotina-medidas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 0.82rem;
    margin: 2px 0 0;
}

.rotina-serie      { color: var(--texto-aviso); font-weight: 600; }
.rotina-sem-serie  { color: var(--texto-claro); }
.rotina-semana     { color: var(--texto-claro); }

/* 🧱 O obstáculo que a própria pessoa escreveu */
.rotina-obstaculo {
    font-size: 0.85rem;
    color: var(--texto-claro);
    font-style: italic;
    margin: 4px 0 0;
    overflow-wrap: anywhere;
}

/* =============================================
   🛒 COMPRAS
   ============================================= */

.compra {
    padding: 8px 0;
    border-bottom: 1px solid var(--linha-divisoria);
}

.compra:last-child { border-bottom: none; }

.sugestoes { margin-top: 14px; }
.sugestoes[hidden] { display: none; }

/* =============================================
   🤝 PESSOAS
   ============================================= */

.pessoa {
    padding: 12px 0;
    border-bottom: 1px solid var(--linha-divisoria);
}

.pessoa:last-child { border-bottom: none; }
.pessoa-nome  { font-size: 1rem; margin: 0 0 4px; overflow-wrap: anywhere; }

.pessoa-medidas {
    font-size: 0.85rem;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
}

.pessoa-notas {
    font-size: 0.88rem;
    color: var(--texto-claro);
    margin: 6px 0 0;
    overflow-wrap: anywhere;
}

/* 💬 A ação que devolve o contacto à pessoa */
.btn-falei {
    margin-top: 8px;
    padding: 8px 14px;
    font-size: 0.85rem;
    min-height: 40px;
    background: var(--cor-fundo);
    border: 1px solid var(--linha-divisoria);
    border-radius: 8px;
    color: var(--texto);
}

.btn-falei:hover { background: var(--cor-destaque); color: var(--sobre-destaque); border-color: var(--cor-destaque); }


/* =============================================
   📅🕐 LINHA DE DATA E HORA
   A mesma em todos os ecrãs: data à esquerda com a caixa verde, hora à direita
   com a caixa rosa, e as duas com a mesma largura.
   ============================================= */

.linha-data-hora {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}

/* As bases são a largura mínima que cada controlo nativo precisa, medida no navegador:
   114px para "dd/mm/yyyy" e 71px para "--:--", mais 46px de espaço do ícone e da borda.
   Com flex-wrap, se as duas não couberem lado a lado empilham-se sozinhas, em qualquer
   largura de ecrã, sem depender de uma medida adivinhada numa media query. */
.linha-data-hora .campo-data-wrapper { flex: 3 1 160px; min-width: 160px; }
.linha-data-hora .campo-hora-wrapper { flex: 2 1 118px; min-width: 118px; }

/* =============================================
   🛟 SEGURANÇA E APOIO — Fase 4
   ============================================= */

.painel-seguranca .painel-caixa { border-top: 4px solid var(--cor-destaque); }

.seguranca-corpo {
    font-size: 0.96rem;
    line-height: 1.5;
    margin-bottom: 14px;
}

/* Cada recurso é um link de telefone: um toque e está a ligar */
.recurso {
    display: block;
    text-decoration: none;
    color: var(--texto);
    background: var(--cor-fundo);
    border: 1px solid var(--linha-divisoria);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
}

.recurso:hover,
.recurso:focus-visible { border-color: var(--cor-destaque); }

.recurso-numero {
    display: block;
    font-size: 1.12rem;
    font-weight: bold;
    color: var(--texto-positivo);
}

.recurso-nome { display: block; font-size: 0.92rem; font-weight: 500; }
.recurso-detalhe { display: block; font-size: 0.82rem; color: var(--texto-claro); }

/* ℹ️ Limites ditos onde são relevantes, não escondidos num rodapé */
.aviso-limite {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--texto-claro);
    background: var(--cor-cartao);
    border-left: 3px solid var(--cor-aviso);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
}

/* =============================================
   👋 PRIMEIRA UTILIZAÇÃO
   ============================================= */

.painel-onboarding .painel-caixa { max-width: 380px; }

.onboarding-progresso {
    font-size: 0.78rem;
    color: var(--texto-claro);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

#onboarding-pergunta {
    font-size: 1.1rem;
    line-height: 1.35;
    margin-bottom: 8px;
    border: none;
    padding: 0;
}

#onboarding-corpo { margin: 14px 0; }

.opcao-onboarding {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--cor-fundo);
    border: 1px solid var(--linha-divisoria);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
    min-height: 56px;
}

.opcao-onboarding:hover,
.opcao-onboarding:focus-visible { border-color: var(--cor-destaque); }

.opcao-etiqueta { display: block; font-weight: 500; font-size: 0.98rem; }
.opcao-nota { display: block; font-size: 0.82rem; color: var(--texto-claro); }

/* Um botão que não parece um botão, para a saída não competir com o caminho */
.btn-texto {
    background: transparent;
    border: none;
    color: var(--texto-claro);
    font-size: 0.85rem;
    text-decoration: underline;
    min-height: 40px;
    padding: 6px;
}

/* =============================================
   ⚙️ SECÇÕES DO PAINEL DE DADOS
   ============================================= */

.painel-secao {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--linha-divisoria);
}

.painel-secao h4 {
    font-size: 0.9rem;
    color: var(--cor-primaria);
    margin-bottom: 8px;
}

.painel-secao select { margin-bottom: 6px; }

/* 📐 Indicadores: o que aconteceu fora do ecrã */
.indicador {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--linha-divisoria);
}

.indicador:last-child { border-bottom: none; }
.indicador-icone { font-size: 1.1rem; line-height: 1.3; flex-shrink: 0; }
.indicador-corpo { display: flex; flex-direction: column; min-width: 0; }
.indicador-corpo strong { font-size: 0.92rem; font-weight: 600; }
.indicador-corpo small { font-size: 0.78rem; color: var(--texto-claro); }

/* O painel pode ficar alto com tudo isto: rola por dentro */
.painel-caixa {
    max-height: 88vh;
    overflow-y: auto;
}

/* =============================================
   🎙️ VOZ — Fase 6
   ============================================= */

/* O botão de adicionar e o microfone lado a lado. O microfone é visível de propósito:
   uma função que só existe numa pressão longa é invisível para quem não a conhece. */
.linha-adicionar {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.linha-adicionar .btn-principal { flex: 1 1 auto; min-width: 0; }

.btn-voz {
    flex: 0 0 auto;
    width: 52px;
    min-height: 48px;
    font-size: 1.3rem;
    background: var(--cor-cartao);
    border: 1px solid var(--linha-divisoria);
    border-radius: 12px;
    color: var(--texto);
    /* Numa pressão longa os telemóveis selecionam texto e abrem menus */
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.btn-voz:hover:not(:disabled) { border-color: var(--cor-destaque); }
.btn-voz:disabled { opacity: 0.4; cursor: not-allowed; }

.dica-voz {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--texto-claro);
    margin: 8px 0 0;
}

.dica-voz em { font-style: italic; }

/* --- O painel de ditado --- */

.voz-estado {
    font-size: 0.9rem;
    color: var(--texto-claro);
    min-height: 1.3em;
    margin-bottom: 6px;
}

/* Um sinal calmo de que está a ouvir. Sem contadores nem barras a saltar. */
.voz-estado.a-ouvir { color: var(--texto-positivo); font-weight: 600; }

.voz-estado.a-ouvir::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--cor-destaque);
    animation: pulsar 1.3s ease-in-out infinite;
}

@keyframes pulsar {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .voz-estado.a-ouvir::after { animation: none; opacity: 1; }
}

.voz-transcrito {
    font-size: 1rem;
    line-height: 1.45;
    min-height: 1.4em;
    padding: 10px 12px;
    background: var(--cor-fundo);
    border-radius: 10px;
    margin-bottom: 12px;
    overflow-wrap: anywhere;
}

/* Enquanto é provisório, mostra-se mais leve: ainda pode mudar */
.voz-transcrito.provisorio { color: var(--texto-claro); font-style: italic; }

/* --- O que foi entendido, corrigível antes de guardar --- */

.voz-item {
    position: relative;
    padding: 10px 44px 10px 0;
    border-bottom: 1px solid var(--linha-divisoria);
}

.voz-item:last-child { border-bottom: none; }

.voz-item-nome {
    font-weight: 500;
    padding: 8px 10px;
}

.voz-item-extras {
    font-size: 0.82rem;
    color: var(--texto-claro);
    margin: 4px 0 0 2px;
}

.voz-item .btn-remover {
    position: absolute;
    top: 12px;
    right: 0;
}

/* --- O aviso de que o áudio sairia do telemóvel --- */

.voz-aviso-nuvem {
    background: var(--cor-fundo);
    border-left: 3px solid var(--cor-aviso);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 4px;
}

.voz-aviso-nuvem p {
    font-size: 0.88rem;
    line-height: 1.45;
    margin-bottom: 8px;
}

.voz-aviso-nuvem p:last-child { margin-bottom: 0; }

/* Um botão que aceita pressão longa não deve abrir menus nem selecionar texto */
.pressao-longa {
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

/* --- Contactos na ficha da pessoa: cada um é uma ação, não texto morto --- */
.pessoa-contactos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.contacto {
    display: inline-block;
    font-size: 0.85rem;
    padding: 5px 9px;
    border-radius: 8px;
    background: var(--cor-fundo);
    border: 1px solid var(--linha-divisoria);
    color: var(--texto);
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.contacto:hover,
a.contacto:focus-visible {
    border-color: var(--cor-destaque);
    color: var(--texto-positivo);
}

/* A morada não liga a lado nenhum: é informação, não ação */
.contacto-morada {
    color: var(--texto-claro);
    flex-basis: 100%;
}

/* =============================================
   📥 IMPORTAR PESSOAS E O MEU CARTÃO
   ============================================= */

.pessoa-encontrada {
    position: relative;
    padding: 12px 44px 12px 0;
    border-bottom: 1px solid var(--linha-divisoria);
}

.pessoa-encontrada:last-child { border-bottom: none; }
.encontrada-nome { font-weight: 500; padding: 8px 10px; }

.encontrada-detalhes {
    font-size: 0.82rem;
    color: var(--texto-claro);
    line-height: 1.5;
    margin: 6px 0 0 2px;
    overflow-wrap: anywhere;
}

.encontrada-repetida {
    font-size: 0.8rem;
    color: var(--texto-aviso);
    margin: 4px 0 0 2px;
}

.pessoa-encontrada .btn-remover { position: absolute; top: 14px; right: 0; }

/* O código tem de ser escuro sobre claro mesmo em tema escuro, senão não se lê */
#cartao-qr {
    display: block;
    margin: 12px auto;
    border-radius: 8px;
    background: #ffffff;
    max-width: 100%;
    height: auto;
}

#cartao-ligacao {
    font-size: 0.78rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* =============================================
   ❓ PERGUNTAS SOBRE AS PESSOAS
   ============================================= */

/* No ecrã Hoje, quando a proposta é uma pergunta */
.bloco-pergunta { margin-top: 4px; }
.bloco-pergunta[hidden] { display: none; }
.bloco-pergunta input { margin-bottom: 8px; }

/* Na lista editável, em Os Meus Dados */
.pergunta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    border-bottom: 1px solid var(--linha-divisoria);
}

.pergunta:last-child { border-bottom: none; }
.pergunta-texto { font-size: 0.88rem; padding: 8px; }
.pergunta-acoes { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

/* Uma pergunta desligada continua visível, mas apagada */
.pergunta-desligada .pergunta-texto {
    opacity: 0.5;
    text-decoration: line-through;
}