/* Estilo base do app: as cores da marca, fonte, botoes e os campos de formulario.
   Paleta do BioShield: teal escuro #0E3C39, coral #E8604C e menta #E3F1EC.
   Botao e texto grandes de proposito, porque muito usuario do app e idoso.
   A fonte do texto e a Atkinson Hyperlegible, desenhada para pessoas com baixa visao:
   cada letra tem formato unico, entao "Il1" e "O0" nao se confundem. */

@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Manrope:wght@500;600;700;800&display=swap");

:root {
  --teal: #0e3c39;
  --teal-fundo: #092523;
  --teal-medio: #1b5c57;
  --teal-claro: #35817a;
  --coral: #e8604c;
  --coral-escuro: #c3402c;
  --coral-fraco: #fdeae6;
  --menta: #e3f1ec;
  --menta-claro: #f3f9f7;
  --branco: #ffffff;
  --texto: #12211f;
  --texto-suave: #4f6763;
  --borda: #d6e7e1;
  --borda-forte: #a9c9bf;
  --ambar: #9a5c0c;
  --ambar-fraco: #fbf0dd;
  --sucesso: #16704b;
  --sucesso-fraco: #dff2e8;

  --raio-p: 10px;
  --raio: 14px;
  --raio-g: 24px;
  --sombra: 0 1px 2px rgba(9, 37, 35, 0.05), 0 4px 16px rgba(9, 37, 35, 0.06);
  --sombra-media: 0 2px 4px rgba(9, 37, 35, 0.06), 0 10px 28px rgba(9, 37, 35, 0.1);
  --sombra-alta: 0 12px 40px rgba(9, 37, 35, 0.2);
  --largura-app: 32rem;
  --largura-lateral: 16rem;
  --fonte: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fonte-titulo: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --fonte-numero: "Manrope", "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  font-size: 17px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-weight: 400;
  line-height: 1.55;
  color: var(--texto);
  background: var(--menta-claro);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--fonte-titulo);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--teal);
}

h1 { font-size: 1.8rem; font-weight: 800; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1.08rem; font-weight: 700; }

p { margin: 0 0 0.8rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--teal-medio);
  font-weight: 700;
  text-underline-offset: 3px;
}

img { max-width: 100%; }

svg { flex: none; }

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===== Marca ===== */

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.05em;
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.marca span {
  font-weight: 500;
  opacity: 0.85;
}

.escudo {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  margin-right: 0.35em;
  color: var(--coral);
}

/* ===== Estrutura das telas internas ===== */

.app {
  max-width: var(--largura-app);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--menta-claro);
  padding-bottom: 7.5rem;
  position: relative;
}

.topo {
  position: relative;
  overflow: hidden;
  background: var(--teal);
  color: var(--branco);
  padding: 1.1rem 1.35rem 3.4rem;
  border-radius: 0 0 var(--raio-g) var(--raio-g);
}

/* O escudo grande e apagado no fundo do cabecalho, so decoracao. */
.topo-desenho {
  position: absolute;
  right: -2.5rem;
  top: -1rem;
  width: 12rem;
  height: 12rem;
  color: var(--branco);
  opacity: 0.06;
  pointer-events: none;
}

.topo h1 {
  position: relative;
  color: var(--branco);
  font-size: 1.85rem;
}

