/* css/base.css — cores, letra e peças partilhadas pelo tablet e pela família.
   A paleta é a de O Alpendre (cal, areia, madeira, luz, verde). O tablet é
   claro de propósito: para quem vê mal, letra escura sobre fundo claro lê-se
   melhor do que o contrário, e à luz do dia não reflete tanto. */

@font-face { font-family: 'Inter'; src: url('fonts/inter-latin-wght-normal.woff2') format('woff2');
             font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('fonts/fraunces-latin-full-normal.woff2') format('woff2');
             font-weight: 100 900; font-display: swap; }

:root {
    --cal: #f8f6f0;
    --areia: #eee7d7;
    --papel: #fffdf9;
    --sombra: #1c1611;
    --texto2: #5a4d40;          /* texto secundário: 7:1 sobre o papel */
    --madeira: #634327;
    --madeira-claro: #8a6a45;
    --luz: #e6a12b;
    --verde: #2f6b45;
    --verde-fundo: #e3efe6;
    --vermelho: #b3261e;
    --vermelho-fundo: #fbe7e5;
    --ambar: #9a5b00;           /* âmbar escuro: legível como texto */
    --ambar-fundo: #fdf0d8;
    --cinza: #6b6259;
    --linha: rgba(28, 22, 17, .12);
    --raio: 18px;
    --serif: 'Fraunces', Georgia, serif;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--sans); color: var(--sombra); background: var(--cal);
       -webkit-text-size-adjust: 100%; line-height: 1.4; }
[hidden] { display: none !important; }
img { max-width: 100%; }
button { font-family: inherit; }

/* ── botões ─────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em;
       border: 0; border-radius: var(--raio); padding: .7em 1.2em; font-size: 1rem;
       font-weight: 700; cursor: pointer; text-decoration: none; min-height: 48px;
       color: var(--sombra); background: var(--areia); }
.btn:focus-visible { outline: 4px solid var(--luz); outline-offset: 3px; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn-verde { background: var(--verde); color: #fff; }
.btn-vermelho { background: var(--vermelho); color: #fff; }
.btn-claro { background: var(--papel); border: 2px solid var(--linha); }
.btn-madeira { background: var(--madeira); color: #fff; }

/* ── estado de uma toma ─────────────────────────────────────────────────── */
.estado { display: inline-flex; align-items: center; gap: .35em; padding: .2em .65em;
          border-radius: 999px; font-weight: 700; font-size: .9em; white-space: nowrap; }
.estado.tomado     { background: var(--verde-fundo); color: var(--verde); }
.estado.agora      { background: var(--ambar-fundo); color: var(--ambar); }
.estado.em_falta   { background: var(--vermelho-fundo); color: var(--vermelho); }
.estado.nao_tomado { background: var(--vermelho-fundo); color: var(--vermelho); }
.estado.parcial    { background: var(--ambar-fundo); color: var(--ambar); }
.estado.futuro     { background: var(--areia); color: var(--cinza); }
.estado.dupla      { background: var(--vermelho); color: #fff; }

.foto { object-fit: cover; background: var(--areia); }
.foto.redonda { border-radius: 50%; }
.sem-foto { display: inline-grid; place-items: center; font-weight: 800; color: var(--madeira);
            font-family: var(--serif); font-size: 2em; }

/* ── ficha de emergência (tablet e família) ─────────────────────────────── */
.ficha { background: var(--papel); border-radius: var(--raio); padding: 1.2em; max-width: 820px; margin: 0 auto; }
.ficha-cab { display: flex; align-items: center; gap: 1em; margin-bottom: 1em; }
.ficha-cab img { width: 96px; height: 96px; }
.ficha-cab h2 { margin: 0; font-family: var(--serif); font-size: 1.8em; line-height: 1.1; }
.ficha-cab .idade { color: var(--texto2); font-size: 1.1em; }
.ficha-alerta { background: var(--vermelho-fundo); border: 3px solid var(--vermelho); border-radius: 14px;
                padding: .8em 1em; margin-bottom: 1em; color: #5c130f; }
.ficha-alerta h3 { margin: 0 0 .3em; color: var(--vermelho); font-size: 1em; text-transform: uppercase; letter-spacing: .04em; }
.ficha-alerta p, .ficha-alerta ul { margin: .2em 0; }
.ficha-alerta ul { padding-left: 1.2em; }
.ficha-alerta .grande { font-size: 1.25em; font-weight: 800; }
.ficha section { margin: 1em 0; }
.ficha section h3 { margin: 0 0 .4em; font-size: .85em; text-transform: uppercase; letter-spacing: .06em; color: var(--madeira); }
.ficha .linha-tempo { list-style: none; margin: 0; padding: 0; }
.ficha .linha-tempo li { display: flex; gap: .6em; padding: .35em 0; border-bottom: 1px solid var(--linha); align-items: baseline; }
.ficha .linha-tempo li .q { min-width: 7.5em; color: var(--texto2); font-variant-numeric: tabular-nums; }
.ficha .linha-tempo li.mau { color: var(--vermelho); font-weight: 700; }
.ficha table { width: 100%; border-collapse: collapse; }
.ficha td { padding: .35em .4em; border-bottom: 1px solid var(--linha); vertical-align: top; }
.ficha .doencas { margin: .2em 0; padding-left: 1.2em; }
.ficha .doencas li { padding: .1em 0; }
.ficha .contactos { display: flex; flex-wrap: wrap; gap: .5em; }
.ficha .contactos a { font-size: 1.1em; }
.ficha-rodape { margin-top: 1.2em; font-size: .8em; color: var(--texto2); border-top: 1px solid var(--linha); padding-top: .6em; }

/* ── diálogo ────────────────────────────────────────────────────────────── */
dialog.caixa { border: 0; border-radius: var(--raio); padding: 1.4em; max-width: min(560px, calc(100vw - 2em));
               width: 100%; background: var(--papel); color: var(--sombra);
               /* Os formulários de configuração são compridos: a caixa rola por
                  dentro em vez de sair do ecrã e levar os botões com ela. */
               max-height: min(90vh, 90dvh); overflow-y: auto; }
dialog.caixa::backdrop { background: rgba(28, 22, 17, .55); }
dialog.caixa h2 { margin-top: 0; font-family: var(--serif); }
.acoes { display: flex; gap: .6em; flex-wrap: wrap; justify-content: flex-end; margin-top: 1em; }

@media print {
    body { background: #fff; }
    .nao-imprimir { display: none !important; }
    .ficha { max-width: none; padding: 0; }
    .ficha-alerta { break-inside: avoid; }
    a[href^="tel:"] { color: inherit; text-decoration: none; }
}