/* ============================================================
   COTALY FLOWS — main.css
   Paleta: preto / branco / cinza. Zero border-radius.
   Inter + JetBrains Mono.
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ── Tokens de tema ──────────────────────────────────────── */
:root {
  --bg:       #ffffff;
  --panel:    #ffffff;
  --ink:      #111827;
  --soft:     #52525b;
  --muted:    #9ca3af;
  --border:   rgba(17,24,39,.10);
  --chip:     #ededed;
  --shadow:   rgba(17,24,39,.13);
  --overlay:  rgba(17,24,39,.50);
  --scroll:   #d4d4d4;
}
[data-theme="dark"] {
  --bg:       #0b0c0e;
  --panel:    #17181b;
  --ink:      #f4f4f5;
  --soft:     #a1a1aa;
  --muted:    #71717a;
  --border:   rgba(255,255,255,.10);
  --chip:     #27272a;
  --shadow:   rgba(0,0,0,.55);
  --overlay:  rgba(0,0,0,.65);
  --scroll:   #3a3a3d;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  transition: background .15s, color .15s;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; color: inherit; background: none; border: none; }
input, textarea, select {
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  outline: none;
  border-radius: 0;
}
input:focus, textarea:focus, select:focus { border-color: var(--ink); }
select { -webkit-appearance: none; appearance: none; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--scroll); }

/* ── Tipografia util ─────────────────────────────────────── */
.mono { font-family: 'JetBrains Mono', monospace; }
.label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   AUTH PAGE  (index.html)
============================================================ */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px;
}
.auth-box {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  background: var(--panel);
}
.auth-brand {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.auth-brand-main {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.01em;
}
.auth-brand-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--soft);
  letter-spacing: .04em;
}
.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}
.auth-tab {
  flex: 1;
  padding: 12px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .1s;
}
.auth-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.auth-form { padding: 20px 24px 24px; display: none; flex-direction: column; gap: 14px; }
.auth-form.active { display: flex; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.field input,
.field select { width: 100%; padding: 9px 10px; font-size: 13.5px; }
.field select-wrap { position: relative; }
.select-wrap { position: relative; }
.select-wrap select { width: 100%; padding: 9px 30px 9px 10px; font-size: 13.5px; }
.select-wrap::after {
  content: '▾';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
  font-size: 12px;
}
.btn-primary {
  width: 100%;
  padding: 11px;
  background: var(--ink);
  color: var(--bg);
  border: none;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .03em;
  margin-top: 4px;
}
.btn-primary:disabled { background: var(--chip); color: var(--muted); cursor: not-allowed; }
.auth-msg {
  font-size: 12.5px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  display: none;
}
.auth-msg.error { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.auth-msg.success { border-color: var(--ink); }
.auth-msg.visible { display: block; }
.auth-footer {
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--muted);
  text-align: center;
}

/* ============================================================
   APP HEADER
============================================================ */
.app-header {
  background: var(--panel);
  border-bottom: 1px solid var(--ink);
  padding: 0 20px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-brand { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
.header-brand-main { font-weight: 800; font-size: 19px; letter-spacing: -.01em; }
.header-brand-sub { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--soft); letter-spacing: .04em; }
.header-muni {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}
.header-muni span { color: var(--soft); font-weight: 700; }
.header-stats { display: flex; gap: 14px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.header-stat { color: var(--soft); }
.header-stat.warn { color: var(--ink); font-weight: 700; }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.btn-icon {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.btn-sm {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--soft);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.btn-sm.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-sm:hover { border-color: var(--ink); color: var(--ink); }
.btn-new {
  height: 32px;
  padding: 0 14px;
  background: var(--ink);
  color: var(--bg);
  border: none;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ============================================================
   WORKLOAD CHART
============================================================ */
.chart-area {
  background: var(--panel);
  border: 1px solid var(--border);
  margin: 14px 20px 4px;
  padding: 14px 16px 12px;
}
.chart-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.chart-title-sub { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); }
.chart-canvas-wrap { position: relative; }

/* ============================================================
   KANBAN BOARD
============================================================ */
.board-wrap {
  padding: 12px 20px 60px;
  overflow-x: auto;
}
.board {
  display: flex;
  gap: 14px;
  min-width: max-content;
}
.column {
  width: 272px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border: 1px dashed transparent;
  transition: background .12s, border-color .12s;
}
.column.drag-over {
  background: var(--chip);
  border-color: var(--ink);
}
.col-header { padding: 2px 4px 10px; }
.col-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px;
}
.col-index { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); }
.col-icon { font-size: 13px; flex-shrink: 0; }
.col-name { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .01em; }
.col-count {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 1px 6px;
  min-width: 20px;
  text-align: center;
}
.col-blurb { font-size: 11px; color: var(--muted); font-style: italic; padding-left: 20px; }
.col-cards {
  flex: 1;
  overflow-y: auto;
  padding: 2px;
  min-height: 80px;
}
.btn-add-card {
  width: 100%;
  border: 1px dashed var(--border);
  background: transparent;
  padding: 8px 0;
  color: var(--muted);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 4px;
}
.btn-add-card:hover { color: var(--ink); border-color: var(--ink); }

/* ── Card ──────────────────────────────────────────────────── */
.task-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left-width: 3px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: grab;
  user-select: none;
  transition: box-shadow .1s;
}
.task-card:hover { box-shadow: 2px 2px 0 var(--shadow); }
.task-card.stamped {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.card-code { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); letter-spacing: .03em; }
.task-card.stamped .card-code,
.task-card.stamped .card-date,
.task-card.stamped .card-chip { color: rgba(255,255,255,.7); }
.card-title { font-size: 14px; font-weight: 600; line-height: 1.3; margin: 5px 0 7px; }
.card-chip {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--soft);
  margin-bottom: 7px;
}
.task-card.stamped .card-chip { background: transparent; border-color: rgba(255,255,255,.3); }
.card-footer { display: flex; align-items: center; justify-content: space-between; }
.card-avatars { display: flex; align-items: center; }
.avatar {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -.01em;
}
.avatar + .avatar { margin-left: -6px; }
.avatar.faded { border: 1px solid var(--border); background: var(--chip); color: var(--ink); }
.avatar.avatar-photo { object-fit: cover; }
.card-date { display: flex; align-items: center; gap: 4px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--soft); }
.card-stamp-label { display: flex; align-items: center; gap: 4px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; color: rgba(255,255,255,.9); }
.card-log-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--muted);
}
.task-card.stamped .card-log-badge { border-top-color: rgba(255,255,255,.2); color: rgba(255,255,255,.6); }

