/* ============================================================
   Valora Amparo — Sistema Novo (mobile-first / PWA)
   Paleta inspirada no protótipo aprovado.
   ============================================================ */
:root{
  --teal:#2E7D6B; --teal-dark:#20574A; --teal-pale:#EAF3F0;
  --gold:#C9A227; --gold-pale:#FBF3DD;
  --plum:#6E4C6E; --plum-pale:#F2EAF2;
  --slate:#5A7183; --slate-pale:#EAF0F4;
  --cream:#FBFAF7; --ink:#33362F; --ink-soft:#6b6f66;
  --line:#E7E4DA; --card:#FFFFFF; --danger:#b5484d;
  --topbar-h:56px; --bottomnav-h:64px;
  --radius:14px; --shadow:0 2px 14px rgba(32,87,74,.08);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
h1,h2,h3{margin:0;}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:30;
  background:linear-gradient(135deg,var(--teal-dark),var(--teal)); color:#fff;
  padding-top:env(safe-area-inset-top);
}
.topbar-inner{
  height:var(--topbar-h); display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; max-width:720px; margin:0 auto;
}
.topbar-brand{display:flex; align-items:center; gap:9px; min-width:0;}
.topbar-logo{width:22px; height:22px; color:var(--gold-pale); flex:none;}
.topbar-title{font-weight:600; font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.topbar-action{display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin-right:-8px; color:rgba(255,255,255,.9); border-radius:10px;}
.topbar-action:active{background:rgba(255,255,255,.12);}

/* ---------- Content ---------- */
.content{
  max-width:720px; margin:0 auto;
  padding:18px 16px calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + 20px);
}

/* ---------- Bottom nav (estilo app) ---------- */
.bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; background:#fff; border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -2px 14px rgba(32,87,74,.06);
}
.nav-item{
  flex:1; min-width:0; height:var(--bottomnav-h);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--ink-soft); font-size:.68rem; font-weight:600; letter-spacing:.01em;
}
.nav-item svg{width:24px; height:24px;}
.nav-item span{white-space:nowrap;}
.nav-item.is-active{color:var(--teal-dark);}
.nav-item.is-active svg{color:var(--teal);}
.nav-item:active{background:var(--teal-pale);}

/* ---------- Cards / botões / campos ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-weight:600; font-size:1rem; cursor:pointer;
  border:1px solid transparent; border-radius:12px; padding:13px 20px; min-height:48px;
  transition:transform .12s ease, background .2s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--teal); color:#fff;}
.btn-primary:active{background:var(--teal-dark);}
.btn-block{width:100%;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.field-label{font-size:.85rem; font-weight:600; color:var(--ink-soft);}
input,select,textarea{
  font:inherit; font-size:16px; /* evita zoom no iOS */
  padding:13px 14px; border:1px solid var(--line); border-radius:11px;
  background:#fff; color:var(--ink); width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal);}

/* ---------- Home ---------- */
.hero-greet{margin:4px 2px 18px;}
.greet-hello{margin:0; color:var(--ink-soft); font-size:.95rem;}
.greet-title{font-family:Georgia,"Times New Roman",serif; font-size:1.5rem; color:var(--teal-dark); margin:2px 0 4px;}
.greet-sub{margin:0; color:var(--ink-soft); font-size:.92rem;}

.quick-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px;}
.quick-card{
  display:flex; flex-direction:column; gap:4px; padding:16px;
  border-radius:var(--radius); border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); min-height:112px;
}
.quick-card svg{width:26px; height:26px; margin-bottom:6px;}
.qc-title{font-weight:700; font-size:1rem; color:var(--ink);}
.qc-sub{font-size:.76rem; color:var(--ink-soft); line-height:1.3;}
.qc-teal svg{color:var(--teal);} .qc-teal{border-top:3px solid var(--teal);}
.qc-plum svg{color:var(--plum);} .qc-plum{border-top:3px solid var(--plum);}
.qc-gold svg{color:var(--gold);} .qc-gold{border-top:3px solid var(--gold);}
.qc-slate svg{color:var(--slate);} .qc-slate{border-top:3px solid var(--slate);}
.quick-card:active{transform:translateY(1px);}