.topo-linha {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.topo .marca {
  font-size: 1.15rem;
  color: var(--branco);
}

.topo-usuario {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.avatar {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--coral);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1rem;
  flex: none;
}

.topo-descricao {
  position: relative;
  margin: 0.35rem 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
}

.botao-sair {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  color: var(--branco);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.5rem 0.95rem;
  min-height: 2.4rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.botao-sair svg { width: 1.05rem; height: 1.05rem; }
.botao-sair:hover { background: rgba(255, 255, 255, 0.22); }

.selo-demo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  position: relative;
  background: rgba(251, 240, 221, 0.14);
  color: #f7ddb0;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}

.selo-demo i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #f5b54a;
}

.conteudo {
  position: relative;
  margin-top: -2rem;
  padding: 0 1rem;
  display: grid;
  gap: 1rem;
}

.conteudo > * {
  min-width: 0;
  animation: surgir 0.45s var(--curva) both;
}

.conteudo > *:nth-child(2) { animation-delay: 0.05s; }
.conteudo > *:nth-child(3) { animation-delay: 0.1s; }
.conteudo > *:nth-child(4) { animation-delay: 0.15s; }
.conteudo > *:nth-child(n+5) { animation-delay: 0.2s; }

@keyframes surgir {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.titulo-secao {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.6rem 0.25rem -0.2rem;
}

.titulo-secao h2 { font-size: 1.1rem; white-space: nowrap; }

.titulo-secao span {
  font-size: 0.9rem;
  color: var(--texto-suave);
}

/* ===== Cartoes ===== */

.cartao {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  padding: 1.25rem;
  box-shadow: var(--sombra);
}

.cartao-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.cartao-cabecalho p {
  margin: 0.2rem 0 0;
  color: var(--texto-suave);
  font-size: 0.95rem;
}

.icone-tile {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--raio);
  background: var(--menta);
  color: var(--teal);
  flex: none;
}

.icone-tile svg { width: 1.45rem; height: 1.45rem; }
.icone-tile.coral { background: var(--coral-fraco); color: var(--coral-escuro); }

/* ===== Botoes ===== */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 3.4rem;
  padding: 0.7rem 1.2rem;
  font-family: inherit;
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--branco);
  background: var(--teal);
  border: 2px solid var(--teal);
  border-radius: var(--raio);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.botao svg { width: 1.3rem; height: 1.3rem; }

.botao:hover { background: var(--teal-medio); border-color: var(--teal-medio); box-shadow: var(--sombra-media); }
.botao:active { transform: scale(0.985); }
.botao[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.botao-secundario {
  background: var(--branco);
  color: var(--teal);
  border-color: var(--borda-forte);
}

.botao-secundario:hover { background: var(--menta); border-color: var(--teal-claro); box-shadow: none; }

.botao-coral {
  background: var(--coral);
  border-color: var(--coral);
}

.botao-coral:hover { background: var(--coral-escuro); border-color: var(--coral-escuro); }

.botao-perigo {
  background: var(--branco);
  color: var(--coral-escuro);
  border-color: #f0b7ab;
}

.botao-perigo:hover { background: var(--coral-fraco); border-color: var(--coral); box-shadow: none; }

.botao-pequeno {
  width: auto;
  min-height: 2.6rem;
  padding: 0.4rem 1rem;
  font-size: 0.95rem;
  border-radius: 999px;
}

.botao-pequeno svg { width: 1.1rem; height: 1.1rem; }

.botao-texto {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 0;
  padding: 0.45rem 0.6rem;
  min-height: 2.5rem;
  border-radius: var(--raio-p);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--texto-suave);
  cursor: pointer;
}

.botao-texto svg { width: 1.1rem; height: 1.1rem; }
.botao-texto:hover { background: var(--menta); color: var(--teal); }
.botao-texto.perigo:hover { background: var(--coral-fraco); color: var(--coral-escuro); }

.linha-botoes {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 1fr 1fr;
}

.linha-botoes .botao {
  width: 100%;
  font-size: 1rem;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}

/* ===== Formularios ===== */

.campo {
  display: block;
  margin-bottom: 1.05rem;
}

.campo:last-child { margin-bottom: 0; }

.campo > span {
  display: block;
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 0.4rem;
}

.campo .dica {
  display: block;
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--texto-suave);
  margin-top: 0.35rem;
  margin-bottom: 0;
}

input, select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1.06rem;
  color: var(--texto);
  background: var(--branco);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  padding: 0.75rem 0.95rem;
  min-height: 3.3rem;
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5c57' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.1rem;
  cursor: pointer;
}

textarea {
  min-height: 6rem;
  resize: vertical;
  line-height: 1.5;
}

input:hover, select:hover, textarea:hover { border-color: var(--borda-forte); }

input:focus, select:focus, textarea:focus {
  border-color: var(--teal-claro);
  outline: none;
  box-shadow: 0 0 0 4px rgba(53, 129, 122, 0.18);
}

