/* JurisBR — padrão visual SOSSAI (Inteligência & Tecnologia).
   Tokens centralizados em :root; os componentes usam só os tokens. Sem JavaScript (CSP script-src 'none'). */
:root {
  /* Marca */
  --green: #22C55E; --green-600: #16A34A; --green-2: #065F46; --green-deep: #031D14; --green-soft: #DCFCE7;
  /* Superfícies e texto */
  --bg: #F7FAF9; --bg-alt: #F1F5F3; --surface: #FFFFFF; --border: #E2E8E5;
  --text: #172B24; --text-2: #64748B; --on-dark: #CFE3DA; --on-dark-muted: #8FB3A3;
  /* Estados (só para o estado correspondente) */
  --success: #16A34A; --warning: #D97706; --danger: #DC2626; --info: #2563EB;
  --success-bg: #F0FDF4; --warning-bg: #FFFBEB; --danger-bg: #FEF2F2; --info-bg: #EFF6FF;
  /* Tipografia */
  --font: Inter, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 28px;
  /* Espaçamento, raios, sombras */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
  --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-pill: 999px;
  --shadow: 0 1px 2px rgba(3, 29, 20, .06);
  --focus: 0 0 0 3px rgba(34, 197, 94, .35);
  --sidebar: 240px; --control-h: 40px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--fs)/1.5 var(--font); color: var(--text); background: var(--bg); }