.info-card{background:var(--teal-pale); border-color:#cfe4dc;}
.info-eyebrow{margin:0 0 4px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--teal-dark);}
.info-text{margin:0; font-size:.9rem; color:#2c4a41;}

/* ---------- Empty state ---------- */
.empty-state{text-align:center; padding:48px 20px;}
.empty-badge{width:72px; height:72px; margin:0 auto 16px; border-radius:22px; background:var(--gold-pale); color:var(--gold); display:flex; align-items:center; justify-content:center;}
.empty-badge svg{width:36px; height:36px;}
.empty-title{font-family:Georgia,serif; font-size:1.4rem; color:var(--teal-dark); margin-bottom:8px;}
.empty-text{color:var(--ink-soft); font-size:.95rem; max-width:340px; margin:0 auto 22px;}

/* ---------- Login ---------- */
.login-body{background:linear-gradient(160deg,var(--teal-dark),var(--teal) 55%,#357a67); min-height:100dvh; margin:0;}
.login-wrap{min-height:100dvh; display:flex; flex-direction:column; justify-content:center; gap:22px; padding:32px 22px calc(32px + env(safe-area-inset-bottom)); max-width:440px; margin:0 auto;}
.login-brand{text-align:center; color:#fff;}
.login-logo{width:46px; height:46px; color:var(--gold-pale);}
.login-name{font-family:Georgia,serif; font-size:1.8rem; margin:6px 0 2px;}
.login-slogan{margin:0; font-style:italic; color:var(--gold-pale); font-size:.95rem;}
.login-card{background:#fff; border-radius:18px; padding:22px 20px; box-shadow:0 12px 40px rgba(0,0,0,.22);}
.login-error{margin:0 0 12px; background:#fdecec; color:var(--danger); border:1px solid #f3c9cb; padding:10px 12px; border-radius:10px; font-size:.88rem;}
.login-foot{text-align:center; color:rgba(255,255,255,.75); font-size:.78rem; margin:0;}

/* ---------- Badges ---------- */
.badge{display:inline-flex; align-items:center; font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:999px; letter-spacing:.02em; white-space:nowrap;}
.badge-ok{background:var(--teal-pale); color:var(--teal-dark);}
.badge-muted{background:#ece7dd; color:var(--ink-soft);}
.badge-danger{background:#fdecec; color:var(--danger);}

/* ---------- Busca / listagem ---------- */
.list-head{margin-bottom:10px;}
.search-box{display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:0 12px; box-shadow:var(--shadow);}
.search-box svg{width:18px; height:18px; color:var(--ink-soft); flex:none;}
.search-input{border:none; box-shadow:none; padding:12px 0; font-size:16px; background:transparent; border-radius:0;}
.search-input:focus{outline:none; border:none;}
.list-count{margin:8px 2px 0; font-size:.8rem; color:var(--ink-soft);}
.list-count span{font-weight:700; color:var(--ink);}

.ag-list{display:flex; flex-direction:column; gap:9px; margin-top:8px;}
.ag-card{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px; box-shadow:var(--shadow);}
.ag-card:active{transform:translateY(1px); background:var(--teal-pale);}
.ag-avatar{width:44px; height:44px; flex:none; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--teal-dark)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem;}
.ag-info{flex:1; min-width:0;}
.ag-name-row{display:flex; align-items:center; gap:8px;}
.ag-name{font-weight:600; font-size:1rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ag-meta{display:flex; align-items:center; gap:12px; margin-top:3px; font-size:.8rem; color:var(--ink-soft); flex-wrap:wrap;}
.ag-city{display:inline-flex; align-items:center; gap:4px; min-width:0;}
.ag-city svg{width:13px; height:13px; flex:none;}
.ag-star{color:#b8860b; font-weight:600; white-space:nowrap;}
.ag-star i{color:var(--ink-soft); font-weight:400; font-style:normal;}
.chev{width:20px; height:20px; color:#c7c2b6; flex:none;}
.ag-empty{text-align:center; color:var(--ink-soft); padding:30px;}

/* ---------- Detalhe ---------- */
.back-link{display:inline-flex; align-items:center; gap:4px; color:var(--teal-dark); font-weight:600; font-size:.9rem; margin-bottom:12px;}
.back-link svg{width:18px; height:18px;}
.detail-hero{text-align:center; margin-bottom:16px;}
.detail-avatar{width:76px; height:76px; margin:0 auto 10px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--teal-dark)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.5rem;}
.detail-name{font-family:Georgia,serif; font-size:1.4rem; color:var(--teal-dark);}
.detail-sub{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:6px; flex-wrap:wrap;}
.detail-actions{display:flex; gap:10px; margin-bottom:16px;}
.detail-actions .btn{flex:1;}
.btn-wa{background:#25D366; color:#fff;}
.btn-wa:active{background:#1da851;}
.btn-outline{background:#fff; border:1px solid var(--teal); color:var(--teal-dark);}
.detail-card{margin-bottom:12px;}
.dc-title{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--teal-dark); font-weight:700; margin-bottom:8px;}
.dc-row{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid #f2efe7; font-size:.92rem;}
.dc-row:last-child{border-bottom:none;}
.dc-row span{color:var(--ink-soft);}
.dc-row b{text-align:right; word-break:break-word;}
.tag-wrap{display:flex; flex-wrap:wrap; gap:7px;}
.tag{font-size:.78rem; font-weight:600; padding:5px 10px; border-radius:999px; background:#f1eee6; color:var(--ink);}
.tag-teal{background:var(--teal-pale); color:var(--teal-dark);}
.tag-ok{background:#e7f3ec; color:#2b7a4b;}
.tag-off{background:#f0eee9; color:var(--ink-soft);}
.detail-note{text-align:center; color:var(--ink-soft); font-size:.78rem; margin:16px 4px 0;}

/* ---------- Foto do cuidador (avatar) ---------- */
.ag-avatar, .detail-avatar{overflow:hidden;}
.ag-avatar img, .detail-avatar img{width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- Sub-cartões e textos longos do detalhe ---------- */
.sub-card{border:1px solid var(--line); border-radius:11px; padding:12px; margin-bottom:10px; background:#fdfcfa;}
.sub-card:last-child{margin-bottom:0;}
.dc-multi{padding:8px 0; border-bottom:1px solid #f2efe7;}
.dc-multi:last-child{border-bottom:none;}
.dc-multi label{display:block; font-size:.78rem; color:var(--ink-soft); margin-bottom:3px; font-weight:600;}
.dc-multi span{display:block; font-size:.92rem; white-space:pre-line; word-break:break-word;}
.tag-gold{background:var(--gold-pale); color:#8a6d15;}

/* ---------- Separador de grupo (Reprovados) ---------- */
.ag-group-sep{display:flex; align-items:center; gap:10px; margin:24px 2px 10px; color:var(--danger); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
.ag-group-sep::after{content:""; height:1px; background:#eccccc; flex:1;}
.ag-group-sep i{font-style:normal; background:#fdecec; border-radius:999px; padding:1px 9px; font-size:.72rem;}

/* ---------- Classificação (formação) + selo Apto ---------- */
.clschip{font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:999px; letter-spacing:.01em; white-space:nowrap;}
.cls-enf{background:#dbeae2; color:#155c40;}
.cls-tec{background:#e2efe9; color:#1f6b52;}
.cls-aux{background:#e6f0f5; color:#2b6076;}
.cls-fis{background:var(--plum-pale); color:#5a3a5a;}
.cls-cui{background:var(--gold-pale); color:#8a6d15;}
.cls-nc{background:#efece4; color:#7a756a;}
.apto-mark{font-size:.7rem; font-weight:700; color:#2b7a4b; background:#e7f3ec; padding:2px 8px; border-radius:999px; white-space:nowrap;}

/* ---------- Chips de filtro ---------- */
.filter-chips{display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:10px 0 2px; scrollbar-width:none;}
.filter-chips::-webkit-scrollbar{display:none;}
.fchip{flex:none; font:inherit; cursor:pointer; border:1px solid var(--line); background:#fff; color:var(--ink-soft); border-radius:999px; padding:8px 13px; font-size:.8rem; font-weight:600; display:inline-flex; align-items:center; gap:6px; min-height:38px;}
.fchip i{font-style:normal; font-size:.72rem; background:#f0ede5; color:var(--ink-soft); border-radius:999px; padding:0 6px; font-weight:700;}
.fchip.is-active{background:var(--teal); color:#fff; border-color:var(--teal);}
.fchip.is-active i{background:rgba(255,255,255,.28); color:#fff;}
.fchip-apto.is-active{background:#2b7a4b; border-color:#2b7a4b;}

/* ---------- Filtro de cidade ---------- */
.city-select{width:100%; margin-top:10px; font-size:16px; padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:#fff; color:var(--ink); font-weight:500;}
.city-select:focus{outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal);}
.fchip.is-empty{opacity:.4;}
.fchip.is-active.is-empty{opacity:1;}

/* ---------- Chips de triagem (ordenação / refino) ---------- */
.triage-chips{display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:9px 0 2px; margin-top:9px; border-top:1px dashed var(--line); scrollbar-width:none;}
.triage-chips::-webkit-scrollbar{display:none;}
.tchip{flex:none; font:inherit; cursor:pointer; border:1px solid var(--line); background:#fff; color:var(--ink-soft); border-radius:999px; padding:8px 13px; font-size:.8rem; font-weight:600; display:inline-flex; align-items:center; gap:6px; min-height:38px;}
.tchip i{font-style:normal; font-size:.72rem; background:#f0ede5; color:var(--ink-soft); border-radius:999px; padding:0 6px; font-weight:700;}
.tchip.is-active{background:var(--gold); color:#fff; border-color:var(--gold);}
.tchip.is-active i{background:rgba(255,255,255,.3); color:#fff;}
.ag-pl, .ag-ct{white-space:nowrap;}