/**
 * crm/css/style.css
 * Identidade visual PlanetPay — login + dashboard.
 */

/* ============================================================
   VARIÁVEIS + RESET
   ============================================================ */
:root {
  --green-900: #0f3d1a;
  --green-700: #167a2d;
  --green-600: #1c9438;
  --green-500: #22a93f;
  --green-400: #43c45c;
  --green-50:  #eaf8ee;
  --ink:       #0f1a14;
  --muted:     #5b6b62;
  --bg:        #ffffff;
  --bg-soft:   #f6faf7;
  --line:      #e3ece6;
  --font:      'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

button { font-family: inherit; cursor: pointer; }

/* ============================================================
   PÁGINA DE LOGIN
   ============================================================ */
body.page-login {
  background: linear-gradient(180deg, #eaf8ee 0%, #ffffff 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Brilho radial verde no canto superior direito */
body.page-login::before {
  content: '';
  position: fixed;
  top: -120px;
  right: -120px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(34,169,63,.25), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   SIDEBAR DE LOGIN (à esquerda)
   ============================================================ */
.login-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 273px;
  max-width: 92vw;
  height: 100vh;
  background: #ffffff;
  box-shadow: 12px 0 40px rgba(15, 61, 26, 0.40);
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.login-sidebar-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 32px;
  position: relative;
}

/* Logo: posicionada a 25% do topo da sidebar */
.login-logo {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 2;
}

.login-logo img {
  max-width: 240px;
  height: auto;
  margin: 0 auto;
}

/* Form ocupa o resto do espaço, empurrado para o rodapé */
.login-form {
  margin-top: auto;
  margin-bottom: 20vh;
  text-align: center;
}

.login-label {
  display: block;
  font: 500 13px var(--font);
  color: var(--ink);
  letter-spacing: 0.1px;
  margin: 4px 0 4px 0;
}

.login-input {
  display: block;
  height: 32px;
  width: 56%;
  max-width: 56%;
  /* Piso em chars pra caber a máscara de CPF (14 chars) mesmo em tela estreita */
  min-width: 17ch;
  margin: 0 auto 6px auto;
  padding: 0 12px;
  background-color: var(--bg-soft);
  color: var(--ink);
  border: 1.5px solid #d8e8de;
  border-radius: 8px;
  font: 500 13px var(--font);
  letter-spacing: 0.2px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.login-input:hover {
  border-color: #b8d4c2;
  background-color: #ffffff;
}

.login-input:focus {
  border-color: var(--green-600);
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(28, 168, 56, 0.18);
}

.login-btn {
  display: block;
  width: 100%;
  height: 48px;
  margin: 12px 0 0 0;
  padding: 0 24px;
  background: linear-gradient(135deg, #167a2d 0%, #22a93f 100%);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font: 700 15px var(--font);
  letter-spacing: .8px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(28, 148, 56, 0.32);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, opacity .2s ease;
}

.login-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #1c9438 0%, #43c45c 100%);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(28, 148, 56, 0.42);
}

.login-btn:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.login-msg {
  margin: 14px 0 0 0;
  padding: 8px 12px;
  background: #fff2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}

.login-msg:not(.error) {
  background: var(--green-50);
  color: var(--green-900);
  border-color: rgba(34, 169, 63, 0.30);
}

/* Botão "Instalar app" abaixo do ENTRAR — estilo discreto (outline verde) */
.login-install-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 56%;
  max-width: 56%;
  min-width: 17ch;
  height: 36px;
  margin: 12px auto 0 auto;
  padding: 0 16px;
  background: rgba(28, 168, 56, 0.08);
  color: var(--green-700);
  border: 1px solid rgba(28, 168, 56, 0.28);
  border-radius: 8px;
  font: 600 12.5px var(--font);
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.login-install-btn:hover {
  background: rgba(28, 168, 56, 0.16);
  border-color: rgba(28, 168, 56, 0.42);
  transform: translateY(-1px);
}
.login-install-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* Rodapé: razão social + CNPJ travados no fim da sidebar */
.login-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 32px 24px;
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  border-top: 1px solid #d8e8de;
}

.login-footer strong {
  display: block;
  color: var(--green-700);
  font-weight: 700;
  margin-bottom: 4px;
}

/* ============================================================
   TAGLINE central (entre sidebar e planeta)
   ============================================================ */
.login-tagline {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 273px;
  right: calc(28vw + 220px);
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  z-index: 2;
}

.tagline-eyebrow {
  display: inline-block;
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--green-700);
  background: rgba(34, 169, 63, 0.10);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.tagline-main {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 34px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.4px;
  color: var(--ink);
  max-width: 640px;
}

.tagline-main strong {
  font-weight: 700;
  color: var(--ink);
}

.tagline-main .accent {
  color: var(--green-700);
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .login-tagline { display: none; }
}

/* ============================================================
   PLANETA ORBITAL
   ============================================================ */
.orbit-wrap {
  position: fixed;
  top: 32%;
  left: 72%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}

.orbit {
  position: relative;
  width: 380px;
  height: 380px;
}

.planet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--green-400), var(--green-700));
  box-shadow: 0 20px 50px rgba(28,148,56,.35),
              inset -20px -20px 50px rgba(0,0,0,.25);
}

.ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1.5px dashed rgba(28,148,56,.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.ring-1 { width: 260px; height: 260px; animation: spin 30s linear infinite; }
.ring-2 { width: 360px; height: 360px; animation: spin 60s linear infinite reverse; }

.dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 14px var(--green-400);
}
.dot-1 { top: 8%; left: 50%; transform: translateX(-50%); animation: spin 14s linear infinite; transform-origin: 50% 180px; }
.dot-2 { top: 50%; left: 10%; transform: translateY(-50%); animation: spin 22s linear infinite reverse; transform-origin: 180px 50%; }
.dot-3 { bottom: 8%; right: 20%; animation: spin 18s linear infinite; transform-origin: -120px -120px; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .orbit-wrap { display: none; }
}

/* ============================================================
   PAYMENT CARDS no rodapé
   ============================================================ */
.payment-section {
  position: fixed;
  bottom: 32px;
  left: calc(273px + 24px);
  right: 32px;
  pointer-events: none;
  z-index: 3;
}

.payment-section-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--green-700);
  margin: 0 0 10px 4px;
}

.payment-cards {
  display: flex;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--green-500);
}

.payment-card {
  flex: 1 1 0;
  min-width: 0;
  padding: 22px 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fcf9 100%);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green-500);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(15, 61, 26, 0.10);
  text-align: center;
  font-weight: 800;
  font-size: clamp(13px, 1.3vw, 18px);
  letter-spacing: 1.5px;
  color: var(--green-700);
  pointer-events: auto;
}

@media (max-width: 900px) {
  .payment-section { display: none; }
}

/* ============================================================
   DASHBOARD (após login) — visual mínimo, será expandido
   ============================================================ */
/* ============================================================
   LAYOUT GERAL — Topbar fixo + Sidebar branca + Main com fundo
   verde clarinho. Variáveis controlam altura/largura para que o
   window manager e o body.is-embedded respeitem o espaço reservado.
   ============================================================ */
:root {
  --sidebar-w: 0px;
  --header-h:  0px;
  --bg-dash:   #ecf6ee;   /* verde bem clarinho — fundo do dashboard */
}
body:has(.dash-sidebar) { --sidebar-w: 205px; } /* largo o suficiente para "Bloqueio de valores" caber numa linha */
body:has(.dash-header)  { --header-h:  70px; }

body.page-dashboard {
  background: var(--bg-dash);
  min-height: 100vh;
  margin: 0;
}

/* ---------- TOPBAR (full width, 70px, verde) ---------- */
.dash-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  background: linear-gradient(135deg, var(--green-700), var(--green-500));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  z-index: 120;
  box-shadow: 0 3px 12px rgba(15, 61, 26, 0.22);
}

.dash-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.dash-logo {
  height: 42px;
  width: auto;
  filter: brightness(0) invert(1);
}

.dash-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
}
.dash-user-name { white-space: nowrap; }
.dash-user-name strong { font-weight: 700; letter-spacing: 0.2px; }

/* ============================================================
   WIDGET DE DATA/HORA — canto inferior direito do dashboard.
   ============================================================ */
