/* ============ Lola — tema ============ */
:root {
  --fundo: #0a0a0b;
  --cartao: #1a191c;
  --cartao2: #252328;
  --linha: rgba(255, 255, 255, .07);
  --texto: #f6f3f7;
  --mudo: #a39ea9;
  --fraco: #6f6a75;
  --acento: #c13ef0;
  --acento2: #df82ff;
  --rosa: #ff8fcf;
  --verde: #5ed6a5;
  --perigo: #ff6363;
  --aviso: #ffb547;
  --raio: 30px;
  --display: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --corpo: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; background: var(--fundo); }
body {
  margin: 0; min-height: 100vh; position: relative; overflow-x: hidden;
  background: var(--fundo); color: var(--texto);
  font: 400 17px/1.45 var(--corpo);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(130px + env(safe-area-inset-bottom));
}
button { font-family: inherit; }
h1 { font: 800 2.3rem/1.06 var(--display); letter-spacing: -.035em; margin: 0; }
h2 { font: 600 1.3rem/1.2 var(--display); letter-spacing: -.025em; margin: 0; }
p { margin: 0; }
.mudo { color: var(--mudo); }
.verde { color: var(--verde); }
.vermelho { color: var(--perigo); }

/* ============ Aurora ============ */
/* O fundo fica parado: não rola com a página e não se mexe. Só os cartões se movem. */
.aurora {
  position: fixed; inset: 0 0 auto 0; height: 600px; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 40%, transparent 92%);
          mask-image: linear-gradient(#000 40%, transparent 92%);
}
.aurora i { position: absolute; border-radius: 50%; filter: blur(48px); opacity: .9; }
.aurora i:nth-child(1) { background: #ff4fa8; width: 230px; height: 420px; left: -70px; top: -120px; }
.aurora i:nth-child(2) { background: #9a44ff; width: 210px; height: 460px; left: 26%; top: -170px; animation-delay: -4s; }
.aurora i:nth-child(3) { background: #4c5cff; width: 170px; height: 360px; left: 52%; top: -150px; animation-delay: -8s; }
.aurora i:nth-child(4) { background: #ff7e8e; width: 220px; height: 380px; right: -80px; top: -110px; animation-delay: -2s; }
.aurora i:nth-child(5) { background: #b83ef0; width: 380px; height: 200px; left: 8%; top: 230px; opacity: .65; animation-delay: -6s; }
@keyframes deriva {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(24px, 18px) scale(1.12); }
  100% { transform: translate(-18px, 30px) scale(.95); }
}

main { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: calc(14px + env(safe-area-inset-top)) 16px 0; }
.tela { animation: entra .35s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============ Cabeçalhos ============ */
.cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 20px; }
.cabeca-acoes { display: flex; gap: 10px; }
.topo-hoje { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.redondo, .avatar {
  width: 52px; height: 52px; flex: none; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, .13);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  transition: transform .15s, background .2s;
}
.redondo.peq { width: 46px; height: 46px; background: var(--cartao2); }
.redondo.verde-bg { background: rgba(94, 214, 165, .16); color: var(--verde); }
.avatar { font: 600 1.2rem var(--display); }
.redondo:active, .avatar:active, .btn:active, .pilula:active, .linha-btn:active { transform: scale(.95); }

.ola { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; margin-top: 16px; }
.ola .data { color: rgba(255, 255, 255, .78); font-weight: 500; margin-bottom: 6px; }
.lola-grande { flex: none; cursor: pointer; margin: -10px -8px 0 0; touch-action: manipulation; }

.balao {
  display: block; width: fit-content; max-width: 82%; margin: 2px 0 18px auto;
  background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  padding: 12px 16px; border-radius: 22px 6px 22px 22px; font-size: .98rem; line-height: 1.35;
  transform-origin: top right;
}
.balao.pop { animation: pop .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============ Segmentos ============ */
.segmento {
  display: inline-flex; gap: 2px; padding: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .11); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.segmento button, .segmento label span {
  display: block; border: 0; background: none; cursor: pointer; color: rgba(255, 255, 255, .62);
  font: 500 1rem var(--corpo); padding: 11px 20px; border-radius: 999px; transition: background .2s, color .2s;
}
.segmento label { margin: 0; }
.segmento input { position: absolute; opacity: 0; pointer-events: none; }
.segmento button[aria-pressed="true"], .segmento input:checked + span { background: #f4f1f5; color: #141215; font-weight: 600; }
.segmento input:focus-visible + span { outline: 2px solid var(--acento2); }
.segmento.cheio { display: flex; }
.segmento.cheio > * { flex: 1; text-align: center; }

/* ============ Cartões ============ */
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px; margin: 14px 0; }
.vidro {
  background: rgba(44, 36, 50, .5); border-color: rgba(255, 255, 255, .09);
  -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
}
.heroi-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rotulo { color: var(--mudo); font-size: .97rem; }
.numero { font: 800 3.3rem/1 var(--display); letter-spacing: -.04em; margin: 16px 0 20px; }
.numero span { margin-left: 4px; font-size: 1.45rem; letter-spacing: -.02em; color: var(--mudo); font-weight: 600; }
.numero.medio { font-size: 2.3rem; }
.progresso { display: flex; gap: 6px; }
.progresso i { flex: 1; height: 8px; border-radius: 9px; background: rgba(255, 255, 255, .12); transition: background .3s; }
.progresso i.tomada { background: var(--acento); box-shadow: 0 0 14px rgba(193, 62, 240, .75); }
.progresso i.atrasada { background: var(--perigo); }
.progresso i.agora { background: var(--aviso); }
.heroi-rodape { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; color: var(--mudo); }
.heroi-rodape b { font-weight: 600; }
.link-pill {
  border: 0; background: rgba(255, 255, 255, .1); color: var(--texto); border-radius: 999px;
  padding: 8px 12px 8px 16px; font: 500 .92rem var(--corpo); display: inline-flex; align-items: center; gap: 2px; cursor: pointer;
}
.secao { color: var(--mudo); font-weight: 600; font-size: 1rem; margin: 30px 8px 10px; }

/* Lista de linhas (estilo "perfil") */
.lista { padding: 6px 22px; }
.lista > * + * { border-top: 1px solid var(--linha); }
.linha { display: flex; align-items: center; gap: 14px; padding: 16px 0; }
.linha-btn {
  width: 100%; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
  font: inherit; transition: transform .15s;
}
.cartao.linha-btn { background: var(--cartao); display: flex; align-items: center; gap: 16px; padding: 20px 22px; }
.linha-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.linha-txt strong { font-weight: 500; font-size: 1.1rem; }
.linha-txt small, .linha-txt span { color: var(--mudo); font-size: .95rem; }
.seta { color: var(--fraco); flex: none; display: grid; }
.icone-bola {
  width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); color: var(--texto);
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { background: rgba(255, 255, 255, .08); border-radius: 999px; padding: 3px 10px; font-size: .85rem; color: var(--texto); }

/* Doses */
.doses { list-style: none; margin: 0; padding: 0; }
.dose { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--linha); }
.dose:first-child { border-top: 0; }
.dose-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dose-info strong { font-weight: 500; font-size: 1.1rem; }
.dose-info > span:last-child { color: var(--mudo); font-size: .93rem; }
.dose-info .dose-quando { font-size: .86rem; font-weight: 600; color: var(--fraco); margin-bottom: 2px; }
.dose-quando b { font: 700 1.05rem var(--display); letter-spacing: -.02em; color: var(--texto); }
.dose.tomada .dose-quando { color: var(--verde); }
.dose.tomada strong { color: var(--mudo); }
.dose.atrasada .dose-quando { color: var(--perigo); }
.dose.agora .dose-quando { color: var(--aviso); }
.dose.agora { background: rgba(255, 181, 71, .07); border-radius: 20px; margin: 0 -12px; padding: 16px 12px; border-top-color: transparent; }
.pilula {
  flex: none; border: 0; border-radius: 999px; padding: 11px 16px; min-height: 46px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; font: 600 .98rem var(--corpo);
  background: var(--acento); color: #fff; box-shadow: 0 8px 22px -8px rgba(193, 62, 240, .8);
  transition: transform .15s, background .2s;
}
.pilula.feito { background: rgba(94, 214, 165, .14); color: var(--verde); box-shadow: none; }

/* ============ Botões ============ */
.btn {
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 1.05rem var(--corpo); padding: 14px 22px; min-height: 54px;
  background: var(--cartao2); transition: transform .15s;
}
.btn.primario { background: var(--acento); box-shadow: 0 12px 32px -8px rgba(193, 62, 240, .7); }
.btn.perigo { background: var(--perigo); box-shadow: 0 12px 32px -8px rgba(255, 99, 99, .6); }
.btn.claro { background: #f4f1f5; color: #141215; }
.btn.grande { width: 100%; min-height: 62px; font-size: 1.12rem; margin-top: 14px; }
.btn-texto { border: 0; background: none; color: var(--perigo); font: 500 1rem var(--corpo); padding: 14px; width: 100%; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.acoes-linha { display: flex; gap: 10px; flex-wrap: wrap; }
.acoes-linha .btn { flex: 1; }

/* ============ Formulários ============ */
.campo { display: block; margin: 16px 0; }
.campo > span { display: block; color: var(--mudo); font-size: .93rem; margin: 0 0 8px 6px; }
input:not([type="range"]):not([type="radio"]), textarea, select {
  width: 100%; display: block; background: #0e0e0f; color: var(--texto);
  border: 1px solid var(--linha); border-radius: 20px; padding: 17px 20px;
  font: 400 1.08rem var(--corpo); outline: none; transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus { border-color: var(--acento); box-shadow: 0 0 0 4px rgba(193, 62, 240, .22); }
::placeholder { color: #5f5b64; }
textarea { resize: vertical; min-height: 70px; }
.linha-hora { display: flex; gap: 10px; margin-bottom: 10px; }
.linha-hora input { flex: 1; }
.nota { display: flex; gap: 10px; align-items: flex-start; color: var(--mudo); font-size: .95rem; margin: 18px 6px; }
.nota svg { flex: none; margin-top: 2px; }

/* Escalas 0–10 */
.faixa { margin: 6px 0 20px; }
.faixa-topo { display: flex; justify-content: space-between; align-items: baseline; }
.faixa-topo span { font-weight: 500; font-size: 1.08rem; }
.faixa-topo output { font: 700 1.6rem var(--display); letter-spacing: -.03em; color: var(--cor, var(--acento2)); }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 12px; margin: 12px 0 6px; border-radius: 99px; cursor: pointer;
  background: linear-gradient(90deg, var(--cor, var(--acento)) calc(var(--v, 0) * 10%), #2b292e calc(var(--v, 0) * 10%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .5), 0 0 0 7px rgba(255, 255, 255, .08);
}
input[type="range"]::-moz-range-thumb { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 0; }
.faixa-legenda { display: flex; justify-content: space-between; font-size: .82rem; color: var(--fraco); }

.humor { display: flex; justify-content: space-between; gap: 6px; margin-top: 10px; }
.humor label { flex: 1; display: grid; place-items: center; cursor: pointer; }
.humor input { position: absolute; opacity: 0; pointer-events: none; }
.humor span { display: grid; place-items: center; width: 100%; padding: 10px 0; border-radius: 20px; background: #121113; border: 2px solid transparent; transition: transform .2s, border-color .2s, background .2s; }
.humor svg { width: 42px; height: 42px; opacity: .55; transition: opacity .2s; }
.humor input:checked + span { border-color: var(--acento); background: rgba(193, 62, 240, .12); transform: scale(1.06); }
.humor input:checked + span svg { opacity: 1; }
.humor input:focus-visible + span { outline: 2px solid var(--acento2); }
.rotulo-campo { display: block; font-weight: 500; font-size: 1.08rem; }

/* Histórico */
.dia-titulo { color: var(--mudo); font-weight: 600; font-size: .95rem; margin-bottom: 4px; }
.registro { padding: 14px 0; }
.registro + .registro { border-top: 1px solid var(--linha); }
.registro-topo { display: flex; justify-content: space-between; align-items: center; color: var(--mudo); font-size: .93rem; }
.registro-topo svg { width: 32px; height: 32px; }
.barras { margin: 10px 0 4px; }
.barra { display: grid; grid-template-columns: 70px 1fr 22px; align-items: center; gap: 10px; font-size: .9rem; margin: 6px 0; color: var(--mudo); }
.barra b { text-align: right; color: var(--texto); font-weight: 600; }
.trilho { height: 8px; background: rgba(255, 255, 255, .08); border-radius: 99px; overflow: hidden; }
.nivel { height: 100%; border-radius: 99px; background: var(--acento); }
.nivel.medio { background: var(--aviso); }
.nivel.alto { background: var(--perigo); }
.febre { color: var(--perigo); font-weight: 600; display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.registro .obs { color: var(--mudo); font-size: .95rem; margin-top: 6px; }
.registro-rodape { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: .84rem; color: var(--fraco); }
.link { border: 0; background: none; color: var(--fraco); font: 500 .86rem var(--corpo); cursor: pointer; padding: 6px; }

/* Alertas / emergência */
.alerta { background: linear-gradient(160deg, rgba(255, 99, 99, .2), rgba(255, 99, 99, .06)); border-color: rgba(255, 99, 99, .28); }
.alerta h2 { color: #ffb4b4; }
.alerta-topo { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.sinais { list-style: none; padding: 0; margin: 14px 0 0; }
.sinais li { display: flex; gap: 12px; padding: 9px 0; }
.sinais li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--perigo); flex: none; margin-top: 9px; box-shadow: 0 0 10px var(--perigo); }
.samu .numero { color: #fff; }
.contato-acoes { display: flex; gap: 8px; flex: none; }
.contato-info { flex: 1; min-width: 0; display: flex; }
.contato-info .linha-txt > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Vazio */
.vazio { text-align: center; padding: 30px 24px; }
.vazio .lola { margin: 0 auto 6px; width: fit-content; }
.vazio h2 { font-size: 1.6rem; letter-spacing: -.035em; margin-bottom: 8px; }
.vazio p { color: var(--mudo); max-width: 320px; margin: 0 auto 6px; }

/* Ações rápidas */
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 8px; }
.cartao-acao {
  border: 0; text-align: left; cursor: pointer; color: var(--texto); font: inherit;
  background: var(--cartao2); border-radius: 26px; padding: 18px; display: flex; flex-direction: column; gap: 4px;
  transition: transform .15s;
}
.cartao-acao:active { transform: scale(.96); }
.cartao-acao .icone-bola { width: 48px; height: 48px; margin-bottom: 14px; background: rgba(255, 255, 255, .08); }
.cartao-acao strong { font: 600 1.25rem var(--display); letter-spacing: -.025em; }
.cartao-acao small { color: var(--mudo); font-size: .92rem; line-height: 1.3; }

/* ============ Barra inferior ============ */
.barra {
  position: fixed; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 10;
  display: flex; justify-content: center; gap: 10px; padding: 0 16px; pointer-events: none;
}
.abas {
  pointer-events: auto; flex: 1; max-width: 452px; display: flex; gap: 2px; padding: 7px;
  background: rgba(30, 29, 32, .82); border: 1px solid var(--linha); border-radius: 999px;
  -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
.abas button {
  flex: 1; border: 0; background: none; color: var(--mudo); cursor: pointer; border-radius: 999px;
  padding: 9px 2px 7px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font: 500 .74rem var(--corpo); transition: background .25s, color .25s;
}
.abas button[aria-current="page"] { background: #2f2d33; color: var(--acento2); }
.abas button.sos[aria-current="page"] { color: var(--perigo); }
.lola-botao {
  pointer-events: auto; flex: none; width: 74px; height: 74px; border-radius: 50%; padding: 0; cursor: pointer;
  background: rgba(30, 29, 32, .82); border: 1px solid var(--linha); display: grid; place-items: center;
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
.lola-botao .lola-svg { margin-top: 4px; }

/* ============ Folha (bottom sheet) ============ */
.folha {
  border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 560px; max-height: 92vh;
  background: #18171a; color: var(--texto); border-radius: 34px 34px 0 0; overflow-y: auto;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .6);
}
.folha[open] { animation: sobe .38s cubic-bezier(.2, .9, .25, 1); }
.folha.saindo { animation: desce .22s ease-in forwards; }
.folha::backdrop { background: rgba(5, 3, 8, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@keyframes sobe { from { transform: translateY(100%); } to { transform: none; } }
@keyframes desce { to { transform: translateY(100%); } }
#folha-form { position: relative; padding: 12px 22px calc(28px + env(safe-area-inset-bottom)); }
.folha-alca { width: 44px; height: 5px; border-radius: 9px; background: #3b393e; margin: 0 auto 20px; }
.folha .fechar { position: absolute; right: 18px; top: 30px; width: 46px; height: 46px; background: #2a282d; }
.folha-titulo { font: 800 1.75rem/1.15 var(--display); letter-spacing: -.03em; margin: 0 60px 6px 0; }
.folha-sub { color: var(--mudo); margin-bottom: 16px; }
.folha-centro { text-align: center; }
.folha-centro .lola { margin: 0 auto; width: fit-content; }
.resumo-txt { font: 400 .88rem/1.5 ui-monospace, Consolas, monospace; min-height: 280px; white-space: pre-wrap; }

/* ============ Toast e corações ============ */
#toast {
  position: fixed; left: 50%; bottom: calc(108px + env(safe-area-inset-bottom)); z-index: 30;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: .28s cubic-bezier(.3, 1.4, .5, 1);
  background: #f4f1f5; color: #141215; font-weight: 600; padding: 13px 20px; border-radius: 999px;
  max-width: calc(100vw - 32px); text-align: center; box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
#toast.visivel { opacity: 1; transform: translate(-50%, 0); }
.coracao { position: fixed; z-index: 40; width: 16px; height: 16px; pointer-events: none; color: var(--c); animation: voa .95s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes voa {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) rotate(var(--r)); opacity: 0; }
}

/* ============ Lola (mascote) ============ */
.lola { display: inline-block; line-height: 0; }
.lola-svg { overflow: visible; display: block; }
.lola [data-m] { display: none; }
.lola[data-humor="feliz"] [data-m~="feliz"],
.lola[data-humor="festa"] [data-m~="festa"],
.lola[data-humor="dormindo"] [data-m~="dormindo"],
.lola[data-humor="preocupada"] [data-m~="preocupada"] { display: inline; }

.l-flutua { transform-box: view-box; transform-origin: 80px 150px; animation: flutua 4s ease-in-out infinite; }
.l-corpo { transform-box: view-box; transform-origin: 80px 150px; animation: respira 3.2s ease-in-out infinite; }
.l-sombra { transform-box: view-box; transform-origin: 80px 160px; animation: sombra 4s ease-in-out infinite; }
.l-antena { transform-box: view-box; transform-origin: 80px 30px; animation: antena 2.8s ease-in-out infinite; }
.l-olho { transform-box: fill-box; transform-origin: center; animation: piscar 5s infinite; }
.l-olhos { transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.l-zz text { animation: zz 2.6s ease-in-out infinite; }
.l-zz text + text { animation-delay: -1.3s; }

.lola[data-humor="dormindo"] .l-flutua { animation: none; }
.lola[data-humor="dormindo"] .l-corpo { animation-duration: 5.5s; }
.lola[data-humor="dormindo"] .l-antena { animation-duration: 6s; }
.lola[data-humor="festa"] .l-corpo { animation: festa .7s ease-in-out infinite; }
.lola[data-humor="festa"] .l-antena { animation-duration: .7s; }
.lola[data-humor="preocupada"] .l-antena { animation: antena-murcha 3s ease-in-out infinite; }
.lola.pulo .l-flutua { animation: pulo .85s cubic-bezier(.3, .7, .4, 1); }
.lola.pulo .l-sombra { animation: sombra-pulo .85s cubic-bezier(.3, .7, .4, 1); }

@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sombra { 0%, 100% { transform: scale(1); opacity: .35; } 50% { transform: scale(.88); opacity: .25; } }
@keyframes respira { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, .97); } }
@keyframes antena { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(9deg); } }
@keyframes antena-murcha { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(-16deg); } }
@keyframes piscar { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes festa {
  0%, 100% { transform: rotate(-6deg) scale(1.02, .98); }
  50% { transform: rotate(6deg) translateY(-6px) scale(.98, 1.03); }
}
@keyframes pulo {
  0% { transform: none; }
  15% { transform: translateY(4px) scale(1.14, .84); }
  45% { transform: translateY(-34px) scale(.9, 1.12); }
  70% { transform: translateY(0) scale(1.1, .9); }
  85% { transform: scale(.97, 1.04); }
  100% { transform: none; }
}
@keyframes sombra-pulo { 0%, 100% { transform: scale(1); } 45% { transform: scale(.55); opacity: .15; } }
@keyframes zz { 0% { transform: translate(0, 6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(8px, -12px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .lola *, .aurora i, .tela, .folha[open], .balao.pop { animation: none !important; }
}

/* =====================================================================
   Plugin: abertura, entrada, modo de teste e página "baixe o app"
   ===================================================================== */
[hidden] { display: none !important; }
.abertura {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: var(--fundo); transition: opacity .35s ease, visibility .35s;
}
.abertura.sumindo { opacity: 0; visibility: hidden; }
.faixa-teste {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; text-align: center; pointer-events: none;
  font: 600 .72rem var(--corpo); letter-spacing: .02em; color: #141215; background: var(--aviso);
  padding: calc(2px + env(safe-area-inset-top)) 8px 2px;
}

/* Entrada (login, consentimento, primeiro cadastro) */
.entrada { min-height: calc(100vh - 40px); display: flex; flex-direction: column; justify-content: center; padding: 30px 4px 40px; }
body.sem-barra { padding-bottom: 24px; }
.entrada .lola { margin: 0 auto 4px; width: fit-content; }
.entrada h1 { text-align: center; margin: 10px 0 10px; font-size: 2.3rem; }
.entrada .sub-entrada { text-align: center; color: var(--mudo); margin: 0 auto 22px; max-width: 330px; }
.entrada .voltar { align-self: flex-start; margin-bottom: 8px; }
.campo-grande input { font: 600 1.35rem var(--display) !important; letter-spacing: .01em; text-align: center; }
.codigo-input input { font: 700 2rem var(--display) !important; letter-spacing: .5em; text-align: center; padding-left: 30px !important; }
.legal { color: var(--fraco); font-size: .84rem; text-align: center; margin-top: 18px; }
.legal a, .link-claro { color: var(--acento2); text-decoration: none; }
.link-claro { border: 0; background: none; font: 500 1rem var(--corpo); cursor: pointer; padding: 12px; display: block; margin: 6px auto 0; }
.reenviar { text-align: center; color: var(--mudo); font-size: .92rem; margin-top: 14px; }
.lista-termo { list-style: none; padding: 0; margin: 4px 0 16px; }
.lista-termo li { display: flex; gap: 12px; padding: 10px 0; color: var(--texto); }
.lista-termo li .icone-bola { width: 40px; height: 40px; }
.lista-termo li small { display: block; color: var(--mudo); font-size: .9rem; }
.aceite { display: flex; gap: 12px; align-items: flex-start; background: var(--cartao); border: 1px solid var(--linha); border-radius: 22px; padding: 16px; cursor: pointer; font-size: .95rem; }
.aceite input { width: 24px; height: 24px; accent-color: var(--acento); flex: none; margin: 1px 0 0; }

/* Pessoas no cuidado / convite */
.pessoa { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.pessoa + .pessoa { border-top: 1px solid var(--linha); }
.pessoa .icone-bola { font: 600 1.1rem var(--display); }
.codigo-convite {
  font: 700 2.6rem var(--display); letter-spacing: .18em; text-align: center; padding: 22px 10px; margin: 6px 0 10px;
  border-radius: 24px; background: rgba(193, 62, 240, .12); border: 1px dashed rgba(223, 130, 255, .5); color: #fff;
}
.carregando { opacity: .55; pointer-events: none; }

/* Página "baixe o app" (navegador) */
.pagina-baixar { padding-bottom: 40px; }
.baixar { text-align: center; padding-top: calc(48px + env(safe-area-inset-top)); max-width: 460px; }
.baixar .lola { width: fit-content; margin: 0 auto; cursor: pointer; }
.balao-centro { margin: 0 auto 22px; border-radius: 22px; }
.baixar h1 { font-size: 2.7rem; margin-bottom: 14px; }
.baixar-txt { color: rgba(255, 255, 255, .78); max-width: 360px; margin: 0 auto 26px; }
.selos { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.selo {
  display: inline-flex; align-items: center; gap: 12px; width: 240px; padding: 12px 20px; border-radius: 18px;
  background: #f4f1f5; color: #141215; text-decoration: none; text-align: left; position: relative;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6); transition: transform .15s;
}
.selo:active { transform: scale(.97); }
.selo svg { width: 30px; height: 30px; flex: none; }
.selo span { display: flex; flex-direction: column; line-height: 1.1; }
.selo small { font-size: .74rem; }
.selo b { font: 700 1.25rem var(--display); letter-spacing: -.02em; }
.selo.em-breve { opacity: .55; }
.selo em { position: absolute; right: 12px; top: -9px; font: 600 .7rem var(--corpo); font-style: normal; background: var(--acento); color: #fff; border-radius: 99px; padding: 3px 9px; }
.baixar-nota { color: var(--mudo); font-size: .92rem; margin: 18px auto 0; max-width: 320px; }
.baixar-lista { list-style: none; padding: 0; margin: 34px auto 0; text-align: left; max-width: 330px; }
.baixar-lista li { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linha); }
.baixar-lista li span { font-size: 1.3rem; width: 28px; text-align: center; }
.baixar-privado { color: var(--fraco); font-size: .85rem; margin-top: 26px; }

/* =====================================================================
   v0.4 — semana, anéis, exames, gráficos, agenda e linha do tempo
   ===================================================================== */
:root { --q: #c13ef0; --ex: #5ed6a5; --co: #ffb547; --ou: #7c8cff; }

/* Semana (faixa de dias) */
.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 4px 0 6px; }
.dia-chip {
  border: 1px solid transparent; background: rgba(255, 255, 255, .09); color: var(--texto); cursor: pointer;
  border-radius: 20px; padding: 8px 0 7px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: transform .15s, background .2s;
}
.dia-chip small { font: 500 .7rem var(--corpo); color: rgba(255, 255, 255, .6); }
.dia-chip b { font: 700 1.12rem var(--display); letter-spacing: -.02em; }
.dia-chip.hoje { border-color: rgba(223, 130, 255, .7); }
.dia-chip.sel { background: #f4f1f5; color: #141215; }
.dia-chip.sel small { color: #5d5862; }
.dia-chip:active { transform: scale(.94); }
.pontos { display: flex; gap: 3px; height: 6px; margin-top: 2px; }
.pontos i { width: 6px; height: 6px; border-radius: 50%; }
.p-quimio { background: var(--q); } .p-exame { background: var(--ex); } .p-consulta { background: var(--co); } .p-outro { background: var(--ou); }

/* Anel de progresso */
.anel { flex: none; position: relative; display: grid; place-items: center; }
.anel svg { display: block; transform: rotate(-90deg); }
.anel-centro { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1.05; }
.anel-centro b { font: 700 1.35rem var(--display); letter-spacing: -.03em; }
.anel-centro small { display: block; font-size: .7rem; color: var(--mudo); }
.anel circle { transition: stroke-dashoffset .6s cubic-bezier(.3, .8, .3, 1); }
.remedios-topo { display: flex; align-items: center; gap: 18px; }
.remedios-topo .linha-txt strong { font: 600 1.35rem var(--display); letter-spacing: -.03em; }

/* Cartões de exames (2 colunas) */
.grade-exames { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 14px; }
.tile {
  border: 1px solid var(--linha); background: var(--cartao); color: var(--texto); text-align: left; cursor: pointer;
  border-radius: 24px; padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 2px; font: inherit;
  transition: transform .15s;
}
.tile:active { transform: scale(.97); }
.tile-topo { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.tile-nome { color: var(--mudo); font-size: .85rem; }
.tile-ponto { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tile-valor { font: 700 1.55rem/1.1 var(--display); letter-spacing: -.035em; margin-top: 4px; white-space: nowrap; }
.tile-valor small { font: 500 .72rem var(--corpo); color: var(--mudo); letter-spacing: 0; margin-left: 3px; }
.tile .mini { width: 100%; height: 34px; margin-top: 4px; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: .78rem; font-weight: 600; color: var(--mudo); }
.estado { display: inline-block; font: 600 .74rem var(--corpo); padding: 3px 9px; border-radius: 99px; background: rgba(255, 255, 255, .08); color: var(--mudo); }
.estado.baixo { background: rgba(255, 99, 99, .16); color: #ff9c9c; }
.estado.alto { background: rgba(255, 181, 71, .16); color: var(--aviso); }
.estado.ok { background: rgba(94, 214, 165, .14); color: var(--verde); }

/* Seletor em pílulas que rola de lado */
.rolagem { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 16px 4px; margin: 0 -16px 6px; scroll-snap-type: x proximity; }
.rolagem::-webkit-scrollbar { display: none; }
.pilula-sel {
  flex: none; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .75);
  border-radius: 999px; padding: 10px 16px; font: 500 .95rem var(--corpo); cursor: pointer; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 7px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.pilula-sel[aria-pressed="true"] { background: #f4f1f5; color: #141215; font-weight: 600; border-color: transparent; }
.pilula-sel i { width: 8px; height: 8px; border-radius: 50%; }
.periodo { display: flex; gap: 6px; background: rgba(255, 255, 255, .06); border-radius: 999px; padding: 4px; margin-bottom: 12px; }
.periodo button { flex: 1; border: 0; background: none; color: var(--mudo); border-radius: 999px; padding: 8px 0; font: 500 .88rem var(--corpo); cursor: pointer; }
.periodo button[aria-pressed="true"] { background: var(--cartao2); color: var(--texto); font-weight: 600; }

/* Gráfico */
.grafico { width: 100%; height: auto; display: block; overflow: visible; }
.grafico text { font: 500 10px var(--corpo); fill: var(--fraco); }
.grafico .rot-q { font: 700 9px var(--corpo); fill: #fff; }
.grafico .rot-valor { font: 700 11px var(--display); fill: #fff; }
.legenda-graf { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: var(--mudo); margin-top: 10px; }
.legenda-graf span { display: inline-flex; align-items: center; gap: 6px; }
.leg-faixa { width: 14px; height: 10px; border-radius: 3px; background: rgba(94, 214, 165, .22); border: 1px dashed rgba(94, 214, 165, .6); }
.leg-q { width: 2px; height: 12px; background: repeating-linear-gradient(var(--q) 0 3px, transparent 3px 5px); }
.valor-grande { font: 800 2.9rem/1 var(--display); letter-spacing: -.04em; margin: 12px 0 8px; }
.valor-grande small { font-size: 1.05rem; color: var(--mudo); letter-spacing: 0; font-weight: 600; margin-left: 6px; }
.heroi-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Barras da semana (diário) */
.barras-semana { display: flex; gap: 8px; align-items: flex-end; height: 168px; margin-top: 12px; }
.coluna { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.coluna .valor { font: 600 .74rem var(--corpo); color: var(--mudo); min-height: 14px; }
.trilho-v {
  position: relative; flex: 1; width: 100%; max-width: 34px; border-radius: 12px; overflow: hidden;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 4px, transparent 4px 8px);
}
.enchimento { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 12px; background: var(--acento); transition: height .6s cubic-bezier(.3, .8, .3, 1); }
.enchimento.medio { background: var(--aviso); } .enchimento.alto { background: var(--perigo); }
.coluna.hoje .enchimento { box-shadow: 0 0 16px rgba(193, 62, 240, .7); }
.coluna small { font-size: .74rem; color: var(--fraco); }
.coluna.hoje small { color: var(--texto); font-weight: 600; }

/* Calendário */
.cal-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-topo h2 { font-size: 1.35rem; }
.cal-semana, .calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.cal-semana span { font-size: .75rem; color: var(--fraco); padding-bottom: 4px; }
.cal-dia {
  aspect-ratio: 1; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; position: relative;
  font: 600 .95rem var(--display); color: var(--texto); background: rgba(255, 255, 255, .05); transition: transform .15s;
}
.cal-dia:active { transform: scale(.9); }
.cal-dia.vazio { visibility: hidden; }
.cal-dia.passado { color: var(--fraco); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 3px, transparent 3px 6px); }
.cal-dia.t-quimio { background: var(--q); color: #fff; box-shadow: 0 0 14px rgba(193, 62, 240, .55); }
.cal-dia.t-exame { background: var(--ex); color: #0d241b; }
.cal-dia.t-consulta { background: var(--co); color: #2a1a00; }
.cal-dia.t-outro { background: var(--ou); color: #fff; }
.cal-dia.hoje { outline: 2px solid #f4f1f5; outline-offset: 2px; }
.cal-dia.sel { background: #f4f1f5 !important; color: #141215 !important; box-shadow: none; }
.cal-dia .mais { position: absolute; top: 1px; right: 1px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--cartao); }
.legenda-cal { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font-size: .8rem; color: var(--mudo); }
.legenda-cal span { display: inline-flex; align-items: center; gap: 6px; }
.legenda-cal i { width: 10px; height: 10px; border-radius: 50%; }

/* Compromissos */
.evento { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.lista > .evento + .evento { border-top: 1px solid var(--linha); }
.evento .icone-bola { width: 48px; height: 48px; }
.ev-quimio { color: var(--q); background: rgba(193, 62, 240, .16) !important; }
.ev-exame { color: var(--ex); background: rgba(94, 214, 165, .14) !important; }
.ev-consulta { color: var(--co); background: rgba(255, 181, 71, .14) !important; }
.ev-outro { color: var(--ou); background: rgba(124, 140, 255, .16) !important; }
.evento.feito .linha-txt strong { color: var(--mudo); text-decoration: line-through; }
.marca { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .2); background: none; color: transparent; display: grid; place-items: center; cursor: pointer; }
.marca.on { background: var(--verde); border-color: var(--verde); color: #0d241b; }
.badge { display: inline-block; font: 600 .72rem var(--corpo); padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, .1); color: var(--texto); margin-left: 6px; vertical-align: 2px; }
.falta { font: 700 1.05rem var(--display); letter-spacing: -.02em; text-align: right; flex: none; }
.falta small { display: block; font: 500 .72rem var(--corpo); color: var(--mudo); letter-spacing: 0; }

/* Escolha de tipo (chips grandes) */
.tipos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tipos label { margin: 0; }
.tipos input { position: absolute; opacity: 0; pointer-events: none; }
.tipos span { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 18px; background: #121113; border: 2px solid transparent; font-weight: 500; cursor: pointer; }
.tipos input:checked + span { border-color: var(--acento); background: rgba(193, 62, 240, .12); }
.tipos i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.campo-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campo-duplo .campo { margin: 8px 0; }
.caixa { background: #121113; border-radius: 22px; padding: 4px 16px 12px; margin: 14px 0; border: 1px solid var(--linha); }
.caixa > p { color: var(--mudo); font-size: .9rem; margin-top: 12px; }

/* Formulário do exame */
.campo-exame { background: #121113; border: 1px solid var(--linha); border-radius: 22px; padding: 14px 16px; margin: 10px 0; }
.campo-exame .ce-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.campo-exame .ce-nome { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.campo-exame .ce-nome i { width: 9px; height: 9px; border-radius: 50%; }
.campo-exame .ce-valor { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.campo-exame .ce-valor input { font: 600 1.25rem var(--display); }
.campo-exame .ce-u { color: var(--mudo); font-size: .9rem; flex: none; min-width: 46px; }
.campo-exame details { margin-top: 8px; }
.campo-exame summary { color: var(--acento2); font-size: .88rem; cursor: pointer; list-style: none; padding: 4px 0; }
.campo-exame summary::-webkit-details-marker { display: none; }
.campo-exame .ref { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.campo-exame .ref input { padding: 12px 14px; font-size: .98rem; }

/* Dicas */
.dica { background: linear-gradient(150deg, rgba(193, 62, 240, .2), rgba(255, 143, 207, .08)); border-color: rgba(223, 130, 255, .25); }
.dica-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--acento2); font-weight: 600; font-size: .9rem; }
.dica h2 { margin-bottom: 6px; }
.dica p { color: rgba(255, 255, 255, .8); }
.dica ul { margin: 8px 0 0; padding-left: 20px; color: rgba(255, 255, 255, .8); }
.dica li { margin: 4px 0; }

/* Resultados (histórico de exames) */
.resultado { padding: 14px 0; }
.resultado + .resultado { border-top: 1px solid var(--linha); }
.resultado-topo { display: flex; justify-content: space-between; align-items: center; }
.resultado-topo b { font: 600 1.05rem var(--display); }
.valores { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 8px; }
.valores div { display: flex; justify-content: space-between; gap: 6px; font-size: .9rem; color: var(--mudo); }
.valores b { color: var(--texto); font-weight: 600; }
.valores b.baixo { color: #ff9c9c; } .valores b.alto { color: var(--aviso); }

/* Linha do tempo */
.tempo-dia { margin: 18px 0 6px 4px; color: var(--mudo); font-weight: 600; font-size: .92rem; }
.tempo-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; }
.tempo-item .icone-bola { width: 38px; height: 38px; }
.tempo-item .linha-txt strong { font-size: 1rem; }

/* Botão de emergência no topo */
.redondo.sos { background: rgba(255, 99, 99, .22); color: #ff9c9c; font: 700 .78rem var(--corpo); letter-spacing: .04em; }

/* Seletores de data e hora (próprios do app) */
.seletor { flex: 1; min-width: 0; }
.seletor-campo {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  background: #0e0e0f; color: var(--texto); border: 1px solid var(--linha); border-radius: 20px; padding: 16px 18px;
  font: 500 1.05rem var(--corpo); transition: border-color .2s, box-shadow .2s;
}
.seletor-campo svg:first-child { color: var(--acento2); flex: none; }
.seletor-campo span { flex: 1; }
.seletor-campo svg:last-child { color: var(--fraco); transition: transform .25s; flex: none; }
.seletor.aberto .seletor-campo { border-color: var(--acento); box-shadow: 0 0 0 4px rgba(193, 62, 240, .2); }
.seletor.aberto .seletor-campo svg:last-child { transform: rotate(180deg); }
.seletor-painel { margin-top: 8px; background: #121113; border: 1px solid var(--linha); border-radius: 22px; padding: 14px; animation: abre .25s cubic-bezier(.2, .9, .3, 1); }
@keyframes abre { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.seletor-painel .cal-topo b { font: 600 1.1rem var(--display); }
.sd-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sd-dia { aspect-ratio: 1; border: 0; border-radius: 50%; background: none; color: var(--texto); font: 600 .95rem var(--display); cursor: pointer; }
.sd-dia:disabled { color: #3f3c43; cursor: default; }
.sd-dia.hoje { outline: 1.5px solid rgba(223, 130, 255, .7); outline-offset: -2px; }
.sd-dia.sel { background: var(--acento); color: #fff; box-shadow: 0 0 14px rgba(193, 62, 240, .6); outline: 0; }
.sd-atalhos { display: flex; gap: 8px; margin-top: 10px; }
.sd-atalhos .pilula-sel { padding: 8px 14px; font-size: .88rem; }
.sh-rot { color: var(--mudo); font-size: .85rem; margin: 2px 4px 8px; }
.sh-grade { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 12px; }
.sh-btn { border: 0; border-radius: 14px; background: rgba(255, 255, 255, .06); color: var(--texto); font: 600 1rem var(--display); padding: 11px 0; cursor: pointer; }
.sh-btn.sel { background: var(--acento); color: #fff; box-shadow: 0 0 12px rgba(193, 62, 240, .55); }
.linha-hora { align-items: flex-start; }

/* Ícones SVG nos avisos e no balão da Lola (no lugar de emoji) */
.ico-txt { display: inline-grid; place-items: center; flex: none; color: var(--acento2); }
#toast { display: inline-flex; align-items: center; gap: 8px; }
#toast .ico-txt { color: var(--acento); }
.balao { display: flex; align-items: center; gap: 8px; }
.balao .ico-txt { color: #fff; }
.baixar-lista li .icone-bola { width: 40px; height: 40px; color: var(--acento2); }
.baixar-privado { display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.balao-centro .ico-txt { color: #fff; }