/*
 * FichaMax UI 1.4
 * Camada visual compartilhada. Mantem as regras e os fluxos de cada modulo.
 */

html.fm-pro-app {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface2: #eef3f9;
  --border: #d9e3ef;
  --accent: #0b63ce;
  --accent2: #00a66b;
  --text: #101828;
  --muted: #667085;
  --muted2: #475467;
  --danger: #d92d20;
  --warning: #b54708;
  --sidebar: 274px;
  --radius: 12px;
  color-scheme: light;
}

html.fm-pro-app[data-theme="dark"] {
  --bg: #080d17;
  --surface: #101827;
  --surface2: #172235;
  --border: #27364b;
  --accent: #5b9cff;
  --accent2: #23d49a;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --muted2: #c0cada;
  color-scheme: dark;
}

html.fm-pro-app body {
  background:
    radial-gradient(circle at 82% 0, rgba(11, 99, 206, .055), transparent 30rem),
    var(--bg) !important;
  color: var(--text) !important;
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

html.fm-pro-app a,
html.fm-pro-app button,
html.fm-pro-app input,
html.fm-pro-app select,
html.fm-pro-app textarea,
html.fm-pro-app summary {
  -webkit-tap-highlight-color: transparent;
}

html.fm-pro-app :focus-visible {
  outline: 3px solid rgba(11, 99, 206, .28) !important;
  outline-offset: 2px;
}

html.fm-pro-app .sidebar {
  width: var(--sidebar) !important;
  min-width: var(--sidebar) !important;
  background: color-mix(in srgb, var(--surface) 96%, var(--accent) 4%) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: 10px 0 38px rgba(16, 24, 40, .045);
}

html.fm-pro-app .sb-header {
  padding: 22px 20px 18px !important;
  border-color: var(--border) !important;
  background:
    linear-gradient(135deg, rgba(11, 99, 206, .075), rgba(0, 166, 107, .025)),
    var(--surface);
}

html.fm-pro-app .sb-logo,
html.fm-pro-app .mobile-brand {
  color: var(--text) !important;
  font-size: 22px !important;
  letter-spacing: -.035em !important;
}

html.fm-pro-app .sb-logo span,
html.fm-pro-app .mobile-brand span {
  color: var(--accent2) !important;
}

html.fm-pro-app .sb-loja {
  color: var(--muted2) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 205px;
}

html.fm-pro-app .sb-product {
  margin-top: 3px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

html.fm-pro-app .sb-product + .sb-loja {
  margin-top: 7px;
}

html.fm-pro-app .sb-nav {
  padding: 10px 10px 100px !important;
}

html.fm-pro-app .sb-section {
  color: var(--muted) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .15em !important;
  padding: 10px 10px 7px !important;
}

html.fm-pro-app .sb-link {
  min-height: 42px;
  margin: 2px 0;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 10px;
  color: var(--muted2) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

html.fm-pro-app .sb-link:hover {
  background: color-mix(in srgb, var(--accent) 9%, transparent) !important;
  color: var(--text) !important;
}

html.fm-pro-app .sb-link.ativo {
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}

html.fm-pro-app .sb-link .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: 13px !important;
}

html.fm-pro-app .sb-group {
  margin: 5px 0;
}

html.fm-pro-app .sb-group > summary {
  list-style: none;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

html.fm-pro-app .sb-group > summary::-webkit-details-marker {
  display: none;
}

html.fm-pro-app .sb-group > summary:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

html.fm-pro-app .sb-group[open] > summary {
  color: var(--accent);
}

html.fm-pro-app .sb-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  margin-right: 7px;
  color: var(--accent);
}

html.fm-pro-app .sb-chevron {
  color: var(--muted);
  font-size: 20px;
  transform: rotate(0);
  transition: transform .16s ease;
}

html.fm-pro-app .sb-group[open] .sb-chevron {
  transform: rotate(90deg);
}

html.fm-pro-app .sb-group-links {
  margin: 2px 0 7px 11px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}

html.fm-pro-app .sb-group-links .sb-link {
  min-height: 38px;
  padding: 8px 10px !important;
  font-size: 12.5px !important;
}

html.fm-pro-app .sb-bottom {
  padding: 14px 16px !important;
  border-color: var(--border) !important;
  background: color-mix(in srgb, var(--surface) 97%, var(--accent) 3%) !important;
}

html.fm-pro-app .theme-toggle {
  border-color: var(--border) !important;
  background: var(--surface2) !important;
  color: var(--text) !important;
}

html.fm-pro-app .btn-sair {
  border-radius: 10px !important;
}

html.fm-pro-app .main {
  width: calc(100% - var(--sidebar));
  max-width: 1680px;
  padding: 30px clamp(24px, 3vw, 48px) 80px !important;
  background: transparent !important;
}

html.fm-pro-app .topbar {
  min-height: 60px;
  margin-bottom: 24px !important;
}

html.fm-pro-app .topbar h1,
html.fm-pro-app h1 {
  color: var(--text);
  font-size: clamp(22px, 2vw, 28px) !important;
  line-height: 1.18;
  letter-spacing: -.025em !important;
  font-weight: 800 !important;
}

html.fm-pro-app .sub {
  color: var(--muted) !important;
  font-size: 13px !important;
  line-height: 1.5;
}

html.fm-pro-app .card,
html.fm-pro-app .form-card,
html.fm-pro-app .metric,
html.fm-pro-app .met,
html.fm-pro-app .insight,
html.fm-pro-app .user-card,
html.fm-pro-app .banco-card,
html.fm-pro-app .detalhe-card,
html.fm-pro-app .form-nova {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .025), 0 10px 30px rgba(16, 24, 40, .035);
}

html.fm-pro-app[data-theme="dark"] .card,
html.fm-pro-app[data-theme="dark"] .form-card,
html.fm-pro-app[data-theme="dark"] .metric,
html.fm-pro-app[data-theme="dark"] .met,
html.fm-pro-app[data-theme="dark"] .insight,
html.fm-pro-app[data-theme="dark"] .user-card,
html.fm-pro-app[data-theme="dark"] .banco-card,
html.fm-pro-app[data-theme="dark"] .detalhe-card,
html.fm-pro-app[data-theme="dark"] .form-nova {
  box-shadow: none;
}

html.fm-pro-app .card-title,
html.fm-pro-app .card-titulo,
html.fm-pro-app .form-titulo {
  color: var(--text) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
}

html.fm-pro-app .metric-label,
html.fm-pro-app .met-label,
html.fm-pro-app .insight-k {
  color: var(--muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
}

html.fm-pro-app .metric-value,
html.fm-pro-app .met-valor,
html.fm-pro-app .insight-v {
  color: var(--text);
  letter-spacing: -.035em !important;
}

html.fm-pro-app .btn {
  min-height: 42px;
  border-radius: 10px !important;
  padding: 10px 15px !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.15;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

html.fm-pro-app .btn:hover {
  transform: translateY(-1px);
}

html.fm-pro-app .btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 22%, transparent);
}

html.fm-pro-app .btn-green {
  background: var(--accent2) !important;
  color: #00170f !important;
}

html.fm-pro-app .btn-ghost,
html.fm-pro-app .btn-buscar {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

html.fm-pro-app input:not([type="checkbox"]):not([type="radio"]),
html.fm-pro-app select,
html.fm-pro-app textarea {
  min-height: 46px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  font-size: 14px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .025);
}

html.fm-pro-app input:focus,
html.fm-pro-app select:focus,
html.fm-pro-app textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent) !important;
}