.datetime-widget {
  position: fixed;
  bottom: 14px;
  right: 18px;
  z-index: 80;            /* acima do conteúdo, abaixo das janelas (600+) */
  text-align: right;
  line-height: 1.25;
  user-select: none;
  pointer-events: none;   /* não bloqueia cliques em quem está atrás */
}
.datetime-date {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  text-transform: lowercase;
}
.datetime-date::first-letter { text-transform: uppercase; }
.datetime-time {
  font-size: 26px;                            /* +60% sobre os 16px anteriores */
  font-weight: 700;
  color: var(--green-700);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  line-height: 1;
  margin-top: 3px;
}

@media (max-width: 720px) {
  .datetime-widget { bottom: 10px; right: 12px; }
  .datetime-date { font-size: 10.5px; }
  .datetime-time { font-size: 22px; }
}

/* ============================================================
   ATALHO CHAMADO TÉCNICO — canto inferior esquerdo (oposto ao relógio).
   Visível só p/ quem tem a permissão (controlado por sessao-contrato.js).
   ============================================================ */
.chamado-fab {
  position: fixed;
  bottom: 14px;
  /* Logo após o sidebar (que ocupa a esquerda) — canto inferior esquerdo da
     ÁREA DE CONTEÚDO, oposto ao relógio (que fica no canto inferior direito). */
  left: calc(var(--sidebar-w) + 18px);
  z-index: 90;            /* acima do conteúdo; abaixo das janelas (600+) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: #fff;
  color: var(--green-700);
  border: 1px solid rgba(28, 168, 56, 0.30);
  border-radius: 50%;     /* círculo — só o ícone */
  box-shadow: 0 4px 14px rgba(16, 24, 32, .12);
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .2s ease, transform .15s ease;
}
.chamado-fab:hover {
  background: rgba(28, 168, 56, 0.08);
  box-shadow: 0 6px 18px rgba(16, 24, 32, .16);
  transform: translateY(-1px);
}
.chamado-fab svg { width: 22px; height: 22px; flex: 0 0 auto; }
@media (max-width: 720px) {
  .chamado-fab { bottom: 10px; left: calc(var(--sidebar-w) + 12px); width: 42px; height: 42px; }
  .chamado-fab svg { width: 20px; height: 20px; }
}

/* Box "Contrato ativo" no topbar — abaixo do timer de sessão */
.dash-contract-box {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.dash-contract-label {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.dash-contract-select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 7px;
  padding: 4px 26px 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  max-width: 240px;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: background-color .15s ease, border-color .15s ease;
}
.dash-contract-select:hover {
  background-color: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.45);
}
.dash-contract-select:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.60);
}
.dash-contract-select option {
  background: #ffffff;
  color: var(--ink);
  font-weight: 500;
}
.dash-contract-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Toast simples (notificação quando troca contrato) */
.contrato-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--green-700);
  color: #fff;
  padding: 10px 22px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 28px rgba(15, 61, 26, 0.30);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity .25s ease, transform .25s ease;
}
.contrato-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Contagem regressiva de expiração da sessão (logo abaixo do nome) */
.dash-session-timer {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}
#sessionTimer {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  margin-left: 2px;
  color: #fff;
  transition: color .25s ease;
}
/* Últimos 60 segundos: chama atenção em amarelo */
#sessionTimer.session-warn {
  color: #ffe082;
  animation: sessionPulse 1s ease-in-out infinite;
}
@keyframes sessionPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.dash-logout {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  padding: 7px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  transition: background-color .15s ease;
}
.dash-logout:hover { background: rgba(255, 255, 255, 0.30); }

/* ---------- SIDEBAR (branca, abaixo do topbar) ---------- */
.dash-sidebar {
  position: fixed;
  top: var(--header-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: #ffffff;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  z-index: 110;
  border-right: 1px solid var(--line);
  box-shadow: 2px 0 12px rgba(15, 61, 26, 0.06);
}

.dash-sidebar .dash-nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 10px;
  gap: 1px;
  overflow-y: auto;
}

/* ------------------------------------------------------------ */
/*  GRUPOS COLAPSÁVEIS — usa <details>/<summary> (CSP-safe)     */
/* ------------------------------------------------------------ */
.dash-nav-group { border-radius: 10px; }

.dash-nav-parent {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #2c3e34;
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: -0.1px;
  user-select: none;
  position: relative;
  transition: background-color .15s ease, color .15s ease;
}
.dash-nav-parent::-webkit-details-marker { display: none; }
.dash-nav-parent::marker { content: ''; }

/* Ícone à esquerda do label */
.dash-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #6b8275;
  transition: color .15s ease;
}
.dash-nav-icon svg {
  width: 19px;
  height: 19px;
  display: block;
}

.dash-nav-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chevron à direita (seta CSS limpa que gira 90° quando aberto) */
.dash-nav-parent::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-right: 1.8px solid #a5b6ac;
  border-bottom: 1.8px solid #a5b6ac;
  transform: rotate(-45deg);
  transition: transform .22s ease, border-color .15s ease;
  flex-shrink: 0;
}
.dash-nav-group[open] > .dash-nav-parent::after {
  transform: rotate(45deg);
  margin-top: -3px;
}

.dash-nav-parent:hover {
  background: rgba(28, 168, 56, 0.08);
  color: var(--green-700);
}
.dash-nav-parent:hover .dash-nav-icon { color: var(--green-700); }
.dash-nav-parent:hover::after { border-color: var(--green-700); }

.dash-nav-group[open] > .dash-nav-parent {
  background: rgba(28, 168, 56, 0.06);
  color: var(--green-700);
  font-weight: 600;
}
.dash-nav-group[open] > .dash-nav-parent .dash-nav-icon { color: var(--green-700); }
.dash-nav-group[open] > .dash-nav-parent::after { border-color: var(--green-700); }

/* ------------------------------------------------------------ */
/*  FILHOS — submenus indentados                                 */
/* ------------------------------------------------------------ */
.dash-nav-children {
  display: flex;
  flex-direction: column;
  padding: 4px 0 6px 0;
  margin: 1px 0 4px 22px;
  gap: 1px;
  border-left: 1.5px solid rgba(28, 168, 56, 0.18);
  padding-left: 8px;
}
.dash-nav-children a {
  display: flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 12.8px;
  font-weight: 500;
  color: #5f7068;
  text-decoration: none;
  position: relative;
  transition: background-color .15s ease, color .15s ease;
}
.dash-nav-children a::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(28, 168, 56, 0.35);
  margin-right: 9px;
  flex-shrink: 0;
  transition: background-color .15s ease, transform .15s ease;
}
.dash-nav-children a:hover {
  background: rgba(28, 168, 56, 0.08);
  color: var(--green-700);
}
.dash-nav-children a:hover::before { background: var(--green-700); transform: scale(1.2); }
.dash-nav-children a.active {
  background: rgba(28, 168, 56, 0.14);
  color: var(--green-700);
  font-weight: 600;
}
.dash-nav-children a.active::before { background: var(--green-700); }

/* Estado "vazio" — grupos que ainda não têm telas */
.dash-nav-children:empty {
  padding: 2px 0 4px 12px;
  border-left-style: dashed;
  border-left-color: rgba(28, 168, 56, 0.20);
}
.dash-nav-children:empty::before {
  content: 'Em breve';
  display: block;
  padding: 3px 0;
  font-size: 11px;
  color: #93a39a;
  font-style: italic;
}

/* ------------------------------------------------------------ */
/*  FOLHAS — itens sem grupo (ex.: "Sair" no rodapé)            */
/* ------------------------------------------------------------ */
.dash-nav-leaf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: #2c3e34;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.dash-nav-leaf .dash-nav-icon { color: #6b8275; }
.dash-nav-leaf:hover {
  background: rgba(28, 168, 56, 0.08);
  color: var(--green-700);
}
.dash-nav-leaf:hover .dash-nav-icon { color: var(--green-700); }

/* Sair: usa exatamente o mesmo estilo dos demais itens do menu
   (cor, peso, hover verde). Só herda de .dash-nav-leaf. */
.dash-nav-leaf--logout {
  margin-top: 2px;
}