/* ============================================================
   MODAL (Task)
============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 16px;
}
.overlay.open { display: flex; }
.modal {
  background: var(--panel);
  width: 480px;
  max-width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  border: 1px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  display: flex;
  flex-direction: column;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-codigo { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); }
.modal-close { background: none; border: none; font-size: 18px; color: var(--ink); line-height: 1; }
.modal-body { padding: 18px; flex: 1; overflow-y: auto; }
.modal-row { display: flex; gap: 12px; }
.modal-row .field { flex: 1; }
.modal-field-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.modal input,
.modal textarea,
.modal select { width: 100%; padding: 8px 10px; font-size: 13.5px; }
.modal textarea { resize: vertical; font-family: 'Inter', sans-serif; }
.collab-row { display: flex; gap: 6px; margin-bottom: 8px; }
.collab-row input { flex: 1; }
.btn-collab-add { padding: 0 12px; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); font-size: 16px; line-height: 1; }
.collab-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.collab-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 4px 8px;
  font-size: 12.5px;
}
.collab-chip-del { background: none; border: none; color: var(--muted); font-size: 14px; line-height: 1; }
.modal-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
.btn-delete { background: none; border: none; font-size: 12.5px; text-decoration: underline; display: flex; align-items: center; gap: 5px; }
.btn-save {
  padding: 9px 22px;
  background: var(--ink);
  color: var(--bg);
  border: none;
  font-size: 13px;
  font-weight: 700;
}
.btn-save:disabled { background: var(--chip); color: var(--muted); }

/* ── Log section ────────────────────────────────────────── */
.log-input-row { display: flex; gap: 6px; margin-bottom: 10px; }
.log-input-row textarea { flex: 1; min-height: 40px; font-size: 13px; }
.btn-log-send {
  padding: 0 12px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  font-size: 14px;
  align-self: stretch;
}
.btn-log-send:disabled { background: var(--chip); color: var(--muted); border-color: var(--chip); }
.log-list { border: 1px solid var(--border); max-height: 200px; overflow-y: auto; }
.log-entry {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.log-entry:last-child { border-bottom: none; }
.log-meta { flex: 1; min-width: 0; }
.log-meta-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.log-author { font-weight: 600; font-size: 12.5px; }
.log-date { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.log-text { font-size: 12.5px; color: var(--soft); line-height: 1.4; word-break: break-word; }
.log-del { background: none; border: none; color: var(--muted); font-size: 14px; align-self: flex-start; margin-top: 2px; }
.log-empty { font-size: 12px; color: var(--muted); font-style: italic; }

/* ============================================================
   REPORT MODAL
============================================================ */
.report-modal {
  background: var(--panel);
  width: 620px;
  max-width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  border: 1px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
}
.report-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.report-body { padding: 20px 18px; }
.report-title { font-weight: 800; font-size: 18px; margin-bottom: 4px; }
.report-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); }
.report-section { margin-bottom: 20px; }
.report-section-title { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.report-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.report-stat { border: 1px solid var(--border); border-left-width: 3px; padding: 8px 10px; }
.report-stat.stamped { background: var(--ink); color: var(--bg); }
.report-stat-num { font-size: 22px; font-weight: 800; }
.report-stat-name { font-size: 11px; opacity: .8; margin-top: 2px; }
.report-people { }
.report-person { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.report-person-name { flex: 1; font-size: 13px; }
.report-person-count { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--soft); }
.report-overdue-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 8px;
  background: var(--ink);
  color: var(--bg);
  margin-bottom: 4px;
  font-size: 13px;
}
.report-overdue-date { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; }
.report-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.btn-report-csv { display: flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--bg); color: var(--ink); padding: 8px 14px; font-size: 12.5px; }
.btn-report-print { display: flex; align-items: center; gap: 5px; border: none; background: var(--ink); color: var(--bg); padding: 8px 14px; font-size: 12.5px; font-weight: 700; }

