/* Luís PA: uma coluna de app de telemóvel, com o botão de gravar sempre à mão. */
:root{
  --bg:#f5f5f7; --card:#ffffff; --fg:#1d1d22; --muted:#6b6b75; --line:#e3e3e8;
  --acc:#3d3aa8; --acc-soft:#e8e7fb; --on-acc:#ffffff; --rec:#d93a3a; --warn:#b4531a; --warn-soft:#fbeadf;
  --body:"Figtree",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141418; --card:#212128; --fg:#f2f2f5; --muted:#a3a3ad; --line:#33333c;
  --acc:#9a97f2; --acc-soft:#2a2950; --on-acc:#14132e; --rec:#f06464; --warn:#f0a06b; --warn-soft:#3a2516; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141418; --card:#212128; --fg:#f2f2f5; --muted:#a3a3ad; --line:#33333c;
  --acc:#9a97f2; --acc-soft:#2a2950; --on-acc:#14132e; --rec:#f06464; --warn:#f0a06b; --warn-soft:#3a2516; color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.45;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 150px max(16px,env(safe-area-inset-left,0px))}
.wrap{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px}
h1{font-weight:800;font-size:26px;letter-spacing:-.01em;margin:0;display:flex;align-items:center;gap:10px}
h1 img{border-radius:10px}
.ligeiro{border:0;background:transparent;color:var(--muted);font:500 14px var(--body);cursor:pointer;padding:8px}
.procura{position:sticky;top:max(8px,env(safe-area-inset-top,0px));z-index:5}
.procura input{width:100%;font:16px var(--body);padding:12px 14px 12px 40px;border-radius:12px;border:1px solid var(--line);background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a94' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center/18px;color:var(--fg)}
#lista{display:flex;flex-direction:column;gap:10px}
.dia{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:8px 2px -4px}
.nota{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.nota .topo{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.nota .texto{white-space:pre-wrap;word-break:break-word}
.nota .espera{color:var(--muted);font-style:italic;display:flex;align-items:center;gap:8px}
.nota .falhou{color:var(--warn);background:var(--warn-soft);border-radius:8px;padding:6px 10px;font-size:14px}
.nota audio{width:100%;height:36px}
.nota textarea{width:100%;min-height:120px;font:16px var(--body);padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg)}
.acoes{display:flex;gap:6px;flex-wrap:wrap}
.acoes button,.btn2{border:1px solid var(--line);background:var(--card);color:var(--fg);font:600 13px var(--body);padding:7px 12px;border-radius:9px;cursor:pointer}
.acoes .perigo{color:var(--rec)}
.btn{border:0;background:var(--acc);color:var(--on-acc);font:700 15px var(--body);padding:12px 16px;border-radius:12px;cursor:pointer;width:100%}
.vazio{color:var(--muted);text-align:center;padding:40px 10px}
.roda{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--acc);animation:roda 1s linear infinite}
@keyframes roda{to{transform:rotate(360deg)}}
/* A barra de baixo com o botão de gravar */
.gravar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 16px max(16px,env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--bg) 70%,transparent)}
.gravar .linha{display:flex;align-items:center;gap:18px}
.mic{width:76px;height:76px;border-radius:50%;border:0;background:var(--acc);color:var(--on-acc);cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 20px rgba(40,36,140,.28);transition:transform .12s}
.mic:active{transform:scale(.94)}
.mic svg{width:32px;height:32px}
.mic svg[hidden]{display:none}
.mic.a-gravar{background:var(--rec);animation:pulso 1.4s ease-in-out infinite}
@keyframes pulso{0%,100%{box-shadow:0 0 0 0 rgba(217,58,58,.45)}50%{box-shadow:0 0 0 14px rgba(217,58,58,0)}}
.redondo{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;display:grid;place-items:center}
.redondo svg{width:22px;height:22px}
.estado{font-size:14px;color:var(--muted);min-height:20px;font-variant-numeric:tabular-nums}
.estado.rec{color:var(--rec);font-weight:700}
/* Entrar */
.cartao-centro{max-width:380px;margin:12vh auto 0;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px;width:100%;text-align:left}
.card h3{margin:0}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:14px;font-weight:600}
.campo input{font:16px var(--body);padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg)}
.erro{color:var(--rec);margin:0;font-size:14px}
.toast{position:fixed;left:50%;bottom:140px;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:9px 16px;border-radius:99px;font-size:14px;z-index:20;max-width:calc(100% - 32px)}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.mic.a-gravar,.roda{animation:none}}
/* Versão 2: abas, para fazer, etiquetas nas notas e definições */
.redondo.pequeno{width:40px;height:40px}
.redondo.pequeno svg{width:20px;height:20px}
.abas{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px}
.abas button{flex:1;border:0;background:transparent;color:var(--fg);font:600 15px var(--body);padding:9px 4px;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.abas button[aria-selected="true"]{background:var(--acc);color:var(--on-acc)}
.conta{background:var(--rec);color:#fff;border-radius:99px;font-size:12px;padding:1px 7px;line-height:1.4}
section{display:flex;flex-direction:column;gap:12px}
section[hidden]{display:none}
.grupo{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-top:1px solid var(--line)}
.item:first-child{border-top:0}
.item input{width:22px;height:22px;accent-color:var(--acc);flex:none}
.item-corpo{flex:1;min-width:0}
.item-corpo small{display:block;color:var(--muted);font-size:13px}
.item.passou .item-corpo small{color:var(--warn)}
.item.feito .item-corpo div{text-decoration:line-through;color:var(--muted)}
.item .ligeiro{padding:6px;text-decoration:none;font-size:16px}
.aviso-erro{color:var(--warn)}
.feitos summary{cursor:pointer;color:var(--muted);font-weight:600;font-size:14px;padding:6px 2px}
.feitos .grupo{margin-top:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--acc-soft);color:var(--fg);border-radius:10px;padding:5px 9px;font:500 13px var(--body);cursor:pointer;text-align:left}
.chip small{color:var(--muted)}
.chip.feito{opacity:.55;text-decoration:line-through}
.nota .topo b{color:var(--fg)}
dialog{border:0;border-radius:18px;padding:0;background:var(--card);color:var(--fg);width:min(440px,calc(100% - 32px))}
dialog::backdrop{background:rgba(0,0,0,.4)}
.defs{display:flex;flex-direction:column;gap:14px;padding:18px}
.defs h2{margin:0;font-size:20px}
.defs-linha{display:flex;align-items:center;justify-content:space-between;gap:12px}
.defs-linha small{display:block;color:var(--muted);font-size:13px}
.item .ligeiro.enviado{color:var(--muted);font-size:13px}