/* ----- Botão "Instalar app" (PWA) -----
   É um <button>, então precisa de reset adicional sobre .dash-nav-leaf.
   Pinned ao rodapé do sidebar via margin-top: auto. Estilo CTA verde
   suave para destacar discretamente sem competir com o menu acima. */
button.dash-nav-leaf {
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.dash-nav-leaf--install {
  margin-top: auto;        /* empurra para o fundo do sidebar */
  margin-bottom: 6px;
  background: rgba(28, 168, 56, 0.10);
  border: 1px solid rgba(28, 168, 56, 0.22);
  color: var(--green-700);
}
.dash-nav-leaf--install .dash-nav-icon { color: var(--green-700); }
.dash-nav-leaf--install:hover {
  background: rgba(28, 168, 56, 0.18);
  color: var(--green-700);
}
.dash-nav-leaf--install:hover .dash-nav-icon { color: var(--green-700); }

/* ---------- MAIN (área útil à direita do sidebar, abaixo do topbar) ---------- */
.dash-main {
  margin-left: var(--sidebar-w);
  margin-top:  var(--header-h);
  padding: 24px 28px;
  max-width: none;
  min-height: calc(100vh - var(--header-h));
}

/* ---------- MOBILE ---------- */
@media (max-width: 720px) {
  .dash-header { height: 56px; padding: 0 14px; }
  .dash-logo { height: 30px; }
  .dash-user-name { display: none; } /* só botão "Sair" no mobile */
  :root { --header-h: 56px; }

  .dash-sidebar {
    position: static;
    width: 100%;
    height: auto;
    bottom: auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 8px rgba(15, 61, 26, 0.10);
  }
  .dash-sidebar .dash-nav {
    flex-direction: row;
    padding: 6px;
    flex: none;
    overflow-x: auto;
  }
  .dash-main {
    margin-left: 0;
    margin-top:  var(--header-h);
    padding: 16px;
  }
}

.dash-welcome {
  background: #ffffff;
  border-radius: 14px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(15, 61, 26, 0.06);
  border: 1px solid var(--line);
}

.dash-welcome h1 {
  margin: 0 0 12px 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--ink);
}

.dash-welcome h1 .accent { color: var(--green-700); }

.dash-welcome .lead {
  color: var(--muted);
  font-size: 16px;
  margin: 0 0 14px 0;
}

.dash-welcome p { margin: 0 0 8px 0; color: var(--muted); }

/* ============================================================
   WINDOW MANAGER — múltiplas janelas arrastáveis sobre o dashboard
   ============================================================ */
/* Container vazio que ocupa toda a tela apenas para hospedar janelas;
   pointer-events: none deixa o dashboard atrás continuar clicável. */
.window-desktop {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
}

.window-frame {
  position: fixed;
  display: flex;
  flex-direction: column;
  width: 980px;
  max-width: calc(100vw - 32px);  /* livre para passar por cima do menu */
  height: auto;
  max-height: calc(100vh - 40px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 61, 26, 0.04),
              0 24px 60px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  pointer-events: auto;
  animation: windowIn .22s cubic-bezier(.4, 0, .2, 1);
  transition: box-shadow .15s ease, border-radius .2s ease;
}

@keyframes windowIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Janela em foco: sombra mais forte para destacar */
.window-frame.window-focused {
  box-shadow: 0 1px 2px rgba(15, 61, 26, 0.05),
              0 36px 90px rgba(0, 0, 0, 0.42);
}

.window-frame.maximized {
  left: var(--sidebar-w) !important;
  top: var(--header-h) !important;
  width: calc(100vw - var(--sidebar-w)) !important;
  max-width: calc(100vw - var(--sidebar-w));
  max-height: calc(100vh - var(--header-h));
  border-radius: 0;
}

