/* MTPrint · identidade Taniguchi Soluções Integradas (grafite + dourado) */
:root {
  --grafite: #393A3E;
  --grafite-2: #2A2B2E;
  --ink: #26272A;
  --ink-2: #55575D;
  --ink-3: #8C8E94;
  --gold: #D4A442;
  --gold-d: #A97F27;
  --gold-l: #F7EEDA;
  --paper: #F3F3F1;
  --card: #FFFFFF;
  --line: #E3E4E6;
  --ok: #2E7D4F;
  --ok-l: #E4F2E9;
  --warn: #9A6200;
  --warn-l: #FFF3DC;
  --err: #B3372E;
  --err-l: #FBE9E7;
  --info: #3B5B7A;
  --info-l: #E8EEF4;
  --r: 14px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
html, body { background: var(--paper); }
body { margin: 0; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
h1 { font-size: 1.45rem; font-weight: 700; }
h2 { font-size: 1.12rem; font-weight: 650; }
h3 { font-size: 1rem; font-weight: 600; }
p { margin: 0 0 .8em; }
a { color: var(--gold-d); }
small, .muted { color: var(--ink-3); }
.hidden { display: none !important; }

/* Marca */
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand img { height: 26px; width: auto; display: block; }
.brand .wm { font-family: "Michroma", "Inter", sans-serif; font-size: 1rem; letter-spacing: .06em; color: var(--ink); line-height: 1; }
.brand .wm b { color: var(--gold); font-weight: 400; }
.on-dark .brand .wm { color: #fff; }
.tag { font-family: "Michroma", sans-serif; font-size: .58rem; letter-spacing: .14em; color: var(--gold); text-transform: uppercase; }

/* Barra escura do topo */
.appbar { background: var(--grafite); color: #fff; }
.appbar .in { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 0 auto; }
.appbar .pill { background: rgba(255,255,255,.1); color: #fff; }
.appbar .pill.ok { background: rgba(110,200,140,.18); color: #9BE0B4; }
.appbar .pill.warn { background: rgba(212,164,66,.2); color: var(--gold); }
.appbar .btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.25); }
.appbar .btn:hover { border-color: rgba(255,255,255,.6); }
.appbar select { background: var(--grafite-2); color: #fff; border-color: rgba(255,255,255,.2); }
.goldline { height: 3px; background: var(--gold); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem; }
.stack > * + * { margin-top: .9rem; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

.btn { appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 600;
  padding: .7rem 1.05rem; border-radius: 11px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; text-decoration: none; }
.btn:hover { border-color: var(--ink-3); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--grafite); color: #fff; border-color: var(--grafite); }
.btn.primary:hover { background: var(--grafite-2); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--grafite-2); }
.btn.gold:hover { background: #C9983A; }
.btn.danger { color: var(--err); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.sm { padding: .38rem .7rem; font-size: .85rem; border-radius: 9px; }
.btn.block { width: 100%; padding: .95rem; font-size: 1.05rem; }

label.f { display: block; font-size: .85rem; font-weight: 600; color: var(--ink-2); margin-bottom: .3rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=tel], textarea, select {
  width: 100%; font: inherit; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
input:focus, textarea:focus, select:focus { outline: 3px solid var(--gold-l); border-color: var(--gold); }
.field + .field { margin-top: .8rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: #ECECEA; border-radius: 12px; padding: 4px; gap: 4px; }
.seg button { appearance: none; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--ink-2); padding: .6rem .4rem;
  border-radius: 9px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.seg button small { font-weight: 500; font-size: .75rem; }
.seg button.on { background: var(--grafite); color: #fff; }
.seg button.on small { color: var(--gold); }
.seg button:disabled { opacity: .4; cursor: not-allowed; }

.pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; padding: .18rem .55rem; border-radius: 999px; background: #ECECEA; color: var(--ink-2); white-space: nowrap; }
.pill.ok { background: var(--ok-l); color: var(--ok); }
.pill.warn { background: var(--warn-l); color: var(--warn); }
.pill.err { background: var(--err-l); color: var(--err); }
.pill.gold { background: var(--gold-l); color: var(--gold-d); }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }

.alert { padding: .8rem .95rem; border-radius: 12px; font-size: .92rem; }
.alert.err { background: var(--err-l); color: var(--err); }
.alert.warn { background: var(--warn-l); color: var(--warn); }
.alert.ok { background: var(--ok-l); color: var(--ok); }
.alert.info { background: var(--info-l); color: var(--info); }

.spin { width: 18px; height: 18px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sp .8s linear infinite; display: inline-block; flex: none; }
@keyframes sp { to { transform: rotate(360deg); } }

table.t { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.t th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
table.t td { padding: .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t tr:last-child td { border-bottom: 0; }
.tw { overflow-x: auto; }

.switch { position: relative; display: inline-block; width: 40px; height: 23px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: #D3D3D0; border-radius: 99px; transition: .15s; cursor: pointer; }
.switch span::before { content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .15s; }
.switch input:checked + span { background: var(--gold); }
.switch input:checked + span::before { transform: translateX(17px); }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--grafite); color: #fff; padding: .7rem 1.1rem; border-radius: 12px; font-size: .92rem; z-index: 99; box-shadow: 0 8px 24px rgba(0,0,0,.2); max-width: 90vw; border-left: 4px solid var(--gold); }
.toast.err { border-left-color: #F28B82; }

.demo-bar { background: var(--gold); color: var(--grafite-2); font-weight: 700; text-align: center; font-size: .78rem; padding: .3rem; letter-spacing: .03em; }
.foot { text-align: center; margin: 28px 0 10px; font-size: .75rem; color: var(--ink-3); }
.foot b { font-family: "Michroma", sans-serif; font-weight: 400; font-size: .7rem; letter-spacing: .06em; color: var(--ink-2); }
/* olhinho da senha */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 2.8rem !important; width: 100%; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 6px; cursor: pointer; color: var(--ink-3, #888); display: flex; border-radius: 8px; }
.pw-eye:hover { color: var(--ink, #222); }

/* v2.7.3: selo "Assinatura cancelada" (painel da gráfica e Master) */
.selo-cancel { display: flex; align-items: center; gap: .7rem; text-align: left; background: var(--err-l); color: var(--err); border: 2px solid var(--err); border-radius: 12px; padding: .7rem .9rem; }
.selo-cancel .x { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--err); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; }
.selo-cancel b { display: block; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }
.selo-cancel small { display: block; color: var(--ink-2); font-size: .82rem; line-height: 1.35; }
.pill.cancel { background: var(--err); color: #fff; text-transform: uppercase; letter-spacing: .04em; }
.pw-rules { display: block; margin-top: .3rem; font-size: .78rem; color: var(--ink-2); line-height: 1.5; }
.pw-rules span { margin-right: .5rem; white-space: nowrap; }
.pw-rules span.ok { color: var(--ok); font-weight: 600; }