/* =====================================================================
   TsQualy V1490 — PADRÃO VISUAL ÚNICO (camada final)
   Carregado por último no index.html. Define tokens e normaliza
   tipografia, cores, botões, campos, tabelas e responsividade
   (tablet ≤ 1024px, celular ≤ 600px) para todas as telas.
   Guia: PADRAO_VISUAL_TSQUALY.md (raiz do pacote)
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* Marca */
  --tq-azul-900: #12315e;
  --tq-azul-800: #16304f;
  --tq-azul-600: #1766b3;
  --tq-azul-100: #e8f1fb;
  --tq-laranja: #f07f1a;
  --tq-laranja-hover: #d96b0f;
  --tq-verde: #218653;
  --tq-vermelho: #d33b35;
  --tq-amarelo: #b9812e;

  /* Texto */
  --tq-texto: #1c2536;
  --tq-texto-2: #4f5f75;
  --tq-texto-3: #8291a7;

  /* Superfícies */
  --tq-fundo: #eef3fa;
  --tq-painel: #ffffff;
  --tq-borda: #dfe6f0;
  --tq-borda-forte: #c9d3e4;

  /* Escala tipográfica (única para o sistema todo) */
  --tq-fs-titulo: 23px;   /* título da página */
  --tq-fs-secao: 15px;    /* títulos de cartão/seção (h2, h3) */
  --tq-fs-corpo: 13px;    /* texto, tabelas, campos, botões */
  --tq-fs-rotulo: 12px;   /* rótulos de campo, textos auxiliares */
  --tq-fs-mini: 11px;     /* selos, legendas, cabeçalho de tabela, sobretítulos */

  /* Geometria */
  --tq-altura-botao: 36px;
  --tq-altura-botao-p: 30px;
  --tq-altura-campo: 38px;
  --tq-raio: 8px;
  --tq-raio-cartao: 12px;
  --tq-fonte: Inter, Arial, Helvetica, sans-serif;

  /* Mantém os tokens antigos alinhados ao padrão */
  --mp-font-global: var(--tq-fonte);
  --accent: var(--tq-laranja);
  --text-primary: var(--tq-texto);
  --mp-action-orange: var(--tq-laranja);
  --mp-action-orange-hover: var(--tq-laranja-hover);
  --mp-btn-primary: var(--tq-laranja);
  --mp-btn-primary-hover: var(--tq-laranja-hover);
}

/* ---------------------------------------------------------------------
   1. TIPOGRAFIA
   --------------------------------------------------------------------- */
#app-shell #main {
  font-family: var(--tq-fonte);
  font-size: var(--tq-fs-corpo);
  line-height: 1.45;
  color: var(--tq-texto);
}

/* Título da página: um só tamanho, peso e cor */
#app-shell #main h1 {
  font-family: var(--tq-fonte) !important;
  font-size: var(--tq-fs-titulo) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: var(--tq-azul-900) !important;
}

/* Títulos de seção/cartão: um só tamanho e peso, sem caixa alta */
#app-shell #main h2,
#app-shell #main h3 {
  font-family: var(--tq-fonte) !important;
  font-size: var(--tq-fs-secao) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
#app-shell #main h4,
#app-shell #main h5 {
  font-family: var(--tq-fonte) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Sobretítulos, trilhas internas e "kickers": legíveis (nada abaixo de 11px) */
#app-shell #main [class*="eyebrow"],
#app-shell #main [class*="kicker"],
#app-shell #main [class*="breadcrumb"],
#app-shell #main small,
#app-shell #main .small,
#app-shell #main .muted-small {
  font-size: var(--tq-fs-mini) !important;
  line-height: 1.35;
}
#app-shell #main [class*="-note"],
#app-shell #main [class*="-sub"]:not(button):not(input):not(select) {
  font-size: max(var(--tq-fs-mini), 1em);
}
#app-shell #main [class*="eyebrow"],
#app-shell #main [class*="kicker"] {
  letter-spacing: .3px !important;
}

/* Rótulos de campos */
#app-shell #main label,
#app-shell #main .field > span,
#app-shell #main .field-label {
  font-size: var(--tq-fs-rotulo);
  color: var(--tq-texto-2);
}

/* ---------------------------------------------------------------------
   2. BOTÕES DE AÇÃO (os papéis são atribuídos por padrao-botoes-global)
   Primário laranja · Secundário azul contornado · Sucesso verde ·
   Perigo vermelho contornado · Neutro cinza — todos com a mesma medida.
   --------------------------------------------------------------------- */
