/* ── Tatuadores ────────────────────────────────────────────────────────── */
.page-header { align-items: flex-end; }
.stats { grid-template-columns: repeat(3, 1fr); }

.list-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.list-head-row { background: var(--surface2); border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 36px 1fr 80px 80px 100px 130px; align-items: center; gap: 16px; padding: 9px 20px; }
.list-head-row span { font-size: 11px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.list-head-row span:nth-child(3),
.list-head-row span:nth-child(4),
.list-head-row span:nth-child(5) { text-align: center; }
.list-row { background: var(--surface); border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 36px 1fr 80px 80px 100px 130px; align-items: center; gap: 16px; padding: 13px 20px; transition: background .1s; }
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: var(--surface2); }

.l-avatar { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; font-weight: 500; flex-shrink: 0; }
.l-info .l-name { font-size: 14px; font-weight: 500; }
.l-info .l-ig { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 1px; }
.l-pct { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--green); text-align: center; }
.l-pct.na { color: var(--muted2); font-family: var(--sans); font-style: italic; font-size: 12px; font-weight: 400; }
.l-fixo { font-family: var(--mono); font-size: 13px; font-weight: 500; color: #1a5fa8; text-align: center; }
.l-fixo.na { color: var(--muted2); font-family: var(--sans); font-style: italic; font-size: 12px; font-weight: 400; }
.l-data { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: center; }
.l-actions { display: flex; gap: 6px; justify-content: flex-end; }
.empty-list { text-align: center; padding: 48px 24px; color: var(--muted); background: var(--surface); }
.empty-grid { text-align: center; padding: 64px 24px; color: var(--muted); }

/* Avatar palette (fallback classes) */
.av0{background:#ede9fe;color:#4c1d95} .av1{background:#d1fae5;color:#065f46} .av2{background:#fee2e2;color:#991b1b}
.av3{background:#dbeafe;color:#1e3a8a} .av4{background:#fef3c7;color:#92400e} .av5{background:#fce7f3;color:#9d174d}
.av6{background:#dcfce7;color:#14532d} .av7{background:#ffedd5;color:#9a3412} .av8{background:#e0f2fe;color:#075985}
.av9{background:#f0fdf4;color:#166534} .av10{background:#fdf4ff;color:#6b21a8} .av11{background:#fff7ed;color:#9a3412}
.av12{background:#f0f9ff;color:#0c4a6e}

@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr; }
  .stat { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; }
  .stat-label { margin-bottom: 0; }
  .list-wrap { border-radius: 8px; }
  .list-head-row { display: none; }
  .list-row {
    grid-template-columns: 42px 1fr auto;
    grid-template-rows: auto auto auto auto;
    gap: 6px 10px;
    padding: 14px;
    align-items: start;
  }
  .l-avatar { grid-row: 1 / 3; width: 42px; height: 42px; font-size: 13px; }
  .l-info { grid-column: 2; grid-row: 1; }
  .l-actions { grid-column: 3; grid-row: 1; }
  .l-pct, .l-fixo, .l-data {
    grid-column: 2 / -1;
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; text-align: left;
  }
  .l-pct::before  { content: '%'; font-size: 10px; color: var(--muted2); text-transform: uppercase; letter-spacing: .05em; min-width: 44px; }
  .l-fixo::before { content: 'Fixo'; font-size: 10px; color: var(--muted2); text-transform: uppercase; letter-spacing: .05em; min-width: 44px; }
  .l-data::before { content: 'Tempo'; font-size: 10px; color: var(--muted2); text-transform: uppercase; letter-spacing: .05em; min-width: 44px; }
}