/* components.css — peças reutilizáveis: botões, campos, badges, avatares,
   cartões de superfície, tabela, barra de progresso, modal e toast. */

/* ── Botões ──────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); color:var(--ink); font-weight:600; cursor:pointer;
  transition:background .15s, border-color .15s, transform .05s;
}
.btn:hover { background:#F0EEE9; text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn--primary { background:var(--primary); border-color:var(--primary); color:#fff; }
.btn--primary:hover { background:var(--primary-dark); border-color:var(--primary-dark); }
.btn--ghost { background:transparent; border-color:transparent; }
.btn--ghost:hover { background:rgba(31,29,27,.05); }
.btn--danger { color:var(--pink); border-color:transparent; background:transparent; }
.btn--danger:hover { background:rgba(180,91,110,.1); }
.btn--sm { padding:6px 11px; font-size:13px; }
.btn--block { width:100%; }

/* ── Campos ──────────────────────────────────────────────────────────── */
.field {
  width:100%; padding:11px 13px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.field:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(192,95,60,.15); }
textarea.field { resize:vertical; min-height:84px; }
.field__label { display:block; font-size:13px; font-weight:600; color:var(--text); margin:14px 0 6px; }
.field__label:first-child { margin-top:0; }
select.field { appearance:none; cursor:pointer; }
.check { display:inline-flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }

/* ── Cartão de superfície ────────────────────────────────────────────── */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
}
.card__body { padding:18px; }
.card__title { font-size:15px; margin-bottom:2px; }

/* ── Badges / etiquetas ──────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:99px; font-size:12px; font-weight:600;
  background:#F0EEE9; color:var(--text);
}
.tag {
  display:inline-flex; align-items:center;
  padding:2px 9px; border-radius:99px; font-size:11.5px; font-weight:600;
  color:#fff;
}
.prio { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; }
.prio::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.prio--alta { color:var(--pink); }
.prio--media { color:var(--yellow); }
.prio--baixa { color:var(--green); }

/* ── Avatar ──────────────────────────────────────────────────────────── */
.avatar {
  display:inline-grid; place-items:center;
  width:32px; height:32px; border-radius:50%;
  color:#fff; font-weight:700; font-size:12.5px; font-family:var(--font-head);
  flex:none;
}
.avatar--lg { width:76px; height:76px; font-size:26px; }
.avatar--sm { width:24px; height:24px; font-size:10.5px; }

/* ── Barra de progresso ──────────────────────────────────────────────── */
.progress { height:8px; border-radius:99px; background:#EBE8E3; overflow:hidden; }
.progress__fill { height:100%; background:var(--primary); border-radius:99px; transition:width .3s; }

/* ── Tabela ──────────────────────────────────────────────────────────── */
.table { width:100%; border-collapse:collapse; }
.table th, .table td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--border); }
.table th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; }
.table tbody tr:hover { background:#FBFAF8; }
.table td:last-child, .table th:last-child { text-align:right; }

/* ── Modal ───────────────────────────────────────────────────────────── */
.modal { position:fixed; inset:0; z-index:60; display:none; }
.modal.is-open { display:block; }
.modal__backdrop { position:absolute; inset:0; background:rgba(31,29,27,.44); }
.modal__panel {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(680px, calc(100vw - 32px)); max-height:calc(100vh - 48px); overflow:auto;
  background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
}
.modal__head { display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--border); }
.modal__head h2 { font-size:18px; }
.modal__body { padding:20px; }
.modal__foot { display:flex; gap:10px; padding:16px 20px; border-top:1px solid var(--border); }
.modal__close { margin-left:auto; }

/* ── Toast ───────────────────────────────────────────────────────────── */
#toast {
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:11px 18px; border-radius:var(--radius);
  box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:.25s; z-index:80;
  font-size:14px;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#toast.err { background:var(--pink); }

/* ── Estados vazios / loading ────────────────────────────────────────── */
.empty { text-align:center; color:var(--muted); padding:34px 10px; }
.skeleton { color:var(--muted); padding:20px; }