/* ----- Title bar ----- */
.window-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 10px 18px;
  background: linear-gradient(135deg, #167a2d, #1c9438);
  color: #fff;
  flex: 0 0 auto;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.window-titlebar:active { cursor: grabbing; }
.window-frame.maximized .window-titlebar { cursor: default; }
.window-titlebar [data-window-action] { cursor: pointer; }

/* Sub-janela (ex: Novo / Editar parceiro) — verde mais claro/sereno,
   sinaliza visualmente que é uma janela secundária aberta a partir
   de outra. Botões também ficam num tom mais suave. */
.window-frame.window-sub .window-titlebar {
  background: linear-gradient(135deg, #4eaf67, #6cc886);
}
.window-frame.window-sub .window-btn {
  background: rgba(255, 255, 255, 0.20);
}
.window-frame.window-sub .window-btn:hover {
  background: rgba(255, 255, 255, 0.34);
}
.window-title {
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  margin-right: 12px;
}

.window-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.window-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .12s ease;
  padding: 0;
}
.window-btn:hover { background: rgba(255, 255, 255, 0.28); }
.window-btn-close:hover { background: rgba(220, 38, 38, 0.85); }

/* ----- Iframe -----
   Altura é ajustada via JS para o scrollHeight do conteúdo (same-origin),
   evitando o espaço vazio no rodapé. Quando maximizada, o flex:1 assume. */
.window-iframe {
  width: 100%;
  border: none;
  background: var(--bg-soft);
  display: block;
}
.window-frame.maximized .window-iframe {
  flex: 1;
  height: auto !important;
}
.window-frame.maximized {
  height: 100%;
}

/* ----- Durante o arrasto -----
   Desabilita seleção e impede o iframe de "engolir" os eventos do mouse. */
body.window-dragging {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing;
}
body.window-dragging .window-iframe {
  pointer-events: none;
}

/* ----- Quando a PRÓPRIA página é carregada no iframe (embedded) -----
   Esconde a topbar duplicada que vem do parceiro.php */
body.is-embedded .dash-header,
body.is-embedded .readonly-banner {
  display: none !important;
}
html.is-embedded-html, body.is-embedded {
  margin: 0 !important;
  padding: 0 !important;
}
body.is-embedded .dash-main {
  padding: 0 18px 14px 18px !important;   /* topo colado na titlebar */
  margin: 0 !important;
  max-width: 100%;
  min-height: auto !important;
}
/* Primeiro filho do main: zera margin-top do .table-card / .form-card */
body.is-embedded .dash-main > :first-child,
body.is-embedded .form-page > :first-child {
  margin-top: 0 !important;
}
/* Zera min-height em TODOS os wrappers de página quando embedded —
   assim o body.scrollHeight reflete o tamanho real do conteúdo e o
   window.js ajusta a janela flutuante na altura justa. Sem isso, mesmo
   uma tabelinha de 5 linhas faz a janela inflar até 100vh. */
body.is-embedded,
body.is-embedded.page-dashboard,
body.is-embedded.page-form,
body.is-embedded.page-buscar,
body.is-embedded .form-page,
body.is-embedded .buscar-page {
  min-height: auto !important;
}
body.is-embedded .page-head {
  margin-bottom: 14px;
}
body.is-embedded .page-title {
  font-size: 20px;
}
body.is-embedded {
  background: var(--bg-soft);
}

/* ============================================================
   PÁGINA DE FORMULÁRIO (parceiro-form.php)
   Renderizada dentro de uma janela flutuante separada — assim
   pode ser movida independentemente da janela da lista.
   ============================================================ */
body.page-form { background: #fff; margin: 0; }
body.page-form.is-embedded { background: #fff; }

.form-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #fff;
}
.form-card {
  flex: 1;
  padding: 20px 26px 14px;
}
body.is-embedded .form-card {
  padding: 18px 22px 10px;
}
.form-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 24px;
  background: #fafcfb;
  border-top: 1px solid var(--line);
  z-index: 5;
}

/* Card-display do CPF/CNPJ no topo da aba "Dados" (substitui a antiga
   botoeira PJ/PF — agora o tipo é deduzido pelo tamanho do documento). */
.doc-display {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.doc-display-label {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--green-700);
  background: rgba(28, 168, 56, 0.12);
  border-radius: 6px;
  flex-shrink: 0;
}
.doc-display-value {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Estado bloqueado para inputs (CPF/CNPJ em modo edição). */
.input-locked,
input[readonly].input-locked {
  background: #f5f7f6 !important;
  color: var(--muted) !important;
  cursor: not-allowed;
}

/* ============================================================
   MINI-JANELA "Localizar parceiro" (parceiro-buscar.php)
   Pede o CPF/CNPJ antes de abrir o cadastro completo.
   ============================================================ */
body.page-buscar { background: #fff; margin: 0; }
body.page-buscar.is-embedded { background: #fff; }

.buscar-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.buscar-card {
  flex: 1;
  padding: 22px 26px 12px;
}
.buscar-titulo {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.buscar-sub {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}
.buscar-field input {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: center;
  padding: 14px;
}
.buscar-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* No mobile, as janelas viram full-screen automaticamente (sem arrasto) */
@media (max-width: 720px) {
  .window-frame {
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }
  .window-titlebar { cursor: default; }
}

/* ============================================================
   BANNER de modo somente leitura (quando aponta para produção)
   ============================================================ */
.readonly-banner {
  position: sticky;
  top: 0;
  z-index: 150;
  padding: 10px 24px;
  background: linear-gradient(90deg, #fff8e1, #ffe082);
  color: #5d4108;
  font-size: 13.5px;
  font-weight: 500;
  border-bottom: 1px solid #f5cf6b;
  text-align: center;
  letter-spacing: 0.1px;
}
.readonly-banner strong { font-weight: 800; margin-right: 4px; }

body.is-readonly .btn-primary[disabled] {
  background: #d8e0db;
  color: #93a39a;
  cursor: not-allowed;
  border-color: #d8e0db;
  box-shadow: none;
  transform: none;
}
body.is-readonly .modal-readonly .field input,
body.is-readonly .modal-readonly .field textarea,
body.is-readonly .modal-readonly .field select {
  pointer-events: none;
  background: #f4f6f5 !important;
  color: #5b6b62;
}

/* ============================================================
   NAV no topo do dashboard + breadcrumb
   ============================================================ */
.dash-brand { display: inline-flex; align-items: center; }

.dash-nav {
  display: flex;
  gap: 4px;
  margin: 0 auto;
}
/* Regras antigas .dash-nav a {color: rgba(255,255,255,...)} removidas —
   eram sobras do antigo topbar verde escuro. Estavam invisibilizando o
   texto dos links da sidebar (branco em fundo branco). A estilização
   atual fica nas regras .dash-nav-parent, .dash-nav-children a e
   .dash-nav-leaf, mais acima no arquivo. */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 22px;
  gap: 16px;
}
.page-breadcrumb {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 2px;
  letter-spacing: 0.2px;
}
.page-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--ink);
}

/* ============================================================
   BOTÕES (primário + ghost + ícones)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 9px;
  font: 600 13.5px var(--font);
  letter-spacing: -0.1px;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--green-700), var(--green-500));
  color: #fff;
  border-color: var(--green-700);
  box-shadow: 0 4px 14px rgba(28, 148, 56, 0.25);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--green-600), #43c45c);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(28, 148, 56, 0.30);
}
.btn-primary:disabled {
  opacity: .7;
  cursor: not-allowed;
  transform: none;
}
.btn-ghost {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover {
  background: var(--bg-soft);
  border-color: #c8e0d0;
  color: var(--green-700);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.icon-btn:hover {
  background: var(--green-50);
  color: var(--green-700);
  border-color: #c8e0d0;
}
.icon-btn-danger:hover {
  background: #fef5f5;
  color: #b91c1c;
  border-color: #f9c5c5;
}

.btn-add {
  background: transparent;
  border: 1.5px dashed #c8e0d0;
  color: var(--green-700);
  padding: 10px 16px;
  border-radius: 9px;
  font: 600 13px var(--font);
  cursor: pointer;
  margin-top: 12px;
  transition: background-color .15s ease, border-color .15s ease, border-style .15s ease;
}
.btn-add:hover {
  background: var(--green-50);
  border-color: var(--green-500);
  border-style: solid;
}

/* ============================================================
   CARD DA TABELA — busca + lista
   ============================================================ */
.table-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 61, 26, 0.04);
  overflow: hidden;
}

.page-subhead {
  padding: 10px 18px;
  background: rgba(28, 168, 56, 0.05);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink);
}
.page-subhead strong { color: var(--green-700); margin-right: 4px; }
.table-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.input-search {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font: 500 13.5px var(--font);
  color: var(--ink);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input-search:focus {
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(28, 168, 56, 0.15);
}
.table-info {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
}
.table-wrap { overflow-x: auto; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.data-table thead {
  background: #fff;
}
.data-table thead th {
  text-align: left;
  padding: 12px 18px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.data-table thead th.th-actions { text-align: right; }
.data-table thead th.th-right   { text-align: right; }
.data-table td.cell-right       { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tbody tr {
  border-bottom: 1px solid #f5f7f6;
  transition: background-color .12s ease;
}
.data-table tbody tr:hover { background: #fafcfb; }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody td {
  padding: 12px 18px;
  color: var(--ink);
  vertical-align: middle;
}
.data-table td.cell-actions {
  text-align: right;
  white-space: nowrap;
}
.data-table td.cell-actions .icon-btn { margin-left: 4px; }
.data-table .empty {
  text-align: center;
  padding: 36px 18px !important;
  color: var(--muted);
  font-style: italic;
}

/* ============================================================
   RODAPÉ DA TABELA — paginação + botão "Novo"
   ============================================================ */
.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  font: 500 13px var(--font);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.pg-btn:hover:not(.disabled):not(.active) {
  background: var(--green-50);
  border-color: #c8e0d0;
  color: var(--green-700);
}
.pg-btn.active {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
  font-weight: 700;
  cursor: default;
}
.pg-btn.disabled {
  color: #c0c8c2;
  cursor: not-allowed;
  background: #fafcfb;
}
.pg-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 32px;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 640px) {
  .table-footer { flex-direction: column-reverse; align-items: stretch; }
  .table-footer .btn { width: 100%; justify-content: center; }
  .pagination { justify-content: center; }
}

.badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  background: var(--green-50);
  color: var(--green-700);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.badge.badge-ok  { background: var(--green-50); color: var(--green-700); margin-left: 0; }
.badge.badge-off { background: #f3f3f3;         color: #6b6b6b;          margin-left: 0; }

/* ============================================================
   MODAL (Novo / Editar parceiro)
   ============================================================ */
body.modal-open { overflow: hidden; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Quando o atributo HTML 'hidden' está presente, ESCONDE de verdade
   (o display:flex acima estava sobrescrevendo o comportamento padrão) */
.modal[hidden] {
  display: none !important;
}
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 43, 34, 0.40);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.modal-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  width: min(720px, 100%);
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(15, 61, 26, 0.04),
              0 25px 60px rgba(15, 61, 26, 0.30);
  overflow: hidden;
  animation: modalIn .18s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--line);
}
.modal-header h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background-color .15s ease, color .15s ease;
}
.modal-close:hover { background: var(--bg-soft); color: var(--ink); }

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 28px 22px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 28px;
  background: #fafcfb;
  border-top: 1px solid var(--line);
}

/* ============================================================
   SEGMENTED CONTROL (tabs principais e sub-tabs)
   ============================================================ */
.seg-control,
.seg-sub {
  display: flex;
  gap: 0;
  padding: 4px;
  background: #f4f6f5;
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(15, 61, 26, 0.04);
  margin-bottom: 18px;
  overflow-x: auto;
}
.seg-tab {
  flex: 1 1 0;
  min-width: max-content;
  padding: 9px 14px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--muted);
  font: 500 13px var(--font);
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, color .15s ease;
  white-space: nowrap;
}
.seg-tab:hover { color: var(--ink); }
.seg-tab.active {
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(15, 61, 26, 0.10),
              0 0 0 1px rgba(15, 61, 26, 0.04);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ============================================================
   CAMPOS DE FORMULÁRIO
   ============================================================ */
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}

/* O atributo HTML `hidden` define display:none apenas via UA stylesheet,
   que perde para qualquer CSS de autor (incluindo o .field { display:flex }
   acima). Forçamos aqui para que `<div class="field" hidden>` desapareça
   de fato — usado para esconder Sexo/Estado civil quando o trato é PJ. */
[hidden] { display: none !important; }