/* ============================================================
   PRINT
============================================================ */
@media print {
  body * { visibility: hidden; }
  #report-modal, #report-modal * { visibility: visible; }
  #report-modal { position: fixed; inset: 0; border: none !important; box-shadow: none !important; max-height: none !important; }
  .no-print { display: none !important; }
}

/* ============================================================
   MISC
============================================================ */
.divider { height: 1px; background: var(--border); margin: 14px 0; }
.empty-log { font-size: 12px; color: var(--muted); font-style: italic; }

/* ============================================================
   VIEW TABS
============================================================ */
.view-tabs {
  display: flex;
  gap: 2px;
  padding: 0 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.view-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.view-tab:hover { color: var(--ink); }
.view-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.view-panel { min-height: 40vh; }

/* ============================================================
   CARD — barra de progresso
============================================================ */
.card-progress-track {
  height: 3px;
  background: var(--chip);
  margin-bottom: 8px;
  overflow: hidden;
}
.card-progress-fill { height: 100%; background: var(--ink); }

/* ============================================================
   MODAL — versão larga (com documentos/atividade)
============================================================ */
.modal-wide { width: 560px; }

/* ============================================================
   CRONOGRAMA (Gantt)
============================================================ */
.gantt-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.gantt-scale-wrap { width: 120px; }
.gantt-scale-wrap select { width: 100%; padding: 6px 26px 6px 8px; font-size: 12.5px; height: 30px; }
.gantt-toolbar input[type="range"] { width: 120px; accent-color: var(--ink); }
.gantt-zoom-value { font-size: 11px; color: var(--soft); min-width: 36px; }

.gantt-wrap { padding: 16px 20px 40px; }
.gantt-scroll { overflow-x: auto; border: 1px solid var(--border); }
.gantt-inner { position: relative; min-width: max-content; }

.gantt-today-col {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(17,24,39,.07);
  border-left: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  pointer-events: none;
  z-index: 1;
}
[data-theme="dark"] .gantt-today-col { background: rgba(255,255,255,.08); }

.gantt-header {
  display: flex;
  background: var(--panel);
  border-bottom: 1px solid var(--ink);
  position: sticky;
  top: 0;
  z-index: 2;
}
.gantt-header-label {
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--panel);
  position: sticky;
  left: 0;
  z-index: 3;
}
.gantt-header-grid { position: relative; }
.gantt-months { display: flex; }
.gantt-month {
  flex-shrink: 0;
  padding: 5px 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--soft);
  border-right: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
}
.gantt-month-big { font-size: 12px; padding: 10px 8px; }
.gantt-days, .gantt-months + .gantt-days { display: flex; }
.gantt-day {
  flex-shrink: 0;
  width: 30px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  padding: 4px 0;
  border-right: 1px solid var(--border);
}
.gantt-day.weekend { background: var(--chip); }
.gantt-week {
  flex-shrink: 0;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--muted);
  padding: 4px 0;
  border-right: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
}

