/* Portal Boi Brabo — tema moderno compartilhado (2026). */
:root {
    --bg: #f4f5f7;
    --cream: #f4f0ea;      /* fundo quente do portal (não branco puro) */
    --cream-rgb: 244,240,234;
    --surface: #ffffff;
    --surface-2: #fafbfc;
    --ink: #14161a;
    --ink-2: #454b54;
    --muted: #8a919c;
    --line: #e9ebef;
    --line-2: #f0f1f4;

    --brand: #17181c;
    --accent: #d11f2d;
    --accent-strong: #8b0000;
    --accent-soft: #fdecec;

    --ok: #12a150;
    --ok-soft: #e6f6ee;
    --info: #2563eb;
    --info-soft: #e8effe;
    --warn: #b7791f;

    --radius: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --shadow-xs: 0 1px 2px rgba(16,24,40,.05);
    --shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 28px rgba(16,24,40,.07);
    --shadow-lg: 0 18px 50px rgba(16,24,40,.16);
    --ring: 0 0 0 4px rgba(209,31,45,.14);
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }

/* ── Botões ─────────────────────────────────────────────── */
.btn2 {
    --btn-bg: var(--brand); --btn-fg: #fff; --btn-bd: transparent;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg);
    font: 600 .875rem/1 var(--font); letter-spacing: .01em;
    padding: 10px 16px; border-radius: 999px; cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
    text-decoration: none; white-space: nowrap;
}
.btn2:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn2:active { transform: translateY(0); }
.btn2.accent { --btn-bg: var(--accent); }
.btn2.accent:hover { --btn-bg: #b91824; }
.btn2.ghost { --btn-bg: transparent; --btn-fg: var(--ink-2); --btn-bd: var(--line); }
.btn2.ghost:hover { --btn-fg: var(--ink); --btn-bd: #d7dae0; box-shadow: var(--shadow-xs); }
.btn2.soft { --btn-bg: var(--surface-2); --btn-fg: var(--ink-2); --btn-bd: var(--line); }
.btn2.danger { --btn-bg: transparent; --btn-fg: var(--accent); --btn-bd: #f3d0d3; }
.btn2.danger:hover { --btn-bg: var(--accent-soft); }
.btn2.sm { padding: 7px 12px; font-size: .8rem; }
.btn2.icon { padding: 8px; width: 36px; height: 36px; border-radius: 10px; }
.btn2:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Cards / superfícies ────────────────────────────────── */
.card2 { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card2 .card2-head { padding: 20px 22px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card2 .card2-body { padding: 18px 22px 22px; }
.card2-head h2 { margin: 0; font-size: 1.06rem; font-weight: 700; letter-spacing: -.01em; }
.card2-head .sub { color: var(--muted); font-size: .84rem; margin-top: 3px; }

/* ── Campos de formulário ───────────────────────────────── */
.lbl { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.inp {
    width: 100%; padding: 11px 13px; font: 500 .9rem var(--font); color: var(--ink);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
    transition: border-color .15s, box-shadow .15s; outline: none;
}
.inp:focus { border-color: var(--accent); box-shadow: var(--ring); }
.inp::placeholder { color: #b3b8c0; }
.hint { color: var(--muted); font-size: .78rem; margin-top: 6px; }

/* ── Switch ─────────────────────────────────────────────── */
.sw { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: .88rem; color: var(--ink-2); }
.sw input { display: none; }
.sw .track { width: 40px; height: 23px; border-radius: 999px; background: #d7dae0; position: relative; transition: background .18s; flex: none; }
.sw .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs); transition: transform .18s; }
.sw input:checked + .track { background: var(--accent); }
.sw input:checked + .track::after { transform: translateX(17px); }

/* ── Badges / chips ─────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.mute { background: var(--line-2); color: var(--muted); }
.pill.accent { background: var(--accent-soft); color: var(--accent); }

/* ── Tabela moderna ─────────────────────────────────────── */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl thead th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; padding: 0 14px 12px; }
.tbl tbody td { padding: 14px; border-top: 1px solid var(--line-2); vertical-align: middle; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl .t-title { font-weight: 650; }
.tbl .t-sub { color: var(--muted); font-size: .82rem; }

/* ── Ícone-tile ─────────────────────────────────────────── */
.icotile { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--ink); background: linear-gradient(180deg,#f7f8fa,#eef0f3); border: 1px solid var(--line); }

/* ── Toasts ─────────────────────────────────────────────── */
#toast-area { position: fixed; top: 18px; right: 18px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; }
.toast2 { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: #111318; color: #fff; box-shadow: var(--shadow-lg); font-size: .88rem; animation: toastIn .2s ease; }
.toast2.ok { background: #0f7a3d; }
.toast2.err { background: #b3202b; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ── Utilidades ─────────────────────────────────────────── */
.row-gap { display: grid; gap: 16px; }
.flex { display: flex; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.muted { color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 46px 20px; }