input::placeholder, textarea::placeholder { color: #8aa39e; }

/* Datas, horarios e numeros usam a Manrope: algarismos mais limpos e de largura igual,
   entao "08/10/2026" e "08:00" ficam alinhados e faceis de ler. */
input[type="date"], input[type="time"], input[type="number"] {
  font-family: var(--fonte-numero);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--teal);
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  padding: 0.2rem;
  border-radius: 6px;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background-color: var(--menta);
}

.grade-dupla {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
}

.grade-dupla { margin-bottom: 1.05rem; }
.grade-dupla > * { min-width: 0; }
.grade-dupla .campo { margin-bottom: 0; }
.item .grade-dupla { margin-bottom: 0; }

/* ===== Etiquetas e avisos ===== */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--menta);
  color: var(--teal);
  white-space: nowrap;
}

.etiqueta::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
}

.etiqueta-grave { background: var(--coral-fraco); color: var(--coral-escuro); }
.etiqueta-moderada { background: var(--ambar-fraco); color: var(--ambar); }
.etiqueta-leve { background: var(--menta); color: var(--teal-medio); }
.etiqueta-sucesso { background: var(--sucesso-fraco); color: var(--sucesso); }

.aviso {
  border-radius: var(--raio);
  padding: 0.85rem 1rem;
  font-size: 0.97rem;
  border: 1px solid transparent;
  margin: 0;
}

.aviso-erro { background: var(--coral-fraco); border-color: #f3b8ac; color: #8d2b1a; }
.aviso-sucesso { background: var(--sucesso-fraco); border-color: #a8d8c2; color: var(--sucesso); }
.aviso-neutro { background: var(--menta); border-color: var(--borda); color: var(--teal); }

.oculto { display: none !important; }

.vazio {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 1.8rem 1.2rem;
  color: var(--texto-suave);
}

.vazio::before {
  content: "";
  width: 3.2rem;
  height: 3.2rem;
  margin-bottom: 0.8rem;
  border-radius: 50%;
  background: var(--menta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335817a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5.5c0 4.2-2.9 7.9-7 9-4.1-1.1-7-4.8-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center / 1.5rem no-repeat;
}

.vazio strong {
  display: block;
  font-family: var(--fonte-titulo);
  color: var(--teal);
  font-size: 1.08rem;
  margin-bottom: 0.3rem;
}

/* ===== Carregando ===== */

.carregando {
  display: grid;
  gap: 0.7rem;
}

.esqueleto {
  height: 1rem;
  border-radius: 8px;
  background: var(--menta);
  animation: pulsar 1.2s ease-in-out infinite alternate;
}

.esqueleto.alto { height: 3.5rem; }

@keyframes pulsar {
  from { opacity: 1; }
  to { opacity: 0.45; }
}

/* ===== Navegacao ===== */

.navegacao {
  position: fixed;
  bottom: calc(0.75rem + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 1.5rem);
  max-width: calc(var(--largura-app) - 1.5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.25rem;
  padding: 0.4rem;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 22px;
  box-shadow: var(--sombra-alta);
  z-index: 20;
}

.navegacao-marca { display: none; }

.navegacao a {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  padding: 0.5rem 0.2rem 0.45rem;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--texto-suave);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.navegacao a svg { width: 1.5rem; height: 1.5rem; }
.navegacao a:hover { color: var(--teal); background: var(--menta-claro); }

.navegacao a[aria-current="page"] {
  color: var(--branco);
  background: var(--teal);
}

/* Faixa antiga do modo demo, usada so quando a tela nao tem cabecalho. */
.aviso-demo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--ambar-fraco);
  color: var(--ambar);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.55rem 1.25rem;
}

.aviso-demo span {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--ambar);
  flex: none;
}

/* ===== Recado flutuante ===== */

.recado {
  position: fixed;
  left: 50%;
  bottom: 7rem;
  transform: translate(-50%, 1rem);
  width: min(26rem, calc(100% - 2.5rem));
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--teal-fundo);
  color: var(--branco);
  padding: 0.95rem 1.1rem;
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s var(--curva);
  z-index: 60;
}

