/* Juris, o sistema de gestão da De Paula Damião Advocacia.
   Identidade da casa (a mesma da Área do Cliente e do site): marinho #0B1F34, rosé #C59480,
   papel #FBF9F5, Cormorant nos títulos, Lora no texto, Montserrat nos rótulos.
   Ferramenta de trabalho: denso o bastante para caber o dia numa tela, sem enfeite. */
@font-face { font-family: "Cormorant"; src: url(/estatico/cormorant-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url(/estatico/montserrat-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Lora"; src: url(/estatico/lora-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
:root {
  --marinho: #0B1F34; --noite: #061220; --rose: #C59480; --cobre: #96604D; --champagne: #F5CEB8;
  --marfim: #F5F1EA; --papel: #FBF9F5; --linha: #E5DFD4; --texto: #2E363F; --suave: #6E7680;
  --ok: #2F6B48; --ok-f: #E8F1EA; --alerta: #8A3A1E; --alerta-f: #F8E9E2; --aviso: #8A6A12; --aviso-f: #FBF3DC;
  --serif: "Cormorant", Georgia, serif; --corpo: "Lora", Georgia, serif; --rot: "Montserrat", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--papel); color: var(--texto); font: 15px/1.55 var(--corpo); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
a { color: var(--marinho); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--cobre); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--marinho); line-height: 1.15; margin: 0; }
h1 { font-size: 30px; letter-spacing: -.3px; }
h2 { font-size: 22px; margin: 26px 0 10px; }
h3 { font-size: 18px; }
.rot { font: 500 10px var(--rot); letter-spacing: 1.6px; text-transform: uppercase; color: var(--cobre); }
.m { color: var(--suave); font-size: 13.5px; }
.num { font-variant-numeric: tabular-nums; }
.nw { white-space: nowrap; }

/* estrutura: lateral marinho no computador, barra embaixo no celular */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.lado { background: var(--marinho); color: #fff; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.lado .marca { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; text-decoration: none; color: #fff; }
.lado .marca img { height: 30px; }
.lado .marca span { font: 600 20px var(--serif); letter-spacing: .2px; }
.lado .marca small { display: block; font: 500 8.5px var(--rot); letter-spacing: 1.8px; text-transform: uppercase; color: var(--rose); }
.lado nav { display: grid; padding: 6px 10px; gap: 1px; }
.lado nav a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; color: #D9DEE4; text-decoration: none; font: 500 11.5px var(--rot); letter-spacing: .6px; text-transform: uppercase; border-left: 2px solid transparent; }
.lado nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.lado nav a[aria-current="page"] { color: #fff; border-left-color: var(--rose); background: rgba(197,148,128,.10); }
.lado nav svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; flex: none; }
.lado .grupo { font: 500 9px var(--rot); letter-spacing: 1.8px; text-transform: uppercase; color: rgba(197,148,128,.8); padding: 16px 20px 4px; }
.lado .pe { margin-top: auto; padding: 14px 18px 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #C9D0D8; }
.lado .pe b { color: #fff; font-weight: 400; display: block; }
.lado .pe a { color: var(--rose); font: 500 10px var(--rot); letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; }
.cont { min-width: 0; }
.barra { position: sticky; top: 0; z-index: 5; background: rgba(251,249,245,.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--linha);
  display: flex; align-items: center; gap: 12px; padding: 10px 26px; }
.barra form { flex: 1; max-width: 560px; }
.barra input { width: 100%; }
.barra .topo-m { display: none; }
.corpo { padding: 22px 26px 60px; max-width: 1240px; }
.cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cab .acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* componentes */
.cartoes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kpi { background: #fff; border: 1px solid var(--linha); padding: 14px 16px; text-decoration: none; color: inherit; display: grid; gap: 2px; }
.kpi:hover { border-color: var(--rose); }
.kpi .n { font: 600 34px/1 var(--serif); color: var(--marinho); }
.kpi.alerta .n { color: var(--alerta); }
.kpi.alerta { border-left: 3px solid var(--alerta); }
.kpi.ok .n { color: var(--ok); }
.caixa { background: #fff; border: 1px solid var(--linha); }
.caixa > .tit { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--linha); }
.caixa > .tit h3 { font-size: 18px; }
.duas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.linha { display: grid; grid-template-columns: auto 1fr auto; gap: 10px 14px; align-items: start; padding: 11px 16px; border-bottom: 1px solid var(--marfim); text-decoration: none; color: inherit; }
.linha:last-child { border-bottom: 0; }
a.linha:hover { background: var(--marfim); }
.linha .t { color: var(--marinho); font-weight: 400; }
.linha .d { color: var(--suave); font-size: 13px; }
.vazio { padding: 18px 16px; color: var(--suave); font-size: 14px; }
.selo { display: inline-block; font: 500 9.5px var(--rot); letter-spacing: 1px; text-transform: uppercase; padding: 3px 7px; border: 1px solid var(--linha); color: var(--suave); background: #fff; white-space: nowrap; }
.selo.vermelho { color: var(--alerta); border-color: #E3B9A6; background: var(--alerta-f); }
.selo.amarelo { color: var(--aviso); border-color: #E8D49A; background: var(--aviso-f); }
.selo.verde { color: var(--ok); border-color: #B8D3C0; background: var(--ok-f); }
.selo.azul { color: var(--marinho); border-color: #B9C3CF; background: #EEF2F6; }
.data { text-align: center; min-width: 46px; border: 1px solid var(--linha); padding: 3px 4px; background: var(--papel); }
.data b { display: block; font: 600 20px/1 var(--serif); color: var(--marinho); }
.data span { font: 500 8.5px var(--rot); letter-spacing: 1px; text-transform: uppercase; color: var(--cobre); }
.data.vermelho { border-color: #E3B9A6; background: var(--alerta-f); }
.data.vermelho b { color: var(--alerta); }

table.t { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--linha); font-size: 14px; }
table.t th { text-align: left; font: 500 9.5px var(--rot); letter-spacing: 1.2px; text-transform: uppercase; color: var(--cobre); padding: 9px 12px; border-bottom: 1px solid var(--linha); background: var(--papel); position: sticky; top: 53px; }
table.t td { padding: 9px 12px; border-bottom: 1px solid var(--marfim); vertical-align: top; }
table.t tr:hover td { background: var(--marfim); }
table.t td a { text-decoration: none; }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.abas { display: flex; gap: 0; border-bottom: 1px solid var(--linha); margin: 6px 0 14px; overflow-x: auto; }
.abas a { padding: 9px 14px; font: 500 10.5px var(--rot); letter-spacing: 1.1px; text-transform: uppercase; color: var(--suave); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.abas a[aria-current="page"] { color: var(--marinho); border-bottom-color: var(--rose); }
.abas a .c { color: var(--cobre); margin-left: 4px; }

input, select, textarea { font: 14.5px var(--corpo); color: var(--texto); background: #fff; border: 1px solid #D7D0C3; padding: 8px 10px; border-radius: 0; max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(197,148,128,.45); border-color: var(--rose); }
textarea { width: 100%; min-height: 110px; line-height: 1.5; }
label { display: grid; gap: 4px; font: 500 10px var(--rot); letter-spacing: 1.2px; text-transform: uppercase; color: var(--cobre); }
label input, label select, label textarea { text-transform: none; letter-spacing: 0; }
.form { display: grid; gap: 12px; }
.form .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form .g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.chk { display: flex; align-items: center; gap: 8px; font: 14px var(--corpo); letter-spacing: 0; text-transform: none; color: var(--texto); }
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 500 10.5px var(--rot); letter-spacing: 1.3px; text-transform: uppercase;
  padding: 10px 15px; border: 1px solid var(--marinho); background: var(--marinho); color: #fff; cursor: pointer; text-decoration: none; white-space: nowrap; }
.bt:hover { background: var(--noite); color: #fff; }
.bt.claro { background: #fff; color: var(--marinho); }
.bt.claro:hover { background: var(--marfim); color: var(--marinho); }
.bt.rose { background: var(--rose); border-color: var(--rose); color: var(--noite); }
.bt.perigo { background: #fff; color: var(--alerta); border-color: #E3B9A6; }
.bt.peq { padding: 6px 10px; font-size: 9.5px; }
.aviso { padding: 11px 14px; border: 1px solid #E8D49A; background: var(--aviso-f); color: #5E4A10; font-size: 14px; margin-bottom: 14px; }
.aviso.vermelho { border-color: #E3B9A6; background: var(--alerta-f); color: #6A2C16; }
.aviso.verde { border-color: #B8D3C0; background: var(--ok-f); color: #24523A; }
.teor { white-space: pre-wrap; font-size: 14.5px; line-height: 1.65; background: #fff; border: 1px solid var(--linha); padding: 16px 18px; max-height: 520px; overflow: auto; }
.ficha { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; font-size: 14px; }
.ficha dt { font: 500 9.5px var(--rot); letter-spacing: 1.1px; text-transform: uppercase; color: var(--cobre); padding-top: 3px; }
.ficha dd { margin: 0; }
.pad { padding: 14px 16px; }
.lateral { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.evento { padding: 9px 16px; border-bottom: 1px solid var(--marfim); font-size: 13.5px; }
.evento b { font-weight: 400; color: var(--marinho); }
details.mais summary { cursor: pointer; color: var(--cobre); font: 500 10px var(--rot); letter-spacing: 1.2px; text-transform: uppercase; padding: 8px 0; }

/* entrar */
.entrar { min-height: 100vh; display: grid; place-items: center; background: var(--marinho); padding: 20px; }
.entrar .card { background: var(--papel); width: 100%; max-width: 380px; padding: 30px 28px; }
.entrar .card img { height: 44px; display: block; margin: 0 auto 6px; }
.entrar h1 { text-align: center; font-size: 28px; }
.entrar p { text-align: center; }

/* celular */
.navm { display: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lado { display: none; }
  .barra { padding: 9px 14px; background: var(--marinho); border-bottom: 0; }
  .barra .topo-m { display: block; flex: none; }
  .barra .topo-m img { height: 26px; display: block; }
  .barra input { background: rgba(255,255,255,.95); }
  .corpo { padding: 16px 14px 96px; }
  .cartoes { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi .n { font-size: 28px; }
  .duas, .lateral { grid-template-columns: 1fr; }
  .form .g2, .form .g3 { grid-template-columns: 1fr; }
  h1 { font-size: 25px; }
  table.t { display: block; overflow-x: auto; }
  table.t th { position: static; }
  .esconde-m { display: none; }
  .ficha { grid-template-columns: 1fr; gap: 2px; }
  .ficha dd { margin-bottom: 8px; }
  .navm { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; background: #fff; border-top: 1px solid var(--linha); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .navm a { display: grid; justify-items: center; gap: 3px; padding: 8px 2px 9px; color: var(--suave); text-decoration: none; font: 500 8.5px var(--rot); letter-spacing: .3px; text-transform: uppercase; position: relative; }
  .navm a svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.6; }
  .navm a[aria-current="page"] { color: var(--marinho); box-shadow: inset 0 2px 0 var(--rose); }
  .navm .bola { position: absolute; top: 4px; right: 22%; background: var(--alerta); color: #fff; font: 500 9px var(--rot); padding: 1px 5px; border-radius: 9px; }
}

/* nada empurra a página para o lado: texto longo (teor, nomes, números) quebra dentro da caixa */
.lateral > div, .duas > div, .cont, .linha > div { min-width: 0; }
.linha .t, .linha .d, .teor, .evento, td, .ficha dd { overflow-wrap: anywhere; }
label input, label select, label textarea { width: 100%; }
select { max-width: 100%; text-overflow: ellipsis; }
.filtros > * { min-width: 0; max-width: 100%; }
.linha > div:last-child { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
@media (max-width: 900px) {
  .linha { grid-template-columns: auto 1fr; }
  .linha > div:last-child { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .filtros input, .filtros select { flex: 1 1 140px; }
}