/* Design system neo-brutalista (docs/STYLE_GUIDE.md do relatorio_automatico).
   Regras de ouro: borda preta, canto reto, sombra chapada, rótulos em caixa alta, cor chapada. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* As 3 cores da marca */
  --primary: #2563eb;
  --surface: #fffbeb;
  --success: #22c55e;
  /* Tons de apoio */
  --primary-light: #dbeafe;  /* blue-100 */
  --primary-dark: #1e40af;   /* blue-800 */
  --danger: #dc2626;
  --danger-light: #fee2e2;
  --success-light: #bbf7d0;  /* green-200 */
  --success-dark: #15803d;   /* green-700 */
  --ink: #000000;
  --muted: #4b5563;          /* gray-600 */
  --line: #e5e7eb;           /* gray-200 (divisores) */
  --panel: #ffffff;
  /* Compatibilidade com nomes antigos */
  --accent: var(--primary);
  --ok: var(--success-dark);
}

* { box-sizing: border-box; font-family: 'Space Grotesk', system-ui, sans-serif; }
body { margin: 0; background: var(--surface); color: var(--ink); font-size: 16px; min-height: 100vh; }
a { color: inherit; }
h1 { font-size: 26px; margin: 0 0 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
h2 { font-size: 16px; margin: 18px 0 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); }
code { font-family: Consolas, monospace; background: var(--primary-light); padding: 1px 4px; border: 1px solid var(--ink); }

/* Utilitárias brutalistas (valores do guia) */
.brutal-shadow { box-shadow: 4px 4px 0 #000; }
.brutal-shadow-sm { box-shadow: 3px 3px 0 #000; }
.brutal-shadow-lg { box-shadow: 6px 6px 0 #000; }
.brutal-card { border: 3px solid #000; box-shadow: 6px 6px 0 #000; }

/* Header */
.topbar { display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--primary);
  color: #fff; border-bottom: 4px solid #000; }
.topbar .brand { font-weight: 700; font-size: 24px; text-decoration: none; text-transform: uppercase; letter-spacing: -.01em; }
.topbar .brand span { color: #bfdbfe; }
.topbar a:not(.brand), .topbar > span:not(.user) { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; text-decoration: none; }
.topbar .spacer { flex: 1; }
.topbar .user { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; }
.topbar form { margin: 0; }
.topbar button { font-size: 14px; font-weight: 700; color: #fff; background: transparent; border: 2px solid #fff;
  padding: 5px 12px; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; border-radius: 0; transition: all .1s; }
.topbar button:hover { background: #fff; color: var(--primary); }

main { padding: 28px 32px 48px; width: 100%; margin: 0; }
main.wide { max-width: none; padding: 0; }

.panel { background: var(--panel); border: 3px solid #000; box-shadow: 6px 6px 0 #000; padding: 24px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 800px) { .grid2 { grid-template-columns: 1fr; } }

/* Botões: afundam no hover/clique */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 3px solid #000; border-radius: 0;
  box-shadow: 4px 4px 0 #000; background: #fff; color: #000; cursor: pointer; text-decoration: none;
  font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .05em; transition: all .1s; }
.btn:hover { box-shadow: 2px 2px 0 #000; transform: translate(2px, 2px); }
.btn:active { box-shadow: 0 0 0 #000; transform: translate(4px, 4px); }
.btn.primary { background: var(--primary); color: #fff; }
.btn.danger { background: #fff; color: var(--danger); }
.btn.small { padding: 6px 11px; font-size: 13px; border-width: 2px; box-shadow: 3px 3px 0 #000; }
.btn.small:hover { box-shadow: 1px 1px 0 #000; transform: translate(2px, 2px); }
.btn.small:active { box-shadow: 0 0 0 #000; transform: translate(3px, 3px); }
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* Tabelas */
table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--line); }
table.list th { font-size: 13px; color: #000; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 3px solid #000; }
table.list tr:hover td { background: var(--surface); }

/* Formulários */
form.stack p { margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
form.stack label { font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .03em; }
form.stack .helptext { color: var(--muted); font-size: 14px; font-weight: 500; }
input[type=text], input[type=search], input[type=password], input[type=number], input[type=date], input[type=url],
select, textarea {
  font-size: 16px; padding: 9px 12px; border: 2px solid #000; border-radius: 0; background: #fff; width: 100%;
  box-shadow: 3px 3px 0 #000; transition: all .1s; color: #000; }
input:focus, select:focus, textarea:focus { box-shadow: 1px 1px 0 #000; transform: translate(2px, 2px);
  outline: none; border-color: var(--primary); }
input[type=file] { font-size: 15px; }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); width: 16px; height: 16px; }
textarea { min-height: 60px; }

/* Mensagens (callouts) */
.messages { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.messages li { padding: 12px 16px; background: var(--primary-light); color: var(--primary-dark); font-weight: 600;
  border: 3px solid #000; box-shadow: 3px 3px 0 #000; }
.messages li.success { background: var(--success-light); color: var(--success-dark); }
.messages li.error { background: var(--danger-light); color: var(--danger); }

.muted { color: var(--muted); }
.error-text { color: var(--danger); font-weight: 600; }
.ok-text { color: var(--success-dark); font-weight: 600; }
.grid2 { align-items: start; }
.btn { white-space: nowrap; }
.row > input[type=search] { flex: 1; width: auto; min-width: 160px; }
input[type=file]::file-selector-button { font: inherit; font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 6px 12px; margin-right: 10px; background: #fff; color: #000; border: 2px solid #000;
  border-radius: 0; box-shadow: 3px 3px 0 #000; cursor: pointer; transition: all .1s; }
input[type=file]::file-selector-button:hover { box-shadow: 1px 1px 0 #000; transform: translate(2px, 2px); }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
/* Formulários estreitos ficam centralizados na página larga */
.panel.narrow { max-width: 760px; margin: 0 auto; }

/* ---------- Responsivo ---------- */
.grid2 > * { min-width: 0; }
.panel { overflow-x: auto; }            /* tabelas largas rolam dentro do quadro, não a página */
.row > input[type=search] { min-width: 0; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.page-head h1 { margin-bottom: 8px; }
.path-note { overflow-wrap: anywhere; }

@media (max-width: 800px) {
  main { padding: 16px 14px 32px; }
  .panel { padding: 16px; box-shadow: 4px 4px 0 #000; }
  .panel.narrow { margin-top: 0 !important; }
  h1 { font-size: 18px; }
  .topbar { padding: 8px 14px; gap: 10px; }
  .topbar .brand { font-size: 17px; }
  .topbar .user { display: none; }
  .hide-sm { display: none; }
  .btn { padding: 7px 12px; font-size: 12px; }
  table.list th, table.list td { padding: 7px 6px; }
}