html body button.mp-btn-role-primary:not(.mp-icon-action),
html body button.mp-btn-role-secondary:not(.mp-icon-action),
html body button.mp-btn-role-success:not(.mp-icon-action),
html body button.mp-btn-role-danger:not(.mp-icon-action),
html body button.mp-btn-role-neutral:not(.mp-icon-action),
html body a.mp-btn-role-primary,
html body a.mp-btn-role-secondary,
html body a.mp-btn-role-success,
html body a.mp-btn-role-danger,
html body a.mp-btn-role-neutral {
  min-height: var(--tq-altura-botao) !important;
  height: auto !important;
  padding: 0 14px !important;
  border-radius: var(--tq-raio) !important;
  font-family: var(--tq-fonte) !important;
  font-size: var(--tq-fs-corpo) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
}
html body button.mp-btn-role-primary:not(.mp-icon-action),
html body a.mp-btn-role-primary {
  background: var(--tq-laranja) !important;
  border-color: var(--tq-laranja) !important;
  color: #fff !important;
}
html body button.mp-btn-role-primary:not(.mp-icon-action):hover,
html body a.mp-btn-role-primary:hover {
  background: var(--tq-laranja-hover) !important;
  border-color: var(--tq-laranja-hover) !important;
}
html body button.mp-btn-role-primary:disabled {
  background: #f6c79b !important;
  border-color: #f6c79b !important;
  cursor: not-allowed !important;
}

/* Botões compactos: dentro de tabelas, listas e quando marcados como pequenos */
#app-shell #main td button.mp-btn-role-primary:not(.mp-icon-action),
#app-shell #main td button.mp-btn-role-secondary:not(.mp-icon-action),
#app-shell #main td button.mp-btn-role-success:not(.mp-icon-action),
#app-shell #main td button.mp-btn-role-danger:not(.mp-icon-action),
#app-shell #main td button.mp-btn-role-neutral:not(.mp-icon-action),
html body button.btn-small[class*="mp-btn-role-"]:not(.mp-icon-action),
html body button.small[class*="mp-btn-role-"]:not(.mp-icon-action),
html body button.btn-sm[class*="mp-btn-role-"]:not(.mp-icon-action) {
  min-height: var(--tq-altura-botao-p) !important;
  padding: 0 10px !important;
  font-size: var(--tq-fs-rotulo) !important;
}

/* Foco visível e consistente (teclado) */
html body button:focus-visible,
html body a:focus-visible,
html body [role="button"]:focus-visible {
  outline: 2px solid var(--tq-azul-600) !important;
  outline-offset: 2px !important;
}

/* ---------------------------------------------------------------------
   3. CAMPOS DE FORMULÁRIO
   --------------------------------------------------------------------- */
#app-shell #main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
#app-shell #main select,
html body .fin-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html body .fin-modal select {
  min-height: var(--tq-altura-campo);
  font-family: var(--tq-fonte) !important;
  font-size: var(--tq-fs-corpo) !important;
  border-radius: var(--tq-raio) !important;
  box-sizing: border-box;
}
#app-shell #main textarea {
  font-family: var(--tq-fonte) !important;
  font-size: var(--tq-fs-corpo) !important;
  border-radius: var(--tq-raio) !important;
}
/* Campos dentro de tabelas (edição em linha) ficam compactos */
#app-shell #main td input:not([type="checkbox"]):not([type="radio"]),
#app-shell #main td select {
  min-height: 32px;
}
#app-shell #main input:focus,
#app-shell #main select:focus,
#app-shell #main textarea:focus {
  border-color: var(--tq-azul-600) !important;
  box-shadow: 0 0 0 3px rgba(23, 102, 179, .14) !important;
  outline: none !important;
}

/* ---------------------------------------------------------------------
   4. TABELAS
   --------------------------------------------------------------------- */
#app-shell #main table td {
  font-size: var(--tq-fs-corpo);
}
#app-shell #main table th {
  font-size: 11.5px;
}