a { color: var(--green-2); }
a:hover { color: var(--green-deep); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Estrutura ---------- */
.app { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }
.sidebar { background: var(--green-deep); color: var(--on-dark); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: var(--s3); padding: var(--s5) var(--s5) var(--s4); color: #fff; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; border-radius: var(--r); background: var(--green); color: var(--green-deep); display: grid; place-items: center; }
.brand-mark .icon { width: 20px; height: 20px; }
.brand-name { font-size: var(--fs-md); font-weight: 600; letter-spacing: .2px; color: #fff; }
.brand-sub { display: block; font-size: var(--fs-xs); color: var(--on-dark-muted); font-weight: 400; }
.nav { display: flex; flex-direction: column; gap: 2px; padding: var(--s2) var(--s3); flex: 1; }
.nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--on-dark-muted); padding: var(--s4) var(--s3) var(--s1); }
.nav a, .nav .navbtn { display: flex; align-items: center; justify-content: flex-start; font-weight: 400; gap: var(--s3); padding: 9px var(--s3); border-radius: var(--r); color: var(--on-dark); text-decoration: none; font: inherit; background: none; border: 0; width: 100%; text-align: left; cursor: pointer; min-height: 40px; transition: background-color .15s, color .15s; }
.nav a:hover, .nav .navbtn:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav a[aria-current="page"] { background: rgba(34, 197, 94, .14); color: #fff; box-shadow: inset 3px 0 0 var(--green); }
.nav a[aria-current="page"] .icon { color: var(--green); }
.nav form { margin: 0; }
.sidebar-foot { padding: var(--s3) var(--s3) var(--s4); border-top: 1px solid rgba(255, 255, 255, .08); }
.user-chip { padding: var(--s2) var(--s3); font-size: var(--fs-sm); color: var(--on-dark-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip b { display: block; color: #fff; font-weight: 500; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: var(--s3); padding: var(--s5) var(--s8) 0; }
.page-title { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--text); }
.content { padding: var(--s5) var(--s8) var(--s8); flex: 1; max-width: 1280px; width: 100%; }
.footer { padding: var(--s4) var(--s8); color: var(--text-2); font-size: var(--fs-xs); border-top: 1px solid var(--border); background: var(--surface); }

/* Menu do celular: checkbox + label (sem JavaScript). */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.menu-btn { display: none; }

/* ---------- Cartões ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s5); margin-bottom: var(--s4); box-shadow: var(--shadow); overflow-x: auto; }
.card > b:first-child, details.card > summary { font-weight: 600; }
details.card > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s2); color: var(--text); }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(-45deg); transition: transform .15s; margin-right: 4px; }
details.card[open] > summary::before { transform: rotate(45deg); }
details.card[open] > summary { margin-bottom: var(--s4); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s4); }
.grid .card { margin: 0; text-decoration: none; color: var(--text); transition: border-color .15s; }
.grid a.card:hover { border-color: var(--green); }
.big { font-size: var(--fs-xl); font-weight: 600; display: block; line-height: 1.2; color: var(--text); margin-bottom: var(--s1); }
.big.late { color: var(--danger); }

/* ---------- Tabelas ---------- */
table { width: 100%; border-collapse: collapse; font-size: var(--fs); }
th { text-align: left; font-weight: 600; font-size: var(--fs-sm); color: var(--text-2); background: var(--bg-alt); padding: 10px var(--s3); border-bottom: 1px solid var(--border); white-space: nowrap; }
td { text-align: left; padding: 10px var(--s3); border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td, table tr:hover td { background: #FAFCFB; }
.card > table, .card form > table { margin-top: var(--s2); }
td.err { color: var(--danger); } td.ok { color: var(--success); }

/* ---------- Formulários ---------- */
input, select, textarea { font: inherit; color: var(--text); background: var(--surface); width: 100%; min-height: var(--control-h); padding: 8px var(--s3); border: 1px solid var(--border); border-radius: var(--r); margin: var(--s1) 0 var(--s3); transition: border-color .15s, box-shadow .15s; }
textarea { min-height: 80px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: #C9D5CF; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: var(--focus); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; accent-color: var(--green-600); }
input[type="file"] { padding: 6px; }
label { color: var(--text); font-size: var(--fs-sm); font-weight: 500; }
form { font-size: var(--fs-sm); }
.filters { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: flex-end; }
.filters label { flex: 1; min-width: 170px; }
.filters button { margin-bottom: var(--s3); }

/* ---------- Botões ---------- */
button { font: inherit; font-weight: 500; font-size: var(--fs-sm); display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--control-h); padding: 8px var(--s4); border-radius: var(--r); cursor: pointer;
  /* primário: verde institucional com texto escuro (contraste alto) */
  background: var(--green); color: var(--green-deep); border: 1px solid var(--green); transition: background-color .15s, border-color .15s, color .15s; }
button:hover { background: var(--green-600); border-color: var(--green-600); color: #fff; }
button:disabled { opacity: .5; cursor: not-allowed; }
button.sec { background: var(--surface); color: var(--text); border-color: var(--border); }
button.sec:hover { background: var(--bg-alt); border-color: #C9D5CF; color: var(--text); }
button.danger { background: var(--surface); color: var(--danger); border-color: #F3C6C6; }
button.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
button.sm { min-height: 32px; padding: 4px var(--s3); font-size: var(--fs-xs); }
.actions { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.actions form { display: flex; gap: var(--s2); align-items: center; margin: 0; flex-wrap: wrap; }
.actions input { margin: 0; min-width: 240px; width: auto; }
.row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.row form { display: flex; gap: var(--s2); align-items: center; margin: 0; }
.row input, .row select { margin: 0; width: auto; min-height: 32px; padding: 4px var(--s2); }

/* ---------- Abas, selos, mensagens ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0 0 var(--s4); padding-bottom: var(--s2); border-bottom: 1px solid var(--border); }
.tabs a { display: inline-block; padding: 6px var(--s3); border-radius: var(--r); text-decoration: none; color: var(--text-2); font-weight: 500; font-size: var(--fs-sm); }
.tabs a:hover { background: var(--bg-alt); color: var(--text); }
.tabs a.on { background: var(--green-soft); color: var(--green-2); }
.tag { display: inline-block; padding: 1px var(--s2); border-radius: var(--r-pill); background: var(--bg-alt); color: var(--text); font-size: var(--fs-xs); font-weight: 500; border: 1px solid var(--border); white-space: nowrap; }
.tag.err { background: var(--danger-bg); color: var(--danger); border-color: #F3C6C6; }
.muted { color: var(--text-2); }
.late { color: var(--danger); font-weight: 600; }
.ok { color: var(--success); } .err { color: var(--danger); }
/* Mensagens de retorno (parágrafos .ok/.err/.warn): caixa com faixa lateral. */
p.ok, p.err, p.warn { padding: var(--s3) var(--s4); border-radius: var(--r); border: 1px solid; border-left-width: 4px; margin: 0 0 var(--s4); font-size: var(--fs-sm); color: var(--text); }
p.ok { background: var(--success-bg); border-color: #BBF7D0; border-left-color: var(--success); }
p.err { background: var(--danger-bg); border-color: #FECACA; border-left-color: var(--danger); }
p.warn, .warn { background: var(--warning-bg); border-color: #FDE68A; border-left-color: var(--warning); }
.pub { white-space: normal; line-height: 1.6; overflow-wrap: anywhere; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin: var(--s4) 0 0; font-size: var(--fs-sm); }
.pager a, .pager .cur, .pager .off, .pager .gap { min-width: 34px; height: 34px; padding: 0 var(--s2); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r); text-decoration: none; }
.pager a { color: var(--text); border: 1px solid var(--border); background: var(--surface); font-weight: 500; transition: border-color .15s, background-color .15s; }
.pager a:hover { border-color: var(--green); background: var(--green-soft); color: var(--green-2); }
.pager .cur { background: var(--green); color: var(--green-deep); font-weight: 600; border: 1px solid var(--green); }
.pager .off { color: #A3B1AA; border: 1px solid var(--border); }
.pager .gap { color: var(--text-2); min-width: 20px; padding: 0; }
.pager-info { margin-left: auto; }
.back { margin: 0 0 var(--s3); }
.back a { display: inline-flex; align-items: center; gap: var(--s1); text-decoration: none; font-weight: 500; font-size: var(--fs-sm); color: var(--green-2); padding: 6px var(--s2) 6px var(--s1); border-radius: var(--r); }
.back a:hover { background: var(--green-soft); }
ul { padding-left: var(--s5); }

/* ---------- Login ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: var(--s6) var(--s4); background: var(--bg); }
.auth-box { width: 100%; max-width: 400px; }
.auth .brand { justify-content: center; color: var(--text); padding: 0 0 var(--s6); }
.auth .brand-name { color: var(--text); font-size: var(--fs-lg); }
.auth .brand-sub { color: var(--text-2); }
.auth .card { padding: var(--s6); }
.auth .card button { width: 100%; margin-top: var(--s2); }
.auth .page-title { font-size: var(--fs-md); margin-bottom: var(--s4); }
.auth-foot { text-align: center; color: var(--text-2); font-size: var(--fs-xs); margin-top: var(--s5); }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 0; z-index: 10; height: auto; overflow: visible; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .brand { padding: var(--s3) var(--s4); flex: 1; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: var(--s2); border-radius: var(--r); color: #fff; cursor: pointer; }
  .menu-btn:hover { background: rgba(255, 255, 255, .08); }
  .nav, .sidebar-foot { display: none; width: 100%; flex-basis: 100%; }
  .nav-toggle:checked ~ .nav, .nav-toggle:checked ~ .sidebar-foot, .nav-toggle:checked ~ .sidebar-foot .nav { display: flex; flex-direction: column; }
  .nav-toggle:focus-visible + .brand + .menu-btn { box-shadow: var(--focus); }
  .topbar { padding: var(--s4) var(--s4) 0; }
  .content { padding: var(--s4); }
  .footer { padding: var(--s4); }
  .card { padding: var(--s4); }
  .actions input { min-width: 0; width: 100%; }
  .filters label { min-width: 100%; }
  th, td { padding: var(--s2); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
@media print { .sidebar, .footer, .menu-btn, button { display: none !important; } .app { display: block; } .card { box-shadow: none; } }