.recado svg { width: 1.35rem; height: 1.35rem; color: #6fe0b0; }
.recado-erro svg { color: var(--branco); }

.recado.visivel {
  opacity: 1;
  transform: translate(-50%, 0);
}

.recado-erro { background: var(--coral-escuro); }

/* ===== Janelas ===== */

.sobreposicao {
  position: fixed;
  inset: 0;
  background: rgba(9, 37, 35, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
  padding: 0.75rem;
  animation: aparecer 0.2s ease both;
}

.sobreposicao[hidden] { display: none; }

.janela {
  background: var(--branco);
  width: 100%;
  max-width: var(--largura-app);
  border-radius: var(--raio-g);
  padding: 1.5rem 1.35rem 1.35rem;
  box-shadow: var(--sombra-alta);
  max-height: 90vh;
  overflow-y: auto;
  animation: subir 0.3s var(--curva) both;
}

.janela::before {
  content: "";
  display: block;
  width: 2.8rem;
  height: 0.3rem;
  border-radius: 999px;
  background: var(--borda);
  margin: -0.6rem auto 1.1rem;
}

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { transform: translateY(2rem); opacity: 0; } to { transform: none; opacity: 1; } }

/* ===== Alarme dos remedios ===== */
/* A janela que abre na hora da dose, por cima de qualquer tela (lembretes.js).
   Fica no centro, acima de tudo e com letra maior, porque e a unica janela que aparece sem a pessoa pedir.
   O sino balanca enquanto o alarme toca. Quem pediu menos movimento no celular ve o sino parado. */

.sobreposicao.alarme {
  align-items: center;
  z-index: 80;
  background: rgba(9, 37, 35, 0.78);
}

.alarme-janela {
  text-align: center;
  border-top: 6px solid var(--coral);
  padding: 1.8rem 1.4rem 1.4rem;
}

.alarme-janela::before { display: none; }

.alarme-icone {
  display: inline-grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--coral-fraco);
  color: var(--coral-escuro);
  margin-bottom: 0.9rem;
  animation: balancar 1.2s ease-in-out infinite;
}

.alarme-icone svg { width: 2.3rem; height: 2.3rem; }

@keyframes balancar {
  0%, 100% { transform: rotate(0); }
  12% { transform: rotate(-14deg); }
  24% { transform: rotate(12deg); }
  36% { transform: rotate(-8deg); }
  48% { transform: rotate(4deg); }
  60% { transform: rotate(0); }
}

.alarme-janela .alarme-rotulo {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--coral-escuro);
}

.alarme-janela .alarme-nome {
  margin: 0.25rem 0 0.4rem;
  font-size: 2rem;
  overflow-wrap: anywhere;
}

.alarme-janela .alarme-detalhe {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  color: var(--texto);
}

.alarme-janela .alarme-fila {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--texto-suave);
}

.alarme-botoes {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.2rem;
}

.alarme-tomei {
  min-height: 4rem;
  font-size: 1.2rem;
}

/* ===== Cartoes do alarme e dos avisos do cuidador ===== */
/* O cartao do alarme (tela de doses, lembretes.js) e o dos avisos de dose perdida (tela do cuidador,
   avisosCuidador.js) usam o mesmo desenho. Verde de calma quando esta tudo ligado.
   Coral quando falta a pessoa fazer alguma coisa. */

.cartao-alarme {
  display: grid;
  gap: 0.9rem;
}