/* ---------------------------------------------------------------------
   5. TABLET E CELULAR — ESTRUTURA (menu vira gaveta)
   Corrige a regra V1445 que mantinha o menu sempre visível e a coluna de
   conteúdo com largura zero em telas estreitas.
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  html body #app-shell { flex-direction: column !important; }
  html body #sidebar,
  html body #sidebar.sidebar-v1445-fixa { display: none !important; }
  html body #sidebar.drawer-aberto,
  html body #sidebar.sidebar-v1445-fixa.drawer-aberto {
    display: flex !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    height: 100dvh !important; max-height: 100dvh !important;
    width: min(290px, 86vw) !important;
    z-index: 9200 !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .28) !important;
  }
  html body #sidebar.drawer-aberto.sidebar-recolhida .sidebar-label,
  html body #sidebar.drawer-aberto .nav-item span { display: inline !important; }
  html body #sidebar-overlay.aberto { display: block !important; z-index: 9100 !important; }
  html body #content-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 0 auto !important;
  }
  #app-shell #main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 14px 48px !important;
  }
  html body #mobile-topbar { display: flex !important; }

  /* Cabeçalho superior: trilha em cima, ações em baixo */
  html body #page-header.topo-v1445 {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    height: auto !important;
    min-height: 0 !important;
  }
  html body #page-header.topo-v1445 > .topo-trilha {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 14px !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  html body #page-header.topo-v1445 > .topo-v1445-acoes {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  /* Abas superiores: uma linha com rolagem lateral (sem quebrar a tela) */
  html body #top-tabs,
  html body #top-tabs .top-tabs-row {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  html body #top-tabs .top-tabs-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px !important;
    padding: 0 10px !important;
  }
  html body #top-tabs .top-tabs-row::-webkit-scrollbar { display: none; }
  html body #top-tabs .top-tab { flex: 0 0 auto !important; white-space: nowrap !important; }

  /* Cabeçalho da página (título + ações) empilhado */
  #app-shell #main .topbar,
  #app-shell #main .topbar:not(.mpc-livre) {
    flex-direction: column !important;
    text-align: left !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  #app-shell #main .topbar > div:last-child:not(:first-child) {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  /* Tabelas largas rolam dentro do próprio contêiner, nunca a página */
  #app-shell #main :is(div, section, article):has(> table) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #app-shell #main table th { white-space: nowrap; }
  /* Tabelas com muitas colunas mantêm largura legível e rolam de lado */
  #app-shell #main table:has(tr > :nth-child(5)) { min-width: 680px; }
  #app-shell #main table:has(tr > :nth-child(8)) { min-width: 860px; }

  /* Qualquer janela/modal cabe na tela */
  html body [class*="modal"]:not([class*="backdrop"]):not([class*="overlay"]):not([class*="fundo"]),
  html body [class*="dialog"]:not([class*="overlay"]),
  html body .side-panel,
  html body #side-panel {
    max-width: calc(100vw - 16px) !important;
  }
}

/* ---------------------------------------------------------------------
   6. TABLET (≤ 1024px)
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  html body {
    --tq-fs-titulo: 21px;
  }
  /* Toque confortável */
  html body button.mp-btn-role-primary:not(.mp-icon-action),
  html body button.mp-btn-role-secondary:not(.mp-icon-action),
  html body button.mp-btn-role-success:not(.mp-icon-action),
  html body button.mp-btn-role-danger:not(.mp-icon-action),
  html body button.mp-btn-role-neutral:not(.mp-icon-action) {
    min-height: 40px !important;
  }
  #app-shell #main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  #app-shell #main select {
    min-height: 40px;
  }
}

/* ---------------------------------------------------------------------
   7. CELULAR (≤ 600px)
   --------------------------------------------------------------------- */
@media (max-width: 600px) {
  html body {
    --tq-fs-titulo: 19px;
    --tq-fs-secao: 15px;
  }
  #app-shell #main { padding: 12px 10px 40px !important; }
  #app-shell #main .card { padding: 14px 12px !important; border-radius: 10px !important; }

  /* 16px nos campos evita o zoom automático do iPhone ao tocar */
  html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  html body select,
  html body textarea {
    font-size: 16px !important;
  }
  #app-shell #main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  #app-shell #main select {
    min-height: 42px;
  }

  /* Formulários e grades em uma coluna */
  #app-shell #main .grid,
  #app-shell #main [class*="grid"]:not(table):not([class*="calendar"]):not([class*="cal-"]):not([class*="kpi"]):not([class*="heat"]):not([class*="matriz"]):not([class*="mapa"]):not([class*="tank"]),
  #app-shell #main form[style*="grid-template-columns"],
  #app-shell #main div[style*="grid-template-columns"]:not([class*="calendar"]):not([class*="kpi"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #app-shell #main [class*="grid"] > *,
  #app-shell #main div[style*="grid-template-columns"] > * {
    grid-column: auto !important;
    min-width: 0;
  }
  /* Indicadores (KPIs) em 2 colunas */
  #app-shell #main [class*="kpi-grid"],
  #app-shell #main [class*="kpis"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Barras de filtro e de ações: itens ocupam a largura */
  #app-shell #main .topbar button[class*="mp-btn-role-"],
  #app-shell #main [class*="filtros"] button[class*="mp-btn-role-"],
  #app-shell #main [class*="actions"] > button[class*="mp-btn-role-"],
  #app-shell #main [class*="acoes"] > button[class*="mp-btn-role-"] {
    flex: 1 1 auto;
  }
  #app-shell #main [class*="filtros"] input,
  #app-shell #main [class*="filtros"] select,
  #app-shell #main [class*="filters"] input,
  #app-shell #main [class*="filters"] select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Modais ocupam quase a tela toda */
  html body [class*="modal"]:not([class*="backdrop"]):not([class*="overlay"]):not([class*="fundo"]):not([class*="-head"]):not([class*="-body"]):not([class*="-foot"]):not([class*="-grid"]):not([class*="-close"]):not([class*="-sub"]):not([class*="-title"]):not([class*="-section"]) {
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    overflow-y: auto;
  }
  html body [class*="modal"] [class*="-foot"],
  html body [class*="modal"] [class*="rodape"],
  html body [class*="modal"] [class*="actions"] {
    flex-wrap: wrap !important;
  }
}