html.fm-pro-app label {
  color: var(--muted2) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .065em !important;
}

html.fm-pro-app table {
  width: 100%;
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

html.fm-pro-app th {
  background: color-mix(in srgb, var(--surface2) 70%, transparent);
  color: var(--muted) !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  white-space: nowrap;
}

html.fm-pro-app th,
html.fm-pro-app td {
  border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent) !important;
}

html.fm-pro-app tr:hover td {
  background: color-mix(in srgb, var(--accent) 3.5%, transparent) !important;
}

html.fm-pro-app .badge,
html.fm-pro-app [class*="badge-"] {
  font-weight: 750 !important;
  letter-spacing: .01em;
}

html.fm-pro-app .b-green,
html.fm-pro-app .badge-green {
  background: rgba(0, 166, 107, .12) !important;
  color: #087a52 !important;
}

html.fm-pro-app[data-theme="dark"] .b-green,
html.fm-pro-app[data-theme="dark"] .badge-green {
  color: #5de2b6 !important;
}

html.fm-pro-app .b-blue,
html.fm-pro-app .badge-blue {
  background: rgba(11, 99, 206, .12) !important;
  color: var(--accent) !important;
}

html.fm-pro-app .b-yellow,
html.fm-pro-app .badge-yellow {
  background: rgba(181, 71, 8, .11) !important;
  color: var(--warning) !important;
}