/* Mostra/esconde campos PJ vs PF no formulário de Parceiros.
   Estratégia robusta: classe no <body> + classe no elemento.
   Seletor body.trato-pj .pf-only tem especificidade (0,2,1) que
   bate qualquer .field (0,1,0) e .grid-2 (0,1,0). !important
   é cinto + suspensório. */
body.trato-pj .pf-only,
body.trato-pf .pj-only { display: none !important; }
.field label {
  font: 500 12.5px var(--font);
  color: var(--ink);
  letter-spacing: -0.05px;
}
.field input,
.field textarea,
.field select {
  background: #f5f7f6;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 14px;
  font: 500 13.5px var(--font);
  color: var(--ink);
  outline: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  width: 100%;
  box-sizing: border-box;
}
.field input::placeholder,
.field textarea::placeholder { color: #93a39a; }
.field input:hover:not(:focus),
.field textarea:hover:not(:focus),
.field select:hover:not(:focus) { background: #eef2f0; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  background: #fff;
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(28, 168, 56, 0.15);
}

.grid-2,
.grid-3 {
  display: grid;
  gap: 12px;
}
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.field-x2 { grid-column: span 2; }

/* Agrupador visual — usado no form da OS pra separar "Ordem de serviço"
   e "Máquinas vinculadas" em blocos claros. */
.form-fieldset {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px 10px;
  margin: 0 0 16px;
  background: var(--bg-soft);
}
.form-fieldset > legend {
  padding: 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--green-700);
}

@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .field-x2 { grid-column: auto; }
}

.check-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

/* Linha clicável: checkbox + texto colados. Toda a área é hover/click. */
.check-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  user-select: none;
  transition: background-color .12s ease;
}
.check-row:hover { background: rgba(28, 168, 56, 0.06); }
.check-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--green-600);
  flex-shrink: 0;
  margin: 0;
}
.check-row span { line-height: 1; }

.muted { color: var(--muted); }
.small { font-size: 12.5px; }

.form-erro {
  margin: 12px 0 0 0;
  padding: 10px 14px;
  background: #fef5f5;
  color: #b91c1c;
  border: 1px solid #f9c5c5;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}

.form-ok {
  margin: 12px 0 0 0;
  padding: 10px 14px;
  background: #effaf2;
  color: #166534;
  border: 1px solid #bce5c8;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}

/* Hint inline em labels (texto opcional cinza) */
.field label .hint {
  font-weight: 400;
  color: var(--muted);
  font-size: 11.5px;
  margin-left: 4px;
}

/* ============================================================
   EDITOR DE PERMISSÕES — árvore de itens com checkboxes
   (Sistema > Permissões)
   ============================================================ */
.permissoes-arvore {
  margin-top: 6px;
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.permissoes-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.permissoes-titulo {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.permissoes-acoes {
  display: inline-flex;
  gap: 4px;
}
.permissoes-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 360px;
  overflow-y: auto;
}
.permissoes-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .12s ease;
  font-size: 13px;
}
.permissoes-item:hover { background: rgba(28, 168, 56, 0.06); }
.permissoes-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--green-600);
  flex-shrink: 0;
}
.permissoes-item.nivel-0 {
  font-weight: 600;
  color: var(--ink);
  margin-top: 4px;
}
.permissoes-item.nivel-0:first-child { margin-top: 0; }
.permissoes-item.nivel-1 {
  padding-left: 28px;
  color: var(--muted);
  font-weight: 500;
  font-size: 12.5px;
  position: relative;
}
.permissoes-item.nivel-1::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  width: 6px;
  height: 1px;
  background: rgba(28, 168, 56, 0.30);
}
.permissoes-item-label {
  user-select: none;
}

/* Botão pequeno de link (Marcar todos / Desmarcar todos) */
.btn-link {
  background: transparent;
  border: none;
  color: var(--green-700);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color .12s ease;
}
.btn-link:hover { background: rgba(28, 168, 56, 0.10); }

/* Card mostrando o arquivo anexo já gravado (modo edição) */
.arquivo-atual {
  margin-top: 6px;
  padding: 8px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 12.5px;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.arquivo-atual-label code {
  background: rgba(15, 61, 26, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--ink);
}
.arquivo-link {
  text-decoration: none;
  font-weight: 600;
  color: var(--green-700);
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid rgba(28, 168, 56, 0.25);
  background: rgba(28, 168, 56, 0.06);
  font-size: 11.5px;
  transition: background-color .12s ease;
}
.arquivo-link:hover {
  background: rgba(28, 168, 56, 0.14);
}
.arquivo-atual .hint {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 11px;
  margin: 0;
}

.form-intro {
  margin: 0 0 18px 0;
  padding: 10px 14px;
  background: var(--bg-soft);
  border-left: 3px solid var(--green-500);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.55;
}
.form-intro strong { color: var(--green-700); }

/* ============================================================
   REPEATER (telefones, e-mails)
   ============================================================ */
.repeater {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.repeater-row {
  display: grid;
  grid-template-columns: 1fr 2fr auto auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.repeater-row .field { margin-bottom: 0; }

@media (max-width: 640px) {
  .repeater-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

/* ============================================================
   DASHBOARD FINANCEIRO — cards de saldo por contrato
   ============================================================ */

/* Iframe usado quando o dashboard é a tela padrão (dentro de index.php).
   O main ganha .dash-main--has-embed pelo JS: zera padding e fixa altura,
   e o iframe filho preenche 100%. */
main.dash-main.dash-main--has-embed {
  padding: 0;
  height: calc(100vh - var(--header-h));
  min-height: 0;
  overflow: hidden;
}
iframe.dash-default-embed {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}

.dash-main--dashboard {
  padding: 18px 22px;
  overflow-y: auto;
}

.dashboard-wrap {
  max-width: none;
  margin: 0;
}

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 0 4px;
}

.dashboard-info {
  color: var(--muted);
  font-size: 0.85rem;
}

/* Botão redondo com ícone de olho — alterna mostrar/ocultar saldos. */
.btn-reveal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--green-700);
  box-shadow: 0 1px 2px rgba(15, 61, 26, 0.06);
  transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.btn-reveal:hover {
  background: var(--green-50);
  box-shadow: 0 2px 6px rgba(15, 61, 26, 0.10);
}
.btn-reveal:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
}
.btn-reveal svg { width: 20px; height: 20px; }
.btn-reveal .icon-eye { display: none; }
.btn-reveal.is-revealed .icon-eye-off { display: none; }
.btn-reveal.is-revealed .icon-eye     { display: inline-block; }

/* Máscara ***** por padrão; só mostra o valor quando .is-revealed. */
.dashboard-cards .saldo-real { display: none; }
.dashboard-cards.is-revealed .saldo-mask { display: none; }
.dashboard-cards.is-revealed .saldo-real { display: inline; }
.saldo-mask {
  letter-spacing: 2px;
  color: var(--muted);
}

.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.dashboard-empty {
  grid-column: 1 / -1;
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  border-radius: 10px;
}

.contract-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green-500);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(15, 61, 26, 0.06);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-height: 170px;
}

.contract-card:hover {
  box-shadow: 0 4px 14px rgba(15, 61, 26, 0.12);
  transform: translateY(-1px);
}

.contract-card-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 2px;
}

.contract-card-label--saldo {
  margin-top: auto;
  padding-top: 12px;
}

