/* ═══ Refinamento visual v2 ════════════════════════════════════════════════════
   Carregado depois de app.css e das folhas das telas. Menos ruído, mais respiro:
   cartões com borda fina + sombra suave, avatar de cada criança, termo jurídico como nota
   discreta, filtros numa linha, cabeçalho com a data, login dividido. */
:root { --r: 18px; --coral: #D9745A; --coral-soft: #FBE7E0; --line-2: #E4EAE8;
  --shadow: 0 1px 2px rgba(16,40,38,.05), 0 6px 20px -10px rgba(16,40,38,.16); }
:root[data-theme="dark"] { --coral: #EE9A83; --coral-soft: #3A221B; --line-2: #22312F; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --coral: #EE9A83; --coral-soft: #3A221B; --line-2: #22312F; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7) } }
body { background: radial-gradient(1100px 420px at 100% -120px, var(--accent-soft), transparent 65%), radial-gradient(700px 360px at 0% 110%, var(--coral-soft), transparent 70%), var(--ground); background-attachment: fixed; font-size: 15.5px }
main { padding: 30px clamp(18px, 3.2vw, 48px) 80px; gap: 24px; max-width: 1500px; width: 100% }
h1 { font-size: clamp(28px, 3.2vw, 38px); letter-spacing: -.02em }
h2 { font-size: 18px; letter-spacing: -.005em }

/* termo jurídico: nota discreta, sem caixa */
.tj .j { font-family: var(--body); font-style: italic; font-size: 12px; color: var(--ink-faint); background: none; padding: 0; border-radius: 0; font-weight: 400 }
.tj .j::before { content: "no processo: "; opacity: 1; font-style: normal }
.proximo .tj .j { background: none; color: rgba(255,255,255,.72) }

/* menu lateral */
aside.menu { padding: 22px 16px; gap: 20px }
.marca { grid-template-columns: 46px 1fr; padding: 4px 6px 18px }
.marca .mk { width: 46px; height: 46px; border-radius: 14px; font-size: 16px; background: conic-gradient(from 210deg, #9FE3DA, #E8F7F4, #F6C9B8, #9FE3DA); box-shadow: 0 6px 16px -6px rgba(0,0,0,.5) }
nav.itens a { padding: 10px 12px; border-radius: 12px; font-size: 14.5px; position: relative; transition: background .15s }
nav.itens a.on::before { content: ""; position: absolute; left: -16px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: #9FE3DA }
.eu .card-eu { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08) }

/* cabeçalho das páginas */
.topo { align-items: center; padding-bottom: 2px }
.topo .data-hoje { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; display: block }
.topo .sub { max-width: 72ch }
.busca-global input { box-shadow: var(--shadow); border-color: var(--line-2); height: 44px }

/* cartões */
.card { border: 1px solid var(--line-2); box-shadow: var(--shadow); padding: 22px 24px; gap: 16px }
.card .ico { width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: inline-grid; place-items: center; flex: none; vertical-align: middle }
.card .ico svg { width: 16px; height: 16px }
.card > .cab h2, .card > h2 { display: flex; align-items: center; gap: 10px }

/* números (KPI) */
.kpi { border: 1px solid var(--line-2); padding: 20px 22px 18px; gap: 6px; min-height: 148px }
.kpi::after { content: none }
.kpi .q { font-size: 14px; font-weight: 700; color: var(--ink-soft); padding-right: 44px; line-height: 1.35 }
.kpi .n { font-size: 46px; letter-spacing: -.02em; margin-top: auto }
.kpi .kico { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow); color: var(--accent) }
.kpi .kico svg { width: 18px; height: 18px }
.kpi.ok { background: linear-gradient(160deg, var(--ok-bg) 0%, var(--surface) 72%) } .kpi.ok .kico { color: var(--ok) }
.kpi.warn { background: linear-gradient(160deg, var(--warn-bg) 0%, var(--surface) 72%) } .kpi.warn .kico { color: var(--warn) }
.kpi.bad { background: linear-gradient(160deg, var(--bad-bg) 0%, var(--surface) 72%) } .kpi.bad .kico { color: var(--bad) }
a.kpi:hover, button.kpi:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(16,40,38,.06), 0 14px 30px -14px rgba(16,40,38,.3) }

/* avatar da criança */
.avc { flex: none; width: 38px; height: 38px; border-radius: 12px; display: inline-grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 13.5px; letter-spacing: .02em; color: #fff; background: var(--accent) }
.avc.sm { width: 28px; height: 28px; border-radius: 9px; font-size: 11px }
.avc.lg { width: 68px; height: 68px; border-radius: 22px; font-size: 23px }
.avc.c0 { background: linear-gradient(135deg, #0E6B66, #2A9D8F) } .avc.c1 { background: linear-gradient(135deg, #C8603F, #E49A63) } .avc.c2 { background: linear-gradient(135deg, #3F5DA8, #6F8BD1) }
.avc.c3 { background: linear-gradient(135deg, #6D4F9C, #9E82C6) } .avc.c4 { background: linear-gradient(135deg, #A47522, #D0A34A) } .avc.c5 { background: linear-gradient(135deg, #2F7A4D, #62AC7E) }
.quem-av { display: flex; gap: 12px; align-items: center; min-width: 0 }

/* listas */
.lista > .it { padding: 13px 12px; margin: 0 -12px; gap: 14px }
.lista .tit { line-height: 1.3 }
.casos { border: 1px solid var(--line-2) }
.casos > a { grid-template-columns: 11px minmax(200px, 1.1fr) minmax(210px, 1.45fr) minmax(210px, 1.45fr) 118px; padding: 16px 20px; gap: 18px; transition: background .12s }
.casos .dias { font-family: var(--body); font-size: 12.5px; line-height: 1.45 }
.casos .dias b { font-family: var(--display); font-size: 17px; color: var(--ink); display: block; line-height: 1.1 }
@media (max-width: 900px) { .casos > a { grid-template-columns: 11px minmax(0, 1fr) } }

/* filtros numa linha */
.filtros.uma-linha { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin }
.filtros button { padding: 8px 15px; font-size: 13.5px; transition: background .12s, border-color .12s; white-space: nowrap }
.filtros button:hover { border-color: var(--accent) }
.filtros button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) }
.barra-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 8px; box-shadow: var(--shadow) }
.barra-filtros input, .barra-filtros select { border: 0; background: var(--surface-2); border-radius: 10px; height: 40px; width: auto; max-width: 100% }
.barra-filtros input { min-width: 200px; flex: 1 }
.barra-filtros .filtros button { padding: 7px 13px }

/* botões */
.btn { border-radius: 11px; transition: border-color .12s, box-shadow .12s, transform .12s }
.btn.pri { background: linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow: 0 6px 14px -8px var(--accent) }
.btn.pri:hover { transform: translateY(-1px); filter: none }
.proximo .btn.pri { background: #fff; box-shadow: 0 6px 14px -8px rgba(0,0,0,.4) }

/* abas em trilho */
.abas { border-bottom: 0; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 5px; gap: 4px; box-shadow: var(--shadow); width: max-content; max-width: 100% }
.abas button { border-bottom: 0; border-radius: 10px; padding: 9px 14px; font-size: 14px }
.abas button.on { background: var(--accent-soft); color: var(--accent) }

.pill { padding: 6px 13px }
.chip { padding: 3px 10px; font-weight: 600 }

/* ficha */
.cab-caso.hero { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); padding: 26px 26px 22px; position: relative; overflow: hidden }
.cab-caso.hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--accent), var(--accent-2) 55%, var(--coral)) }
.hero-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px }
.hero-stats .st { background: var(--surface-2); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; min-width: 104px }
.hero-stats .st span { font-size: 11.5px; color: var(--ink-soft) } .hero-stats .st b { font-family: var(--display); font-size: 16px }
.hero-stats .st.bad { background: var(--bad-bg) } .hero-stats .st.bad b { color: var(--bad) }
.proximo { border-radius: var(--r); padding: 22px 26px; background: radial-gradient(520px 220px at 100% 0%, rgba(255,255,255,.16), transparent 60%), linear-gradient(135deg, var(--accent), var(--accent-2)) }
.relogio { border-radius: 16px; padding: 16px 18px; background: var(--surface) }

/* login dividido */
.login { grid-template-columns: 1.05fr 1fr; display: grid; padding: 0; place-items: stretch }
.login .lado { position: relative; overflow: hidden; padding: 56px clamp(24px, 5vw, 72px); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; color: #E4F3F1 }
.login .lado h2 { font-size: clamp(30px, 3.6vw, 46px); color: #fff; line-height: 1.08; letter-spacing: -.02em; max-width: 15ch }
.login .lado p { max-width: 44ch; opacity: .82; font-size: 16.5px }
.login .lado .circ { position: absolute; border-radius: 50%; pointer-events: none }
.login .lado ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: 15px; position: relative }
.login .lado li { display: flex; gap: 10px; align-items: center } .login .lado li svg { color: #9FE3DA }
.login .caixa { background: rgba(255,255,255,.035); border-left: 1px solid rgba(255,255,255,.08); padding: 56px clamp(20px, 4vw, 56px); justify-content: center; width: auto }
@media (max-width: 900px) { .login { grid-template-columns: 1fr } .login .lado { padding: 32px 20px 0 } .login .lado ul, .login .lado .rodape-lado { display: none } .login .caixa { border-left: 0; padding: 20px 20px 40px } }
.proximo .btn.pri { color: #0B4F4B }