/* Cabeçalho superior em telas estreitas: avatar redondo e seletor de ambiente compacto */
#app-shell #content-col #page-header .page-header-profile-toggle .sidebar-avatar {
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
}
#app-shell #content-col #page-header .page-header-profile-toggle { width: auto !important; }
@media (max-width: 760px) {
  #app-shell #content-col #page-header .page-header-profile {
    width: auto !important;
    min-width: 58px !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }
}
@media (max-width: 600px) {
  #app-shell #content-col #page-header.topo-v1445 .topo-empresa {
    max-width: 52vw !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    overflow: hidden !important;
  }
  #app-shell #content-col #page-header.topo-v1445 .topo-empresa * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #app-shell #content-col #page-header.topo-v1445 > .topo-trilha { font-size: 15px !important; }
  #app-shell #content-col #page-header.topo-v1445 { padding: 6px 12px !important; gap: 6px !important; }
}

/* Botões de texto que não recebem papel automático: mesma tipografia e raio,
   mantendo as cores próprias de cada tela */
#app-shell #main button.fin-bx-btn:not(.mp-icon-action),
#app-shell #main button.mp-header-btn,
#app-shell #main button.pricing-action,
#app-shell #main button.primary:not([class*="mp-btn-role-"]):not(.mp-icon-action),
#app-shell #main button.btn-primary:not([class*="mp-btn-role-"]):not(.mp-icon-action) {
  min-height: var(--tq-altura-botao) !important;
  height: auto !important;
  padding: 0 14px !important;
  border-radius: var(--tq-raio) !important;
  font-size: var(--tq-fs-corpo) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}
#app-shell #main button.small:not([class*="mp-btn-role-"]):not(.mp-icon-action),
#app-shell #main button.btn-small:not([class*="mp-btn-role-"]):not(.mp-icon-action),
#app-shell #main button.btn:not([class*="mp-btn-role-"]):not(.mp-icon-action):not(.fin-bx-btn):not(.btn-primary),
#app-shell #main button.edit-ghost:not(.mp-icon-action),
#app-shell #main button.info-ghost:not(.mp-icon-action),
#app-shell #main button:not([class]):not([data-mp-keep-button-style]) {
  min-height: 32px;
  border-radius: var(--tq-raio) !important;
  font-size: var(--tq-fs-rotulo) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}
/* Chips de filtro e sub-abas: mesmo tamanho de letra em todas as telas */
#app-shell #main :is(.ocl-chip, .fin-subaba, .fun-aba, .aa-aba, .aa-per-op, .sgq-cat, .peca-status-chip, .mp-nfe-chip, .rgo-tab, .mp-tab, .pe-perg, .pe-bt) {
  font-size: 12.5px !important;
}

/* Interruptores (checkbox escondido) nunca alargam a tela */
.fnf-chave { position: relative; }
.fnf-chave input { width: 1px !important; height: 1px !important; }

/* Celular: filas de abas/filtros por status quebram linha; campos de filtro cabem na tela */
@media (max-width: 600px) {
  #app-shell #main [class*="tabs"]:not(table):not(tr):not(#top-tabs),
  #app-shell #main [class*="abas"]:not(table):not(tr),
  #app-shell #main [class*="-seg"]:not(table):not(tr),
  #app-shell #main [class*="chips"]:not(table):not(tr),
  #app-shell #main [class*="pills"]:not(table):not(tr) {
    flex-wrap: wrap !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #app-shell #main .field,
  #app-shell #main [class*="filtro"],
  #app-shell #main [class*="filter"] {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #app-shell #main [class*="filtro"] input:not([type="checkbox"]):not([type="radio"]),
  #app-shell #main [class*="filtro"] select,
  #app-shell #main .field > input:not([type="checkbox"]):not([type="radio"]),
  #app-shell #main .field > select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* Grades específicas que não seguiam o padrão no celular */
  #app-shell #main .os-toolbar,
  #app-shell #main .sgq-lm-filters-v1271 { grid-template-columns: minmax(0, 1fr) !important; }
  #app-shell #main .qo-passos { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Cartões de indicador com ícone: 1 coluna quando o texto não cabe */
  #app-shell #main [class*="kpi"] [class*="-label"],
  #app-shell #main [class*="kpi"] small { overflow-wrap: anywhere; }
}

/* Nunca rolagem lateral da página inteira */
html, body { overflow-x: clip; }