.gantt-body { position: relative; }
.gantt-row { display: flex; border-bottom: 1px solid var(--border); }
.gantt-row:hover { background: var(--chip); }
.gantt-row-label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-right: 1px solid var(--border);
  background: var(--panel);
  position: sticky;
  left: 0;
  z-index: 1;
}
.gantt-row-avatars { display: flex; align-items: center; flex-shrink: 0; }
.gantt-row-text { min-width: 0; }
.gantt-row-title { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-row-sub { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-row-track { position: relative; flex-shrink: 0; }
.gantt-gridcol { position: absolute; top: 0; bottom: 0; flex-shrink: 0; display: inline-block; border-right: 1px solid var(--border); }
.gantt-gridcol.weekend { background: rgba(17,24,39,.035); }
[data-theme="dark"] .gantt-gridcol.weekend { background: rgba(255,255,255,.03); }

.gantt-bar {
  position: absolute;
  top: 8px;
  height: 22px;
  background: var(--panel);
  border: 2px solid #52525b;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 2;
}
.gantt-bar-fill { position: absolute; inset: 0; opacity: .35; }
.gantt-bar-label {
  position: relative;
  z-index: 1;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 6px;
  color: var(--ink);
}
.gantt-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}

/* ============================================================
   MINHA ÁREA
============================================================ */
.myarea-wrap { padding: 20px; max-width: 760px; margin: 0 auto; }
.myarea-header { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.myarea-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.myarea-avatar-wrap .avatar { width: 64px; height: 64px; font-size: 20px; }
.myarea-header-info { display: flex; flex-direction: column; gap: 3px; }
.myarea-name { font-size: 19px; font-weight: 800; }
.myarea-email { font-size: 11.5px; color: var(--muted); }
.myarea-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 8px; }
.myarea-stat { border: 1px solid var(--border); border-left-width: 3px; border-left-color: var(--ink); padding: 10px 12px; }
.myarea-stat.warn { border-left-color: var(--soft); }
.myarea-stat-num { font-size: 22px; font-weight: 800; }
.myarea-stat-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
.myarea-task-list { border: 1px solid var(--border); }
.myarea-task {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.myarea-task:last-child { border-bottom: none; }
.myarea-task:hover { background: var(--chip); }
.myarea-task-main { flex: 1; min-width: 0; }
.myarea-task-title { font-size: 13px; font-weight: 600; }
.myarea-task-sub { font-size: 10.5px; color: var(--muted); }
.myarea-task-progress { display: flex; align-items: center; gap: 6px; width: 100px; flex-shrink: 0; }
.myarea-progress-bar { flex: 1; height: 4px; background: var(--chip); }
.myarea-progress-fill { height: 100%; background: var(--ink); }
.myarea-task-prazo { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--soft); width: 60px; text-align: right; flex-shrink: 0; }
.myarea-activity { border: 1px solid var(--border); }

/* ============================================================
   ATIVIDADE (log automático)
============================================================ */
.activity-list, .myarea-activity {}
.activity-entry {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.activity-entry:last-child { border-bottom: none; }
.activity-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--soft);
  margin-top: 5px;
  flex-shrink: 0;
}
.activity-body { flex: 1; min-width: 0; }
.activity-row { display: flex; justify-content: space-between; gap: 8px; }
.activity-autor { font-size: 12px; font-weight: 600; }
.activity-date { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); white-space: nowrap; }
.activity-acao { font-size: 12px; color: var(--soft); margin-top: 1px; }