html.fm-pro-app .b-red,
html.fm-pro-app .badge-red {
  background: rgba(217, 45, 32, .1) !important;
  color: var(--danger) !important;
}

html.fm-pro-app .empty {
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface2) 35%, transparent);
  color: var(--muted) !important;
}

html.fm-pro-app .wa-suporte-fixo {
  right: 18px !important;
  bottom: 18px !important;
  background: #12b76a !important;
  color: #052e20 !important;
  box-shadow: 0 12px 28px rgba(18, 183, 106, .22) !important;
}

/* Superadministrador */
html.fm-pro-admin {
  --bg: #f4f7fb;
  --surface: #fff;
  --surface2: #eef3f9;
  --border: #d9e3ef;
  --accent: #00a66b;
  --accent2: #0b63ce;
  --text: #101828;
  --muted: #667085;
  --muted2: #475467;
  --danger: #d92d20;
  --warning: #b54708;
  color-scheme: light;
}

html.fm-pro-admin body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

html.fm-pro-admin .sidebar {
  background: #fff !important;
  border-color: var(--border) !important;
  box-shadow: 10px 0 38px rgba(16, 24, 40, .045);
}

html.fm-pro-admin .sb-link {
  margin: 2px 10px;
  border: 0 !important;
  border-radius: 10px;
  color: var(--muted2) !important;
  font-weight: 700 !important;
}

html.fm-pro-admin .sb-link:hover,
html.fm-pro-admin .sb-link.ativo {
  background: #eaf2ff !important;
  color: var(--accent2) !important;
  box-shadow: inset 3px 0 0 var(--accent2);
}

html.fm-pro-admin .main {
  background: transparent !important;
  padding: 30px clamp(24px, 3vw, 48px) 70px !important;
}

html.fm-pro-admin .card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .035);
}

html.fm-pro-admin input,
html.fm-pro-admin select,
html.fm-pro-admin textarea {
  background: #fff !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Portal do cliente */
html.fm-pro-client {
  --bg: #f4f7fb;
  --surface: #fff;
  --surface2: #eef3f9;
  --border: #d9e3ef;
  --accent: #0b63ce;
  --accent2: #00a66b;
  --text: #101828;
  --muted: #667085;
  --danger: #d92d20;
  --warning: #b54708;
  color-scheme: light;
}

html.fm-pro-client body {
  background:
    radial-gradient(circle at 82% 0, rgba(11, 99, 206, .06), transparent 28rem),
    var(--bg) !important;
  color: var(--text) !important;
}

html.fm-pro-client .top {
  background: rgba(255, 255, 255, .92) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 16px rgba(16, 24, 40, .045);
}

html.fm-pro-client .card,
html.fm-pro-client .dado,
html.fm-pro-client .empty {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .035);
}

html.fm-pro-client .card:hover {
  border-color: rgba(11, 99, 206, .4) !important;
  transform: translateY(-2px);
}

html.fm-pro-client .meta,
html.fm-pro-client .sub,
html.fm-pro-client .back,
html.fm-pro-client .info,
html.fm-pro-client .obs,
html.fm-pro-client .user {
  color: var(--muted) !important;
}

/* Telas de acesso */
html.fm-pro-auth {
  --auth-bg: #f5f8fc;
  --auth-surface: #fff;
  --auth-border: #d9e3ef;
  --auth-blue: #0b63ce;
  --auth-green: #00a66b;
  --auth-text: #101828;
  --auth-muted: #667085;
  color-scheme: light;
}

html.fm-pro-auth body {
  color: var(--auth-text);
}

html.fm-pro-auth :focus-visible {
  outline: 3px solid rgba(11, 99, 206, .25) !important;
  outline-offset: 2px;
}

html.fm-pro-auth body.fm-simple-auth {
  background:
    radial-gradient(circle at 18% 8%, rgba(0, 166, 107, .08), transparent 24rem),
    radial-gradient(circle at 84% 12%, rgba(11, 99, 206, .09), transparent 28rem),
    var(--auth-bg) !important;
  color: var(--auth-text) !important;
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, sans-serif !important;
}