.alarme-cabecalho {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.cartao-alarme h2 { margin: 0 0 0.25rem; font-size: 1.15rem; }

.cartao-alarme .alarme-situacao {
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.97rem;
}

.cartao-alarme[data-estado="desligado"],
.cartao-alarme[data-estado="bloqueado"],
.cartao-alarme[data-estado="atrasa"] {
  border-color: #f3c3b9;
  background: var(--coral-fraco);
}

.cartao-alarme[data-estado="desligado"] .alarme-situacao,
.cartao-alarme[data-estado="bloqueado"] .alarme-situacao,
.cartao-alarme[data-estado="atrasa"] .alarme-situacao { color: #7a2d1c; }

.alarme-proximo {
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-radius: var(--raio);
  background: var(--menta);
  color: var(--teal);
  font-weight: 700;
}

.alarme-acoes {
  display: grid;
  gap: 0.6rem;
}

.alarme-proximo-alerta {
  background: var(--coral-fraco);
  color: var(--coral-escuro);
}

.janela h2 { margin-bottom: 0.35rem; font-size: 1.4rem; }

.janela > p {
  color: var(--texto-suave);
  font-size: 0.97rem;
  margin-bottom: 1.2rem;
}

.lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.pular {
  position: absolute;
  left: -9999px;
  background: var(--coral);
  color: var(--branco);
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--raio) 0;
  z-index: 100;
}

.pular:focus { left: 0; top: 0; }

/* ===== Acessibilidade: tamanho da letra e contraste reforcado ===== */

/* Um botao pequeno e redondo no canto. As opcoes so aparecem quando a pessoa toca nele. */
.acessibilidade {
  display: flex;
  justify-content: flex-end;
}

.acessibilidade-caixa {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 999px;
  box-shadow: var(--sombra);
}

.acessibilidade-opcoes {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.acessibilidade-botao {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  font-family: var(--fonte-titulo);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  color: var(--teal);
  background: var(--menta);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s var(--curva), color 0.15s var(--curva);
}

.acessibilidade-botao small { font-size: 0.8em; margin-left: 0.05em; }
.acessibilidade-botao { grid-auto-flow: column; }
.acessibilidade-maior { font-size: 1.2rem; }

.acessibilidade-botao svg {
  width: 1.35rem;
  height: 1.35rem;
}

.acessibilidade-botao:hover { background: var(--borda); }

.acessibilidade-botao:disabled {
  opacity: 0.4;
  cursor: default;
}

.acessibilidade-abrir,
.acessibilidade-botao[aria-pressed="true"] {
  color: var(--branco);
  background: var(--teal);
}

.acessibilidade-abrir:hover,
.acessibilidade-botao[aria-pressed="true"]:hover { background: var(--teal-medio); }

/* No cadastro o botao entra direto na grade de duas colunas, entao ocupa a linha inteira. */
.entrada > .acessibilidade { grid-column: 1 / -1; }

/* Letra grande: com a letra aumentada nao cabe texto e selo lado a lado em tela de celular.
   Aqui cada bloco que era uma linha vira uma coluna, pra nenhuma palavra quebrar no meio nem sair do cartao.
   Ligado pelo acessibilidade.js. Fica tudo junto neste arquivo, mesmo o que e de uma tela so, pra ser facil de achar. */

/* Cabecalho das telas internas: o botao Sair desce para a linha de baixo quando nao cabe */
.letra-grande .topo-linha { flex-wrap: wrap; }

/* Ficha de emergencia: a marca desce para baixo do titulo da faixa; nome em cima, tipo sanguineo embaixo;
   alergia em cima, gravidade embaixo */
.letra-grande .faixa { flex-wrap: wrap; gap: 0.2rem 1rem; }
.letra-grande .identidade { flex-direction: column; }
.letra-grande .sangue { grid-auto-flow: column; gap: 0.6rem; align-items: baseline; }
.letra-grande .alergias li { grid-template-columns: 1fr; }
.letra-grande .alergias .grau { justify-self: start; }

/* Remedios: icone e selo na primeira linha, nome do remedio embaixo ocupando a largura toda */
.letra-grande .remedio-topo { flex-wrap: wrap; justify-content: space-between; }
.letra-grande .remedio-nome { order: 3; flex: 1 1 100%; }
.letra-grande .remedio-rodape { flex-direction: column; align-items: flex-start; }

/* Doses: o anel de adesao em cima e o texto embaixo */
.letra-grande .adesao-principal { flex-direction: column; text-align: center; }
.letra-grande .adesao-semana { grid-template-columns: 1fr; }

/* Cuidador: nome do paciente em linha propria e os dois quadros um embaixo do outro */
.letra-grande .paciente-topo { flex-wrap: wrap; }
.letra-grande .paciente-topo h2 { flex: 1 1 60%; }
.letra-grande .paciente-medidor .rotulo { flex-wrap: wrap; gap: 0 0.6rem; }
.letra-grande .paciente-linhas { grid-template-columns: 1fr; }
.letra-grande .paciente-acoes { justify-content: flex-start; }

/* Ficha: as tres abas viram uma lista e o selo do QR desce para baixo do titulo */
.letra-grande .abas { grid-template-columns: 1fr; }
.letra-grande .qr-cabecalho { flex-direction: column; }

/* Janelas (novo remedio, cancelar QR): menos margem dos lados, pra sobrar largura para o conteudo.
   Sem isso a data aparecia sem o ultimo numero do ano e os cartoes de periodo passavam da borda do quadro. */
.letra-grande .janela { padding-left: 1rem; padding-right: 1rem; }
.letra-grande .periodo { padding-left: 0.55rem; padding-right: 0.55rem; }
.letra-grande .periodo legend { padding: 0 0.3rem; margin-left: 0; }
.letra-grande .janela input[type="date"],
.letra-grande .janela input[type="time"] { padding-left: 0.5rem; padding-right: 0.4rem; letter-spacing: 0; }
/* Em celular bem estreito (320 px) o texto do cartao de periodo desce para baixo do icone quando nao cabe ao lado */
.letra-grande .opcao-periodo { flex-wrap: wrap; gap: 0.55rem; padding-left: 0.6rem; padding-right: 0.6rem; }
.letra-grande .opcao-texto { flex: 1 1 4.6rem; }
.letra-grande .periodo-resumo { padding-left: 0.6rem; padding-right: 0.6rem; }

@media (max-width: 21rem) {
  .letra-grande .periodo-resumo::before { display: none; }
}

/* Contraste reforcado: texto preto, bordas mais escuras e um coral mais fechado,
   para o texto branco em cima dele ficar mais facil de ler. Ligado pelo acessibilidade.js. */
.alto-contraste {
  --teal: #06201e;
  --teal-medio: #0e3c39;
  --teal-claro: #1b5c57;
  --coral: #b8321f;
  --coral-escuro: #8f2414;
  --menta-claro: #ffffff;
  --texto: #000000;
  --texto-suave: #1f2d2b;
  --borda: #4a6660;
  --borda-forte: #0e3c39;
  --ambar: #6e3f04;
  --sucesso: #0d5236;
}

@media print {
  .acessibilidade { display: none; }
}

@media (max-width: 24rem) {
  html { font-size: 16px; }
  .linha-botoes, .grade-dupla { grid-template-columns: 1fr; }
  .navegacao a { font-size: 0.74rem; }
}

@media (min-width: 40rem) {
  .sobreposicao { align-items: center; }
  .janela::before { display: none; }
  .janela { padding-top: 1.6rem; }
}

/* No computador (por exemplo na apresentacao em telao) a navegacao vira uma barra lateral
   e o conteudo ganha mais espaco, sem esticar demais as linhas de texto. */
@media (min-width: 64rem) {
  body { background: var(--menta); }

  .app {
    --largura-app: 44rem;
    margin-left: calc(var(--largura-lateral) + max(2rem, (100vw - var(--largura-lateral) - 44rem) / 2));
    margin-right: auto;
    padding: 1.5rem 0 3rem;
    background: transparent;
  }

  .topo {
    border-radius: var(--raio-g);
    padding: 1.6rem 2rem 3.6rem;
  }

  .topo .topo-linha .marca { visibility: hidden; }
  .topo h1 { font-size: 2.1rem; }
  .conteudo { padding: 0 1.5rem; }

  .navegacao {
    top: 0;
    bottom: 0;
    left: 0;
    transform: none;
    width: var(--largura-lateral);
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.6rem 1rem;
    background: var(--teal);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .navegacao-marca {
    display: flex;
    color: var(--branco);
    font-size: 1.3rem;
    padding: 0.2rem 0.75rem 1.6rem;
  }

  .navegacao a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 0.9rem;
    border-radius: var(--raio);
    font-size: 1.02rem;
    color: rgba(255, 255, 255, 0.72);
  }

  .navegacao a:hover { background: rgba(255, 255, 255, 0.08); color: var(--branco); }

  .navegacao a[aria-current="page"] {
    background: var(--branco);
    color: var(--teal);
  }

  .recado { bottom: 2rem; left: calc(50% + var(--largura-lateral) / 2); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}