/* ============================================================
   DOCUMENTOS (dentro do modal do serviço)
============================================================ */
.doc-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.doc-folder-input { flex: 1; min-width: 100px; padding: 6px 8px; font-size: 12.5px; height: 32px; }
.doc-share-out {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--chip);
  font-size: 11.5px;
  margin-bottom: 10px;
  word-break: break-all;
}
.doc-list { border: 1px solid var(--border); }
.doc-folder { border-bottom: 1px solid var(--border); }
.doc-folder-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--chip);
}
.doc-folder-name { flex: 1; font-size: 12.5px; font-weight: 600; }
.doc-folder-count { font-size: 10.5px; color: var(--muted); }
.doc-folder-btn {
  width: 24px; height: 24px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--soft);
  font-size: 12px;
  flex-shrink: 0;
}
.doc-folder-btn:hover { border-color: var(--ink); color: var(--ink); }
.doc-folder-btn-del:hover { color: var(--ink); border-color: var(--ink); }
.doc-folder-body { padding: 2px 0; }
.doc-root { padding: 2px 0; }
.doc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.doc-folder-body .doc-row:last-child,
.doc-root .doc-row:last-child { border-bottom: none; }
.doc-icon { font-size: 15px; flex-shrink: 0; }
.doc-meta { flex: 1; min-width: 0; }
.doc-name { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-sub { font-size: 10.5px; color: var(--muted); }
.doc-btn-download, .doc-btn-delete {
  width: 24px; height: 24px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--soft);
  font-size: 12px;
  flex-shrink: 0;
}
.doc-btn-download:hover, .doc-btn-delete:hover { border-color: var(--ink); color: var(--ink); }

/* ── Ícone de pasta desenhado em CSS (sem emoji) ── */
.doc-folder-icon {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 12px;
  background: var(--soft);
  flex-shrink: 0;
}
.doc-folder-icon::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 8px;
  height: 3px;
  background: var(--soft);
}
.doc-folder-icon::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 3px;
  height: 1px;
  background: var(--bg);
  opacity: .5;
}

/* ============================================================
   BOX — explorer de arquivos entre projetos
============================================================ */
.box-wrap { padding: 20px; }
.box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.box-title { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; }
.box-title-sub { font-size: 12px; font-weight: 400; color: var(--muted); }
.box-breadcrumb { display: flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.box-crumb { background: none; border: none; color: var(--soft); text-decoration: underline; padding: 0; }
.box-crumb:hover { color: var(--ink); }
.box-crumb-current { color: var(--ink); font-weight: 700; }
.box-crumb-sep { color: var(--muted); }

.box-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.box-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 16px 0 8px;
}
.box-section-label:first-of-type { margin-top: 0; }
.box-empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13px; font-style: italic; }

.box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.box-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 10px 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  text-align: center;
  transition: box-shadow .1s, border-color .1s;
}
.box-tile:hover { border-color: var(--ink); box-shadow: 2px 2px 0 var(--shadow); }
.box-tile-name { font-size: 12.5px; font-weight: 600; line-height: 1.25; word-break: break-word; }
.box-tile-sub { font-size: 10px; color: var(--muted); }
.box-tile-count { font-size: 10px; color: var(--soft); margin-top: 2px; }
.box-file-list { border: 1px solid var(--border); }
.box-file-list .doc-row:last-child { border-bottom: none; }

/* ── Ícone de pasta desenhado em CSS — versão grande (tiles) ── */
.box-folder-icon-lg {
  position: relative;
  display: block;
  width: 42px;
  height: 32px;
  background: var(--soft);
  margin-bottom: 4px;
}
.box-folder-icon-lg::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  width: 20px;
  height: 8px;
  background: var(--soft);
}
.box-folder-icon-lg::after {
  content: '';
  position: absolute;
  left: 3px; right: 3px; top: 8px; bottom: 3px;
  background: var(--bg);
  opacity: .16;
}

/* ── Ícone de pasta — versão mini (aba de navegação) ── */
.box-folder-icon-tab {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 10px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 2px;
  opacity: .85;
}
.box-folder-icon-tab::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 3px;
  background: currentColor;
  opacity: .85;
}

/* ============================================================
   PÁGINA PÚBLICA — compartilhado.html
============================================================ */
.shared-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 16px 60px;
}
.shared-brand {
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 18px;
}
.shared-card {
  border: 1px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  background: var(--panel);
  padding: 22px 22px 26px;
}
.shared-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.shared-muni { font-size: 11px; color: var(--muted); }
.shared-title { font-size: 22px; font-weight: 800; margin: 6px 0 10px; }
.shared-meta { display: flex; gap: 24px; flex-wrap: wrap; margin: 14px 0; }
.shared-people { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.shared-people-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.shared-desc { font-size: 13px; color: var(--soft); line-height: 1.5; }
.shared-error {
  max-width: 480px;
  margin: 60px auto;
  padding: 16px;
  border: 1px solid var(--ink);
  text-align: center;
  font-size: 13px;
  color: var(--soft);
}