html.fm-pro-auth body.fm-simple-auth .card {
  background: var(--auth-surface) !important;
  border-color: var(--auth-border) !important;
  color: var(--auth-text) !important;
  box-shadow: 0 24px 70px rgba(16, 24, 40, .12) !important;
}

html.fm-pro-auth body.fm-simple-auth .logo {
  color: var(--auth-text) !important;
  letter-spacing: -.035em !important;
}

html.fm-pro-auth body.fm-simple-auth .logo span {
  color: var(--auth-green) !important;
}

html.fm-pro-auth body.fm-simple-auth .sub,
html.fm-pro-auth body.fm-simple-auth .subtitulo,
html.fm-pro-auth body.fm-simple-auth .muted,
html.fm-pro-auth body.fm-simple-auth p {
  color: var(--auth-muted) !important;
}

html.fm-pro-auth body.fm-simple-auth input,
html.fm-pro-auth body.fm-simple-auth select,
html.fm-pro-auth body.fm-simple-auth textarea {
  background: #fff !important;
  border-color: var(--auth-border) !important;
  color: var(--auth-text) !important;
}

html.fm-pro-auth body.fm-simple-auth button,
html.fm-pro-auth body.fm-simple-auth .btn {
  border-radius: 10px !important;
}

/*
 * Estrutura de viewport:
 * no computador, a aplicacao ocupa exatamente a janela e somente a area
 * principal rola quando um relatorio ou uma tabela realmente ultrapassa a tela.
 */
@media (min-width: 901px) {
  html.fm-pro-app,
  html.fm-pro-app body,
  html.fm-pro-admin,
  html.fm-pro-admin body {
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }

  html.fm-pro-app body,
  html.fm-pro-admin body {
    min-height: 100dvh !important;
  }

  html.fm-pro-app .sidebar,
  html.fm-pro-admin .sidebar {
    height: 100dvh !important;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  html.fm-pro-app .main,
  html.fm-pro-admin .main {
    height: 100dvh;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  html.fm-pro-app .main,
  html.fm-pro-admin .main {
    padding-top: 20px !important;
    padding-bottom: 46px !important;
  }

  html.fm-pro-app .topbar,
  html.fm-pro-admin .topbar {
    min-height: 48px;
    margin-bottom: 16px !important;
  }

  html.fm-pro-app .card,
  html.fm-pro-app .form-card,
  html.fm-pro-app .metric,
  html.fm-pro-app .met,
  html.fm-pro-app .insight {
    border-radius: 14px !important;
  }
}

@media (max-width: 1100px) {
  html.fm-pro-app .main {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (max-width: 900px) {
  html.fm-pro-app body {
    padding-top: 64px !important;
  }

  html.fm-pro-app .main {
    width: 100% !important;
    padding: 20px 14px 92px !important;
  }

  html.fm-pro-app .sidebar {
    width: min(88vw, 340px) !important;
    min-width: 0 !important;
  }

  html.fm-pro-app .sb-nav {
    padding-bottom: 120px !important;
  }

  html.fm-pro-app .topbar {
    align-items: flex-start !important;
    flex-direction: column;
  }

  html.fm-pro-app .topbar-right,
  html.fm-pro-app .actions {
    width: 100%;
  }

  html.fm-pro-app .topbar-right .btn,
  html.fm-pro-app .actions .btn {
    flex: 1 1 auto;
  }

  html.fm-pro-app table {
    display: block;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  html.fm-pro-app th,
  html.fm-pro-app td {
    min-width: 118px;
  }

  html.fm-pro-app th:first-child,
  html.fm-pro-app td:first-child {
    min-width: 150px;
  }

  html.fm-pro-app .grid-4,
  html.fm-pro-app .metricas {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  html.fm-pro-app .grid-2,
  html.fm-pro-app .grid-3,
  html.fm-pro-app .grid-4,
  html.fm-pro-app .metricas,
  html.fm-pro-app .insights,
  html.fm-pro-app .form-2,
  html.fm-pro-app .form-3,
  html.fm-pro-app .form-grid {
    grid-template-columns: 1fr !important;
  }

  html.fm-pro-app .btn {
    min-height: 44px;
  }

  html.fm-pro-client .main {
    padding: 24px 16px 60px !important;
  }

  html.fm-pro-client .top-in {
    padding: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.fm-pro-app *,
  html.fm-pro-admin *,
  html.fm-pro-client * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}