.contract-card-nome {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.contract-card-cnpj {
  font-size: 0.9rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.contract-card-cnpj-lbl {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #6b7280;
  font-weight: 600;
  margin-right: 4px;
}

.contract-card-saldo {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.contract-card-saldo.saldo-pos  { color: var(--green-700); }
.contract-card-saldo.saldo-neg  { color: #b91c1c; }
.contract-card-saldo.saldo-zero { color: var(--muted); }

@media (max-width: 520px) {
  .dashboard-cards { grid-template-columns: 1fr; }
  .dash-main--dashboard { padding: 12px 12px; }
}

/* ============================================================
   PAGSEGURO — Dashboards e Importador CSV
   ============================================================ */
.ps-section-title {
  margin: 24px 4px 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--green-900);
  letter-spacing: 0.3px;
}
.ps-section-title:first-child { margin-top: 4px; }
.ps-section-title small {
  font-weight: 500;
  color: var(--muted);
  margin-left: 6px;
  font-size: 0.78rem;
}

/* KPIs coloridos (Operações PagSeguro) */
.ps-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}
.ps-kpi {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 61, 26, 0.06);
}
.ps-kpi-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 4px;
}
.ps-kpi-valor {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.ps-kpi-verde    { border-left: 4px solid var(--green-500); }
.ps-kpi-verde    .ps-kpi-valor { color: var(--green-700); }
.ps-kpi-preto    { border-left: 4px solid #222; }
.ps-kpi-preto    .ps-kpi-valor { color: var(--ink); }
.ps-kpi-vermelho { border-left: 4px solid #b91c1c; }
.ps-kpi-vermelho .ps-kpi-valor { color: #b91c1c; }
.ps-kpi-amarelo  { border-left: 4px solid #d4a017; }
.ps-kpi-amarelo  .ps-kpi-valor { color: #a37b00; }

/* Colunas de taxa em vermelho */
.ps-tax { color: #b91c1c; }

/* Linha TOTAL do rodapé dos dashboards */
.ps-total-row th {
  background: var(--green-50);
  color: var(--green-900);
  border-top: 2px solid var(--green-500);
}

/* Preview do importador CSV */
.preview-stats {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 10px 0 8px;
}
.preview-stat {
  padding: 8px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--ink);
}
.preview-stat strong { font-size: 1rem; color: var(--green-700); margin-right: 4px; }
.preview-avisos {
  color: #a37b00;
  font-size: 0.82rem;
  background: #fff8e1;
  border: 1px solid #f2d97a;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
}
.preview-avisos:empty { display: none; }

/* Painel de resultado do import CSV — substitui alert() nativo. */
.import-result-title {
  margin: 0 0 14px;
  color: var(--green-700);
  font-size: 1.05rem;
  font-weight: 700;
}
.import-result-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.import-stat {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.import-stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  font-weight: 600;
}
.import-stat-valor {
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.15;
}
.import-stat-ok    { border-left: 4px solid var(--green-500); }
.import-stat-ok    .import-stat-valor { color: var(--green-700); }
.import-stat-erro  { border-left: 4px solid #b91c1c; }
.import-stat-erro  .import-stat-valor { color: #b91c1c; }
.import-stat-total { border-left: 4px solid #222; }

/* ============================================================
   CRM DIALOG — substitui alert() / confirm() nativos
   ============================================================ */
.crm-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 61, 26, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: crmDlgFadeIn 0.14s ease;
}
@keyframes crmDlgFadeIn { from { opacity: 0; } to { opacity: 1; } }

.crm-dialog-frame {
  background: #fff;
  border-radius: 12px;
  box-shadow:
    0 1px 3px rgba(15, 61, 26, 0.08),
    0 24px 60px rgba(0, 0, 0, 0.30);
  min-width: 320px;
  max-width: 520px;
  width: 100%;
  overflow: hidden;
  animation: crmDlgIn 0.20s cubic-bezier(.4, 0, .2, 1);
}
@keyframes crmDlgIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.crm-dialog-title {
  padding: 14px 20px 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--green-900);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.crm-dialog-body {
  padding: 16px 20px 12px;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.45;
}
.crm-dialog-body p { margin: 0 0 8px; }
.crm-dialog-body p:last-child { margin-bottom: 0; }

.crm-dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.crm-dialog-actions .btn { min-width: 100px; }

/* Botão danger — usado em confirms destrutivos (exclusão) */
.btn.btn-danger {
  background: #b91c1c;
  color: #fff;
  border: 0;
}
.btn.btn-danger:hover { background: #991b1b; }
.btn.btn-danger:focus-visible {
  outline: 2px solid #b91c1c;
  outline-offset: 2px;
}

/* ==== modal genérico do CRM (usado por Apoio > Bancos/Estado/Cidade/etc) ==== */
.crm-modal-backdrop {
  position: fixed; inset: 0; background: rgba(16,18,23,.45);
  display: flex; align-items: flex-start; justify-content: center;
  z-index: 200; padding: 40px 16px; overflow-y: auto;
}
.crm-modal-backdrop[hidden] { display: none; }
.crm-modal {
  background: #fff; width: 100%; max-width: 640px; border-radius: 16px;
  overflow: hidden; box-shadow: 0 30px 80px rgba(16,18,23,.3);
}
.crm-modal.crm-modal-lg { max-width: 900px; }
.crm-modal-head {
  display: flex; align-items: center; padding: 16px 22px;
  border-bottom: 1px solid var(--line, #e6e8ec); background: #f5f6f8;
}
.crm-modal-head h2 {
  font-size: .95rem; font-weight: 600; color: #23272f; flex: 1 1 auto;
  margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crm-modal-close {
  margin-left: auto; background: none; border: 0; font-size: 1.4rem;
  cursor: pointer; color: #9aa1ab; line-height: 1; padding: 0 4px;
}
.crm-modal-close:hover { color: #16181d; }
.crm-modal-body { padding: 20px 22px; max-height: 68vh; overflow: auto; }
.crm-modal-foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 22px; border-top: 1px solid var(--line, #e6e8ec); background: #fafbfc;
}
.crm-modal .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.crm-modal .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.crm-modal .field-x2 { grid-column: span 2; }
.crm-modal .field-x3 { grid-column: span 3; }

/* botão "link" (usado em Configuração > Remover certificado) */
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #c0392b; font: inherit; text-decoration: underline;
}
.link-btn:hover { color: #922b21; }

/* ==== display read-only em modais (usado em Cobrança > Boleto editar) ==== */
.crm-modal .ro {
  font-size: .9rem; color: #23272f; padding: 9px 12px;
  background: #f7f8fa; border-radius: 9px; min-height: 20px;
  border: 1px solid transparent;
}
.btn-cancelar {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border: 1px solid #e6e8ec; border-radius: 9px;
  background: #fff; color: #8a919c; font-family: inherit; font-size: .9rem;
  cursor: pointer; transition: all .15s;
}
.btn-cancelar:hover { background: #fdecea; border-color: #f3c6c0; color: #c0392b; }
.btn-cancelar.on { background: #fdecea; border-color: #e6a49b; color: #c0392b; }

/* badges Sicoob na lista */
.badge-sicoob-pago { background:#cdeede; color:#0f6b36; }
.badge-sicoob-reg  { background:#e6f5ea; color:#1e7d40; }
.badge-sicoob-fila { background:#fef3d0; color:#8a6d1a; }
.badge-sicoob-err  { background:#fdecea; color:#c0392b; }
.btn-mini {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border: 0; border-radius: 8px;
  background: #16181d; color: #fff; font-size: .76rem; font-weight: 500;
  cursor: pointer; text-decoration: none; line-height: 1;
}
.btn-mini:hover:not(:disabled) { background: #000; }
.btn-mini:disabled { opacity: .5; cursor: default; }

/* ==== Financeiro > Extrato Sicoob ==== */
.extrato-saldos {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px 4px;
}
.extrato-saldo {
  background: #f0f4ff; border: 1px solid #d6e0ff; border-radius: 10px;
  padding: 9px 14px; min-width: 130px;
}
.extrato-saldo-label { font-size: .72rem; color: #5f6368; }
.extrato-saldo-valor { font-weight: 700; color: #1b2a52; }
.extrato-trx-obs {
  font-size: .78rem; color: #6b7280; font-style: italic; margin-top: 2px;
}
.extrato-cred { color: #12805c !important; font-weight: 600; }
.extrato-deb  { color: #c0392b !important; font-weight: 600; }
.extrato-totais b.cred { color: #12805c; }
.extrato-totais b.deb  { color: #c0392b; }
.extrato-toolbar { flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.extrato-toolbar .field-mes { max-width: 180px; }
.extrato-toolbar .field-ano { max-width: 110px; }
.extrato-toolbar .field-dia { max-width:  90px; }
.extrato-toolbar .resumo-right { margin-left: auto; }

/* Cobrança Expressa (PIX) — bloco QR */
.pix-qr-box {
  display: grid; grid-template-columns: 180px 1fr; gap: 16px;
  padding: 14px; margin: 8px 0;
  background: #f7f8fa; border: 1px solid #e6e8ec; border-radius: 12px;
}
.pix-qr-img { display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e6e8ec; border-radius: 10px; padding: 6px; }
.pix-qr-img img { width: 160px; height: 160px; display: block; }
.pix-qr-copy { display: flex; flex-direction: column; gap: 6px; }
.pix-qr-copy label { font-size: .74rem; font-weight: 500; color: #6b7280; text-transform: uppercase; letter-spacing: .4px; }
.pix-qr-copy textarea { width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid #e6e8ec; border-radius: 8px; font-family: monospace; font-size: .78rem;
  background: #fff; color: #23272f; resize: none; }
.pix-qr-copy button { align-self: flex-start; margin-top: 4px; }

/* Badges Sicoob para PIX */
.badge-pix-ativa   { background:#e0f2fe; color:#075985; }
.badge-pix-pago    { background:#cdeede; color:#0f6b36; }
.badge-pix-removida{ background:#fdecea; color:#c0392b; }
.badge-pix-erro    { background:#fdecea; color:#c0392b; }

/* Dashboard financeiro — bloco "A receber" (Cobrança / Cartões) no card */
.contract-card-label--areceber {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e6e8ec;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #6b7280;
  font-weight: 600;
}
.contract-card-areceber {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}
.areceber-col { text-align: center; }
.areceber-rot {
  font-size: .8rem;
  color: #6b7280;
  margin-bottom: 2px;
}
.areceber-val {
  font-size: 1.05rem;
  font-weight: 600;
  color: #16181d;
}

/* ============================================================
   PORTAL DO CLIENTE (Finanças) — app/portal/portal.php
   Modelo: cards brancos sobre fundo cinza claro, título da seção
   em caixa alta, receitas em verde e despesas em vermelho.
   ============================================================ */
.page-portal {
  background: #eef1f3;
  min-height: 100vh;
}
.portal-page {
  /* Largo o bastante pros 5 tiles de 135px ficarem lado a lado:
     350 (saldo) + 16 + 5×135 + 4×16 + 32 de padding = 1137px. */
  max-width: 1150px;
  margin: 0 auto;
  padding: 18px 16px 40px;
}
.portal-titulo {
  font: 600 1.35rem var(--font);
  color: #3c4650;
  margin: 6px 0 2px;
}
.portal-contratante {
  color: var(--muted);
  font-size: .85rem;
  margin: 0 0 16px;
}
.portal-sair {
  color: var(--green-700);
  font: 600 .85rem var(--font);
  text-decoration: none;
  margin-left: 14px;
}
.portal-sair:hover { text-decoration: underline; }

.portal-grid {
  display: grid;
  /* Coluna esquerda fixa em 350px (card SALDO); a direita ocupa o resto. */
  grid-template-columns: 350px 1fr;
  gap: 16px;
}
.portal-card-saldo   { grid-column: 1; grid-row: 1; height: 135px; }
.portal-tiles        { grid-column: 2; grid-row: 1; }
/* Área de conteúdo inicial (lista de movimentos) — largura total e
   ALTURA FIXA: todas as visões abrem no mesmo tamanho, mesmo as que
   ocultam busca/paginação (Configurações, "em breve") ou têm poucas linhas. */
.portal-conteudo     { grid-column: 1 / -1; grid-row: 2; min-height: 574px; }
/* Card Sair — meia altura no par do Configurações, ícone vermelho.
   (dimensões/layout herdados de .portal-tile-meia; aqui só a cor) */
.portal-tile.portal-tile-sair .portal-tile-icone { color: #d9534f; }
.portal-tile.portal-tile-sair:hover { border-color: #d9534f; }
/* Instalar app — botão flutuante (FAB) no canto inferior esquerdo.
   Aparece só quando o PWA é instalável (controlado por install.js). */
.pwa-install-fab {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px 0 12px;
  background: #ffffff;
  color: var(--green-700);
  border: 1px solid rgba(28, 168, 56, 0.35);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(16, 24, 32, .12);
  font: 600 13px var(--font);
  font-family: inherit;
  cursor: pointer;
  transition: background-color .15s, box-shadow .2s, transform .15s;
}
.pwa-install-fab:hover {
  background: rgba(28, 168, 56, 0.08);
  box-shadow: 0 6px 18px rgba(16, 24, 32, .16);
  transform: translateY(-1px);
}
.pwa-install-fab-icone {
  width: 20px;
  height: 20px;
  display: inline-flex;
  color: var(--green-700);
}
.pwa-install-fab-icone svg { width: 100%; height: 100%; }
.pwa-install-fab-label { line-height: 1; }
@media (max-width: 640px) {
  .pwa-install-fab { left: 12px; bottom: 12px; }
}
.portal-busca        { max-width: 320px; }
/* Altura FIXA da área da tabela: TODAS as visões (Movimentos, Boleto,
   Grupo, "em breve", vazia…) abrem com a MESMA dimensão, independente da
   quantidade de itens (footer/paginação sempre no rodapé). As linhas do
   portal usam padding menor (abaixo) p/ as 8 da página caberem sem scroll. */
.portal-conteudo .table-wrap { border: 0; height: 450px; overflow-y: auto; }
/* Nenhuma coluna quebra linha — texto longo corta com reticências
   (o título completo fica no tooltip via atributo title). */
.portal-conteudo .data-table { table-layout: fixed; width: 100%; }
.portal-conteudo .data-table th,
.portal-conteudo .data-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Linhas um pouco mais baixas só no portal (padding 12→10) para as 8 linhas
   da página caberem na área fixa de 450px sem rolagem interna. */
.portal-conteudo .data-table thead th,
.portal-conteudo .data-table tbody td { padding-top: 9px; padding-bottom: 9px; }
/* Larguras das colunas: definidas POR VISÃO nas flags |wNNN dos cols
   (montarCabecalho no portal.js) — nada por posição aqui. */
.portal-btn-mini {
  display: inline-block;
  padding: 3px 10px;
  margin-right: 4px;
  border: 1px solid #cdd6dd;
  border-radius: 3px;
  background: #fff;
  color: #3c4650;
  font: 600 .72rem var(--font);
  cursor: pointer;
}
.portal-btn-mini:hover { border-color: var(--green-600); color: var(--green-700); }
/* Tile ativo (visão aberta na área de conteúdo) */
.portal-tile.is-ativo { border-color: var(--green-600); }
/* Par de meia altura: dois botões empilhados na área de UM tile 135×135 */
.portal-tile-par {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 135px;
  height: 135px;
  flex-shrink: 0;
}
.portal-tile.portal-tile-meia {
  width: 135px;
  height: 63px;
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  gap: 8px;
  padding: 6px 10px;
  font-size: .72rem;
  line-height: 1.15;
}
.portal-tile.portal-tile-meia .portal-tile-icone {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
/* Botão PDF nas listas de Boleto / Cobrança expressa */
.portal-pdf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  color: var(--green-700);
  text-decoration: none;
}
.portal-pdf-btn svg { width: 18px; height: 18px; }
.portal-pdf-btn:hover { background: var(--green-50); color: var(--green-900); }
/* Rodapé paginado usa o space-between do .portal-card-foot: o slot
   #acaoNovo fica à esquerda (vazio nas visões sem ação) e a paginação
   encosta à direita. */
.portal-btn-novo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-600);
  border: 1px solid var(--green-600);
  border-radius: 4px;
  color: #fff;
  font: 600 .85rem var(--font);
  padding: 8px 14px;
  text-decoration: none;
}
.portal-btn-novo:hover { background: var(--green-700); }
/* Botão "Caixa de liberação" (ao lado do + Pagamento, só p/ Avante) */
.portal-btn-caixa {
  background: #3c4650;
  border: 1px solid #3c4650;
  color: #fff;
  font: 600 .85rem var(--font);
  border-radius: 4px;
  padding: 8px 14px;
}
.portal-btn-caixa:hover { background: #2b333b; }
/* Botão "Extrato" (entre + Pagamento e Caixa de liberação) — secundário */
.portal-btn-extrato {
  background: #fff;
  border: 1px solid var(--green-600);
  color: var(--green-700);
  font: 600 .85rem var(--font);
  border-radius: 4px;
  padding: 8px 14px;
  cursor: pointer;
}
.portal-btn-extrato:hover { background: var(--green-50); }
/* Tela do Extrato (janela do portal) */
.extrato-page { display: flex; flex-direction: column; gap: 16px; padding: 14px 18px 16px; }
/* Histórico com altura fixa: a janela flutuante não encolhe com poucos itens
   nem infla com muitos — rola internamente (mesmo padrão do .portal-conteudo). */
.extrato-page .table-wrap { height: 400px; overflow-y: auto; }
.extrato-filtro { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.extrato-filtro .ef-campo { display: flex; flex-direction: column; gap: 4px; }
.extrato-filtro .ef-campo label { font: 600 .74rem var(--font); color: #6b7280; }
.extrato-filtro .ef-campo input {
  border: 1px solid #cfd8d3; border-radius: 6px; padding: 7px 10px;
  font: 500 .86rem var(--font); color: #23272f; background: #fff;
}
.extrato-filtro .ef-espaco { flex: 1; }
.extrato-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }
.extrato-resumo .er-box {
  background: #fff; border: 1px solid #e3ece6; border-radius: 8px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
}
.extrato-resumo .er-box-destaque { border-color: var(--green-600); background: var(--green-50); }
.extrato-resumo .er-rot { font: 500 .74rem var(--font); color: #6b7280; }
.extrato-resumo .er-val { font: 700 1.05rem var(--font); color: #23272f; }
.extrato-resumo .er-cred { color: #2e9e4f; }
.extrato-resumo .er-deb  { color: #d23f31; }
.extrato-resumo .er-reserv { color: #b26a00; }
.extrato-table .ext-doc { display: block; font: 400 .72rem var(--font); color: #9aa1ab; margin-top: 1px; }
.extrato-table .ext-saldo { font-weight: 600; color: #23272f; white-space: nowrap; }
@media (max-width: 640px) { .extrato-resumo { grid-template-columns: repeat(2, 1fr); } }
/* Caixa de Liberação (janela) — 3 seções empilhadas */
.caixa-liberacao { display: flex; flex-direction: column; gap: 16px; }
.caixa-card { background: #fff; border: 1px solid #e3ece6; border-radius: 8px; overflow: hidden; }
.caixa-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #f7f8fa; border-bottom: 1px solid #e6e8ec; }
.caixa-head h3 { margin: 0; font: 600 .84rem var(--font); color: #23272f; flex: 1; }
.caixa-cnt { font: 400 .74rem var(--font); color: #9aa1ab; margin-left: 6px; }
.caixa-tot strong { color: var(--green-700); }
.caixa-liberacao .data-table td.cen, .caixa-liberacao .data-table th.cen { text-align: center; }
.caixa-msg { padding: 10px 14px; border-radius: 8px; font: 500 .86rem var(--font); }
.caixa-msg.is-ok  { background: var(--green-50); color: var(--green-900); }
.caixa-msg.is-erro { background: #fdecea; color: #c0392b; }
.cl-mut { color: #9aa1ab; }
.cl-comp { text-decoration: none; margin: 0 2px; }
.cl-badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .72rem; }
.cl-st-pago, .cl-st-agendado { background: #e6f5ea; color: #1e7d40; }
.cl-st-cancelado { background: #f0f2f5; color: #6b7280; }
.cl-st-erro { background: #fdecea; color: #c0392b; }

/* Modo "só novo" (?soNovo=1 — janela do portal): mostra APENAS o form
   de criação — esconde a lista e o modal vira conteúdo normal da página
   (sem backdrop escuro nem sombra de "janela dentro de janela"). */
body.is-so-novo .table-card { display: none; }
body.is-so-novo .crm-modal-backdrop {
  position: static;
  background: transparent;
  padding: 0;
  overflow: visible;
}
body.is-so-novo .crm-modal,
body.is-so-novo .crm-modal.crm-modal-lg {
  max-width: none;
  border-radius: 0;
  box-shadow: none;
}
body.is-so-novo .crm-modal-head { display: none; } /* título já é o da janela */
/* O max-height do corpo é relativo ao viewport do iframe — no modo
   soNovo isso colapsa (círculo: altura do iframe depende do conteúdo).
   Libera pra o form ocupar a altura real e a janela se ajustar. */
body.is-so-novo .crm-modal-body { max-height: none; overflow: visible; }
body.is-so-novo { height: auto; min-height: 0; }
.portal-paginacao    { display: inline-flex; align-items: center; gap: 12px; }
.portal-paginacao .btn[disabled] { opacity: .45; cursor: default; }
/* min-width:0 impede que descrições longas (nowrap) inflem a largura
   mínima do card e estourem o grid pra fora do contêiner. */
.portal-grid > .portal-card { min-width: 0; }
.portal-linha-desc { min-width: 0; }
@media (max-width: 720px) {
  .portal-grid { grid-template-columns: 1fr; }
  .portal-grid > * { grid-column: auto !important; grid-row: auto !important; }
}

/* Cards de acesso rápido — 135×135 cada */
.portal-tiles {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-content: start;
}
.portal-tile {
  width: 135px;
  height: 135px;
  background: #fff;
  border: 1px solid #dfe4e8;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(16, 24, 32, .05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  text-decoration: none;
  text-align: center;
  font: 600 .8rem var(--font);
  color: #3c4650;
  transition: border-color .15s, box-shadow .15s;
}
.portal-tile:hover {
  border-color: var(--green-600);
  box-shadow: 0 2px 6px rgba(16, 24, 32, .10);
}
.portal-tile-icone {
  display: inline-flex;
  width: 30px;
  height: 30px;
  color: var(--green-600);
}
.portal-tile-icone svg { width: 100%; height: 100%; }

.portal-card {
  background: #fff;
  border: 1px solid #dfe4e8;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(16, 24, 32, .05);
  display: flex;
  flex-direction: column;
}
.portal-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #e8ecef;
}
.portal-card-head h2 {
  font: 700 .78rem var(--font);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #55606a;
  margin: 0;
}
.portal-saldo-total {
  font: 700 1rem var(--font);
  color: var(--green-600);
}
.portal-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid #e8ecef;
  font-size: .82rem;
  color: var(--muted);
}

.portal-lista {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  flex: 1;
}
.portal-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid #f0f3f5;
  font-size: .88rem;
}
.portal-linha:last-child { border-bottom: 0; }
.portal-linha-data {
  color: #6a747e;
  white-space: nowrap;
  min-width: 86px;
}
.portal-linha-desc {
  flex: 1;
  color: #2f6db3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portal-linha.is-pago .portal-linha-desc { color: #7a848d; }
.portal-conta-icone {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: #55606a;
  flex-shrink: 0;
}
.portal-conta-icone svg { width: 100%; height: 100%; }
.portal-btn-icone {
  display: inline-flex;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.portal-btn-icone svg { width: 100%; height: 100%; }
.portal-valor { font-weight: 600; color: #3c4650; white-space: nowrap; }
.portal-valor-receita { font-weight: 600; color: #2e9e4f; white-space: nowrap; }
.portal-valor-despesa { font-weight: 600; color: #d23f31; white-space: nowrap; }
.portal-vazio {
  padding: 14px 16px;
  color: var(--muted);
  font-size: .85rem;
}

.portal-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px;
}
.portal-btn {
  font: 600 .85rem var(--font);
  border-radius: 4px;
  padding: 9px 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.portal-btn-receita { background: #2e9e4f; border: 1px solid #2e9e4f; color: #fff; }
.portal-btn-receita:hover { background: #268a44; }
.portal-btn-despesa { background: #d9534f; border: 1px solid #d9534f; color: #fff; }
.portal-btn-despesa:hover { background: #c9443f; }

.portal-ver {
  font: 700 .68rem var(--font);
  letter-spacing: .05em;
  border: 0;
  border-radius: 3px;
  color: #fff;
  padding: 6px 10px;
  cursor: pointer;
}
.portal-ver-receita { background: #2e9e4f; }
.portal-ver-receita:hover { background: #268a44; }
.portal-ver-despesa { background: #d9534f; }
.portal-ver-despesa:hover { background: #c9443f; }