:root {
  --admin-theme-bg: #eaf2ff;
  --admin-theme-surface: #ffffff;
  --admin-theme-surface-alt: #f4f8ff;
  --admin-theme-border: #c7d7f4;
  --admin-theme-primary: #1f5fbf;
  --admin-theme-primary-dark: #0f3d89;
  --admin-theme-primary-soft: #dceaff;
  --admin-theme-accent: #38a3ff;
  --admin-theme-text: #15305b;
  --admin-theme-text-soft: #587199;
  --admin-theme-shadow: 0 18px 40px rgba(13, 57, 124, 0.12);
  --admin-theme-shadow-soft: 0 10px 22px rgba(24, 76, 149, 0.1);
  --admin-theme-radius-lg: 22px;
  --admin-theme-radius-md: 16px;
  --admin-theme-radius-sm: 12px;
  --admin-theme-brand-green-dark: #0b5a3a;
  --admin-theme-brand-green: #1d8d5b;
  --admin-theme-brand-green-soft: #57c98f;
  --admin-theme-brand-teal: #1f8da1;
}

body.admin-theme-blue {
  margin: 0;
  background:
    radial-gradient(circle at top right, rgba(92, 180, 255, 0.24), transparent 28%),
    linear-gradient(180deg, #dbeaff 0%, #eff5ff 26%, #edf3fb 100%);
  color: var(--admin-theme-text);
}

body.admin-theme-blue #container {
  min-height: 100vh;
  /* 72px: reserva a altura do rodape FIXO (ver a regra do .admin-shell-footer).
     REVERTIDO em 20/09/2026 a pedido do Rafael, junto com o rodape. */
  padding-bottom: 72px;
}

body.admin-theme-blue .admin-shell-header {
  min-height: 82px;
  position: fixed;
  top: 0 !important;
  left: 0;
  right: 0;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(8, 68, 43, 0.98), rgba(21, 132, 80, 0.96) 52%, rgba(84, 196, 135, 0.95) 100%);
  box-shadow: 0 16px 34px rgba(11, 74, 49, 0.28);
  padding: 8px 18px;
  /* Alinha logo (esquerda) com menu direita (relogio/sino/usuario) na MESMA linha horizontal */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

body.admin-theme-blue .admin-shell-brand {
  width: auto !important;
  min-width: 0 !important;
  height: auto;
  background: transparent;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start !important;
  float: none !important;
  margin: 0 !important;
  flex: 0 0 auto;
}

body.admin-theme-blue .admin-shell-topnav {
  display: flex;
  align-items: center;
  margin: 0 0 0 auto !important; /* margin-left:auto empurra para a direita */
  float: none !important;
}
body.admin-theme-blue .admin-shell-topnav > ul.top-menu {
  display: flex !important;
  align-items: center !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.admin-theme-blue .admin-shell-topnav > ul.top-menu > li {
  float: none !important;
  margin: 0 0 0 8px !important;
  display: flex;
  align-items: center;
}

body.admin-theme-blue .admin-shell-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Tamanho original — sem aumentar a altura do navbar */
  min-height: 52px;
  padding: 6px 14px;
  border-radius: 14px;
  /* Card VERDE CLARO vivo (gradient menta) + ring verde mais marcante */
  background: linear-gradient(160deg, #eafff1 0%, #c8f0d4 60%, #a8e5bb 100%);
  box-shadow:
    inset 0 0 0 1px rgba(58, 157, 92, 0.32),
    0 8px 18px rgba(8, 61, 39, 0.22),
    0 2px 4px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none !important;
}

body.admin-theme-blue .admin-shell-logo:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(58, 157, 92, 0.45),
    0 12px 24px rgba(8, 61, 39, 0.30),
    0 3px 6px rgba(0, 0, 0, 0.10);
}

body.admin-theme-blue .admin-shell-logo img {
  float: none !important;
  margin: 0 !important;
  width: auto !important;
  /* Tamanho original — nao aumenta a altura do header */
  max-width: 180px;
  height: 34px !important;
  object-fit: contain;
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
}

body.admin-theme-blue .relogio-logout {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}

body.admin-theme-blue .relogio-logout #cronometro {
  display: inline-block;
  min-width: 52px;
  font-variant-numeric: tabular-nums;
}

body.admin-theme-blue .top-nav ul.top-menu > li {
  margin-left: 6px;
}

body.admin-theme-blue .top-nav ul.top-menu > li > a {
  min-height: 42px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.admin-theme-blue .top-nav ul.top-menu > li > a:hover,
body.admin-theme-blue .top-nav ul.top-menu > li > a:focus {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff;
}

body.admin-theme-blue .top-nav .username,
body.admin-theme-blue .top-nav .nav .caret {
  color: #fff;
  border-top-color: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.72);
}

body.admin-theme-blue .top-nav img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.28);
}

body.admin-theme-blue .admin-shell-menu {
  position: sticky;
  top: 89px;
  z-index: 1001;
  margin: 0;
  padding: 8px 18px 10px;
  background: linear-gradient(180deg, rgba(236, 248, 241, 0.99), rgba(244, 251, 247, 0.985));
  border-bottom: 1px solid rgba(111, 172, 138, 0.55);
  box-shadow: 0 2px 8px rgba(16, 53, 37, 0.08);
  backdrop-filter: blur(4px);
}

body.admin-theme-blue .admin-shell-menu-grid {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2px;
  row-gap: 4px;
  align-items: center;
  max-width: none;
}

body.admin-theme-blue .admin-shell-menu .menu-item,
body.admin-theme-blue .admin-shell-menu .btn-group {
  margin: 0;
}

body.admin-theme-blue .admin-shell-menu .btn,
body.admin-theme-blue .admin-shell-menu .btn-group > .btn {
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 12px;
  border: 1px solid rgba(13, 49, 35, 0.22);
  box-shadow:
    0 4px 10px rgba(16, 63, 44, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  position: relative;
  text-shadow: none;
}

body.admin-theme-blue .admin-shell-menu .btn-info,
body.admin-theme-blue .admin-shell-menu .btn-success,
body.admin-theme-blue .admin-shell-menu .btn-warning {
  color: #fff;
}

body.admin-theme-blue .admin-shell-menu .btn-success {
  background: linear-gradient(135deg, var(--admin-theme-brand-green-dark), var(--admin-theme-brand-green-soft));
}

body.admin-theme-blue .admin-shell-menu .btn-info {
  background: linear-gradient(135deg, var(--admin-theme-brand-teal), #44a9d8);
}

body.admin-theme-blue .admin-shell-menu .btn-warning {
  background: linear-gradient(135deg, #2676c4, #4da8ff);
}

body.admin-theme-blue .admin-shell-menu .btn-info:hover,
body.admin-theme-blue .admin-shell-menu .btn-success:hover,
body.admin-theme-blue .admin-shell-menu .btn-warning:hover,
body.admin-theme-blue .admin-shell-menu .btn-info:focus,
body.admin-theme-blue .admin-shell-menu .btn-success:focus,
body.admin-theme-blue .admin-shell-menu .btn-warning:focus {
  color: #fff;
  transform: translateY(-1px);
}

body.admin-theme-blue .admin-shell-menu .dropdown-menu {
  margin-top: 2px;
  border: 1px solid rgba(111, 138, 128, 0.3);
  border-radius: var(--admin-theme-radius-md);
  background: rgba(255, 255, 255, 0.995);
  box-shadow: 0 10px 24px rgba(15, 42, 32, 0.16);
  overflow: hidden;
}

body.admin-theme-blue .admin-shell-menu .dropdown-menu > li > a {
  padding: 7px 12px;
  color: #17392d;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  text-shadow: none;
}

body.admin-theme-blue .admin-shell-menu .dropdown-menu > li > a:hover {
  background: rgba(213, 239, 227, 0.9);
  color: #0f4c39;
}

body.admin-theme-blue,
body.admin-theme-blue .btn,
body.admin-theme-blue .dropdown-menu > li > a,
body.admin-theme-blue .panel-heading,
body.admin-theme-blue .table > thead > tr > th {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body.admin-theme-blue .admin-shell-menu .dropdown-submenu {
  position: relative;
}

body.admin-theme-blue .admin-shell-menu[data-navbar-engine="v2"] .btn-group {
  position: relative;
}

body.admin-theme-blue .admin-shell-menu[data-navbar-engine="v2"] .dropdown-menu {
  overflow: visible;
}

body.admin-theme-blue .admin-shell-menu[data-navbar-engine="v2"] .dropdown-submenu > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.admin-theme-blue .admin-shell-menu[data-navbar-engine="v2"] .dropdown-submenu > a::after {
  content: '\f105';
  font-family: FontAwesome;
  font-size: 12px;
  color: var(--admin-theme-text-soft);
}

@media (min-width: 768px) {
  body.admin-theme-blue .admin-shell-menu .btn-group:hover > .dropdown-menu,
  body.admin-theme-blue .admin-shell-menu .btn-group:focus-within > .dropdown-menu {
    display: block;
  }

  body.admin-theme-blue .admin-shell-menu .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
  }

  body.admin-theme-blue .admin-shell-menu .dropdown-submenu:hover > .dropdown-menu,
  body.admin-theme-blue .admin-shell-menu .dropdown-submenu.open > .dropdown-menu,
  body.admin-theme-blue .admin-shell-menu .dropdown-submenu:focus-within > .dropdown-menu {
    display: block;
  }

  body.admin-theme-blue .admin-shell-menu[data-navbar-engine="v2"] .btn-group > .dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    margin-top: 0;
  }

  body.admin-theme-blue .admin-shell-menu[data-navbar-engine="v2"] .btn-group.is-open > .dropdown-menu {
    display: block;
  }

  body.admin-theme-blue .admin-shell-menu[data-navbar-engine="v2"] .dropdown-submenu > .dropdown-menu {
    display: none;
    position: absolute;
    top: -10px;
    left: calc(100% - 8px);
    min-width: 220px;
    margin-top: 0;
  }

  body.admin-theme-blue .admin-shell-menu[data-navbar-engine="v2"] .dropdown-submenu.is-open > .dropdown-menu {
    display: block;
  }
}

body.admin-theme-blue #main-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 118px 14px 0;
}

body.admin-theme-blue .wrapper,
body.admin-theme-blue #main-content > .wrapper {
  display: block;
  width: 100%;
  max-width: none;
  margin-top: 0;
  padding: 12px 10px 96px;
}

body.admin-theme-blue .panel,
body.admin-theme-blue .panel-heading,
body.admin-theme-blue .panel-body,
body.admin-theme-blue .alert,
body.admin-theme-blue .well,
body.admin-theme-blue .breadcrumb,
body.admin-theme-blue .modal-content,
body.admin-theme-blue .table-responsive,
body.admin-theme-blue .nav-tabs,
body.admin-theme-blue .widget,
body.admin-theme-blue .card {
  border-radius: var(--admin-theme-radius-md);
}

body.admin-theme-blue .panel,
body.admin-theme-blue .well,
body.admin-theme-blue .modal-content,
body.admin-theme-blue .card,
body.admin-theme-blue .table-responsive,
body.admin-theme-blue .breadcrumb {
  border: 1px solid var(--admin-theme-border);
  background: #ffffff;
  box-shadow: var(--admin-theme-shadow-soft);
}

body.admin-theme-blue .panel-heading,
body.admin-theme-blue .widget-head-color-box,
body.admin-theme-blue .ibox-title {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 251, 252, 0.98));
  border-bottom: 1px solid var(--admin-theme-border);
  color: var(--admin-theme-text);
  font-weight: 700;
}

body.admin-theme-blue .panel-body,
body.admin-theme-blue .widget-body,
body.admin-theme-blue .ibox-content {
  background: #ffffff;
  color: var(--admin-theme-text);
}

body.admin-theme-blue .table {
  color: var(--admin-theme-text);
}

body.admin-theme-blue .table > thead > tr > th {
  background: #ffffff;
  border-bottom: 1px solid var(--admin-theme-border);
  color: var(--admin-theme-primary-dark);
  font-weight: 700;
}

body.admin-theme-blue .table > tbody > tr:nth-child(even) {
  background: rgba(248, 250, 252, 0.92);
}

body.admin-theme-blue .table > tbody > tr:hover {
  background: rgba(243, 246, 249, 0.96);
}

body.admin-theme-blue .form-control,
body.admin-theme-blue select,
body.admin-theme-blue textarea {
  min-height: 38px;
  border: 1px solid var(--admin-theme-border);
  border-radius: 12px;
  background: #fff;
  color: var(--admin-theme-text);
}

body.admin-theme-blue .form-control:focus,
body.admin-theme-blue select:focus,
body.admin-theme-blue textarea:focus {
  border-color: rgba(31, 95, 191, 0.5);
  box-shadow: 0 0 0 4px rgba(56, 163, 255, 0.14);
}

body.admin-theme-blue .btn-primary,
body.admin-theme-blue .btn-success,
body.admin-theme-blue .btn-info {
  background: linear-gradient(135deg, var(--admin-theme-primary), var(--admin-theme-accent));
  border-color: transparent;
}

body.admin-theme-blue .btn-warning {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  border-color: transparent;
  color: #fff;
}

body.admin-theme-blue .btn-danger {
  background: linear-gradient(135deg, #d94c66, #f9738c);
  border-color: transparent;
}

body.admin-theme-blue .btn-default {
  border: 1px solid var(--admin-theme-border);
  background: #fff;
  color: var(--admin-theme-primary-dark);
}

body.admin-theme-blue.op-legacy-shell {
  background: #f1f2f7;
}

body.admin-theme-blue.op-legacy-shell #container {
  background: #f1f2f7;
}

body.admin-theme-blue #main-content.op-legacy-page {
  /* Restaura a folga do topo (header fixo + menu sticky) que o op-legacy zerava,
     deixando o cabecalho e a barra de botoes cortados atras do menu no desktop.
     So o topo muda; laterais/rodape seguem 0 (o .wrapper ja da 15px). */
  padding: 118px 0 0 !important;
}

body.admin-theme-blue #main-content.op-legacy-page > .wrapper {
  padding: 15px !important;
  margin-top: 0;
}

body.admin-theme-blue .op-legacy-page .panel,
body.admin-theme-blue .op-legacy-page .modal-content,
body.admin-theme-blue .op-legacy-page .table-responsive {
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

body.admin-theme-blue .op-legacy-page .panel-heading {
  border-radius: 3px 3px 0 0;
}

body.admin-theme-blue .op-legacy-page .panel-body {
  border-radius: 0;
}

body.admin-theme-blue .op-legacy-page .panel-heading {
  padding: 10px 15px;
  background: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  color: #000;
  font-size: 13px;
  font-weight: 400;
}

body.admin-theme-blue .op-legacy-page .panel-heading .tools {
  margin-top: -3px;
}

body.admin-theme-blue .op-legacy-page .panel-body {
  background: #fff;
  color: #333;
}

body.admin-theme-blue .op-legacy-page .form-control,
body.admin-theme-blue .op-legacy-page select,
body.admin-theme-blue .op-legacy-page textarea {
  min-height: 34px;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #555;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

body.admin-theme-blue .op-legacy-page textarea.form-control {
  min-height: 110px;
}

body.admin-theme-blue .op-legacy-page .btn-primary {
  background: linear-gradient(#428bca, #2d6ca2);
  border: 1px solid #2b669a;
}

body.admin-theme-blue .op-legacy-page .btn-success {
  background: linear-gradient(#5cb85c, #419641);
  border: 1px solid #3e8f3e;
}

body.admin-theme-blue .op-legacy-page .btn-info {
  background: linear-gradient(#5bc0de, #2f96b4);
  border: 1px solid #2a9fd6;
}

body.admin-theme-blue .op-legacy-page .btn-warning {
  background: linear-gradient(#f0ad4e, #eb9316);
  border-color: #e38d13;
}

body.admin-theme-blue .op-legacy-page .btn-danger {
  background: linear-gradient(#d9534f, #c12e2a);
  border: 1px solid #b92c28;
}

body.admin-theme-blue .op-legacy-page .btn-default {
  border: 1px solid #ccc;
  color: #333;
}

body.admin-theme-blue .op-legacy-page .btn-primary,
body.admin-theme-blue .op-legacy-page .btn-success,
body.admin-theme-blue .op-legacy-page .btn-info,
body.admin-theme-blue .op-legacy-page .btn-warning,
body.admin-theme-blue .op-legacy-page .btn-danger,
body.admin-theme-blue .op-legacy-page .btn-default {
  box-shadow: none;
}

body.admin-theme-blue .op-legacy-page .table > thead > tr > th {
  background: #fff;
  color: #000;
  font-weight: 700;
}

body.admin-theme-blue .op-legacy-page .op-legacy-operator-title-wrap {
  text-align: left;
  margin-top: 20px;
}

body.admin-theme-blue .op-legacy-page .op-legacy-operator-title {
  display: inline-block;
  margin: 0;
  background-color: #408244;
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 18px;
}

body.admin-theme-blue .op-legacy-page .op-legacy-operator-total {
  text-align: right;
  margin-top: 20px;
}

body.admin-theme-blue .op-legacy-page .op-legacy-operator-pill {
  display: inline-block;
  margin-left: 8px;
  background-color: #28a745;
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 18px;
}

body.admin-theme-blue.op-legacy-shell .modal-dialog.modal-dialog-legacy-item {
  width: 700px !important;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

body.admin-theme-blue.op-legacy-shell .modal-dialog.modal-dialog-legacy-compact {
  width: 400px !important;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

body.admin-theme-blue.op-legacy-shell .modal-dialog.modal-dialog-legacy-lista {
  width: 75% !important;
  max-width: none;
}

body.admin-theme-blue.op-legacy-shell .modal-dialog .modal-content {
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  color: #000;
}

body.admin-theme-blue.op-legacy-shell .modal-dialog .modal-header,
body.admin-theme-blue.op-legacy-shell .modal-dialog .modal-body,
body.admin-theme-blue.op-legacy-shell .modal-dialog .modal-footer {
  color: #000;
}

body.admin-theme-blue.op-legacy-shell .modal-dialog .modal-title {
  color: #000;
  font-size: 18px;
  font-weight: 300;
}

body.admin-theme-blue .nav-tabs {
  padding: 6px;
  background: #ffffff;
  border: 1px solid var(--admin-theme-border);
}

body.admin-theme-blue .nav-tabs > li > a {
  background: #ffffff;
  border-radius: 999px;
  color: var(--admin-theme-text-soft);
}

body.admin-theme-blue .nav-tabs > li.active > a,
body.admin-theme-blue .nav-tabs > li.active > a:hover,
body.admin-theme-blue .nav-tabs > li.active > a:focus {
  background: linear-gradient(135deg, var(--admin-theme-primary), var(--admin-theme-accent));
  color: #fff;
  border-color: transparent;
}

body.admin-theme-blue .breadcrumb {
  padding: 12px 16px;
}

/* O RODAPE FECHA A PAGINA -- NAO FLUTUA POR CIMA DELA.
   Ate 10/09/2026 esta regra era position:fixed com z-index 1001, entao a faixa do
   copyright ficava colada embaixo da janela e a tabela passava POR BAIXO dela ao rolar.
   Medido em admin/contasapagar, 1920x1080, em 5 pontos de rolagem: 67 pedacos de
   informacao cobertos -- inclusive a descricao inteira da despesa, 705px de largura.
   O padding-bottom do #container nao resolvia: ele so protege o FIM da pagina, nao o
   que passa debaixo durante a rolagem.
   Nao ha por que uma linha de copyright cobrir dado do usuario o tempo todo. Ela volta
   a ser um bloco normal no fim da pagina. O style.css base, alias, ja tinha o
   position:fixed COMENTADO nesta mesma classe -- foi o tema que o trouxe de volta. */
body.admin-theme-blue .footer-section.admin-shell-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 10px 18px;
  background: rgba(10, 35, 78, 0.92);
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  z-index: 1001;
}

/* FAIXA LIVRE PARA OS CARDS DE TOTAIS -- REMOVIDA EM 20/09/2026, a pedido do Rafael.
   Ela dava margem ao rodape (116px em cima, 104px embaixo) para abrir espaco abaixo dele.
   Com o rodape de volta a position:fixed essa regra nao pode existir: margem em elemento
   fixed DESLOCA o proprio elemento, entao o margin-bottom de 104px empurraria a faixa do
   copyright para fora da tela.
   O Rafael pediu a barra fixa de volta, ciente de que ela passa por cima das linhas da
   tabela durante a rolagem (medido em 10/09: 67 pedacos de informacao cobertos em
   admin/contasapagar). Decisao dele, registrada aqui para nao ser "consertada" de novo
   por engano. */

/* FAIXA LIVRE PARA OS BOTOES FLUTUANTES, EM TELA ESTREITA.
   Os 4 botoes de acao (#menu, a lista .mfb-component--br) sao position:fixed no canto
   inferior direito e ocupam uma faixa de ~81px (56px de botao + 25px de margem). Num
   celular de 390px a tabela vira cartao "rotulo .... valor", com o VALOR encostado na
   direita -- exatamente debaixo dos botoes. Medido em 5 pontos de rolagem: 33 pedacos
   cobertos, e o que sumia era o valor da conta ("R$ 1..." e o resto escondido).
   Reservar a faixa e a unica solucao estatica: como os botoes sao fixos e a lista rola
   por baixo, QUALQUER linha pode cair debaixo deles. As outras 3 saidas foram medidas e
   sao piores: recolher os 4 em 1 deixa 10, virar barra horizontal embaixo deixa 15.
   O alvo #tabela-resultados e o mesmo nas 5 telas que tem esses botoes (Cheques,
   Contas a pagar, Contas a receber, Transacoes, Transferencias): uma regra cobre todas.
   Custo assumido: o cartao fica ~64px mais estreito e descricao longa quebra em duas
   linhas. Preferivel a nao conseguir ler o valor. */
@media (max-width: 991px) {
  body.admin-theme-blue #tabela-resultados {
    /* 72px, medido: a faixa dos botoes vai de x=309 ate a borda num viewport de 390
       (56px de botao + 25px de margem = 81px). Com 64px sobravam 2px de encosto no
       cracha do codigo; com 72 da zero. Nao aumente sem remedir: cada pixel aqui sai
       da largura do cartao. */
    padding-right: 72px;
  }
  /* ...mas SO onde os botoes existem. #tabela-resultados e reusado em ~90 telas
     (Painel, Documentos, Pagamentos, Fretes...) e em quase todas nao ha botao
     flutuante: a faixa virava espaco vazio -- no Painel a tabela ocupava 73% do
     cartao (QA 21/09/2026). Navegador sem :has() ignora a regra inteira e fica
     como antes (faixa reservada), ou seja, o lado seguro. */
  body.admin-theme-blue:not(:has(.mfb-component--br)) #tabela-resultados {
    padding-right: 0;
  }
}

/* A MESMA FAIXA, AGORA PARA O FORMULARIO DE FILTRO -- SO EM CHEQUES.
   A regra acima protegeu a TABELA em todas as telas e o FORMULARIO em nenhuma; este
   e o buraco que sobrou. Medido em 19/09/2026 (WebKit, iPhone 13, 390x664): os campos
   do filtro de cheques vao de x=40 a x=350 e os botoes ocupam x=309..365, entao
   13,2% da caixa fica sob o botao. Pior que o numero: em `elementFromPoint` a 15px da
   direita -- exatamente onde fica a SETA do select -- quem responde e o botao
   flutuante, nao o campo. O toque natural para abrir a lista estava sequestrado.

   SO CHEQUES, de proposito: medi as outras quatro telas que tem esses botoes
   (contasapagar, contasareceber com 6 botoes, transacoes, transferencias) rolando a
   pagina inteira e o resultado foi ZERO controle atingido em todas -- os formularios
   delas terminam em x~282, longe da faixa. Aplicar uma regra global estreitaria
   campo em quatro telas que nao tem problema nenhum.
   ATUALIZACAO 19/09/2026: o filtro de Contas a Pagar / a Receber entrou na mesma lista. Ele
   ficava fora porque os campos dele terminavam em x~282, longe da faixa. Ao igualar a largura
   dos campos (regra .filtro-grade no custom.css), eles passaram a ocupar a coluna inteira e
   alcancaram os botoes -- medido em iPhone 13: a seta de "Empresa", "Situacao boleto", "Estado"
   e "Valor Ate" ficava debaixo do botao flutuante. Mesmo numero (72px) e mesmo motivo. */
@media (max-width: 991px) {
  body.admin-theme-blue #frmCheques,
  body.admin-theme-blue .filtro-grade {
    padding-right: 72px;
  }
}

body.admin-theme-blue .modal-dialog {
  width: min(94vw, 1180px) !important;
  max-width: 1180px;
}

body.admin-theme-blue .modal-dialog.modal-dialog-compact {
  width: min(94vw, 400px) !important;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

body.admin-theme-blue .modal-dialog.modal-dialog-component-picker {
  width: min(94vw, 800px) !important;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

body.admin-theme-blue .modal-dialog.modal-utilitarios-dialog {
  width: min(94vw, 760px) !important;
  max-width: 760px;
  margin: 24px auto;
}

body.admin-theme-blue .modal-dialog.modal-utilitarios-dialog.modal-utilitarios-wide {
  width: min(94vw, 980px) !important;
  max-width: 980px;
}

body.admin-theme-blue .modal-dialog.modal-utilitarios-dialog.modal-utilitarios-xl {
  width: min(94vw, 1120px) !important;
  max-width: 1120px;
}

body.admin-theme-blue .modal-utilitarios-dialog .modal-content {
  border-radius: 18px;
  border: 1px solid #d8e4f0;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}

body.admin-theme-blue .modal-utilitarios-dialog .modal-header {
  background: linear-gradient(135deg, #eef7ff 0%, #f8fbff 100%);
  border-bottom: 1px solid #dbe7f3;
  padding: 16px 18px;
}

body.admin-theme-blue .modal-utilitarios-dialog .modal-title {
  color: #194569;
  font-size: 18px;
  font-weight: 700;
}

body.admin-theme-blue .modal-utilitarios-dialog .modal-body {
  background: #f8fbff;
  padding: 18px;
}

body.admin-theme-blue .modal-utilitarios-dialog .modal-footer {
  background: #f5f9fd;
  border-top: 1px solid #dce7f2;
  padding: 12px 16px;
}

body.admin-theme-blue .modal-utilitarios-card {
  background: #fff;
  border: 1px solid #dce7f2;
  border-radius: 14px;
  padding: 14px;
}

body.admin-theme-blue .modal-utilitarios-card + .modal-utilitarios-card {
  margin-top: 12px;
}

body.admin-theme-blue .modal-utilitarios-card label {
  color: #31495f;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}

body.admin-theme-blue .modal-utilitarios-card .form-control {
  border-radius: 9px;
  border-color: #cad9e7;
  min-height: 38px;
}

body.admin-theme-blue .modal-utilitarios-helper {
  color: #64748b;
  font-size: 11px;
  margin-top: 6px;
}

body.admin-theme-blue .modal-utilitarios-scroll {
  max-height: 280px;
  overflow: auto;
}

body.admin-theme-blue .modal-utilitarios-file-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

body.admin-theme-blue .modal-utilitarios-file-card {
  background: #f9fcff;
  border: 1px dashed #cfe0ef;
  border-radius: 12px;
  min-height: 118px;
  padding: 12px;
}

body.admin-theme-blue .modal-utilitarios-file-card .btn-file {
  width: 100%;
}

body.admin-theme-blue .modal-utilitarios-file-card .square {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-height: 36px;
  width: 100%;
}

body.admin-theme-blue .dropdown-menu {
  border-radius: 14px;
}

body.admin-theme-blue .copyright a,
body.admin-theme-blue a {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
}

@media (max-width: 991px) {
  body.admin-theme-blue .admin-shell-header {
    padding: 12px 14px;
  }

  body.admin-theme-blue .admin-shell-brand,
  body.admin-theme-blue .admin-shell-topnav {
    width: 100%;
    float: none;
  }

  body.admin-theme-blue .admin-shell-topnav {
    margin-top: 12px;
  }

  body.admin-theme-blue .admin-shell-menu {
    top: 124px;
    padding: 10px 12px 12px;
  }
}

@media (max-width: 767px) {
  body.admin-theme-blue {
    margin-top: 0 !important;
  }

  body.admin-theme-blue .admin-shell-header {
    position: relative !important;
    min-height: auto;
    box-shadow: 0 14px 30px rgba(6, 31, 76, 0.22);
  }

  body.admin-theme-blue .admin-shell-logo {
    width: 100%;
    justify-content: center;
  }

  body.admin-theme-blue .admin-shell-topnav .nav.pull-right.top-menu {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 12px 0 0;
  }

  body.admin-theme-blue .top-nav ul.top-menu > li {
    margin: 0;
  }

  body.admin-theme-blue .top-nav ul.top-menu > li > a {
    min-height: 42px;
    padding: 6px 12px;
  }

  body.admin-theme-blue .admin-shell-menu {
    position: relative;
    top: 0;
    padding-top: 12px;
  }

  body.admin-theme-blue .admin-shell-menu-grid {
    gap: 8px;
  }

  body.admin-theme-blue .admin-shell-menu .menu-item,
  body.admin-theme-blue .admin-shell-menu .btn-group {
    width: 100%;
  }

  body.admin-theme-blue .admin-shell-menu .menu-item > .btn,
  body.admin-theme-blue .admin-shell-menu .btn-group > .btn {
    width: 100%;
    justify-content: center;
  }

  body.admin-theme-blue .admin-shell-menu .btn-group > .dropdown-menu,
  body.admin-theme-blue .admin-shell-menu .dropdown-submenu > .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    min-width: 0;
    margin-top: 6px;
    border-radius: 16px;
    box-shadow: 0 12px 24px rgba(15, 45, 96, 0.12);
  }

  body.admin-theme-blue .admin-shell-menu .btn-group > .dropdown-menu {
    display: none;
  }

  body.admin-theme-blue .admin-shell-menu .btn-group.open > .dropdown-menu {
    display: block;
  }

  body.admin-theme-blue .admin-shell-menu .dropdown-submenu > .dropdown-menu {
    display: none;
    margin-left: 0;
    padding-left: 0;
  }

  body.admin-theme-blue .admin-shell-menu .dropdown-submenu.is-mobile-open > .dropdown-menu {
    display: block;
  }

  body.admin-theme-blue .admin-shell-menu .dropdown-submenu > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  body.admin-theme-blue .admin-shell-menu .dropdown-submenu > a::after {
    content: '\f107';
    font-family: FontAwesome;
    font-size: 12px;
    color: var(--admin-theme-text-soft);
  }

  body.admin-theme-blue .admin-shell-menu .dropdown-submenu.is-mobile-open > a::after {
    transform: rotate(180deg);
  }

  body.admin-theme-blue .admin-shell-menu[data-navbar-engine="v2"] .btn-group > .dropdown-menu,
  body.admin-theme-blue .admin-shell-menu[data-navbar-engine="v2"] .dropdown-submenu > .dropdown-menu {
    display: none;
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: 6px;
    border-radius: 16px;
    box-shadow: 0 12px 24px rgba(15, 45, 96, 0.12);
  }

  body.admin-theme-blue .admin-shell-menu[data-navbar-engine="v2"] .btn-group.is-open > .dropdown-menu,
  body.admin-theme-blue .admin-shell-menu[data-navbar-engine="v2"] .dropdown-submenu.is-open > .dropdown-menu {
    display: block;
  }

  body.admin-theme-blue .admin-shell-menu[data-navbar-engine="v2"] .dropdown-submenu > a::after {
    content: '\f107';
  }

  body.admin-theme-blue .admin-shell-menu[data-navbar-engine="v2"] .dropdown-submenu.is-open > a::after {
    transform: rotate(180deg);
  }

  body.admin-theme-blue #main-content {
    padding: 0 8px;
  }

  /* O header legado do portal Production (.header.fixed-top) nao vira relative no mobile
     como o .admin-shell-header do admin; fica fixo e cobre o menu e o topo do conteudo.
     Deixá-lo fluir revela o menu e o cabecalho. O :not(.admin-shell-header) preserva o admin. */
  body.admin-theme-blue header.header.fixed-top:not(.admin-shell-header) {
    position: relative !important;
  }

  /* No mobile o header ja flui, entao o op-legacy nao precisa da folga fixa de 118px do
     desktop; alinha com o padrao das paginas normais no mobile (#main-content padding: 0 8px). */
  body.admin-theme-blue #main-content.op-legacy-page {
    padding: 0 8px !important;
  }

  body.admin-theme-blue .wrapper,
  body.admin-theme-blue #main-content > .wrapper {
    padding: 12px 4px 96px;
  }

  body.admin-theme-blue .wrapper .row,
  body.admin-theme-blue #main-content .row,
  body.admin-theme-blue .panel-body .row {
    margin-left: 0;
    margin-right: 0;
  }

  body.admin-theme-blue .wrapper .row > [class*="col-"],
  body.admin-theme-blue #main-content .row > [class*="col-"],
  body.admin-theme-blue .panel-body .row > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
  }

  body.admin-theme-blue b,
  body.admin-theme-blue .badge,
  body.admin-theme-blue .title,
  body.admin-theme-blue .alert,
  body.admin-theme-blue .panel-heading {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body.admin-theme-blue .modal-dialog {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px);
    margin: 8px auto;
  }

  body.admin-theme-blue .modal-dialog.modal-dialog-compact {
    width: calc(100vw - 16px) !important;
    max-width: 400px;
  }

  body.admin-theme-blue .modal-dialog.modal-dialog-component-picker {
    width: calc(100vw - 16px) !important;
    max-width: 800px;
  }

  body.admin-theme-blue .modal-dialog.modal-utilitarios-dialog,
  body.admin-theme-blue .modal-dialog.modal-utilitarios-dialog.modal-utilitarios-wide,
  body.admin-theme-blue .modal-dialog.modal-utilitarios-dialog.modal-utilitarios-xl {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px);
    margin: 8px auto;
  }

  body.admin-theme-blue .modal-utilitarios-dialog .modal-body {
    padding: 12px 10px;
  }

  body.admin-theme-blue .modal-utilitarios-dialog .modal-footer .btn {
    margin-bottom: 8px;
    width: 100%;
  }

  body.admin-theme-blue .modal-utilitarios-file-grid {
    grid-template-columns: 1fr;
  }
}

body.admin-theme-blue .ordemproducao-toolbar.tools,
body.admin-theme-blue .op-quick-actions,
body.admin-theme-blue .op-actions-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.admin-theme-blue .op-chip {
  align-items: center;
  background: #edf3f8;
  border: 1px solid #c8d8e8;
  border-radius: 7px;
  color: #35516b;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
}

body.admin-theme-blue .op-chip--code {
  font-family: monospace;
  letter-spacing: .04em;
}

body.admin-theme-blue .op-modal-dialog {
  margin: 18px auto;
  width: calc(100vw - 24px) !important;
}

body.admin-theme-blue .op-modal-dialog--compact {
  max-width: 560px;
}

body.admin-theme-blue .op-modal-dialog--medium {
  max-width: 760px;
}

body.admin-theme-blue .op-modal-dialog--wide {
  max-width: 1040px;
}

body.admin-theme-blue .op-modal-dialog .modal-content {
  background: #fbfdff;
  border: 1px solid #d7e1ec;
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(20, 52, 77, 0.16);
  overflow: hidden;
}

body.admin-theme-blue .op-modal-dialog .modal-header {
  background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
  border-bottom: 1px solid #d7e1ec;
  padding: 18px 22px 16px;
}

body.admin-theme-blue .op-modal-dialog .modal-header .close {
  margin-top: 0;
}

body.admin-theme-blue .op-modal-title-wrap {
  display: grid;
  gap: 6px;
}

body.admin-theme-blue .op-modal-kicker,
body.admin-theme-blue .op-production-kicker {
  color: #5f7890;
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.admin-theme-blue .op-modal-dialog .modal-title,
body.admin-theme-blue .op-production-header h1 {
  color: #17344d;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
}

body.admin-theme-blue .op-modal-subtitle,
body.admin-theme-blue .op-production-header p {
  color: #5d758d;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

body.admin-theme-blue .op-modal-dialog .modal-body {
  padding: 22px;
}

body.admin-theme-blue .op-modal-dialog .modal-footer {
  background: #f6f9fc;
  border-top: 1px solid #d7e1ec;
  padding: 16px 22px 20px;
}

body.admin-theme-blue .op-modal-footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

body.admin-theme-blue .op-modal-footer .btn {
  border-radius: 10px;
  font-weight: 700;
  min-height: 40px;
  padding-inline: 14px;
}

body.admin-theme-blue .op-modal-footer-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

body.admin-theme-blue .op-modal-panel {
  background: #f7fafd;
  border: 1px solid #dce6ef;
  border-radius: 14px;
  padding: 16px;
}

body.admin-theme-blue .op-modal-panel + .op-modal-panel {
  margin-top: 14px;
}

body.admin-theme-blue .op-modal-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

body.admin-theme-blue .op-modal-col-12 { grid-column: span 12; }
body.admin-theme-blue .op-modal-col-8 { grid-column: span 8; }
body.admin-theme-blue .op-modal-col-6 { grid-column: span 6; }
body.admin-theme-blue .op-modal-col-4 { grid-column: span 4; }
body.admin-theme-blue .op-modal-col-3 { grid-column: span 3; }

body.admin-theme-blue .op-modal-field label,
body.admin-theme-blue .op-production-field label {
  color: #627b94;
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  margin-bottom: 7px;
  text-transform: uppercase;
}

body.admin-theme-blue .op-modal-field .form-control,
body.admin-theme-blue .op-production-field .form-control {
  border-radius: 12px;
  min-height: 44px;
}

body.admin-theme-blue .op-modal-search {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

body.admin-theme-blue .op-modal-search .btn {
  border-radius: 12px;
  font-weight: 700;
  min-height: 44px;
  padding-inline: 16px;
}

body.admin-theme-blue .op-modal-note {
  color: #5f7890;
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
}

body.admin-theme-blue .op-modal-inline-status {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.admin-theme-blue .op-modal-alert {
  border-radius: 14px;
  margin: 0;
}

body.admin-theme-blue .op-production-shell {
  display: grid;
  gap: 18px;
}

body.admin-theme-blue .op-production-hero {
  background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
  border: 1px solid #d8e2ec;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(20, 52, 77, 0.08);
  padding: 20px 22px;
}

body.admin-theme-blue .op-production-header {
  display: grid;
  gap: 10px;
}

body.admin-theme-blue .op-production-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.admin-theme-blue .op-production-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

body.admin-theme-blue .op-production-toolbar .btn {
  border-radius: 10px;
  font-weight: 700;
}

body.admin-theme-blue .op-production-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.admin-theme-blue .op-production-stage {
  background: #ffffff;
  border: 1px solid #d7e1ec;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(22, 48, 74, 0.06);
  padding: 20px 22px;
}

body.admin-theme-blue .op-production-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

body.admin-theme-blue .op-production-col-12 { grid-column: span 12; }
body.admin-theme-blue .op-production-col-8 { grid-column: span 8; }
body.admin-theme-blue .op-production-col-6 { grid-column: span 6; }
body.admin-theme-blue .op-production-col-4 { grid-column: span 4; }

body.admin-theme-blue .op-production-field--accent .form-control {
  background: #f7fbff;
  border: 2px solid #b8cce0;
  color: #17344d;
}

body.admin-theme-blue .op-production-field--code .form-control,
body.admin-theme-blue .op-production-field--name .form-control {
  min-height: 56px;
}

body.admin-theme-blue .op-production-field--weight .form-control {
  font-size: 38px;
  font-weight: 800;
  min-height: 110px;
  text-align: center;
}

body.admin-theme-blue .op-production-field--qty .form-control {
  font-size: 28px;
  font-weight: 800;
  min-height: 82px;
  text-align: center;
}

body.admin-theme-blue .op-production-field--name .form-control {
  background: #f3f7fb;
}

body.admin-theme-blue .op-production-helper {
  color: #5d758d;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 10px;
}

body.admin-theme-blue .op-production-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

body.admin-theme-blue .op-production-actions .btn {
  border-radius: 10px;
  font-weight: 700;
  min-height: 42px;
}

body.admin-theme-blue .op-production-shell .table.table-invoice,
body.admin-theme-blue .op-modal-panel .table {
  margin-bottom: 0;
}

body.admin-theme-blue .op-production-day {
  background: #f7fafd;
  border: 1px solid #dce6ef;
  border-radius: 14px;
  overflow: hidden;
}

body.admin-theme-blue .op-production-day + .op-production-day {
  margin-top: 12px;
}

body.admin-theme-blue .op-production-day-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  padding: 14px 16px;
}

body.admin-theme-blue .op-production-day-title {
  color: #17344d;
  font-size: 17px;
  font-weight: 700;
}

body.admin-theme-blue .op-production-day-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.admin-theme-blue .op-production-day-toolbar .btn {
  border-radius: 10px;
}

body.admin-theme-blue .op-production-day-body {
  border-top: 1px solid #dce6ef;
  padding: 0 16px 16px;
}

body.admin-theme-blue .op-production-day-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 12px;
}

body.admin-theme-blue .op-production-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

body.admin-theme-blue .op-production-table th,
body.admin-theme-blue .op-production-table td {
  border-bottom: 1px solid #e4edf5;
  padding: 10px 8px;
  vertical-align: top;
}

body.admin-theme-blue .op-production-table thead th {
  color: #627b94;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.admin-theme-blue .op-production-table tbody td {
  color: #17344d;
  font-size: 13px;
  overflow-wrap: anywhere;
}

body.admin-theme-blue .op-production-table .op-production-col-product,
body.admin-theme-blue .op-production-table .op-production-cell-product {
  text-align: left;
}

body.admin-theme-blue .op-production-table .op-production-cell-product {
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

body.admin-theme-blue .ordemproducao-hero {
  display: grid;
  gap: 18px;
}

body.admin-theme-blue .op-overview-shell {
  background: linear-gradient(135deg, rgba(19, 73, 130, 0.98), rgba(57, 140, 211, 0.92));
  border: 1px solid rgba(22, 76, 132, 0.2);
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(20, 74, 137, 0.12);
  color: #fff;
  margin-bottom: 18px;
  padding: 18px 20px;
}

body.admin-theme-blue .op-overview-head {
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

body.admin-theme-blue .op-overview-headline {
  display: grid;
  gap: 10px;
}

body.admin-theme-blue .op-overview-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.admin-theme-blue .op-overview-shell .op-overview-eyebrow {
  color: rgba(255, 255, 255, 0.8);
}

body.admin-theme-blue .op-overview-title {
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  margin: 0;
}

body.admin-theme-blue .op-overview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.admin-theme-blue .op-overview-meta .op-chip {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

body.admin-theme-blue .op-overview-highlight {
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.24);
  min-width: 180px;
  padding: 2px 0 2px 16px;
  text-align: right;
}

body.admin-theme-blue .op-overview-highlight-label {
  color: rgba(255, 255, 255, 0.8);
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

body.admin-theme-blue .op-overview-highlight strong {
  color: #fff;
  display: block;
  font-size: 21px;
  line-height: 1.1;
}

body.admin-theme-blue .op-overview-highlight small {
  color: rgba(255, 255, 255, 0.82);
  display: block;
  font-size: 12px;
  margin-top: 4px;
}

body.admin-theme-blue .op-quick-actions-shell,
body.admin-theme-blue .op-section,
body.admin-theme-blue .op-analytics-shell {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid #d7e1ec;
  border-radius: 10px;
  box-shadow: none;
}

body.admin-theme-blue .op-quick-actions-shell {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-bottom: 14px;
  padding: 0;
}

body.admin-theme-blue .op-quick-actions-shell .op-overview-eyebrow {
  color: #587199;
  margin-bottom: 10px;
}

body.admin-theme-blue .op-actions-bar {
  margin-bottom: 16px;
}

body.admin-theme-blue .op-actions-bar .btn,
body.admin-theme-blue .op-quick-actions .btn {
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
}

body.admin-theme-blue .op-order-summary-grid,
body.admin-theme-blue .op-analytics-grid,
body.admin-theme-blue .op-entry-metrics,
body.admin-theme-blue .op-operator-metrics,
body.admin-theme-blue .op-summary-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

body.admin-theme-blue .op-order-summary-grid {
  margin-bottom: 18px;
}

body.admin-theme-blue .op-order-summary-card,
body.admin-theme-blue .op-analytic-card,
body.admin-theme-blue .op-entry-card,
body.admin-theme-blue .op-operator-card,
body.admin-theme-blue .op-summary-card {
  background: #fbfdff;
  border: 1px solid #dbe5ef;
  border-radius: 8px;
  padding: 12px;
}

body.admin-theme-blue .op-order-summary-label,
body.admin-theme-blue .op-analytic-label,
body.admin-theme-blue .op-summary-label,
body.admin-theme-blue .op-entry-label {
  color: #73899d;
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

body.admin-theme-blue .op-order-summary-card .form-control,
body.admin-theme-blue .op-entry-metric .form-control,
body.admin-theme-blue .op-summary-card .form-control {
  background: #fff;
  border-radius: 10px;
  min-height: 42px;
}

body.admin-theme-blue .op-analytic-card strong,
body.admin-theme-blue .op-summary-card strong {
  color: #17344d;
  display: block;
  font-size: 18px;
  line-height: 1.1;
}

body.admin-theme-blue .op-analytic-card small,
body.admin-theme-blue .op-summary-card small,
body.admin-theme-blue .op-section-note,
body.admin-theme-blue .op-helper-note,
body.admin-theme-blue .op-operator-card p,
body.admin-theme-blue .op-operator-subtitle {
  color: #587199;
  font-size: 12px;
}

body.admin-theme-blue .op-page-sections {
  display: flex;
  flex-direction: column;
}

body.admin-theme-blue .op-section {
  margin-bottom: 18px;
  overflow: hidden;
}

body.admin-theme-blue .op-section .panel-heading {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid #dfe8f2;
  color: #17344d;
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 12px;
  padding-top: 12px;
}

body.admin-theme-blue .op-entry-list,
body.admin-theme-blue .op-operator-list {
  display: grid;
  gap: 12px;
}

body.admin-theme-blue .op-entry-card-top,
body.admin-theme-blue .op-operator-card-top {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 10px;
}

body.admin-theme-blue .op-entry-card-title,
body.admin-theme-blue .op-operator-card h4 {
  color: #17344d;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

body.admin-theme-blue .op-entry-card-title {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

body.admin-theme-blue .op-entry-metric {
  background: #f7f9fc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 8px 10px;
}

body.admin-theme-blue .op-entry-metric strong {
  color: #17344d;
  font-size: 14px;
  line-height: 1.3;
}

body.admin-theme-blue .op-operator-badge {
  align-self: flex-start;
  background: #e8f6ee;
  border-radius: 8px;
  color: #1f7a49;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
}

body.admin-theme-blue .op-operator-products-wrap {
  background: #f8fbfd;
  border: 1px solid #dce6ef;
  border-radius: 8px;
  overflow: hidden;
}

body.admin-theme-blue .op-operator-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

body.admin-theme-blue .op-operator-table thead th {
  background: #eef5fb;
  border-bottom: 1px solid #dce6ef;
  color: #48657d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 10px 12px;
  text-transform: uppercase;
}

body.admin-theme-blue .op-operator-table tbody td {
  border-bottom: 1px solid #e2eaf2;
  color: #17344d;
  padding: 12px;
  vertical-align: top;
  word-break: break-word;
}

body.admin-theme-blue .op-section-note {
  margin-top: 12px;
}

body.admin-theme-blue .op-section-note strong {
  color: #17344d;
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}

body.admin-theme-blue .op-observacoes {
  min-height: 120px;
  resize: vertical;
}

body.admin-theme-blue .op-analytics-shell--flat .panel-body {
  padding-top: 14px;
}

body.admin-theme-blue .op-receipt-shell .panel-body {
  padding-bottom: 16px;
}

body.admin-theme-blue .op-section--report .panel-body {
  padding: 18px;
}

body.admin-theme-blue .op-admin-report {
  color: #17344d;
  display: grid;
  gap: 18px;
}

body.admin-theme-blue .op-admin-report__hero {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

body.admin-theme-blue .op-admin-report__headline {
  display: grid;
  gap: 6px;
}

body.admin-theme-blue .op-admin-report__eyebrow,
body.admin-theme-blue .op-admin-report__meta-item span,
body.admin-theme-blue .op-admin-report__section-head span,
body.admin-theme-blue .op-admin-report__table thead th,
body.admin-theme-blue .op-admin-report__closing-card span,
body.admin-theme-blue .op-admin-report .summary-card span {
  color: #6f8398;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.admin-theme-blue .op-admin-report__headline h3 {
  color: #17344d;
  font-size: 24px;
  font-weight: 800;
  margin: 0;
}

body.admin-theme-blue .op-admin-report__headline p,
body.admin-theme-blue .op-admin-report__section-head p {
  color: #60798d;
  font-size: 13px;
  margin: 0;
}

body.admin-theme-blue .op-admin-report__status-chip {
  background: #eaf2fb;
  border: 1px solid #c8d9ea;
  border-radius: 999px;
  color: #1d4b73;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 7px 12px;
  text-transform: uppercase;
}

body.admin-theme-blue .op-admin-report__meta {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.admin-theme-blue .op-admin-report__meta-item,
body.admin-theme-blue .op-admin-report .summary-card,
body.admin-theme-blue .op-admin-report__closing-card,
body.admin-theme-blue .op-admin-report__notes,
body.admin-theme-blue .op-admin-report__table-shell {
  background: #fbfdff;
  border: 1px solid #d9e4ef;
  border-radius: 10px;
}

body.admin-theme-blue .op-admin-report__meta-item,
body.admin-theme-blue .op-admin-report .summary-card,
body.admin-theme-blue .op-admin-report__closing-card {
  padding: 12px 14px;
}

body.admin-theme-blue .op-admin-report__meta-item strong,
body.admin-theme-blue .op-admin-report .summary-card strong,
body.admin-theme-blue .op-admin-report__closing-card strong {
  color: #17344d;
  display: block;
  font-size: 16px;
  line-height: 1.35;
  margin-top: 6px;
}

body.admin-theme-blue .op-admin-report__summary {
  margin-top: -2px;
}

body.admin-theme-blue .op-admin-report__section {
  display: grid;
  gap: 10px;
}

body.admin-theme-blue .op-admin-report__section-head {
  align-items: baseline;
  border-bottom: 1px solid #dce6ef;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding-bottom: 8px;
}

body.admin-theme-blue .op-admin-report__section-head h4 {
  color: #17344d;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 4px;
}

body.admin-theme-blue .op-admin-report__table-shell {
  overflow: hidden;
  padding: 0 12px;
}

body.admin-theme-blue .op-admin-report__table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

body.admin-theme-blue .op-admin-report__table th,
body.admin-theme-blue .op-admin-report__table td {
  border-bottom: 1px solid #e4edf5;
  padding: 10px 8px;
  vertical-align: top;
}

body.admin-theme-blue .op-admin-report__table thead th {
  white-space: nowrap;
}

body.admin-theme-blue .op-admin-report__table tbody td,
body.admin-theme-blue .op-admin-report__table tfoot td {
  color: #17344d;
  font-size: 13px;
  overflow-wrap: anywhere;
}

body.admin-theme-blue .op-admin-report__table tfoot td {
  font-weight: 700;
}

body.admin-theme-blue .op-admin-report__closing-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.admin-theme-blue .op-admin-report__notes {
  color: #17344d;
  line-height: 1.6;
  min-height: 88px;
  padding: 14px;
  white-space: pre-wrap;
}

body.admin-theme-blue .op-report-sheet {
  background: #ffffff;
  border: 1px solid #d9e3ed;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(18, 52, 77, 0.06);
  color: #17344d;
  margin: 0 auto;
  max-width: 980px;
  padding: 22px 24px;
}

body.admin-theme-blue .op-report-sheet .print-header {
  align-items: flex-start;
  border: 1px solid #cfd9e3;
  border-radius: 14px;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 18px 20px;
}

body.admin-theme-blue .op-report-sheet .print-brand {
  align-items: center;
  display: flex;
  max-width: 36%;
  min-width: 0;
}

body.admin-theme-blue .op-report-sheet .print-brand img {
  height: auto;
  max-width: 240px;
}

body.admin-theme-blue .op-report-sheet .print-order {
  max-width: 58%;
  min-width: 0;
  text-align: right;
}

body.admin-theme-blue .op-report-sheet .print-order h2 {
  color: #17344d;
  font-size: 24px;
  font-weight: 700;
  margin: 10px 0 12px;
}

body.admin-theme-blue .op-report-sheet .print-order p {
  color: #587199;
  margin: 4px 0;
}

body.admin-theme-blue .op-report-sheet .print-order .status {
  background: #eaf2fb;
  border-radius: 999px;
  color: #1d4b73;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 6px 10px;
  text-transform: uppercase;
}

body.admin-theme-blue .op-report-sheet .meta-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

body.admin-theme-blue .op-report-sheet .summary-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
}

body.admin-theme-blue .op-report-sheet .meta-card,
body.admin-theme-blue .op-report-sheet .summary-card {
  background: #f8fbfd;
  border: 1px solid #d9e3ed;
  border-radius: 12px;
  min-width: 0;
  padding: 10px 12px;
}

body.admin-theme-blue .op-report-sheet .meta-card span,
body.admin-theme-blue .op-report-sheet .summary-card span,
body.admin-theme-blue .op-report-sheet .section-title small,
body.admin-theme-blue .op-report-sheet .print-table thead th {
  color: #6b8298;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.admin-theme-blue .op-report-sheet .meta-card span,
body.admin-theme-blue .op-report-sheet .summary-card span {
  display: block;
  margin-bottom: 6px;
}

body.admin-theme-blue .op-report-sheet .section-title small {
  display: block;
}

body.admin-theme-blue .op-report-sheet .print-table thead th {
  display: table-cell;
}

body.admin-theme-blue .op-report-sheet .meta-card strong,
body.admin-theme-blue .op-report-sheet .summary-card strong {
  display: block;
  font-size: 15px;
  line-height: 1.35;
}

body.admin-theme-blue .op-report-sheet .print-section {
  margin-top: 18px;
}

body.admin-theme-blue .op-report-sheet .section-title {
  align-items: baseline;
  border-bottom: 1px solid #d9e3ed;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 6px;
}

body.admin-theme-blue .op-report-sheet .section-title h3 {
  color: #17344d;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

body.admin-theme-blue .op-report-sheet .print-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

body.admin-theme-blue .op-report-sheet .print-table th,
body.admin-theme-blue .op-report-sheet .print-table td {
  border-bottom: 1px solid #e3eaf1;
  padding: 7px 8px;
  vertical-align: top;
}

body.admin-theme-blue .op-report-sheet .print-table th {
  white-space: nowrap;
  word-break: normal;
}

body.admin-theme-blue .op-report-sheet .print-table td {
  overflow-wrap: anywhere;
  word-break: normal;
}

body.admin-theme-blue .op-report-sheet .print-table tbody td,
body.admin-theme-blue .op-report-sheet .print-table tfoot td {
  color: #17344d;
  font-size: 13px;
}

body.admin-theme-blue .op-report-sheet .print-table tfoot td {
  font-weight: 700;
}

body.admin-theme-blue .op-report-sheet .observacoes-box {
  background: #fbfdff;
  border: 1px solid #d9e3ed;
  border-radius: 12px;
  min-height: 140px;
  padding: 12px;
  white-space: pre-wrap;
}

body.admin-theme-blue .op-receipt-summary-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.admin-theme-blue .op-receipt-summary-card {
  background: #f8fbfd;
  border: 1px solid #d9e3ed;
  border-radius: 12px;
  min-width: 0;
  padding: 10px 12px;
}

body.admin-theme-blue .op-receipt-summary-card span,
body.admin-theme-blue .op-receipt-section-title small,
body.admin-theme-blue .op-receipt-table thead th {
  color: #6b8298;
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.admin-theme-blue .op-receipt-summary-card span {
  margin-bottom: 6px;
}

body.admin-theme-blue .op-receipt-summary-card strong {
  color: #17344d;
  display: block;
  font-size: 15px;
  line-height: 1.35;
}

body.admin-theme-blue .op-receipt-meta-line {
  color: #587199;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 12px;
  padding-top: 2px;
}

body.admin-theme-blue .op-receipt-meta-line span {
  font-size: 12px;
}

body.admin-theme-blue .op-receipt-section {
  margin-top: 16px;
}

body.admin-theme-blue .op-receipt-section + .op-receipt-section {
  margin-top: 18px;
}

body.admin-theme-blue .op-receipt-section-title {
  align-items: baseline;
  border-bottom: 1px solid #d9e3ed;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
}

body.admin-theme-blue .op-receipt-section-title h3 {
  color: #17344d;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

body.admin-theme-blue .op-inline-table,
body.admin-theme-blue .op-receipt-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

body.admin-theme-blue .op-inline-table th,
body.admin-theme-blue .op-inline-table td,
body.admin-theme-blue .op-receipt-table th,
body.admin-theme-blue .op-receipt-table td {
  border-bottom: 1px solid #e3eaf1;
  padding: 8px 8px;
  vertical-align: top;
  word-break: break-word;
}

body.admin-theme-blue .op-inline-table thead th,
body.admin-theme-blue .op-receipt-table thead th {
  background: transparent;
  border-bottom-color: #d9e3ed;
}

body.admin-theme-blue .op-inline-table tbody td,
body.admin-theme-blue .op-inline-table tfoot td,
body.admin-theme-blue .op-receipt-table tbody td,
body.admin-theme-blue .op-receipt-table tfoot td {
  color: #17344d;
  font-size: 13px;
}

body.admin-theme-blue .op-inline-table tfoot td,
body.admin-theme-blue .op-receipt-table tfoot td {
  font-weight: 700;
}

@media (max-width: 991px) {
  body.admin-theme-blue .op-overview-head {
    flex-direction: column;
  }

  body.admin-theme-blue .op-receipt-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-theme-blue .op-report-sheet .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-theme-blue .op-admin-report__meta,
  body.admin-theme-blue .op-admin-report__closing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  body.admin-theme-blue .op-modal-dialog {
    margin: 8px auto;
    width: calc(100vw - 12px) !important;
  }

  body.admin-theme-blue .op-modal-dialog .modal-header,
  body.admin-theme-blue .op-modal-dialog .modal-body,
  body.admin-theme-blue .op-modal-dialog .modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  body.admin-theme-blue .op-modal-footer,
  body.admin-theme-blue .op-modal-footer-actions {
    width: 100%;
  }

  body.admin-theme-blue .op-modal-footer-actions .btn {
    width: 100%;
  }

  body.admin-theme-blue .op-modal-search,
  body.admin-theme-blue .op-production-toolbar,
  body.admin-theme-blue .op-production-day-head {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  body.admin-theme-blue .op-modal-col-8,
  body.admin-theme-blue .op-modal-col-6,
  body.admin-theme-blue .op-modal-col-4,
  body.admin-theme-blue .op-modal-col-3,
  body.admin-theme-blue .op-production-col-8,
  body.admin-theme-blue .op-production-col-6,
  body.admin-theme-blue .op-production-col-4 {
    grid-column: span 12;
  }

  body.admin-theme-blue .op-production-stage,
  body.admin-theme-blue .op-production-hero {
    padding: 16px;
  }

  body.admin-theme-blue .op-production-toolbar-actions,
  body.admin-theme-blue .op-production-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  body.admin-theme-blue .op-production-toolbar-actions .btn,
  body.admin-theme-blue .op-production-actions .btn {
    width: 100%;
  }

  body.admin-theme-blue .op-production-field--weight .form-control {
    font-size: 32px;
    min-height: 96px;
  }

  body.admin-theme-blue .op-production-field--qty .form-control {
    font-size: 24px;
    min-height: 74px;
  }

  body.admin-theme-blue .op-production-table {
    table-layout: auto;
  }

  body.admin-theme-blue .op-production-table thead {
    display: none;
  }

  body.admin-theme-blue .op-production-table tbody tr {
    display: grid;
    gap: 8px;
    padding: 12px 0;
  }

  body.admin-theme-blue .op-production-table tbody td {
    border-bottom: 0;
    display: block;
    padding: 0;
    text-align: left !important;
  }

  body.admin-theme-blue .op-production-table .op-production-cell-product {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  body.admin-theme-blue .op-production-table tbody td::before {
    color: #73899d;
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: 4px;
    text-transform: uppercase;
  }

body.admin-theme-blue .op-section--report .panel-body {
    padding: 14px;
  }

  body.admin-theme-blue .op-admin-report__hero {
    align-items: stretch;
    flex-direction: column;
  }

  body.admin-theme-blue .op-admin-report__meta,
  body.admin-theme-blue .op-admin-report__closing-grid,
  body.admin-theme-blue .op-admin-report__summary {
    grid-template-columns: 1fr;
  }

  body.admin-theme-blue .op-admin-report__section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  body.admin-theme-blue .op-admin-report__table {
    table-layout: auto;
  }

  body.admin-theme-blue .op-admin-report__table thead {
    display: none;
  }

  body.admin-theme-blue .op-admin-report__table tbody tr,
  body.admin-theme-blue .op-admin-report__table tfoot tr {
    display: grid;
    gap: 8px;
    padding: 12px 0;
  }

  body.admin-theme-blue .op-admin-report__table tbody td,
  body.admin-theme-blue .op-admin-report__table tfoot td {
    border-bottom: 0;
    display: block;
    padding: 0;
    text-align: left !important;
  }

  body.admin-theme-blue .op-admin-report__table tbody td::before,
  body.admin-theme-blue .op-admin-report__table tfoot td::before {
    color: #73899d;
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: 4px;
    text-transform: uppercase;
  }

body.admin-theme-blue .op-admin-report__table-shell {
    padding: 0 14px;
  }

body.admin-theme-blue .op-report-sheet {
    border-radius: 14px;
    padding: 16px;
  }

body.admin-theme-blue .op-admin-report {
  background: #edffee;
  border: 1px solid #cfe6cf;
  border-radius: 4px;
  gap: 14px;
  padding: 14px;
}

body.admin-theme-blue .op-admin-report__hero {
  align-items: center;
  background: transparent;
  margin-bottom: 2px;
}

body.admin-theme-blue .op-admin-report__eyebrow {
  display: none;
}

body.admin-theme-blue .op-admin-report__headline h3 {
  background: #4b8d43;
  border-radius: 12px;
  color: #fff;
  display: inline-block;
  font-size: 20px;
  padding: 10px 20px;
}

body.admin-theme-blue .op-admin-report__headline p {
  display: none;
}

body.admin-theme-blue .op-admin-report__status-chip {
  background: #5cb85c;
  border: 0;
  color: #fff;
}

body.admin-theme-blue .op-admin-report__meta {
  display: none;
}

body.admin-theme-blue .op-admin-report .summary-card {
  background: #2faf42;
  border: 0;
  border-radius: 12px;
  color: #fff;
}

body.admin-theme-blue .op-admin-report .summary-card span,
body.admin-theme-blue .op-admin-report .summary-card strong {
  color: #fff;
}

body.admin-theme-blue .op-admin-report__section {
  background: #f7fff7;
  border: 1px solid #d6e9d6;
  border-radius: 4px;
  padding: 10px 14px 14px;
}

body.admin-theme-blue .op-admin-report__section-head {
  border-bottom-color: #d9ead9;
}

body.admin-theme-blue .op-admin-report__table-shell {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

body.admin-theme-blue .op-admin-report__table th,
body.admin-theme-blue .op-admin-report__table td {
  border-bottom: 1px solid #d8e7d8;
}

body.admin-theme-blue .op-admin-report__table tbody tr:nth-child(odd) td {
  background: #dff0df;
}

body.admin-theme-blue .op-admin-report__table tbody tr:nth-child(even) td {
  background: #ffffff;
}

body.admin-theme-blue .op-admin-report__closing-card,
body.admin-theme-blue .op-admin-report__notes {
  background: #ffffff;
  border: 1px solid #d9ead9;
  border-radius: 4px;
}

  body.admin-theme-blue .op-report-sheet .print-header {
    flex-direction: column;
    padding: 14px;
  }

  body.admin-theme-blue .op-report-sheet .print-brand {
    flex-direction: column;
  }

  body.admin-theme-blue .op-report-sheet .print-brand img {
    max-width: 180px;
  }

  body.admin-theme-blue .op-report-sheet .print-brand,
  body.admin-theme-blue .op-report-sheet .print-order {
    max-width: 100%;
  }

  body.admin-theme-blue .op-report-sheet .print-order {
    text-align: left;
  }

  body.admin-theme-blue .op-report-sheet .meta-grid {
    grid-template-columns: 1fr;
  }

body.admin-theme-blue .op-overview-shell {
    padding: 18px 16px;
  }

  body.admin-theme-blue .op-overview-title {
    font-size: 20px;
  }

  body.admin-theme-blue .op-order-summary-grid,
  body.admin-theme-blue .op-analytics-grid,
  body.admin-theme-blue .op-entry-metrics,
  body.admin-theme-blue .op-operator-metrics,
  body.admin-theme-blue .op-summary-cards {
    grid-template-columns: 1fr 1fr;
  }

  body.admin-theme-blue .op-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  body.admin-theme-blue .op-quick-actions .btn {
    min-width: 0;
    text-align: center;
    width: 100%;
  }

  body.admin-theme-blue .op-entry-card-top,
  body.admin-theme-blue .op-operator-card-top {
    flex-direction: column;
  }

  body.admin-theme-blue .op-overview-highlight {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
    min-width: 0;
    padding: 10px 0 0;
    text-align: left;
    width: 100%;
  }

  body.admin-theme-blue .op-operator-table {
    table-layout: auto;
  }

  body.admin-theme-blue .op-operator-table thead {
    display: none;
  }

  body.admin-theme-blue .op-operator-table tbody tr {
    display: grid;
    gap: 8px;
    padding: 12px;
  }

  body.admin-theme-blue .op-operator-table tbody td {
    border-bottom: 0;
    display: block;
    padding: 0;
    text-align: left !important;
  }

  body.admin-theme-blue .op-operator-table tbody td::before {
    color: #73899d;
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: 4px;
    text-transform: uppercase;
  }

  body.admin-theme-blue .op-receipt-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.admin-theme-blue .op-report-sheet .summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.admin-theme-blue .op-inline-table,
  body.admin-theme-blue .op-receipt-table {
    table-layout: auto;
  }

  body.admin-theme-blue .op-inline-table thead,
  body.admin-theme-blue .op-receipt-table thead {
    display: none;
  }

  body.admin-theme-blue .op-inline-table tbody tr,
  body.admin-theme-blue .op-receipt-table tbody tr {
    display: grid;
    gap: 8px;
    padding: 12px 0;
  }

  body.admin-theme-blue .op-inline-table tbody td,
  body.admin-theme-blue .op-inline-table tfoot td,
  body.admin-theme-blue .op-receipt-table tbody td,
  body.admin-theme-blue .op-receipt-table tfoot td {
    border-bottom: 0;
    display: block;
    padding: 0;
    text-align: left !important;
  }

  body.admin-theme-blue .op-inline-table tbody td::before,
  body.admin-theme-blue .op-receipt-table tbody td::before {
    color: #73899d;
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: 4px;
    text-transform: uppercase;
  }

  body.admin-theme-blue .op-inline-table tfoot tr,
  body.admin-theme-blue .op-receipt-table tfoot tr {
    display: grid;
    gap: 6px;
    padding-top: 10px;
  }

  body.admin-theme-blue .op-report-sheet .print-table {
    table-layout: auto;
  }

  body.admin-theme-blue .op-report-sheet .print-table thead {
    display: none;
  }

  body.admin-theme-blue .op-report-sheet .print-table tbody tr,
  body.admin-theme-blue .op-report-sheet .print-table tfoot tr {
    display: grid;
    gap: 8px;
    padding: 12px 0;
  }

  body.admin-theme-blue .op-report-sheet .print-table tbody td,
  body.admin-theme-blue .op-report-sheet .print-table tfoot td {
    border-bottom: 0;
    display: block;
    padding: 0;
    text-align: left !important;
  }

  body.admin-theme-blue .op-report-sheet .print-table tbody td::before {
    color: #73899d;
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: 4px;
    text-transform: uppercase;
  }
}

@media (max-width: 480px) {
  body.admin-theme-blue .op-order-summary-grid,
  body.admin-theme-blue .op-analytics-grid,
  body.admin-theme-blue .op-entry-metrics,
  body.admin-theme-blue .op-operator-metrics,
  body.admin-theme-blue .op-summary-cards,
  body.admin-theme-blue .op-quick-actions {
    grid-template-columns: 1fr 1fr;
  }

  body.admin-theme-blue .op-actions-bar .btn,
  body.admin-theme-blue .op-quick-actions .btn {
    min-width: 0;
    width: 100%;
  }

  body.admin-theme-blue .op-receipt-summary-grid {
    grid-template-columns: 1fr;
  }

  body.admin-theme-blue .op-report-sheet .summary-grid {
    grid-template-columns: 1fr;
  }
}

body.admin-theme-blue .op-admin-report {
  background: #edffee;
  border: 1px solid #cfe6cf;
  border-radius: 4px;
  gap: 14px;
  padding: 14px;
}

body.admin-theme-blue .op-admin-report__hero {
  align-items: center;
  background: transparent;
  margin-bottom: 2px;
}

body.admin-theme-blue .op-admin-report__eyebrow {
  display: none;
}

body.admin-theme-blue .op-admin-report__headline h3 {
  background: #4b8d43;
  border-radius: 12px;
  color: #fff;
  display: inline-block;
  font-size: 20px;
  padding: 10px 20px;
}

body.admin-theme-blue .op-admin-report__headline p {
  display: none;
}

body.admin-theme-blue .op-admin-report__status-chip {
  background: #5cb85c;
  border: 0;
  color: #fff;
}

body.admin-theme-blue .op-admin-report__meta {
  display: none;
}

body.admin-theme-blue .op-admin-report .summary-card {
  background: #2faf42;
  border: 0;
  border-radius: 12px;
  color: #fff;
}

body.admin-theme-blue .op-admin-report .summary-card span,
body.admin-theme-blue .op-admin-report .summary-card strong {
  color: #fff;
}

body.admin-theme-blue .op-admin-report__section {
  background: #f7fff7;
  border: 1px solid #d6e9d6;
  border-radius: 4px;
  padding: 10px 14px 14px;
}

body.admin-theme-blue .op-admin-report__section-head {
  border-bottom-color: #d9ead9;
}

body.admin-theme-blue .op-admin-report__table-shell {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

body.admin-theme-blue .op-admin-report__table th,
body.admin-theme-blue .op-admin-report__table td {
  border-bottom: 1px solid #d8e7d8;
}

body.admin-theme-blue .op-admin-report__table tbody tr:nth-child(odd) td {
  background: #dff0df;
}

body.admin-theme-blue .op-admin-report__table tbody tr:nth-child(even) td {
  background: #ffffff;
}

body.admin-theme-blue .op-admin-report__closing-card,
body.admin-theme-blue .op-admin-report__notes {
  background: #ffffff;
  border: 1px solid #d9ead9;
  border-radius: 4px;
}

/* ===========================================================================
   ###########################################################################
   TSW MAQUINAS -- o que existe SO na TSW, sobre o tema do Fortal (25/09/2026)
   ###########################################################################
   Ordem do Rafael (25/09/2026): "a TSW nova deve ficar IGUAL AO FORTAL". Tudo
   ACIMA desta linha e o admin-theme-global.css do Telplastic Fortal, copiado
   INTEIRO e sem edicao (diff vazio contra o de la). Para atualizar o tema,
   copie o do Fortal de novo e mantenha este bloco no fim.

   Aqui ficam so:
     (a) as variaveis que a TSW usa e o Fortal nao define -- com VALORES DO
         FORTAL (tirados do bootstrap.css/custom.css/tema dele), nao cores novas;
     (b) tamanho e posicao da logo 3D da TSW;
     (c) os blocos FUNCIONAIS de celular (piso de toque, grade->cartao, modais
         da RAT, escolher peca, topo no celular), sem cor propria;
     (d) as classes rat-* e tsw-* repintadas com as cores do Fortal. So as cores
         de ESTADO da RAT ficam, porque carregam significado.
   O que SAIU e nao deve voltar: paleta cobalto, botoes chapados, raios
   10/6/4, `--admin-theme-shadow: none`, texto preto, menu cinza espelhado,
   cabecalho azul-marinho.
   =========================================================================== */

/* (a) VARIAVEIS SO DA TSW -- ~700 usos em .phtml/CSS. Valores do Fortal:
   semantica = a do Bootstrap 3 que o Fortal carrega (bootstrap.css:523-552 e
   :5334-5379 de la); zebra/selecionado/impresso = custom.css do Fortal. */
:root {
  --admin-theme-ink: #15305b;              /* = --admin-theme-text do Fortal */
  --admin-theme-text-faint: #999999;       /* .text-muted do Fortal (bootstrap.css:524) */
  --admin-theme-primary-light: #38a3ff;    /* = --admin-theme-accent do Fortal */
  --admin-theme-primary-soft-border: #c7d7f4; /* = --admin-theme-border do Fortal */
  --admin-theme-border-strong: #c7d7f4;    /* o Fortal usa a MESMA borda em controle */
  --admin-theme-shell-deep: #0a234e;       /* rodape do Fortal, rgba(10, 35, 78) */
  --admin-theme-mute-bg: #f4f8ff;          /* = --admin-theme-surface-alt do Fortal */
  --admin-theme-btn-fill: #ffffff;         /* .btn-default do Fortal e branco */
  --admin-theme-nav-pill: #1f5fbf;
  --admin-theme-danger: #d9534f;           /* .btn-danger/.label-danger do Bootstrap do Fortal */
  --admin-theme-danger-bg: #f2dede;        /* .alert-danger */
  --admin-theme-danger-border: #ebccd1;
  --admin-theme-warn: #8a6d3b;             /* .text-warning */
  --admin-theme-warn-bg: #fcf8e3;          /* .alert-warning */
  --admin-theme-warn-border: #faebcc;
  --admin-theme-ok: #3c763d;               /* .text-success */
  --admin-theme-ok-bg: #dff0d8;            /* .alert-success */
  --admin-theme-ok-border: #d6e9c6;
  --admin-theme-pos: #3c763d;
  --admin-theme-neg: #a94442;              /* .text-danger */
  --admin-theme-zebra: #d1d5ea;            /* lilas-azulado de antes (5bb935fa, pedido do Rafael 25/09) */
  --admin-theme-selected: #60ecff;         /* custom.css:459 do Fortal (tr.sel) */
  --admin-theme-row-impresso: #B4B4C1;     /* custom.css do Fortal (tr.impresso) */
}

/* (b) LOGO 3D DA TSW -- no CARTAO CLARO do Fortal (o cartao menta vem do tema
   acima, `.admin-shell-logo`). A marca 3D (`logomarca_3d.png`, 920x116 reais,
   fundo transparente) e desenhada em 460x58: proporcao exata 7,931. Mais alta
   que a do Fortal (34px), entao o cabecalho cresce e o `top` do menu e a folga
   do conteudo acompanham (valores MEDIDOS no navegador, 25/09/2026). */
body.admin-theme-blue .admin-shell-logo img {
  width: 460px !important;
  height: 58px !important;
  max-width: 460px;
}
/* So acima de 991px: abaixo disso o proprio tema do Fortal ja reposiciona o
   menu (@media 991/767 acima) e o cabecalho cresce sozinho. Fortal: cabecalho
   89px, menu top 89, conteudo 118. TSW: cabecalho 107px (+18) -> 107 e 136. */
@media (min-width: 992px) {
  body.admin-theme-blue .admin-shell-menu {
    top: 107px;
  }
  body.admin-theme-blue #main-content {
    padding-top: 136px;
  }
  body.admin-theme-blue #main-content.op-legacy-page {
    padding-top: 136px !important;
  }
}

/* ===========================================================================
   LOGO NO CELULAR
   No desktop a marca 3D vai em 460x58 (ver .admin-shell-logo img). Em tela
   estreita ela reduz mantendo a PROPORCAO exata 7,931:1, senao o texto
   distorce.
   =========================================================================== */
@media (max-width: 991px) {
  body.admin-theme-blue .admin-shell-logo img {
    width: 341px !important;
    height: 43px !important;
    max-width: 341px;
  }
}

@media (max-width: 560px) {
  /* 238x30: no iPhone (390px) sobra respiro ate o sino e o avatar, que ficam
     a direita da marca -- em 278px o "S" encostava no botao do usuario. */
  body.admin-theme-blue .admin-shell-logo img {
    width: 238px !important;
    height: 30px !important;
    max-width: 238px;
  }
}

/* Celular ESTREITO (22/10/2026, QA das contas no Chrome): os 238px acima foram medidos no iPhone de
   390px e cabem por 1px. Logo (238 + 53 de margem/padding) + sino/avatar (72) + 28 do header passam de
   375 por 2px e de 360 por 17px: a pagina INTEIRA alargava (innerWidth 377 num aparelho de 360) e o
   rodape fixo ficava fora da tela, em TODAS as telas. Mesma proporcao 7,931 da marca. */
@media (max-width: 380px) {
  body.admin-theme-blue .admin-shell-logo img {
    width: 206px !important;
    height: 26px !important;
    max-width: 206px;
  }
}
@media (max-width: 340px) {
  body.admin-theme-blue .admin-shell-logo img {
    width: 167px !important;
    height: 21px !important;
    max-width: 167px;
  }
}



/* (c) FUNCIONAL -- CELULAR E TECLADO. Sem cor propria: so variaveis do tema. */

/* O ultimo dropdown do menu ("Relatorios") abre para DENTRO da tela. A TSW tem
   12 itens no menu (o Fortal 9), e o ultimo chegava a borda direita. */
@media (min-width: 768px) {
    /* ⚠️ A VARIANTE `.pull-right` PRECISA EXISTIR AQUI, e nao so no Bootstrap.
       O ULTIMO dropdown da barra ("Relatorios") abria para FORA da tela: medido
       em viewport de 1366px, o menu ia de left 1161 a right 1381 -- 15px para
       fora --, `scrollWidth` subia de 1351 para 1381 ao abrir, a pagina rolava de
       verdade (scrollX chegava a 30) e o ultimo item aparecia cortado.
       Pus `pull-right` na <ul> (menu-nav.phtml) e NADA MUDOU -- nem um pixel. O
       QA de navegador perguntou ao proprio navegador quais regras casavam com o
       elemento e mostrou por que: `.dropdown-menu.pull-right` do Bootstrap tem
       especificidade 0-2-0, e a regra acima -- elemento + 3 classes + atributo --
       e muito maior. O `left: 0` dela vencia, o computado ficava com `left: 0px`
       E `right: 0px` ao mesmo tempo (caso sobre-restringido) e, em LTR, o
       navegador descarta o `right`.
       Consertar no Bootstrap seria mexer na biblioteca; a regra que vence e esta,
       entao e aqui que a variante tem de existir. */
    body.admin-theme-blue .admin-shell-menu[data-navbar-engine="v2"] .btn-group > .dropdown-menu.pull-right {
      left: auto;
      right: 0;
    }
}

/* Campo travado parece travado (readonly/disabled com fundo do tema). */
/* RODAPE x BOTAO DE CHAT NO CELULAR.
   O rodape e `position: fixed` de largura total com o texto centralizado, e o
   widget de chat (#nchat, app/design/admin/Chat/widget.phtml) tambem e fixed,
   ancorado em `right: 20px; bottom: 0` com 80px de largura -- ou seja, ele ocupa
   os 100px da direita EM CIMA do rodape. No celular o texto do rodape e largo o
   bastante para chegar la e sumia por baixo do botao: medido em 390x844 em
   17/08/2026, 100px do texto ficavam cobertos ("...2026 | v" cortado).
   O respiro a direita reserva essa faixa; como o texto e `text-align: center`,
   ele passa a se centralizar no espaco que sobra, sem encostar no botao.
   So no celular: no desktop o texto centralizado fica longe da borda direita e
   nunca encosta no chat. */
/* CAMPO TRAVADO PRECISA PARECER TRAVADO.
   Ate aqui, `readonly`/`disabled` renderizavam IGUAL a um campo editavel: mesmo
   fundo branco, mesma borda. Na RAT isso ficou caro depois que o cabecalho
   passou a ser somente-leitura para o tecnico -- ele via 8 campos com cara de
   editaveis, tocava e nada acontecia (falsa affordance). Agora o campo travado
   se anuncia: fundo acinzentado, texto mais suave e cursor de "nao editavel".
   Vale para o admin inteiro, nao so para o RAT. */
body.admin-theme-blue .form-control[readonly],
body.admin-theme-blue .form-control[disabled],
body.admin-theme-blue select.form-control[disabled],
body.admin-theme-blue textarea.form-control[readonly] {
  background-color: var(--admin-theme-bg);
  border-color: var(--admin-theme-border);
  color: #4a4a4a;
  cursor: not-allowed;
  box-shadow: none;
}

/* Sem realce de foco em campo travado: piscar a borda sugere que da para digitar. */
body.admin-theme-blue .form-control[readonly]:focus,
body.admin-theme-blue .form-control[disabled]:focus {
  border-color: var(--admin-theme-border);
  box-shadow: none;
}

/* Excecao: campo de data/hora que so abre por calendario continua com fundo
   branco -- ele e `readonly` por mecanica do widget, nao por falta de permissao,
   e o usuario PODE alterar clicando. */
body.admin-theme-blue .form-control[readonly].calendario,
body.admin-theme-blue .form-control[readonly].hora-campo,
body.admin-theme-blue .form-control[readonly][data-toggle="datepicker"] {
  background-color: #fff;
  color: inherit;
  cursor: pointer;
}

/* Rodape x botao do chat no celular. */
@media (max-width: 767px) {
    body.admin-theme-blue .footer-section.admin-shell-footer {
      padding-right: 110px;
      /* 11px para o texto caber em UMA linha nos 262px que sobram: em 13px ele
         quebrava em duas e dobrava a altura do rodape (58px), comendo a area util
         da tela. So no celular; no desktop segue no tamanho normal. */
      font-size: 11px;
    }
}

/* Topo no celular: sem rolagem lateral, nome do usuario dentro do menu. */
@media (max-width: 767px) {
    /* ROLAGEM HORIZONTAL EM TODA TELA DO ADMIN NO CELULAR — o conserto.

       O QA de navegador mediu em 19/08/2026: a `.admin-shell-topnav` terminava
       em x=402 num viewport de 390 — 12px para fora, o que dava barra de
       rolagem lateral em QUALQUER tela do sistema, não só nas da RAT.

       CAUSA: a regra base põe `margin: 0 0 0 8px !important` em cada `li`
       (linha 144-149 deste arquivo). O reset daqui era `margin: 0` SEM
       `!important` — ou seja, perdia para a regra base e os 8px de cada item
       continuavam somando, além do `gap: 8px` do flex logo acima.

       `!important` aqui não é preguiça: é o único jeito de vencer um
       `!important` de mesma especificidade sem reescrever a regra base, que
       serve o desktop e está ancorada no TSW legado.

       `max-width` + `box-sizing` são o cinto de segurança: mesmo que apareça
       outro item na barra, ela para na borda em vez de empurrar a página. */
    body.admin-theme-blue .admin-shell-topnav {
      max-width: 100%;
      box-sizing: border-box;
    }

    /* ⚠️ NADA DE `overflow: hidden` AQUI.

       A primeira versao deste conserto tinha `overflow-x: hidden` na barra como
       "cinto de seguranca". Ele resolveu o estouro escondendo o que sobrava --
       e o QA mediu o preco: o `<a>` do usuario tem 167px dentro de um `<li>` de
       134px, entao a seta ▾ era CORTADA nas tres telas e, na tela com barra de
       rolagem vertical (onde o viewport util cai de 390 para 375), o nome perdia
       o "r" final: "QA Administrado".

       Esconder e mascarar. O conserto de verdade e o de baixo -- fazer o link
       CABER no item -- e ai nao sobra nada para esconder. */

    body.admin-theme-blue .admin-shell-topnav > ul.top-menu > li > a,
    body.admin-theme-blue .top-nav ul.top-menu > li > a {
      max-width: 100%;
      box-sizing: border-box;

      /* ⚠️ `nowrap` AQUI, e a quebra vai para DENTRO do nome (regra abaixo).

         A versao anterior usava `flex-wrap: wrap` no proprio link. Funcionou --
         nada mais vazava --, mas o QA olhou o print e pegou o efeito: o link tem
         TRES filhos flex (avatar, nome, seta), e com `wrap` cada um pode quebrar
         por conta. Na tela de 375px util a SETA ▾ caia sozinha numa terceira
         linha, encostada a esquerda, longe do nome -- com cara de item orfao, e
         ainda empurrava a caixa para 84px de altura, deixando o sino num degrau.

         Nada cortado, nada ilegivel: era feio. E tela feia reprova.

         Com `nowrap`, avatar / nome / seta ficam SEMPRE na mesma linha, e quem
         quebra e o texto do nome -- que e a unica coisa ali que pode ocupar duas
         linhas sem parecer erro. */
      flex-wrap: nowrap;
    }

    /* ⚠️ O NOME SAI DO BOTAO NO CELULAR -- e vai INTEIRO para dentro do menu
       (`Admin/header.phtml`, item com `visible-xs`).

       A CONTA, medida pelo QA: a caixa do usuario tem 149px; padding come 20,
       avatar 32, os dois gaps 16 e a seta 8 -- sobram 73px para o nome, e
       "Administrador" precisa de 87. Faltam 17px.

       Tentei duas saidas antes e as duas o QA reprovou olhando o print:
         1) `flex-wrap: wrap` no link -> a SETA caia sozinha numa terceira linha,
            com cara de item orfao;
         2) `word-break: break-word` no nome -> a palavra era partida no meio, sem
            hifen: "QA / Administra / dor". Isso se le como defeito de
            renderizacao, e piorou ate a tela que estava boa.

       Truncar com reticencias resolveria o desenho e esconderia parte do nome.
       Esconder o nome resolveria e perderia a informacao -- so que o menu tinha
       apenas "Sair". Entao o nome NAO some: muda de lugar, e la cabe inteiro.

       De quebra a caixa volta para uma linha, o sino deixa de ficar num degrau
       acima dela, e nada e cortado nem partido. */
    body.admin-theme-blue .admin-shell-topnav .username,
    body.admin-theme-blue .top-nav .username {
      display: none;
    }

    /* O NOME DENTRO DO MENU ALINHA COM O "SAIR" DE BAIXO.

       Ultimo acabamento que o QA mediu: o cabecalho quebrava em duas linhas por
       falta de SEIS pixels (o `.dropdown-header` do Bootstrap tem
       `padding: 3px 20px`, sobrando 108px para um texto que pede 114) e ainda
       saia CENTRALIZADO, enquanto o "Sair" logo abaixo e alinhado a esquerda com
       icone -- os dois sem eixo comum, e isso se nota.

       Os 20px de padding lateral viram 12: a conta passa a fechar com folga e o
       nome cabe numa linha so. `text-align: left` poe os dois no mesmo eixo. */
    /* ⚠️ MENU CLARO, TEXTO ESCURO -- e a versao anterior errou nas duas pontas.

       Eu escrevi `color: #fff` "para acompanhar o menu escuro". O menu NAO e
       escuro: o `ul.dropdown-menu.logout` computa fundo BRANCO, e o "Sair" logo
       abaixo usa #333. Resultado medido pelo QA: branco sobre branco, contraste
       1.00:1 (o minimo aceitavel e 4.5:1) -- a faixa aparecia VAZIA no print.
       Trocamos um nome que quebrava em duas linhas por um nome que sumia, que e
       justamente a informacao que a mudanca queria preservar.

       #666 sobre branco da 5.7:1 -- passa com folga, e fica um tom mais suave que
       o #333 do "Sair", que e a acao. Nada de `opacity`: ela reduziria o
       contraste de novo.

       E o EIXO: o `text-align: left` que eu tinha posto brigava com o "Sair", que
       o tema computa CENTRALIZADO -- 55px de diferenca entre os dois textos.
       Estava escondido pelo texto invisivel e apareceria assim que a cor fosse
       corrigida. O cabecalho volta ao centro para dividir o eixo com o item de
       baixo: e a escolha conservadora, porque mexer no alinhamento do "Sair"
       mudaria um menu que ja existia e que o QA mediu intacto. */
    body.admin-theme-blue .top-nav .dropdown-menu.logout > .dropdown-header {
      padding: 6px 12px;
      text-align: center;
      white-space: normal;
      color: #666;
      font-size: 12px;
      font-weight: 600;
    }

    /* A seta nunca encolhe nem quebra: ela e 8px e tem de ficar colada ao nome. */
    body.admin-theme-blue .admin-shell-topnav .caret,
    body.admin-theme-blue .top-nav .caret {
      flex: 0 0 auto;
    }

    body.admin-theme-blue .admin-shell-topnav > ul.top-menu,
    body.admin-theme-blue .top-nav ul.top-menu {
      max-width: 100%;
      box-sizing: border-box;
    }

    body.admin-theme-blue .admin-shell-topnav > ul.top-menu > li,
    body.admin-theme-blue .top-nav ul.top-menu > li {
      margin: 0 !important;
      max-width: 100%;
    }
}

/* =====================================================================
   RAT / Serviços — rodapé de tabela legível no celular
   ---------------------------------------------------------------------
   As tabelas da RAT têm até 849px e rolam dentro de .table-responsive. O
   rodapé ("Quantidade: 2 · Total: R$ 122,00") era alinhado à DIREITA, ou
   seja, ficava fora da área visível de um aparelho de 390px: a linha
   aparecia VAZIA, com borda e nada dentro, e só surgia se a pessoa
   rolasse a tabela para o lado. Medido no baseline de 18/08/2026 nas
   abas Geral e Despesas.

   No desktop nada muda — o alinhamento à direita continua.

   Regra ADITIVA: não altera cor, tipografia nem dimensão de nada que já
   existia (a identidade visual foi fechada em 16/08).
   ===================================================================== */
@media (max-width: 767px) {
    td.rat-rodape,
    th.rat-rodape {
        text-align: left !important;
    }
}

/* =====================================================================
   PISO DE TOQUE — o admin inteiro era do tamanho do mouse, não do dedo
   ---------------------------------------------------------------------
   MEDIDO em 21/08/2026, dirigindo o Chrome logado numa tela de 390x844:

     RAT (admin/servicos) ........ 76% dos alvos abaixo de 32px
                                   20 botões de ação a 24x22 e 26x22
     veículos .................... 83% dos alvos abaixo de 32px
     logs do sistema ............. 94%; 120 botões a 75x22
     clientes .................... 60%
     cadastro de conta ........... 4 caixas de marcar a 13x13

   A CAUSA está no Bootstrap e nunca foi corrigida aqui: `bootstrap.css:2632`
   define `.btn-xs { padding: 1px 5px; font-size: 12px }`, o que dá 22px de
   altura — e este tema NÃO tinha nenhum override de `.btn-xs`. São 570 usos
   espalhados por 251 telas, porque `.btn-xs` é o padrão da casa para botão de
   ação dentro de linha de tabela.

   22px reprova até o PISO da WCAG 2.5.8 (AA), que pede 24x24. O alvo de dedo
   recomendado é 44x44 (Apple HIG / Material), e é o que se adota aqui.

   POR QUE UM BLOCO SÓ, E NÃO CONSERTO TELA A TELA:
   as 479 telas herdam este arquivo. Uma regra aqui vale mais que 251 edições
   de .phtml, e não corre o risco de esquecer uma.

   SÓ NO CELULAR. Acima de 767px nada muda: no desktop o ponteiro do mouse tem
   precisão de 1px e botão de 44px só desperdiçaria espaço na grade.

   Regra ADITIVA: não mexe em cor nem em tipografia — a identidade visual
   fechada em 16/08 continua intacta.
   ===================================================================== */
@media (max-width: 767px) {

    /* `inline-flex` + centralização em vez de empurrar `padding`: com padding
       o rótulo de um botão de duas linhas desce para fora da caixa. Aqui ele
       fica centrado seja qual for a altura. */
    /* Vale para TODO botão, não só `.btn-xs`/`.btn-sm`.
       A primeira versão desta regra cobria só os dois tamanhos pequenos, porque
       eram eles que apareciam nas linhas de tabela. O QA de navegador achou o
       resto: "Gravar" e "Cancelar" do modal de veículo são `.btn` puro e ficavam
       com 34px (o padrão do Bootstrap), e o "×" de fechar modal, com 21px --
       todos abaixo do piso, e o "×" abaixo até do mínimo AA de 24px.
       Alvo de toque é POLÍTICA: vale para todo botão, não para os que eu por
       acaso listei. */
    body.admin-theme-blue .btn,
    body.admin-theme-blue .btn-xs,
    body.admin-theme-blue .btn-sm,
    body.admin-theme-blue .btn-group > .btn,
    body.admin-theme-blue .btn-group > .btn-xs,
    body.admin-theme-blue .btn-group > .btn-sm,
    body.admin-theme-blue .modal-header .close,
    /* O MENU do celular precisa vir nomeado, senao nao alcanca.
       `admin-theme-global.css:298` define
       `body.admin-theme-blue .admin-shell-menu .btn { min-height: 34px }` --
       especificidade 0,3,1 contra os 0,2,1 de `body.admin-theme-blue .btn`.
       O menu ganhava e cravava 34px em 11 alvos, justamente no botao que abre
       a navegacao inteira do celular.

       ⚠️ Os 34px daquela regra sao ESCOLHA DO RAFAEL ("dimensionamento do
       Fortal de volta", comentario na linha 294) e continuam valendo no
       DESKTOP -- este bloco e `max-width: 767px`. No celular, alvo de dedo
       vem antes de densidade de menu. */
    body.admin-theme-blue .admin-shell-menu .btn,
    body.admin-theme-blue .admin-shell-menu .btn-group > .btn {
        align-items: center;
        display: inline-flex;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
        padding-left: 12px;
        padding-right: 12px;

        /* ⚠️ O ESPACO ENTRE O ICONE E A PALAVRA, que o flex acima engolia.
         *
         * O `display: inline-flex` daqui existe para o alvo de toque de 44px,
         * e isso continua valendo. Mas em flex os filhos viram itens e o
         * ESPACO EM BRANCO entre eles e DESCARTADO. O HTML tem o espaco --
         * `<i class="fa fa-usd"></i> Financeiro` --, o navegador e que o joga
         * fora.
         *
         * Medido no celular: distancia entre o fim do icone e o inicio da
         * palavra = 0px. Na tela aparecia '$Financeiro', 'Fretes' com o
         * caminhao colado, 'Estoque', 'Compras'. Com `gap`, 4.2px.
         *
         * ⚠️ Eu reproduzi este mesmo defeito no DESKTOP em 05/09/2026, ao
         * tentar centralizar um botao com inline-flex: 'Financeiro' encolheu
         * de 107.8px para 101.5px. Desfiz la e vim consertar aqui, que era
         * onde o defeito ja morava -- e no celular, em TODO botao do admin.
         *
         * `em`, e nao `px`: o espaco entre icone e palavra acompanha a fonte.
         */
        gap: .35em;
    }

    /* Botão que ocupa a linha inteira (o "Menu" do topo, por exemplo) não pode
       virar bloco de 44px de LARGURA e encolher — o `min-width` acima é piso,
       não teto, mas `inline-flex` tiraria o `display:block` de quem tinha. */
    body.admin-theme-blue .btn-xs.btn-block,
    body.admin-theme-blue .btn-sm.btn-block {
        display: flex;
        width: 100%;
    }

    /* Caixa de marcar nativa a 13x13 é menor que a ponta de um dedo. 22px é o
       maior tamanho que ainda cabe nas grades de permissão sem empurrar coluna
       (conferido em admin/utilitarios/configuracoes, que tem ~200 caixas). */
    body.admin-theme-blue input[type="checkbox"],
    body.admin-theme-blue input[type="radio"] {
        height: 22px;
        vertical-align: middle;
        width: 22px;
        /* A folga TEM de crescer junto com o controle. Sem ela o rotulo encosta
           no radio (medido: 0px entre a borda direita do controle e o texto) e
           le-se "(  )Fisica", grudado. O controle era de 13px e a folga que o
           Bootstrap dava bastava; a 22px, nao basta mais. */
        margin-right: 6px;
    }

    /* ---------------------------------------------------------------
       AS DUAS REGRAS DO BOOTSTRAP QUE FORAM CALIBRADAS PARA CAIXA DE 13px
       (05/09/2026, medido pelo QA de tela no modal "Fechar o dia")

       Com a caixa ampliada para 22px acima, duas regras do Bootstrap passam a
       brigar entre si:

         .checkbox input[type=checkbox] { float:left; margin-left:-20px }  (bootstrap.css:2011)
         .checkbox + .checkbox          { margin-top:-5px }                (bootstrap.css:2015)

       O -20px foi feito para tirar a caixa de 13px da coluna do texto; o -5px,
       para encostar duas linhas de 13px. A 22px a caixa transborda o recuo e as
       linhas se sobrepoem: o QA mediu o item 1 em x=29 e o item 2 em x=37 --
       markup identico, estilos computados identicos, e mesmo assim tortos. O
       segundo float e empurrado para a direita pelo que sobrou do primeiro.

       A correcao devolve a folga na medida da caixa nova e para de colapsar as
       linhas. So no celular: no desktop a caixa continua 13px e o alinhamento
       ja estava certo (116/116 medidos).
       --------------------------------------------------------------- */
    body.admin-theme-blue .checkbox input[type="checkbox"],
    body.admin-theme-blue .checkbox-inline input[type="checkbox"],
    body.admin-theme-blue .radio input[type="radio"],
    body.admin-theme-blue .radio-inline input[type="radio"] {
        margin-left: -28px;
    }

    body.admin-theme-blue .checkbox,
    body.admin-theme-blue .radio {
        padding-left: 28px;
    }

    body.admin-theme-blue .radio + .radio,
    body.admin-theme-blue .checkbox + .checkbox {
        margin-top: 4px;
    }

    /* ---------------------------------------------------------------
       O CABECALHO DO PAINEL TEM DE CABER O BOTAO QUE ELE CARREGA
       (05/09/2026, medido pelo QA)

       O bloco de alvo de toque acima da `min-height: 44px` a todo `.btn` no
       celular -- inclusive ao "Voltar", que mora dentro do `.panel-heading`. O
       heading nao ganhou altura nenhuma: media 40px com um botao de 44px
       dentro, e o botao transbordava 14px para dentro do corpo do painel
       (medido em admin/manutencao).

       Alvo de toque de 44px e politica desta folha; entao quem se ajusta e o
       recipiente, e nao o botao.
       --------------------------------------------------------------- */
    body.admin-theme-blue .panel-heading {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        min-height: 56px;
    }

    /* ---------------------------------------------------------------
       16px nos campos — não é estética, é o número que desarma o iOS.
       ---------------------------------------------------------------
       O Safari do iPhone dá ZOOM AUTOMÁTICO ao focar um campo com fonte
       menor que 16px, e depois não volta: a pessoa fica com a tela
       deslocada e precisa fazer pinça para enxergar o resto do
       formulário. 15px não resolve — o limiar é exatamente 16.

       MEDIDO em 21/08: 35 de 35 campos em `conta/novo` e 36 de 36 em
       `conta/editar` estavam abaixo de 16px.

       POR QUE `!important` AQUI, sendo que o resto deste arquivo evita:
       várias telas trazem o PRÓPRIO <style> encolhendo campo no celular para
       ganhar densidade -- e um <style> na página carrega DEPOIS desta folha,
       então ganha por posição mesmo tendo menos especificidade. Medidos:
         .receb-filtros .form-control ............ 13px !important
         #frmRelatorio .form-control ............. 12px
         .vendas-toolbar-card .form-control ...... 12px
         .extrato-real-actions .mini-field ....... 11px
         e `style="font-size:11px"` direto no atributo, em várias listas
       São 27 campos em 6 telas, cada um escrito para caber mais coisa, nenhum
       sabendo do zoom do iOS. "Nenhum campo abaixo de 16px no celular" é uma
       POLÍTICA do sistema, não uma preferência de tela -- e política mora no
       tema. Sem o `!important` eu teria de caçar cada <style> de cada tela
       nova para sempre.

       (Em `Utilitarios/conta.phtml` o conserto foi feito NA ORIGEM, porque lá
       o `!important` era da própria tela e valia corrigir a intenção.)

       Caixa de marcar e botão de rádio ficam de fora: não têm texto, e
       herdariam altura à toa da regra de `.form-control`.
       --------------------------------------------------------------- */
    /* Lista por EXCLUSÃO, não por enumeração de `type`.
       A primeira versão desta regra enumerava `input[type="text"]`,
       `[type="email"]` e companhia -- e deixou passar
       `<input name="busca_id" ...>` no gráfico de vendas, que NÃO declara
       `type`. Sem o atributo, o seletor `[type="text"]` não casa, mesmo o
       campo sendo de texto na prática. Excluir o que não tem texto é curto e
       não deixa buraco. */
    body.admin-theme-blue input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="range"]):not([type="color"]),
    body.admin-theme-blue select,
    body.admin-theme-blue textarea,
    body.admin-theme-blue .form-control {
        font-size: 16px !important;
    }

    /* Campo também é alvo de toque. `.input-sm` dentro de tabela vinha com
       24px de altura (medido em conta/editar: 55x24 e 76x24). */
    body.admin-theme-blue .form-control,
    body.admin-theme-blue select,
    body.admin-theme-blue textarea {
        min-height: 44px;
    }

    body.admin-theme-blue textarea {
        min-height: 66px;   /* textarea de uma linha só não é textarea */
    }
}

/* ------------------------------------------------------------------
   O NUMERO DA RAT COMO PORTA DE ENTRADA  (pedido do Rafael, 25/08/2026)

   Ate aqui o numero era texto morto: para abrir a RAT era preciso
   atravessar a linha inteira ate o lapis, no canto direito. Agora ele e
   link -- para o MESMO destino do lapis, nao para uma porta nova.

   Fica na cor do texto (preto), e nao no azul de link, de proposito: o
   numero e a IDENTIDADE da linha e ja e lido como titulo. Pintar 40
   numeros de azul viraria uma coluna de ruido. O que anuncia que ele
   clica e o pontilhado embaixo -- o mesmo recurso ja usado no card do
   fornecedor, em Compras -- e o sublinhado cheio no hover.
   ------------------------------------------------------------------ */
.rat-numero {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--admin-theme-text-faint);
}

.rat-numero:hover,
.rat-numero:focus {
    color: var(--admin-theme-primary-dark);
    text-decoration: none;
    border-bottom-color: var(--admin-theme-primary-dark);
}

/* Alvo de toque no celular: o numero sozinho tem ~30x18px, abaixo dos 44
   que o dedo pede. O padding vertical cresce a area sem mexer no layout
   da tabela (a celula ja e centralizada). */
@media (max-width: 767px) {
    .rat-numero {
        display: inline-block;
        padding: 12px 8px;
    }
}

/* ------------------------------------------------------------------
   O CALENDARIO POR CIMA DO MODAL

   O calendario do jQuery UI e `.ui-front`, que no CSS da propria
   biblioteca vale `z-index: 100`. O modal do Bootstrap 3 vale
   `z-index: 1050` (bootstrap.css:5897) e o backdrop, 1040. Ou seja:
   dentro de um modal o calendario abriria ATRAS dele -- 100 < 1050.
   Nao e suspeita, e aritmetica.

   1060 poe o calendario acima dos dois, e abaixo de nada que importe.

   ⚠️ `#ui-datepicker-div` e um elemento UNICO, compartilhado, pendurado
   no <body>: esta regra vale para TODO o /admin, nao so para a RAT.
   Isso e proposital -- os campos de data de Contas a Pagar dentro de
   modais sofrem do mesmo problema hoje. O efeito la e consertar.
   ------------------------------------------------------------------ */
#ui-datepicker-div {
    z-index: 1060 !important;
}


/* ==================================================================
   GRADE LARGA VIRA CARTAO NO CELULAR -- `.tsw-grid-cartao`

   O PROBLEMA MEDIDO (21/08/2026, sonda de iframe a 390px)

   As tabelas largas nao ESTOURAM: elas rolam dentro de
   `.table-responsive`, que 52 listas ja usam. O problema e o arrasto.
   Em `painel/relatorios/logs-sistema` sao 1739px de tabela em 276px
   visiveis -- 6,3 TELAS de arrasto lateral para ler UMA linha, com o
   cabecalho fugindo da vista no caminho. A pessoa perde de qual coluna
   e o numero que esta olhando.

   O CAMINHO JA EXISTIA NA CASA, mas so no modulo Producao: 5 classes
   (`.op-production-table`, `.op-admin-report__table`,
   `.op-operator-table`, `.op-inline-table`, `.op-receipt-table`) e 19
   telas que ja poem `data-label` em cada `<td>`. O que faltava era uma
   classe REUTILIZAVEL, para o resto do sistema nao precisar copiar
   aquele bloco toda vez.

   ⚠️ AS 5 CLASSES ACIMA NAO FORAM TOCADAS. Elas estao em tela e
   funcionando; esta e uma SEXTA, irma delas, nao uma substituta. Quem
   for unificar um dia faz isso com as 19 telas na mao para medir.

   COMO USAR (duas coisas, as duas obrigatorias):

     1. `class="table ... tsw-grid-cartao"` na <table>
     2. `data-label="Nome da coluna"` em CADA <td> do <tbody>

   Sem o `data-label` o cartao sai como uma pilha de valores sem dizer
   o que e cada um -- pior que a tabela rolando. Por isso o rotulo vem
   do atributo e nao de contador CSS: `nth-child` casaria a coluna
   errada na primeira linha com `colspan`, e listas tem "Nenhum
   registro" com colspan em quase todas.

   ACIMA DE 767px NADA MUDA. No desktop a matriz e a forma certa de
   comparar linhas, e o `data-label` fica inerte no HTML.
   ================================================================== */
@media (max-width: 767px) {

    /* A tabela deixa de ser matriz. `table-layout: auto` porque as
       larguras em `width=` do HTML foram pensadas para a matriz e
       aqui so atrapalhariam. */
    body.admin-theme-blue .tsw-grid-cartao > tbody,
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr,
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr > td {
        display: block;
        width: auto;
    }

    /* ⚠️ FLEX, e nao `block`, e a ordem NAO e detalhe.
       No HTML valido o `<tfoot>` vem ANTES do `<tbody>` (e assim que as tres
       telas estao escritas, e assim que o legado sempre escreveu). Quem
       reordena isso para a tela e o MODELO DE TABELA -- e `display: block`
       joga o modelo de tabela fora junto com a matriz. Resultado medido pelo
       QA de 30/08/2026: no desktop o tfoot ficava em y=11963 e o tbody em
       y=580 (certo, embaixo); no celular a faixa de totais aparecia ANTES do
       primeiro cartao. "41570 logs encontrados" abrindo a lista.
       Coluna flex + `order` devolve a ordem que o modelo de tabela dava. */
    body.admin-theme-blue .tsw-grid-cartao {
        border: 0;
        display: flex;
        flex-direction: column;
        table-layout: auto;
    }

    body.admin-theme-blue .tsw-grid-cartao > tbody { order: 1; }
    body.admin-theme-blue .tsw-grid-cartao > tfoot { order: 2; }

    /* O cabecalho some: quem nomeia a coluna agora e o ::before de
       cada celula. Some do FLUXO (`display:none`), nao so da vista --
       senao ele continuaria esticando a largura. */
    body.admin-theme-blue .tsw-grid-cartao > thead {
        display: none;
    }

    /* Cada linha vira um CARTAO com moldura propria. Sem a moldura, as
       linhas viram um bloco unico de texto e ninguem acha onde um
       registro termina e o outro comeca -- foi o que separou este
       padrao de "so empilhar as celulas". */
    /* 25/09/2026 (Rafael: "muitos cards"): medidas do `.contas-table--stack`
       do Fortal -- canto de 4px, moldura fina, 6-8px de respiro, 8px entre
       registros. Antes era canto de 12px e 12px de respiro: cada linha virava
       um cartao gordo. */
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr {
        background: #fff;
        border: 1px solid var(--admin-theme-border);
        border-radius: 4px;
        margin-bottom: 8px;
        padding: 6px 8px;
    }

    /* `table-striped` pinta linha sim, linha nao. Entre cartoes com moldura
       isso vira sujeira, nao ajuda a ler.

       ⚠️ A zebra do projeto pinta a CELULA, nao a linha: custom.css:417 diz
       `.table-striped > tbody > tr:nth-child(odd) > td { background: #d1d5ea }`
       -- o lilas do legado. Neutralizar so o `<tr>` deixava o `<td>` lilas por
       cima, e o QA de 30/08/2026 mediu isso: `rgb(209,213,234)` no td contra
       `rgb(255,255,255)` no tr, em cartao sim, cartao nao. O cartao ficava com
       cara de linha selecionada, numa cor que nem e da paleta da TSW. */
    body.admin-theme-blue .tsw-grid-cartao.table-striped > tbody > tr:nth-of-type(odd),
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr:nth-of-type(odd),
    body.admin-theme-blue .tsw-grid-cartao.table-striped > tbody > tr:nth-child(odd) > td,
    body.admin-theme-blue .tsw-grid-cartao.table-striped > tbody > tr:nth-child(odd) > th {
        background-color: #fff;
    }

    body.admin-theme-blue .tsw-grid-cartao > tbody > tr > td {
        border: 0;
        /* `!important` porque o `align="center"` do HTML antigo e o
           `.text-center` do Bootstrap centralizariam o valor debaixo
           de um rotulo alinhado a esquerda -- os dois desalinhados
           entre si dentro do mesmo cartao. */
        text-align: left !important;
        padding: 0 0 8px;
        white-space: normal;
        /* ⚠️ `white-space: normal` sozinho NAO basta: ele so libera a quebra
           onde ja ha espaco. Uma celula com string longa e sem espaco --
           medida no relatorio de compras, coluna Prazo:
           "030/060/090/120/150/180/210/240/270/300", 266px numa celula de
           252px -- continuava esticando o cartao e, sem `.table-responsive`
           acima para clipar, o vazamento chegava ao DOCUMENTO (scrollWidth
           402 numa tela de 375). `anywhere` autoriza a quebra no meio da
           sequencia, que e o unico jeito de o cartao nunca ficar mais largo
           que a tela. */
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    body.admin-theme-blue .tsw-grid-cartao > tbody > tr > td:last-child {
        padding-bottom: 0;
    }

    /* O ROTULO. Mesma tipografia das 5 classes do modulo Producao --
       o sistema tem UMA cara, e um cartao com outra fonte de rotulo
       pareceria de outro sistema. */
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr > td::before {
        color: var(--admin-theme-text-faint);
        content: attr(data-label);
        display: block;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0;
        margin-bottom: 3px;
        text-transform: uppercase;
    }

    /* Celula VAZIA nao vira rotulo orfao. Uma coluna opcional em branco
       apareceria como o titulo dela seguido de nada -- ruido que faz o
       cartao parecer quebrado. `:empty` pega o vazio de verdade; o
       `.tsw-cartao-oculto` e a valvula para quem tem espaco em branco
       dentro do <td> e por isso nao e `:empty`. */
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr > td:empty,
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr > td.tsw-cartao-oculto {
        display: none;
    }

    /* Celula SEM rotulo (o `data-label` ausente) nao ganha ::before
       vazio ocupando 13px de altura em branco. */
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr > td:not([data-label])::before {
        display: none;
    }

    /* A celula de ACOES fecha o cartao com uma linha acima, separando o
       que se LE do que se CLICA, e os botoes ganham espaco entre si --
       no desktop eles ficam colados dentro de uma celula estreita, e no
       dedo isso vira toque errado.
 */
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr > td.tsw-cartao-acoes {
        border-top: 1px solid var(--admin-theme-bg);
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 4px;
        padding-top: 10px;
    }
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr > td.tsw-cartao-acoes::before {
        flex-basis: 100%;
    }

    /* A celula de ACOES sem acao SOME do cartao. A regra acima (display:flex)
       empata em especificidade com as valvulas gerais (:empty /
       .tsw-cartao-oculto) e, vindo depois, ganhava: o cartao mostrava "ACOES"
       vazio (QA de 22/10/2026, peca da RAT e Estoque/lista_almox_pendencias).
       ATENCAO: a valvula mora AQUI, numa regra propria. A 1a tentativa pos
       :not(:empty):not(.tsw-cartao-oculto) na regra acima -- isso subiu o peso
       dela e ela passou a vencer os ajustes mais especificos que vem depois
       (cartao de escolher peca e .tsw-acao-inline): faixa vazia acima do
       "Usar" no modal de peca (QA de 22/10/2026, 2a rodada). */
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr > td.tsw-cartao-acoes:empty,
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr > td.tsw-cartao-acoes.tsw-cartao-oculto {
        display: none;
    }

    /* A linha de "nenhum registro" e a de totais usam `colspan` e NAO
       sao um cartao de dado: sem isto elas herdariam a moldura e o
       rotulo, e um aviso de lista vazia sairia dentro de um cartao
       falso. */
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr > td[colspan]::before {
        display: none;
    }
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr.tsw-cartao-nao {
        background: none;
        border: 0;
        padding: 8px 0;
    }

    /* CARTAO COMPACTO (24/09/2026) -- `tsw-grid-cartao tsw-cartao-compacto`.
       Para grade com MUITAS colunas (relatorio de pagamentos: 10): rotulo e
       valor na MESMA linha, "ROTULO  valor", em vez do rotulo em cima. O
       cartao cai para cerca de metade da altura. Os :not() repetem as
       valvulas de cima (:empty / .tsw-cartao-oculto / acoes / colspan) --
       sem eles este display:flex empataria em especificidade com o
       display:none delas e, vindo depois, ganharia. */
    /* 25/09/2026: o compacto virou o PADRAO de toda `.tsw-grid-cartao`, como o
       `.contas-table--stack` do Fortal (rotulo a esquerda, valor ao lado). A
       classe `tsw-cartao-compacto` continua aceita, mas ja nao muda nada. */
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr > td:not(:empty):not(.tsw-cartao-oculto):not(.tsw-cartao-acoes):not([colspan]) {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding-bottom: 4px;
    }
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr > td:not(.tsw-cartao-acoes)::before {
        flex: 0 0 38%;
        margin-bottom: 0;
    }

    /* ------------------------------------------------------------
       O TFOOT -- a faixa de totais.

       Ele PRECISA de regra propria. Com a <table> em `display:block` e
       o tfoot sem tratamento, o navegador remonta uma tabela anonima
       so para ele: a faixa volta a ser matriz de N colunas dentro de
       uma pagina de cartoes, com a largura da matriz que acabamos de
       desmontar -- e o estouro lateral que o cartao resolveu volta,
       agora numa linha so, que e mais dificil de notar.

       Aqui ele vira uma FAIXA: rotulo e valor lado a lado, sem
       moldura de cartao (nao e um registro, e o fecho da lista).
       ------------------------------------------------------------ */
    body.admin-theme-blue .tsw-grid-cartao > tfoot,
    body.admin-theme-blue .tsw-grid-cartao > tfoot > tr {
        display: block;
        width: auto;
    }

    body.admin-theme-blue .tsw-grid-cartao > tfoot > tr {
        border-top: 2px solid var(--admin-theme-bg);
        display: flex;
        flex-wrap: wrap;
        gap: 4px 10px;
        justify-content: space-between;
        padding: 10px 2px 0;
    }

    /* ⚠️ `td` E `th` -- e faltar o `th` custou uma tela inteira.
       Ate 04/09/2026 estas duas regras miravam so `td`. Das quatro telas com
       tfoot, tres escrevem `<td>` (relatorio de compras, logs, horarios da
       RAT) e UMA escreve `<th>`: a tabela de pecas da RAT, com OITO deles.
       Resultado medido: naquela unica tela a faixa "Totais" nao virava faixa
       -- o navegador remontava a matriz de N colunas so para ela, dentro de
       uma pagina de cartoes.
       O defeito parecia aleatorio ("so a tela de pecas quebra") ate a causa
       aparecer: nao era a tela, era o seletor. */
    body.admin-theme-blue .tsw-grid-cartao > tfoot > tr > td,
    body.admin-theme-blue .tsw-grid-cartao > tfoot > tr > th {
        border: 0;
        display: block;
        font-weight: 700;
        padding: 0;
        text-align: left !important;
        width: auto;
    }

    /* A celula de `colspan` do tfoot e o ROTULO do total ("Total",
       "N logs encontrados"); a que sobra e o numero. */
    body.admin-theme-blue .tsw-grid-cartao > tfoot > tr > td[colspan],
    body.admin-theme-blue .tsw-grid-cartao > tfoot > tr > th[colspan] {
        color: var(--admin-theme-text-faint);
        font-size: 11px;
        text-transform: uppercase;
    }

    /* As celulas VAZIAS do rodape somem. Elas so existem para alinhar a
       matriz do desktop (`<th>&nbsp;</th>` embaixo de colunas opcionais), e
       na faixa do celular viram buracos que empurram os numeros para longe
       do rotulo. `:empty` nao as pega: elas tem um `&nbsp;` dentro. */
    body.admin-theme-blue .tsw-grid-cartao > tfoot > tr > td:empty,
    body.admin-theme-blue .tsw-grid-cartao > tfoot > tr > th:empty,
    body.admin-theme-blue .tsw-grid-cartao > tfoot > tr > td.tsw-cartao-oculto,
    body.admin-theme-blue .tsw-grid-cartao > tfoot > tr > th.tsw-cartao-oculto {
        display: none;
    }

    /* ROTULO DO VALOR no rodape, quando ha MAIS DE UM numero.
       Nas tres telas antigas o rodape tem um total so, e a celula de colspan
       ja o nomeia. A tabela de pecas tem QUATRO (retirada, usada, custo,
       valor): sem rotulo eles saem como uma fileira de numeros soltos, que e
       pior do que a matriz apertada que estamos consertando. Mesma tipografia
       do rotulo do cartao -- o sistema tem UMA cara. */
    body.admin-theme-blue .tsw-grid-cartao > tfoot > tr > td[data-label]::before,
    body.admin-theme-blue .tsw-grid-cartao > tfoot > tr > th[data-label]::before {
        color: var(--admin-theme-text-faint);
        content: attr(data-label);
        display: block;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0;
        margin-bottom: 2px;
        text-transform: uppercase;
    }

    /* `.table-responsive` continua no HTML (e o que segura o desktop em
       tela media), mas com os cartoes nao ha o que rolar de lado -- e a
       barra fantasma dele fica cortando o ultimo cartao. */
    body.admin-theme-blue .table-responsive > .tsw-grid-cartao {
        margin-bottom: 0;
    }
}


/* =====================================================================
   ESCOLHER A PECA NO CELULAR (01/09/2026)
   =====================================================================

   A lista de escolha de peca da RAT usa `.tsw-grid-cartao` (o padrao acima),
   e nao um tratamento proprio. Duas tentativas anteriores fracassaram e vale
   registrar por que, para ninguem repeti-las:

     1) So aumentar o padding do <td>. A regra perdia para
        `.table-condensed > tbody > tr > td` do Bootstrap, que crava
        `padding: 5px` com especificidade maior. A linha continuava com 29px
        e o `cursor: pointer` da mesma regra pegava -- o que parecia
        "o CSS nao carregou" e nao era.

     2) `table-layout: fixed` + `overflow-wrap`. Dentro de `.table-responsive`
        (overflow-x: auto) a tabela cresce ate o max-content e o nome nunca
        quebra: medido com "CI SN74HC245PW TSSOP20 BUS TRANSCEIVER 2V 7,8MA",
        a celula do produto ficou com 349px e a tabela com 468px num container
        de 331px -- a coluna Estoque, que responde "tem ou nao tem?", saia de
        vista. Fixando as larguras, o codigo passou a invadir o nome e o saldo
        a se sobrepor. Com nome curto tudo cabia, e por isso o defeito so
        aparecia as vezes.

   O cartao resolve os dois de graca: nao ha matriz para estourar, a linha
   inteira vira um alvo grande (o piso de 44px sai do proprio padding do
   cartao) e `overflow-wrap: anywhere` ja esta na regra do <td>.

   Aqui fica so o que e proprio desta lista: o cartao e CLICAVEL -- coisa que
   as outras cinco grades convertidas nao sao.
   ===================================================================== */
.tsw-escolher-peca {
    cursor: pointer;
}

@media (max-width: 767px) {

    /* Feedback de toque: sem :hover no celular, o cartao nao dava sinal
       nenhum de ter sido tocado -- e a duvida faz o tecnico tocar duas
       vezes, que aqui significa abrir a peca errada. */
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr.tsw-escolher-peca:active {
        background-color: var(--admin-theme-primary-soft);
        border-color: var(--admin-theme-primary);
    }

    /* O nome da peca e o que ele procura: e o titulo do cartao, nao mais uma
       linha rotulada. Sem rotulo (::before) e em corpo maior. */
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr.tsw-escolher-peca > td.tsw-peca-nome {
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        padding-bottom: 6px;
    }
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr.tsw-escolher-peca > td.tsw-peca-nome::before {
        display: none;
    }

    /* TRES ACOES NUMA LINHA SO, e nao tres faixas empilhadas.
       O lancamento de horario tem Apagar, Editar e Cobrar intervalo em
       colunas separadas. Com o `.tsw-cartao-acoes` padrao cada uma vira
       uma faixa com sua propria linha divisoria -- tres separadores por
       cartao, num cartao que ja tem treze campos. Aqui elas dividem uma
       faixa so: divisoria na primeira, e as tres lado a lado. */
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr > td.tsw-acao-inline {
        display: inline-flex;
        margin-right: 18px;
        margin-top: 0;
        padding-top: 0;
        width: auto;
    }
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr > td.tsw-acao-inline:not(:first-of-type) {
        border-top: 0;
    }
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr > td.tsw-acao-inline::before {
        flex-basis: auto;
        margin-right: 6px;
    }

    /* CARTAO DE ESCOLHA E MAIS CURTO QUE CARTAO DE CONSULTA.
       Com o empilhamento padrao cada peca ocupava 286px -- tres delas
       tomavam a tela inteira, e uma lista de escolha existe para o
       tecnico comparar varias de relance. Aqui o nome e o titulo e o
       resto vira uma linha de apoio, lado a lado. */
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr.tsw-escolher-peca {
        margin-bottom: 8px;
        padding: 10px 12px;
    }
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr.tsw-escolher-peca > td {
        display: inline-block;
        margin-right: 16px;
        padding-bottom: 0;
        vertical-align: top;
    }
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr.tsw-escolher-peca > td::before {
        display: inline;
        margin-right: 4px;
    }
    /* O nome e a acao continuam em linha propria: o nome porque e o que
       ele procura, e a acao porque e onde o dedo vai. */
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr.tsw-escolher-peca > td.tsw-peca-nome,
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr.tsw-escolher-peca > td.tsw-cartao-acoes {
        display: block;
        margin-right: 0;
    }
    body.admin-theme-blue .tsw-grid-cartao > tbody > tr.tsw-escolher-peca > td.tsw-cartao-acoes {
        border-top: 0;
        margin-top: 8px;
        padding-top: 0;
    }
}

/* A janela de rolagem das listas de escolha de peca.
   Era `max-height` inline (240/260px), pensado para linhas de 29px: no
   celular, com cartoes de ~136px, cabia menos de dois e o tecnico rolava
   uma listinha dentro de um modal dentro da pagina -- tres rolagens
   aninhadas. No desktop o teto continua, que la a linha e baixa e a
   janela curta e o que impede o modal de crescer alem da tela. */
.tsw-rolagem-peca {
    max-height: 260px;
    overflow-y: auto;
}
@media (max-width: 767px) {
    .tsw-rolagem-peca {
        max-height: none;
        overflow-y: visible;
    }
}

/* =====================================================================
   OS MODAIS DA RAT NO CELULAR -- o botao de gravar tem de estar na tela
   =====================================================================

   Medido em 01/09/2026, "Inserir horário" a 390x844: o modal ficava com
   1105px de altura numa janela de 844px, o `.modal-body` NAO rolava
   sozinho, e o rodape com "Gravar horário" nascia abaixo da dobra. O
   tecnico preenchia data, intervalo, quatro horarios e dois campos de km
   -- e o botao que salva tudo isso nao estava a vista.

   Bootstrap 3 rola o `.modal` inteiro, entao dava para chegar la
   rolando. Mas "da para chegar rolando" e diferente de "esta na tela", e
   quem esta em pe no cliente com uma mao no celular nao procura botao.

   A caixa vira coluna flex com teto de altura: o corpo rola, o cabecalho
   e o rodape ficam. `max-height` em vh, e nao 100%, porque o `.modal` do
   Bootstrap ja tem seu proprio padding.

   ⚠️ ESCOPO PROPOSITAL: so os modais da RAT, pelos ids. A regra generica
   em `.modal-dialog` alcancaria as dezenas de modais herdados do Fortal
   (contas, vendas, producao), varios com layout proprio -- e o ganho
   numa tela nao paga o risco em quarenta que ninguem testou nesta rodada.
   ===================================================================== */
@media (max-width: 767px) {

    /* ⚠️ A CENTRALIZACAO VERTICAL EMPURRA O MODAL ALTO PARA FORA DA TELA.
       O tema centraliza modal com o truque classico do Bootstrap 3: um
       `.modal::before` inline-block de `height: 100%` e
       `vertical-align: middle`, que o dialogo acompanha. Funciona enquanto o
       dialogo e baixo. Com a caixa ocupando quase a janela inteira, os dois
       inline-block lado a lado somam mais que a tela e o dialogo desce:
       medido, `::before` com 828,8px e o dialogo comecando em y=837 numa
       janela de 844 -- a caixa estava do tamanho certo, com o corpo rolando
       certo, e mesmo assim ninguem via o rodape. Custou duas rodadas ate eu
       parar de olhar para a caixa e olhar para o que a posiciona.
       No celular estes modais alinham no TOPO e a centralizacao sai. */
    /* Quem rola agora e o `.modal-body`. O `.modal` mantinha
       `overflow-y: scroll`, e a calha reservada por ele encolhia a largura
       util para 374px enquanto o conteudo continuava com 390 -- nascia uma
       barra de rolagem HORIZONTAL no pe da tela, sem nada para rolar. */
    #modal-horario,
    #modal-despesa,
    #modal-lancamento,
    #modal-veiculo,
    #modal-peca,
    #modal-buscar-rat {
        overflow: hidden;
    }

    #modal-horario::before,
    #modal-despesa::before,
    #modal-lancamento::before,
    #modal-veiculo::before,
    #modal-peca::before,
    #modal-buscar-rat::before {
        display: none;
    }

    #modal-horario .modal-dialog,
    #modal-despesa .modal-dialog,
    #modal-lancamento .modal-dialog,
    #modal-veiculo .modal-dialog,
    #modal-peca .modal-dialog,
    #modal-buscar-rat .modal-dialog {
        margin: 8px;
    }

    #modal-horario .modal-content,
    #modal-despesa .modal-content,
    #modal-lancamento .modal-content,
    #modal-veiculo .modal-content,
    #modal-peca .modal-content,
    #modal-buscar-rat .modal-content {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 16px);
    }

    /* ⚠️ O <form> NO MEIO QUEBRA A CADEIA FLEX.
       Estes modais nao tem header/body/footer como filhos diretos do
       `.modal-content`: ha um <form> envolvendo os tres. Sem transforma-lo
       tambem em coluna flex, o `max-height` do content nao chega ao corpo:
       medido, o content ficava com 828px e o corpo com 1008px por dentro,
       jogando o rodape para y=1710. A caixa parecia certa e o botao
       continuava fora da tela. */
    #modal-horario .modal-content > form,
    #modal-despesa .modal-content > form,
    #modal-lancamento .modal-content > form,
    #modal-veiculo .modal-content > form,
    #modal-peca .modal-content > form,
    #modal-buscar-rat .modal-content > form {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    #modal-horario .modal-body,
    #modal-despesa .modal-body,
    #modal-lancamento .modal-body,
    #modal-veiculo .modal-body,
    #modal-peca .modal-body,
    #modal-buscar-rat .modal-body {
        overflow-y: auto;
        /* Sem isto o flex nao deixa o corpo encolher abaixo do conteudo, e
           o `overflow` acima nunca chega a valer. */
        min-height: 0;
    }

    /* O rodape nao encolhe nem rola junto: e o unico lugar onde estao
       Gravar e Cancelar. */
    #modal-horario .modal-footer,
    #modal-despesa .modal-footer,
    #modal-lancamento .modal-footer,
    #modal-veiculo .modal-footer,
    #modal-peca .modal-footer,
    #modal-buscar-rat .modal-footer {
        flex-shrink: 0;
    }

    /* Botao de modal da RAT no dedo: largura cheia e o piso de 44px. Em
       linha, "Cancelar" e "Gravar horário" ficam colados e o toque erra. */
    #modal-horario .modal-footer .btn,
    #modal-despesa .modal-footer .btn,
    #modal-lancamento .modal-footer .btn,
    #modal-veiculo .modal-footer .btn,
    #modal-peca .modal-footer .btn {
        display: block;
        margin: 0 0 8px;
        min-height: 44px;
        width: 100%;
    }
}

/* =====================================================================
   O MESMO CONSERTO, MAS POR ADESAO -- `.tsw-modal-celular`
   =====================================================================

   ⚠️ POR QUE UM BLOCO NOVO EM VEZ DE ACRESCENTAR IDS NA LISTA ACIMA

   A lista de ids acima resolveu o modal alto da RAT, e o escopo estreito
   foi decisao consciente: uma regra generica em `.modal-dialog`
   alcancaria dezenas de modais herdados do Fortal que ninguem testou.
   Essa parte continua valendo e nao muda aqui.

   O que nao funcionou foi a LISTA. Ela ja falhou duas vezes: o QA de
   05/09/2026 mediu `#modalRecadoTurno` e `#modalPedirPeca` -- os dois
   modais da montagem -- abrindo em **y=852 numa janela de 844px**. O
   montador via a tela cinza vazia e teria de rolar ~520px as cegas para
   achar o formulario. Modal novo nasce quebrado no celular ate alguem
   lembrar de vir editar CSS, e ninguem lembra.

   Entao o conserto passa a ser de ADESAO: quem escreve um modal poe
   `tsw-modal-celular` no `.modal` e ganha o comportamento. Continua
   estreito (so quem pede), mas a porta esta na tela, junto de quem a usa.

   ⚠️ As regras abaixo sao COPIA das de cima, de proposito. Fundir as duas
   listas num seletor so exigiria reescrever o bloco da RAT, que esta
   provado e no ar; quem mexer numa vai achar a outra por este comentario.
   ===================================================================== */
@media (max-width: 767px) {

    /* A centralizacao vertical (`.modal::before` inline-block de
       `height:100%`) soma com o dialogo alto e empurra tudo para a linha
       de baixo. No celular estes modais alinham no TOPO. */
    .modal.tsw-modal-celular {
        overflow: hidden;
    }

    .modal.tsw-modal-celular::before {
        display: none;
    }

    .modal.tsw-modal-celular .modal-dialog {
        margin: 8px;
    }

    .modal.tsw-modal-celular .modal-content {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 16px);
    }

    /* Um <form> entre o content e o body quebraria a cadeia flex e o
       `max-height` nunca chegaria ao corpo -- ver a nota longa no bloco
       da RAT. Os modais da montagem nao tem esse <form>, mas a regra fica
       para quem escrever um que tenha. */
    .modal.tsw-modal-celular .modal-content > form {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    .modal.tsw-modal-celular .modal-body {
        overflow-y: auto;
        min-height: 0;
    }

    /* O rodape nao encolhe nem rola junto: e onde estao Gravar e Cancelar. */
    .modal.tsw-modal-celular .modal-footer {
        flex-shrink: 0;
    }

    .modal.tsw-modal-celular .modal-footer .btn {
        display: block;
        margin: 0 0 8px;
        min-height: 44px;
        width: 100%;
    }

    /* ⚠️ OS 8px DE DESALINHO ENTRE DOIS CHECKBOXES SEGUIDOS -- e a primeira
       explicacao que eu dei estava ERRADA.

       Medido: os dois inputs em x=28,8 e x=36,8. Eu culpei o recuo do label e
       escrevi tres regras de `padding-left` -- que repetiam exatamente o que o
       Bootstrap ja fazia. Foram no-op, e os 8px continuaram lá. Regra que nao
       muda nada e pior que regra ausente: ela faz parecer que o assunto foi
       tratado.

       A causa real, isolada por experimento no navegador: o input e
       `float: left` (bootstrap.css:2009), e o SEGUNDO wrapper leva
       `margin-top: -5px` de `.checkbox + .checkbox` (bootstrap.css:2014). A
       margem negativa sobe o segundo ate encostar no float do primeiro; float
       nao sobrepoe float, entao o navegador empurra o segundo 8px para a
       direita.

       Zerando a margem negativa, o input volta de 36,8 para 28,8 -- conferido
       na tela. O empilhamento fica 5px mais folgado, o que no celular e ganho,
       nao perda. */
    .modal.tsw-modal-celular .checkbox + .checkbox,
    .modal.tsw-modal-celular .radio + .radio {
        margin-top: 0;
    }
}

/* =====================================================================
   AS UTILITARIAS `visible-*-inline` QUE ESTE BOOTSTRAP NAO TEM
   =====================================================================

   O tema carrega Bootstrap v3.0.3 (bootstrap.css:1-3). As variantes
   `inline` de `visible-xs` so entraram na 3.2 -- mas duas telas ja as
   usam, escritas por quem contava com elas:

     - app/design/admin/Servicos/content.phtml:157 (filtro Estado da lista
       de RAT)
     - app/design/admin/Painel/relatorio_recebimentos.phtml:362 (rotulo do
       campo de busca)

   Sem a definicao a classe nao faz NADA, e o par "texto do desktop" +
   "texto do celular" aparece EMPILHADO no desktop. Foi o que o QA de
   01/09/2026 mediu na lista de RAT: "Segure Ctrl para marcar mais de um."
   e "Toque para marcar mais de um.", um debaixo do outro, na mesma tela.
   No celular passava por acaso -- `.hidden-xs` existe na 3.0.3 e escondia
   a outra metade.

   Definir a utilitaria (em vez de trocar por `.visible-xs`, que e `block`
   e quebraria a linha do rotulo) conserta as duas telas de uma vez e nao
   alcanca mais ninguem: so age em quem ja usa a classe.

   Copia fiel da 3.2 -- inclusive os `!important`, que sao o que faz a
   utilitaria vencer o `display` do elemento.
   ===================================================================== */
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-inline,
.visible-sm-inline-block {
    display: none !important;
}

@media (max-width: 767px) {
    .visible-xs-inline       { display: inline !important; }
    .visible-xs-inline-block { display: inline-block !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm-inline       { display: inline !important; }
    .visible-sm-inline-block { display: inline-block !important; }
}


/* Cabecalho dos modais da RAT no celular NAO encolhe (25/09/2026). Com a lista
   de pecas longa, o `.modal-header` (flex-shrink 1 por padrao, dentro da coluna
   flex acima) era esmagado e o titulo cruzava a linha divisoria. */
@media (max-width: 767px) {
  #modal-horario .modal-header,
  #modal-despesa .modal-header,
  #modal-lancamento .modal-header,
  #modal-veiculo .modal-header,
  #modal-peca .modal-header,
  #modal-buscar-rat .modal-header,
  .modal.tsw-modal-celular .modal-header {
    flex-shrink: 0;
  }
}

/* Foco visivel em QUALQUER botao -- piso de acessibilidade, teclado incluso. */
body.admin-theme-blue .btn:focus-visible {
  outline: 3px solid rgba(0, 0, 0, 0.35);  /* 13/09: era rgba(11,99,206) = #0B63CE chumbado. Agora e o acento petroleo */
  outline-offset: 1px;
}

/* ANEL DE FOCO tambem nos LINKS que agem como botao.
   O `.btn:focus-visible` da secao acima nao alcanca o `.btn-pagina`: conferido
   no markup, ele NAO carrega a classe `.btn` -- e aparece em 102 telas. Somado
   ao `outline: none` global que o style.css tinha em `a`, navegar a paginacao
   por teclado nao mostrava onde se estava. Mesmo anel dos botoes, para o admin
   ter UM padrao de foco e nao dois. */
body.admin-theme-blue a:focus-visible {
  outline: 3px solid rgba(0, 0, 0, 0.35);  /* 13/09: era rgba(11,99,206) = #0B63CE chumbado. Agora e o acento petroleo */
  outline-offset: 1px;
}
/* Sobre a banda escura o anel translucido da marca nao se ve: ali ele usa o
   azul claro, que e o tom que o tema ja reserva para o topo escuro. */
body.admin-theme-blue .admin-shell-header a:focus-visible,
body.admin-theme-blue .admin-shell-menu a:focus-visible {
  outline: 2px solid var(--admin-theme-primary-light);
  outline-offset: -2px;
}
/* Os itens do menu voltaram a pilula solida (12/09, 4a rodada) -- o anel claro
   acima mede so 2,02:1 sobre a pilula (o mesmo azul da marca), quase some.
   Branco da 5,69:1, a mesma folga do texto do proprio botao. */
body.admin-theme-blue .admin-shell-menu .btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

/* CHIP DE FILTRO
   ---------------------------------------------------------------------------
   Era uma fileira de `label label-warning/info/success/danger` do Bootstrap:
   seis cores para o que e UMA lista de atalhos do mesmo filtro. Pior, a cor
   mentia -- "Respondidas" saia em vermelho de perigo, quando responder e
   justamente o resultado bom.
   Agora: neutro por padrao, MARCA para o que esta filtrado, e vermelho so para
   o unico que de fato pede acao (prazo vencido). */
body.admin-theme-blue .chip-estado,
body.admin-theme-blue a.chip-estado.label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 12px;
  margin: 2px;
  border: 1px solid var(--admin-theme-border-strong);
  border-radius: 15px;
  background: #fff;
  color: var(--admin-theme-text-soft);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
body.admin-theme-blue .chip-estado strong {
  color: var(--admin-theme-text-faint);
  font-weight: 700;
}
body.admin-theme-blue .chip-estado:hover,
body.admin-theme-blue .chip-estado:focus {
  border-color: var(--admin-theme-primary);
  color: var(--admin-theme-primary);
  text-decoration: none;
  outline: none;
}
body.admin-theme-blue .chip-estado.chip-on,
body.admin-theme-blue a.chip-estado.label.chip-on {
  background: var(--admin-theme-primary);
  border-color: var(--admin-theme-primary);
  color: #fff;
}
body.admin-theme-blue .chip-estado.chip-on strong { color: rgba(255, 255, 255, 0.82); }

/* O unico chip que grita. Fica vermelho SEMPRE, porque e o que o comprador
   precisa ver ao abrir a tela -- mas so ele. */
body.admin-theme-blue .chip-estado.chip-alerta,
body.admin-theme-blue a.chip-estado.label.chip-alerta {
  background: var(--admin-theme-danger-bg);
  border-color: var(--admin-theme-danger);
  color: var(--admin-theme-danger);
}
body.admin-theme-blue .chip-estado.chip-alerta strong { color: var(--admin-theme-danger); }
body.admin-theme-blue .chip-estado.chip-alerta.chip-on {
  background: var(--admin-theme-danger);
  color: #fff;
}
body.admin-theme-blue .chip-estado.chip-alerta.chip-on strong { color: rgba(255, 255, 255, 0.85); }

/* FORMULARIO DE CADASTRO -- largura de leitura (12/09/2026)
   ---------------------------------------------------------------------------
   A grade ja era Bootstrap de verdade (col-lg-*), entao o problema nunca foi
   "falta de grade": e que o formulario se esticava por toda a largura do
   monitor. Com o rotulo em col-lg-3 e o campo em col-lg-6, sobrava um quarto da
   tela vazio a direita, e num monitor largo o campo "Nome/Razao Social" chegava
   a 735px -- muito mais do que qualquer nome precisa, e longe demais do rotulo.
   Conter a largura transforma isso numa coluna de leitura coesa, sem mexer em
   uma linha de marcacao. */
/* 29/09/2026 (Rafael, print em monitor de 1920px: "nao esta responsiva"): o limite de 1180px
   deixava metade da tela vazia a direita. Voltou a largura toda (openspec conta-corrente-desligar). */
body.admin-theme-blue .cadastro-page .panel {
  max-width: none;
}

/* A LUPA DO CAMPO DE BUSCA. O custom.css pede `background: ... url(search-icon.png)`
   em `.pesquisa`, mas o shorthand `background: #fff` dos controles do tema (acima,
   o do Fortal) apaga a imagem junto com a cor -- no Fortal a lupa tambem nao
   aparece. Na TSW ela ja era desenhada (commit anterior a 25/09) e continua:
   a imagem volta aqui, centrada na vertical do campo de 38px. */
body.admin-theme-blue input.pesquisa {
  background-image: url("../images/search-icon.png");
  background-repeat: no-repeat;
  background-position: 10px center;
}

/* (d) CLASSES RAT-* E TSW-* -- repintadas com as cores do Fortal. */
/* =====================================================================
   CORES RAT (LEGADO) -- 24/09/2026
   Pedido do Rafael: "no TSW antigo ele carregava umas cores que definiam
   status nas RATs, os botoes tinham cores -- copie o layout". Valores
   copiados do TSW legado (template/admin/default/css/style.css:1930-1956 e
   :2781-2880, custom.css:108-144 de la). 25/09/2026 (tema = Fortal): FICAM so
   as cores de ESTADO (aberta/atendida/finalizada/encerrada/cancelada), que
   carregam significado; o resto foi repintado com as cores do Fortal.
   ===================================================================== */

/* Fundo por estado (filtro, bloco "Estado" da RAT) -- azul-info, laranja,
   verde, cinza e vermelho do legado. */
.rat-fundo-aberta     { background-color: #5bc0de; color: #fff; }
.rat-fundo-atendida   { background-color: #F4A460; color: #fff; }
.rat-fundo-finalizada { background-color: #88C775; color: #fff; }
.rat-fundo-encerrada  { background-color: #807E7B; color: #fff; }
.rat-fundo-cancelada  { background-color: #F67273; color: #fff; }
.rat-fundo-indefinida { background-color: #a1a1a1; color: #fff; }

/* Bolinha de estado na lista (texto-* do legado). */
.rat-ponto-aberta     { color: #1fadea; }
.rat-ponto-atendida   { color: #F4A460; }
.rat-ponto-finalizada { color: #4CAF50; }
.rat-ponto-encerrada  { color: #807E7B; }
.rat-ponto-cancelada  { color: #e53935; }
.rat-ponto-indefinida { color: #a1a1a1; }

/* Etiqueta do tipo (tag-estado do legado): instalacao cinza, manutencao
   azul, retorno laranja. */
.rat-tag-tipo {
  display: inline-block; min-width: 90px; padding: 0 7px; border-radius: 1px;
  color: #fff; font-size: 9px; font-weight: bold; line-height: 15px; text-align: center;
  background-color: #a1a1a1;
}
.rat-tag-tipo-1 { background-color: #807E7B; }
.rat-tag-tipo-2 { background-color: #5784B4; }
.rat-tag-tipo-3 { background-color: #F4A460; }

/* Numero da RAT: mesmo desenho do botao de CODIGO das listas do Fortal
   (`.btn-info`: degrade primario -> acento, texto branco, canto de 3px). */
body.admin-theme-blue .btn-green,
.btn-green {
  color: #fff; font-size: 12px; font-weight: 600; padding: 2px 6px;
  background-color: var(--admin-theme-primary);
  background-image: linear-gradient(135deg, var(--admin-theme-primary), var(--admin-theme-accent));
  border: 1px solid transparent;
  text-shadow: none;
  border-radius: 3px;
}
body.admin-theme-blue .btn-green:hover, body.admin-theme-blue .btn-green:focus,
.btn-green:hover, .btn-green:focus,
.rat-num-grupo.open > .btn-green {
  color: #fff; background-color: var(--admin-theme-primary-dark); background-image: none;
}
.rat-num-grupo .caret { margin-left: 3px; border-top-color: #fff; }
.rat-num-grupo > .dropdown-menu { margin-top: 0; min-width: 190px; text-align: left; }
@media (max-width: 767px) {
  .rat-num-btn { min-height: 44px; padding: 8px 12px; font-size: 14px; }
}

/* Filtro de estado: botao com os marcados + lista colorida com check. */
/* Estreito e da altura do campo de pesquisa, como o selectpicker do legado:
   uma linha so, os nomes cortados com "..." (24/09/2026). */
.rat-filtro-estado > .btn {
  width: 100%; height: 38px; text-align: left; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; padding-right: 22px; position: relative;
}
.rat-filtro-estado .caret { position: absolute; right: 10px; top: 17px; }
.rat-filtro-menu { min-width: 200px; width: 100%; padding: 0; }
.rat-filtros .btn-sm { height: 38px; }
.rat-filtro-menu > li > label {
  display: flex; align-items: center; margin: 0; padding: 8px 12px;
  font-weight: normal; cursor: pointer; color: inherit;
}
.rat-filtro-menu > li > label input { position: absolute; opacity: 0; pointer-events: none; }
.rat-filtro-menu .rat-filtro-nome { flex: 1; }
.rat-filtro-menu .fa-check { visibility: hidden; }
.rat-filtro-menu input:checked ~ .fa-check { visibility: visible; }
.rat-filtro-menu > li > label:hover { filter: brightness(0.95); }
.rat-filtro-menu input:focus-visible ~ .rat-filtro-nome { text-decoration: underline; }

/* Bloco de estado no cabecalho da RAT (form-control colorido do legado). */
.rat-estado-bloco {
  display: inline-block; min-width: 120px; padding: 4px 12px; margin-left: 6px;
  border-radius: 3px; font-size: 12px; font-weight: 600; text-align: center;
  vertical-align: middle;
}

/* Menu discreto (☰) de tarifas, no canto do cabecalho -- como o legado. */
.rat-menu-tarifas { margin-left: 12px; }
.rat-menu-tarifas > .dropdown-toggle { display: inline-block; padding: 2px 6px; color: var(--admin-theme-text-soft); font-size: 16px; }
.rat-menu-tarifas > .dropdown-toggle:hover { color: var(--admin-theme-primary); }
.rat-menu-tarifas .dropdown-menu { right: 0; left: auto; min-width: 210px; }
.rat-menu-tarifas .dropdown-menu > li > a { font-size: 13px; }
@media (max-width: 767px) {
  .rat-menu-tarifas > .dropdown-toggle { padding: 10px 12px; }
}

/* Botoes da RAT com as cores do legado (Gravar verde, Atender/Finalizar
   laranja, Encerrar/Cancelar vermelho, e-mail azul): valem no SITE TODO pela
   secao "CORES DOS BOTOES" no fim deste arquivo. Nada mais a declarar aqui. */

/* Detalhamento: faixas de secao centralizadas, no azul-claro do Fortal (--primary-soft). */
.rat-det-titulo { margin-top: 0; }
.rat-faixa {
  margin: 14px 0 0; padding: 4px 8px; text-align: center;
  background-color: var(--admin-theme-primary-soft); border: 1px solid var(--admin-theme-border); border-bottom: 0;
  color: var(--admin-theme-primary-dark); font-weight: 600; font-size: 13px; letter-spacing: .3px;
}
.rat-faixa + .table-responsive, .rat-faixa + div > .table { margin-top: 0; }
.rat-acrescimo { color: var(--admin-theme-danger); }

/* Extrato do tecnico no jeito de banco (relatorio de atendimentos, 24/09/2026). */
/* 24/09/2026 (Rafael: "negativo vermelho, azul credito", "muito carregado"):
   credito AZUL, debito VERMELHO, e o saldo de cada linha na cor do sinal.
   25/09/2026: o cabecalho segue o do Fortal (tema) -- saiu o azul-claro da RAT. */
body.admin-theme-blue .rat-extrato-banco > .panel-heading,
body.admin-theme-blue .rat-fin-painel > .panel-heading {
  padding: 5px 10px;
  min-height: 0;
}
.rat-extrato-cab { overflow: hidden; }
.rat-extrato-periodo { float: right; font-size: 12px; opacity: .8; }
.rat-extrato-anterior td { background: var(--admin-theme-surface-alt); font-style: italic; }
.rat-extrato-cred, .rat-extrato-pos { color: var(--admin-theme-primary); }
.rat-extrato-deb,  .rat-extrato-neg { color: var(--admin-theme-danger); }
/* uma linha por lancamento: os textos longos cortam com "..." e mostram o nome
   inteiro no title (mesmo recurso da lista de RATs). So no desktop -- no
   celular a tabela vira cartao e o texto quebra normalmente. */
@media (min-width: 768px) {
  .rat-extrato-tabela { table-layout: fixed; }
  .rat-extrato-tabela > tbody > tr > td { white-space: nowrap; }
  .rat-extrato-tabela td.rat-cel-corte { overflow: hidden; text-overflow: ellipsis; }
}
.rat-extrato-tipo {
  display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 3px;
  font-size: 10px; font-weight: 700; line-height: 16px; text-transform: uppercase; color: #fff;
}
.rat-extrato-tipo-cred { background: var(--admin-theme-primary); }
.rat-extrato-tipo-deb  { background: var(--admin-theme-danger); }
.rat-extrato-total td { background: var(--admin-theme-primary-soft); }
.rat-extrato-saldo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  border-top: 1px solid var(--admin-theme-border); font-size: 14px;
}
.rat-extrato-saldo strong { font-size: 20px; }
.rat-extrato-saldo small { color: var(--admin-theme-text-soft); }
.rat-saldo-com-tecnico strong { color: var(--admin-theme-primary); }
.rat-saldo-a-receber strong  { color: var(--admin-theme-danger); }

/* QA 24/09/2026 -- no celular o FECHAMENTO saia com os valores FORA da tela:
   o Bootstrap 3.0.3 poe `white-space:nowrap` em toda celula de
   `.table-responsive > .table` (0,1,4), e a descricao do acrescimo esticava a
   coluna do rotulo. Aqui o rotulo quebra linha e o valor fica sempre visivel. */
@media (max-width: 767px) {
  .table-responsive > .table.rat-fechamento { table-layout: fixed; width: 100%; }
  .table-responsive > .table.rat-fechamento > tbody > tr > th,
  .table-responsive > .table.rat-fechamento > tbody > tr > td {
    white-space: normal; word-break: break-word; overflow-wrap: break-word;
  }
  .table-responsive > .table.rat-fechamento > tbody > tr > td { width: 42%; }
}
/* Mesma espessura de letra em todos os botoes da barra da RAT (o Gravar saia
   mais fino que os vizinhos). */
/* 24/09/2026: saiu o `.rat-legado .btn { font-weight: 600 }` -- botoes com o peso do Fortal. */

/* =====================================================================
   RAT COMO NO TSW ANTIGO -- 2a rodada (24/09/2026, prints do Rafael)
   ===================================================================== */

/* Bloco cinza de valor (R$ Abastecimentos, Adiantamento, Saldo do tecnico) e o
   bloco colorido do Estado -- registro.phtml:160-186 do legado. */
.rat-bloco-valor {
  display: block; min-height: 34px; line-height: 20px; padding: 7px 12px;
  border-radius: 4px; text-align: center; font-weight: 700; color: #fff;
}
/* cinza so quando nao e o bloco do Estado (que traz a cor em rat-fundo-*) */
.rat-bloco-valor:not([class*="rat-fundo-"]) { background-color: #999999; }

/* Titulo da lista num selo e botoes a direita. 25/09/2026: o selo e o ciano do
   titulo das listas do Fortal (#00bcd4, Contasapagar/content.phtml:176 de la). */
/* `tsw-lista-*` (24/09/2026): o MESMO padrao, com nome generico, para as outras
   telas do site ("o site todo mesmo layout" da RAT). */
.rat-lista-cabecalho { overflow: hidden; }
/* .tsw-lista-cabecalho SEM overflow:hidden (24/09/2026): no Fortal a barra tem
   altura fixa (40px) e o botao flutuante da direita pode passar da borda; com o
   hidden ela crescia para 43-52px. */
.rat-lista-titulo, .tsw-lista-titulo {
  display: inline-block; padding: 1px 8px; line-height: 17px; vertical-align: top; border-radius: 3px;  /* 19px + 20 de padding + 1 de borda = 40px, o cabecalho do Fortal */
  background-color: #00bcd4; color: #fff; font-weight: 700; font-size: 13px;
}
.rat-lista-cabecalho .tools .btn, .tsw-lista-cabecalho .tools .btn { margin-left: 4px; }
/* na RAT o titulo ja vem em maiusculas no markup; nas outras telas o selo faz */
.tsw-lista-titulo { text-transform: uppercase; }
.tsw-lista-titulo strong { font-weight: 700; }

/* LINHAS DAS TABELAS DA RAT: a zebra do Fortal (--admin-theme-zebra, #D3ECD8).
   So no desktop: no celular a tabela vira cartao e cartao nao leva zebra. */
@media (min-width: 768px) {
  body.admin-theme-blue .rat-zebra .table-striped > tbody > tr:nth-child(odd) > td,
  body.admin-theme-blue .rat-zebra .table-striped > tbody > tr:nth-child(odd) > th {
    background-color: var(--admin-theme-zebra);
  }
}

/* =====================================================================
   RAT COMO NO TSW ANTIGO -- 3a rodada (24/09/2026, print da RAT 5604:
   "cade o layout parecido, cade as cores, estes cards poluem demais").
   Tudo sob `.rat-legado` (a <section> da tela da RAT): o resto do sistema
   segue o tema.
   ===================================================================== */


/* titulo a esquerda, botoes a direita, alinhados na mesma linha */
.rat-painel-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rat-painel-cab .rat-painel-titulo { line-height: 24px; }
.rat-painel-cab .rat-painel-acoes { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px; }
/* resposta do "Cheguei"/"Sai": so ocupa espaco quando tem o que dizer */
.rat-status-ponto:empty { display: none; }
.rat-status-ponto { padding: 6px 10px; border-bottom: 1px solid var(--admin-theme-border); }

/* Link "Anexos" ao lado de Observacoes do cliente (registro.phtml:282 de la). */
body.admin-theme-blue .rat-legado a.rat-link-anexos { color: var(--admin-theme-primary); }

/* Assinaturas numa linha simples, sem card em volta. */
.rat-assinaturas .rat-assinatura-caixa {
  min-height: 70px; padding: 6px 10px; border: 1px solid var(--admin-theme-border); border-radius: var(--admin-theme-radius-sm); background: #ffffff;
}
.rat-assinaturas .rat-assinatura-caixa img { display: block; max-width: 100%; max-height: 80px; margin-bottom: 4px; }
.rat-assinaturas .rat-assinatura-caixa > .text-muted:only-child { display: block; line-height: 56px; }
/* Campo com input-group (RAT Vinculado sem botao) ocupa a coluna inteira,
   como os vizinhos -- o tema deixa o input-group com a largura do conteudo. */
body.admin-theme-blue .rat-legado #tab-geral .input-group { width: 100%; }
/* No celular o cabecalho vira flex (e o pull-right deixa de valer): o menu de
   tarifas volta para o canto direito, como no desktop. */
.rat-heading .rat-menu-tarifas { margin-left: auto; }

/* LISTA DE RATs -- uma altura por linha, como no TSW antigo (24/09/2026).
   Tabela de largura fixa (as <th width> mandam) e texto longo cortado com
   "..."; o nome inteiro fica no title da celula. So no desktop: no celular a
   tabela vira cartao e o texto quebra normalmente. */
@media (min-width: 768px) {
  .table.rat-lista-tabela { table-layout: fixed; width: 100%; }
  .table.rat-lista-tabela > tbody > tr > td.rat-cel-corte {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .table.rat-lista-tabela > tbody > tr > td { vertical-align: middle; }
  .table.rat-lista-tabela > thead > tr > th { vertical-align: middle; }
  /* mesmo recurso nas outras listas (24/09/2026): a tabela ganha
     `tsw-lista-linha` e a celula longa `tsw-cel-corte` + title.
     Sem `table-layout:fixed` (as outras listas nao tem <th width> em toda
     coluna): o `max-width:1px` faz a celula ceder o espaco que sobra e cortar
     com "..." -- por isso a <th> da coluna cortada PRECISA de width. */
  .table.tsw-lista-linha > tbody > tr > td.tsw-cel-corte {
    max-width: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .table.tsw-lista-linha > tbody > tr > td,
  .table.tsw-lista-linha > thead > tr > th { vertical-align: middle; }
}
/* Valores na cor do sinal, como no extrato do tecnico: positivo/credito azul,
   negativo/debito vermelho (24/09/2026). */
.tsw-valor-pos { color: var(--admin-theme-primary); }
.tsw-valor-neg { color: var(--admin-theme-danger); }
/* SALDO COM MOLDURA (24/09/2026, pedido do Rafael: "sempre que for mostrar
   valor coloque fundo nos saldos, molduras, igual o antigo era").
   No TSW legado todo saldo/total vinha numa pilula de fundo cheio
   (`.badge`, app.css:35 + bootstrap.css:5182): texto branco em negrito, cantos
   redondos. Aqui a pilula ganha a cor do sinal, a mesma do extrato:
   positivo azul, negativo vermelho, zero cinza. */
body.admin-theme-blue .tsw-saldo {
  display: inline-block; padding: 0 6px; border-radius: 9px;
  font-weight: 700; line-height: 18px; white-space: nowrap;  /* 18px: a linha fica com os 33px do Fortal */
  color: #fff; background: #999;
}
body.admin-theme-blue .tsw-saldo.tsw-saldo-pos { background: var(--admin-theme-primary); }
body.admin-theme-blue .tsw-saldo.tsw-saldo-neg { background: var(--admin-theme-danger); }
/* Botao "Anexos / fotos" (substitui o link pequeno do canto). */
.rat-linha-anexos { clear: both; margin: -6px 0 12px; text-align: right; }
.rat-btn-anexos { margin-top: -4px; }
@media (max-width: 767px) {
  .rat-btn-anexos { min-height: 44px; }
}
/* Botao "Historico" no cabecalho da RAT (a aba saiu, 24/09/2026). No celular o
   cabecalho e flex: o botao vai para a direita e o menu de tarifas logo depois. */
.rat-heading .rat-cab-historico { margin-left: 8px; }
@media (max-width: 767px) {
  .rat-heading .rat-cab-historico { margin-left: auto; }
  .rat-heading .rat-cab-historico ~ .rat-menu-tarifas { margin-left: 8px; }
}

/* ===========================================================================
   CORES DOS BOTOES (25/09/2026). Decisao do Rafael: "cores do TSW antigo com o
   acabamento do Fortal". O tema do Fortal (linhas 440-456) pinta success, info
   e warning com o MESMO azul -- no site todo cada acao perdia a cor. Aqui cada
   acao volta a ter a cor do TSW antigo (as do Bootstrap 3 dele, nos tokens
   --tsw-btn-* abaixo), com o degrade de 135 graus e o
   canto do Fortal. `.btn-primary` fica no azul do Fortal. O menu do topo
   (`.admin-shell-menu`) e a tela da OP (`.op-legacy-page`) tem regra propria,
   mais especifica, e nao mudam.
     Gravar/Novo/Confirmar  .btn-success  verde
     Editar/Atender         .btn-warning  laranja
     Excluir/Cancelar       .btn-danger   vermelho
     Ver/Imprimir/E-mail    .btn-info     azul-claro
   O botao de CODIGO da lista (btn-info dropdown-toggle dentro da tabela) fica
   no azul do Fortal, igual ao numero da RAT (.btn-green): e um codigo, nao uma
   acao, e nao pode competir com os botoes de acao da linha.
   =========================================================================== */
:root {
  --tsw-btn-ok-a: #449d44;
  --tsw-btn-ok-b: #5cb85c;
  --tsw-btn-warn-a: #ec971f;
  --tsw-btn-warn-b: #f0ad4e;
  --tsw-btn-danger-a: #c9302c;
  --tsw-btn-danger-b: #d9534f;
  --tsw-btn-info-a: #31b0d5;
  --tsw-btn-info-b: #5bc0de;
  --tsw-btn-texto: #fff;
}
body.admin-theme-blue .btn-success {
  background: linear-gradient(135deg, var(--tsw-btn-ok-a), var(--tsw-btn-ok-b));
  border-color: transparent;
  color: var(--tsw-btn-texto);
}
body.admin-theme-blue .btn-warning {
  background: linear-gradient(135deg, var(--tsw-btn-warn-a), var(--tsw-btn-warn-b));
  border-color: transparent;
  color: var(--tsw-btn-texto);
}
body.admin-theme-blue .btn-danger {
  background: linear-gradient(135deg, var(--tsw-btn-danger-a), var(--tsw-btn-danger-b));
  border-color: transparent;
  color: var(--tsw-btn-texto);
}
body.admin-theme-blue .btn-info {
  background: linear-gradient(135deg, var(--tsw-btn-info-a), var(--tsw-btn-info-b));
  border-color: transparent;
  color: var(--tsw-btn-texto);
}
body.admin-theme-blue .btn-success:hover, body.admin-theme-blue .btn-success:focus,
body.admin-theme-blue .btn-warning:hover, body.admin-theme-blue .btn-warning:focus,
body.admin-theme-blue .btn-danger:hover, body.admin-theme-blue .btn-danger:focus,
body.admin-theme-blue .btn-info:hover, body.admin-theme-blue .btn-info:focus {
  color: var(--tsw-btn-texto);
  filter: brightness(0.93);
}
body.admin-theme-blue .table .btn-info.dropdown-toggle,
body.admin-theme-blue .table .btn-group.open > .btn-info.dropdown-toggle {
  background: linear-gradient(135deg, var(--admin-theme-primary), var(--admin-theme-accent));
}

/* ===========================================================================
   SECOES DENTRO DO PAINEL (25/09/2026). Com a troca de "painel dentro de
   painel" por <fieldset><legend> (Rafael: "card dentro de card"), o legend
   do Bootstrap saia com 21px -- acima do teto de 20px do DESIGN.md e maior
   que o titulo do proprio painel. Aqui ele vira o titulo de secao: 15px, 700,
   azul-escuro do tema, fio embaixo.
   =========================================================================== */
body.admin-theme-blue .panel legend,
body.admin-theme-blue .modal legend {
  font-size: 15px;
  font-weight: 700;
  color: var(--admin-theme-primary-dark);
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--admin-theme-border);
}
body.admin-theme-blue .panel fieldset + fieldset,
body.admin-theme-blue .modal fieldset + fieldset {
  margin-top: 15px;
}
/* Valor com sinal DENTRO da faixa de totais: `.relatorio-comissao-card strong`
   (custom.css) pesa 0,1,1 e vencia `.tsw-valor-neg/pos` (0,1,0) -- o numero
   negativo saia na cor normal. */
.relatorio-comissao-card strong.tsw-valor-neg,
.relatorio-comissao-card .tsw-valor-neg { color: var(--admin-theme-danger); }
.relatorio-comissao-card strong.tsw-valor-pos,
.relatorio-comissao-card .tsw-valor-pos { color: var(--admin-theme-primary); }
/* O Bootstrap 3.0.3 do projeto nao tem `.text-uppercase` (veio no 3.1). */
.text-uppercase { text-transform: uppercase; }

/* ===========================================================================
   TITULOS E SELO (25/09/2026, QA visual da tarefa "site todo no padrao").
   - h1-h6 herdavam a Helvetica do bootstrap.css (:315) e o tema nunca
     sobrescreveu: titulos de secao, de configuracao e de relatorio saiam
     numa fonte diferente do resto da tela (Open Sans). Agora herdam.
   - .badge.bg-info (style.css:243) era um verde-agua -- cor que nao
     existe no tema -- em titulos de lista e barras de cliente (extrato,
     venda, contas a pagar/receber). Passa ao ciano do selo de
     titulo das listas (.tsw-lista-titulo), o mesmo do Fortal.
   =========================================================================== */
:root { --tsw-selo-titulo: #00bcd4; }
body.admin-theme-blue h1, body.admin-theme-blue h2, body.admin-theme-blue h3,
body.admin-theme-blue h4, body.admin-theme-blue h5, body.admin-theme-blue h6,
body.admin-theme-blue .h1, body.admin-theme-blue .h2, body.admin-theme-blue .h3,
body.admin-theme-blue .h4, body.admin-theme-blue .h5, body.admin-theme-blue .h6 {
  font-family: inherit;
}
body.admin-theme-blue .badge.bg-info { background: var(--tsw-selo-titulo); }
/* fieldset NAO encolhe: o navegador da `min-width: min-content` e o Bootstrap
   3.0.3 do projeto nao zera (o 3.1+ zera). Com painel-dentro-de-painel virando
   fieldset (25/09/2026), a tabela larga dentro dele alargava a pagina inteira
   no celular -- inventario 1843 medido a 390px: 907px de pagina, 390px com
   esta regra. */
fieldset { min-width: 0; }

/* ===========================================================================
   SEM CAIXA DENTRO DO PAINEL (25/09/2026, QA visual). O tema do Fortal
   (linhas 365-386, 645-649) da borda, sombra e canto de 16px a TODA
   .table-responsive e a toda barra de abas. Dentro de um painel isso vira
   caixa dentro de caixa -- o "card dentro de card" que o Rafael reprovou
   (QA: "faixa + tabela numa caixa recuada dentro do painel" em recebimentos;
   "duas barras de abas em caixas" na conciliacao; abas dos relatorios da
   RAT). Dentro de .panel: a tabela fica sem moldura propria e a barra de
   abas vira so a linha de baixo. Fora de painel continua como o Fortal.
   =========================================================================== */
body.admin-theme-blue .panel .table-responsive {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.admin-theme-blue .panel .nav-tabs {
  border: 0;
  border-bottom: 1px solid var(--admin-theme-border);
  border-radius: 0;
  padding: 0 0 6px;
}
/* Os botoes flutuantes (.mfb-component--br) sairam das listas de contas,
   cheques e transacoes -- viraram botoes no cabecalho do painel. A faixa de
   72px reservada para eles a direita do filtro (linhas ~752-757) ficou vazia:
   no celular os campos paravam 72px antes da borda. So zera onde o botao nao
   existe; navegador sem :has() ignora e fica como antes. */
@media (max-width: 991px) {
  body.admin-theme-blue:not(:has(.mfb-component--br)) #frmCheques,
  body.admin-theme-blue:not(:has(.mfb-component--br)) .filtro-grade {
    padding-right: 0;
  }
}

/* ===========================================================================
   BARRA DO MENU COM A COR DE ANTES (25/09/2026, noite). Ordem do Rafael, com
   print da producao: "deixe a cor que estava no navbar". O deploy de 25/09
   levou a troca de tema inteira (commit 63496a30) e a barra virou a faixa
   verde-clara do Fortal (regras nas linhas 176-241, que nao se editam). Aqui
   volta o que estava no ar ate entao (commit 5bb935fa, linhas 409-636 daquela
   versao): faixa PRATEADA espelhada e pilulas ESCURAS com rotulo branco --
   verde, petroleo e azul, "Menu" do celular branco. So cor e forma: a altura,
   o `top` e o comportamento do menu continuam os de hoje.
   =========================================================================== */
:root {
  --tsw-nav-faixa-1: #FBFCFD;
  --tsw-nav-faixa-2: #EDF0F3;
  --tsw-nav-faixa-3: #DCE1E6;
  --tsw-nav-faixa-4: #C8CFD6;
  --tsw-nav-verde-a: #0A5136;
  --tsw-nav-verde-b: #0F7C50;
  --tsw-nav-petroleo-a: #0E5A68;
  --tsw-nav-petroleo-b: #167789;
  --tsw-nav-azul-a: #16509A;
  --tsw-nav-azul-b: #1F6DC1;
  --tsw-nav-branco: #ffffff;
}

body.admin-theme-blue .admin-shell-menu {
  background: linear-gradient(180deg, var(--tsw-nav-faixa-1) 0%, var(--tsw-nav-faixa-2) 30%, var(--tsw-nav-faixa-3) 62%, var(--tsw-nav-faixa-4) 100%);
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
}

body.admin-theme-blue .admin-shell-menu .btn,
body.admin-theme-blue .admin-shell-menu .btn-group > .btn {
  padding: 6px 14px;
  border-radius: 17px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: none;
}

body.admin-theme-blue .admin-shell-menu .btn-success,
body.admin-theme-blue .admin-shell-menu .btn-group > .btn-success {
  background: linear-gradient(135deg, var(--tsw-nav-verde-a), var(--tsw-nav-verde-b));
  color: var(--tsw-nav-branco);
}

body.admin-theme-blue .admin-shell-menu .btn-info,
body.admin-theme-blue .admin-shell-menu .btn-group > .btn-info {
  background: linear-gradient(135deg, var(--tsw-nav-petroleo-a), var(--tsw-nav-petroleo-b));
  color: var(--tsw-nav-branco);
}

body.admin-theme-blue .admin-shell-menu .btn-warning,
body.admin-theme-blue .admin-shell-menu .btn-group > .btn-warning {
  background: linear-gradient(135deg, var(--tsw-nav-azul-a), var(--tsw-nav-azul-b));
  color: var(--tsw-nav-branco);
}

body.admin-theme-blue .admin-shell-menu .btn-default,
body.admin-theme-blue .admin-shell-menu .btn-group > .btn-default {
  background-image: none;
  background-color: var(--tsw-nav-branco);
  border-color: rgba(0, 0, 0, 0.22);
  color: var(--admin-theme-ink);
}

/* hover escurece por dentro (inset), sem transform: igual ao de antes */
body.admin-theme-blue .admin-shell-menu .btn:hover,
body.admin-theme-blue .admin-shell-menu .btn:focus {
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.20);
  border-color: rgba(0, 0, 0, 0.38);
  color: var(--tsw-nav-branco);
  transform: none;
  outline: none;
}

body.admin-theme-blue .admin-shell-menu .btn-default:hover,
body.admin-theme-blue .admin-shell-menu .btn-default:focus {
  color: var(--admin-theme-ink);
}


/* ===========================================================================
   COR DAS LISTAS COMO ERA (25/09/2026, noite). Ordem do Rafael: "a cor das
   colunas embaixo das listas era azul claro, coloque igual era". Medido no
   navegador com o CSS de 5bb935fa: zebra lilas-azulada (--admin-theme-zebra),
   fios da grade no azul-claro --admin-theme-border e hover azul-gelo
   --admin-theme-surface-alt. O custom.css:611 pinta a zebra verde do Fortal
   com hex fixo; esta regra, mais especifica, devolve a de antes.
   =========================================================================== */
body.admin-theme-blue .table-striped > tbody > tr:nth-child(odd) > td,
body.admin-theme-blue .table-striped > tbody > tr:nth-child(odd) > th {
  background-color: var(--admin-theme-zebra);
}

body.admin-theme-blue .table > tbody > tr:hover > td,
body.admin-theme-blue .table > tbody > tr:hover > th {
  background: var(--admin-theme-surface-alt);
}

body.admin-theme-blue .table-bordered,
body.admin-theme-blue .table-bordered > thead > tr > th,
body.admin-theme-blue .table-bordered > thead > tr > td,
body.admin-theme-blue .table-bordered > tbody > tr > th,
body.admin-theme-blue .table-bordered > tbody > tr > td,
body.admin-theme-blue .table-bordered > tfoot > tr > th,
body.admin-theme-blue .table-bordered > tfoot > tr > td {
  border-color: var(--admin-theme-border);
}

/* Titulo das colunas em PRETO, como era (5bb935fa:959, medido no legado:
   rgb(0,0,0)). O tema do Fortal pinta de azul-marinho. */
:root {
  --tsw-lista-cabecalho: #000000;
}
body.admin-theme-blue .table > thead > tr > th {
  color: var(--tsw-lista-cabecalho);
}

/* ===========================================================================
   TOPO AZUL ROYAL (26/09/2026, opcao A aprovada pelo Rafael no mockup de
   openspec/changes/azul-no-topo-e-logo). O verde do topo e o cartao menta da
   logo moram na parte do Fortal (linhas 38-55 e 89-113), que nao se edita:
   aqui o MESMO seletor, carregado depois, troca so a cor. Altura, posicao e
   menu nao mudam. Tons = rodape, acao e acento do proprio tema.
   =========================================================================== */
/* 26/09/2026, 2a rodada (pedido do Rafael com o print do login): o topo
   passa ao MESMO azul bem claro da faixa do login -- mesmo degrade, mesmo fio
   azul embaixo. Sobre o fundo claro o branco do relogio, do sino e do usuario
   sumiria: eles vao para o azul escuro do tema, em botao branco com borda. */
body.admin-theme-blue .admin-shell-header {
  background: linear-gradient(160deg, var(--admin-theme-surface) 0%, var(--admin-theme-bg) 60%, var(--admin-theme-primary-soft) 100%);
  /* fio de 3px = 1px de borda (a que o Fortal ja da) + 2px de sombra interna:
     com borda de 3px o topo crescia 2px e cobria o alto do menu (top:107px). */
  border-bottom: 1px solid var(--admin-theme-primary);
  box-shadow: inset 0 -2px 0 rgba(31, 95, 191, 1), 0 10px 22px rgba(10, 35, 78, 0.12);
}

body.admin-theme-blue .relogio-logout {
  color: var(--admin-theme-text);
}

body.admin-theme-blue .relogio-logout #cronometro {
  color: var(--admin-theme-primary-dark);
}

body.admin-theme-blue .top-nav ul.top-menu > li > a {
  border-color: var(--admin-theme-border);
  background: var(--admin-theme-surface);
  color: var(--admin-theme-primary-dark);
  box-shadow: none;
}

body.admin-theme-blue .top-nav ul.top-menu > li > a:hover,
body.admin-theme-blue .top-nav ul.top-menu > li > a:focus {
  border-color: var(--admin-theme-primary);
  background: var(--admin-theme-primary-soft) !important;
  color: var(--admin-theme-primary-dark);
}

body.admin-theme-blue .top-nav .username,
body.admin-theme-blue .top-nav .nav .caret {
  color: var(--admin-theme-primary-dark);
  border-top-color: var(--admin-theme-primary-dark);
  border-bottom-color: var(--admin-theme-primary-dark);
}

body.admin-theme-blue .top-nav img {
  border-color: var(--admin-theme-border);
}

body.admin-theme-blue .admin-shell-header a:focus-visible {
  outline-color: var(--admin-theme-primary);
}

/* LOGO SOLTA (26/09/2026, modelo 1 aprovado no mockup de
   openspec/changes/cores-topo-e-faixa-do-menu): sobre o topo claro o cartao
   claro sumia no fundo. Sai o fundo e a sombra do cartao do Fortal; padding e
   altura ficam, para o topo continuar com 107px. */
body.admin-theme-blue .admin-shell-logo {
  background: none;
  box-shadow: none;
}

body.admin-theme-blue .admin-shell-logo:hover {
  box-shadow: none;
}

/* FAIXA DOS BOTOES DO MENU EM AZUL CEU (26/09/2026, opcao 3 escolhida pelo
   Rafael entre royal, marinho e ceu). Troca so o fundo da faixa prateada do
   bloco "faixa PRATEADA" acima; as pilulas, a altura e o `top` nao mudam.
   Um tom acima do topo claro, para as pilulas escuras continuarem saltando. */
:root {
  --tsw-nav-ceu-1: #c7d7f4; /* = --admin-theme-border */
  --tsw-nav-ceu-2: #a9c6ee;
}

body.admin-theme-blue .admin-shell-menu {
  background: linear-gradient(180deg, var(--tsw-nav-ceu-1) 0%, var(--tsw-nav-ceu-2) 100%);
  /* fio de baixo como sombra interna: borda somaria 1px na altura do menu */
  box-shadow: inset 0 -1px 0 rgba(31, 95, 191, 1);
}

/* ABAS DO MODULO COMPRAS (26/09/2026, openspec compras-abas-e-acompanhamento).
   As quatro telas de Compras trocaram o cabecalho do painel pelas abas
   (Compras/abas_compras.phtml). O visual das abas e o do tema (.panel
   .nav-tabs acima); aqui so o respiro do bloco e, no celular, as abas numa
   linha que rola para o lado -- empilhadas, as quatro comiam meia tela. */
body.admin-theme-blue .compras-abas {
  padding: 10px 15px 0;
}
body.admin-theme-blue .compras-abas .compras-abas-acoes {
  margin-top: 4px;
}
body.admin-theme-blue .compras-abas .nav-tabs > li > a {
  font-weight: 600;
}
body.admin-theme-blue #modalCobrar .modal-footer .btn {
  margin-top: 4px;
}
/* Campo com erro (.has-error do Bootstrap): a borda do tema (linha ~423,
   body.admin-theme-blue .form-control) e mais forte e apagava o vermelho --
   o erro aparecia so no texto de baixo (QA da janela Cobrar, 26/09/2026). */
body.admin-theme-blue .has-error .form-control {
  border-color: var(--admin-theme-danger);
}
body.admin-theme-blue .has-error .control-label,
body.admin-theme-blue .has-error .help-block,
body.admin-theme-blue .has-error > label {
  color: var(--admin-theme-danger);
}
body.admin-theme-blue .filtro-fase-ativo {
  padding: 6px 12px;
  margin-bottom: 8px;
}
@media (max-width: 767px) {
  body.admin-theme-blue .compras-abas {
    padding: 8px 8px 0;
  }
  body.admin-theme-blue .compras-abas .compras-abas-acoes {
    float: none !important;
    display: block;
    margin: 0 0 6px;
  }
  /* Botoes que quebram em 2 linhas (Notas recebidas: Atualizar, Lancar produtos, Importar XML,
     19/10/2026) nao ficam colados um embaixo do outro. */
  body.admin-theme-blue .compras-abas .compras-abas-acoes .btn {
    margin-bottom: 6px;
  }
  body.admin-theme-blue .compras-abas .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  body.admin-theme-blue .compras-abas .nav-tabs > li {
    float: none;
    flex: 0 0 auto;
  }
}

/* ORDENS DE COMPRA: fases depois de fechada (26/09/2026, openspec
   compras-abas-e-acompanhamento). O fio separa os chips da cotacao dos chips
   do acompanhamento na mesma fileira; cada fornecedor fechado ganha um bloco
   na coluna Status. */
body.admin-theme-blue .chip-divisor {
  display: inline-block;
  width: 1px;
  height: 22px;
  margin: 0 8px 0 4px;
  vertical-align: middle;
  background: var(--admin-theme-border);
}
body.admin-theme-blue .acomp-linha {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--admin-theme-border);
  line-height: 1.35;
}
body.admin-theme-blue .acomp-linha .btn-cobrar {
  margin-top: 4px;
}

/* STATUS COLORIDOS DE COMPRAS (26/09/2026, openspec compras-status-coloridos).
   Pedido do Rafael: "status com cor, mesmo modelo das RAT coloridas". As cores
   SAO as de estado da RAT (.rat-fundo-*, e o azul de .rat-tag-tipo-2) -- nenhuma
   inventada. O nome da cor vem do PHP (CotacaoEstadoEnum::cor,
   PedidoCompraService::faseCor): chip e etiqueta da linha usam o mesmo. */
:root {
  --tsw-st-azulclaro: #5bc0de;  /* .rat-fundo-aberta */
  --tsw-st-azul: #5784B4;       /* .rat-tag-tipo-2 */
  --tsw-st-laranja: #F4A460;    /* .rat-fundo-atendida */
  --tsw-st-verde: #88C775;      /* .rat-fundo-finalizada */
  --tsw-st-cinza: #807E7B;      /* .rat-fundo-encerrada */
  --tsw-st-cinzaclaro: #a1a1a1; /* .rat-fundo-indefinida */
  --tsw-st-vermelho: #F67273;   /* .rat-fundo-cancelada */
}
.tsw-st-azulclaro  { --tsw-st: var(--tsw-st-azulclaro); }
.tsw-st-azul       { --tsw-st: var(--tsw-st-azul); }
.tsw-st-laranja    { --tsw-st: var(--tsw-st-laranja); }
.tsw-st-verde      { --tsw-st: var(--tsw-st-verde); }
.tsw-st-cinza      { --tsw-st: var(--tsw-st-cinza); }
.tsw-st-cinzaclaro { --tsw-st: var(--tsw-st-cinzaclaro); }
.tsw-st-vermelho   { --tsw-st: var(--tsw-st-vermelho); }
.tsw-st-primario   { --tsw-st: var(--admin-theme-primary); }

/* chip de filtro: fundo da cor, texto branco, cantos da RAT (3px) */
body.admin-theme-blue .chip-estado.tsw-st {
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--tsw-st);
  color: var(--admin-theme-surface);
  font-weight: 700;
}
body.admin-theme-blue .chip-estado.tsw-st strong {
  padding: 0 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--admin-theme-surface);
  line-height: 16px;
}
body.admin-theme-blue .chip-estado.tsw-st:hover,
body.admin-theme-blue .chip-estado.tsw-st:focus {
  border-color: transparent;
  color: var(--admin-theme-surface);
  filter: brightness(0.94);
}
/* o que esta filtrando: contorno escuro e check; a cor nao muda */
body.admin-theme-blue .chip-estado.tsw-st.chip-on {
  background: var(--tsw-st);
  color: var(--admin-theme-surface);
  outline: 2px solid var(--admin-theme-text);
  outline-offset: 2px;
}
body.admin-theme-blue .chip-estado.tsw-st.chip-on::before {
  content: "\f00c";
  font-family: FontAwesome;
  font-size: 11px;
}

/* etiqueta da coluna Status: a mesma cor do chip */
body.admin-theme-blue .label.tsw-st {
  border-radius: 3px;
  background: var(--tsw-st);
  color: var(--admin-theme-surface);
}

/* coluna Historico da lista de ordens: marcos do comeco ao fim */
.tsw-stp-azulclaro  { --tsw-st: var(--tsw-st-azulclaro); }
.tsw-stp-azul       { --tsw-st: var(--tsw-st-azul); }
.tsw-stp-laranja    { --tsw-st: var(--tsw-st-laranja); }
.tsw-stp-verde      { --tsw-st: var(--tsw-st-verde); }
.tsw-stp-cinza      { --tsw-st: var(--tsw-st-cinza); }
.tsw-stp-cinzaclaro { --tsw-st: var(--tsw-st-cinzaclaro); }
.tsw-stp-vermelho   { --tsw-st: var(--tsw-st-vermelho); }
.tsw-stp-primario   { --tsw-st: var(--admin-theme-primary); }
body.admin-theme-blue .hist-mini {
  min-width: 200px;
  margin: 0 0 2px 5px;
  padding: 0 0 0 10px;
  border-left: 2px solid var(--admin-theme-border);
  list-style: none;
  font-size: 12px;
  line-height: 1.35;
}
body.admin-theme-blue .hist-mini li {
  position: relative;
  padding: 0 0 5px 4px;
}
body.admin-theme-blue .hist-mini li::before {
  content: "\f111"; /* fa-circle: a bolinha e o proprio icone */
  position: absolute;
  top: 1px;
  left: -16px;
  font-family: FontAwesome;
  font-size: 10px;
  line-height: 1;
  color: var(--tsw-st, var(--admin-theme-border));
  background: var(--admin-theme-surface);
}
body.admin-theme-blue .hist-mini li.hist-atual { font-weight: 700; }
body.admin-theme-blue .hist-mini li.hist-mais { color: var(--admin-theme-text-soft); font-style: italic; }
body.admin-theme-blue .hist-mini li.hist-mais::before { content: none; }
body.admin-theme-blue .hist-mini .hist-quem { color: var(--admin-theme-text-soft); font-weight: 400; }
body.admin-theme-blue .hist-mini .hist-data {
  display: block;
  color: var(--admin-theme-text-faint);
  font-size: 10.5px;
  font-weight: 400;
}
body.admin-theme-blue #tabela-ordens th.hist-col { width: 230px; }
body.admin-theme-blue .hist-ver { margin-left: 5px; font-size: 12px; }
body.admin-theme-blue #modalHistorico .modal-body { max-height: 70vh; overflow-y: auto; }

/* =====================================================================
   COMPRAS -- QUADRO UNICO DO COMPARATIVO (27/09/2026, openspec
   compras-resumo-de-decisao, mockup ②). A celula "abre a conta" como a
   coluna Total R$ da cotacao do Fortal (Estoque/cotacao.phtml:742-755):
   linhas rotulo/valor, alinhadas a direita. Tabela listrada normal (sem
   fundo colorido por celula -- DESIGN.md "card"); destaque so por etiqueta.
   ===================================================================== */
body.admin-theme-blue .tsw-conta-rola { overflow-x: auto; width: 100%; }
body.admin-theme-blue .tsw-conta-tabela td.tsw-conta { min-width: 230px; font-size: 12px; }
body.admin-theme-blue .table.tsw-conta-tabela > tbody > tr > td { vertical-align: top; }
body.admin-theme-blue .table.tsw-conta-tabela > tfoot > tr > td { vertical-align: middle; }
body.admin-theme-blue .table.tsw-conta-tabela > thead > tr > th { vertical-align: top; }
body.admin-theme-blue .tsw-conta-tabela td.text-right { white-space: nowrap; }
body.admin-theme-blue .tsw-conta-tabela .tsw-conta-col-prod { min-width: 190px; }
body.admin-theme-blue .tsw-conta-tabela .tsw-conta-col-mais { min-width: 150px; }
body.admin-theme-blue .tsw-conta-forn-sub { display: block; font-weight: normal; font-size: 11px; }
body.admin-theme-blue .tsw-conta-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
body.admin-theme-blue .tsw-conta-esc { font-weight: normal; margin: 0; cursor: pointer; }
body.admin-theme-blue .tsw-conta-campos { display: flex; justify-content: space-between; margin-bottom: 4px; }
body.admin-theme-blue .tsw-conta-campos > div { text-align: right; }
body.admin-theme-blue .tsw-conta-campos small { display: block; color: var(--admin-theme-text-soft); font-size: 10px; }
body.admin-theme-blue .tsw-conta-campos-vazio { justify-content: center; margin-top: 4px; }
body.admin-theme-blue .tsw-conta-marca { margin-bottom: 4px; }
body.admin-theme-blue .tsw-conta-linha { display: flex; justify-content: space-between; line-height: 1.55; }
body.admin-theme-blue .tsw-conta-sep { border-top: 1px solid var(--admin-theme-border); margin-top: 4px; padding-top: 4px; }
body.admin-theme-blue .tsw-conta-acoes { text-align: right; margin-top: 4px; }
body.admin-theme-blue .tsw-conta-tit { margin-top: 14px; }
body.admin-theme-blue .tsw-veredito { font-size: 18px; margin-bottom: 8px; }

/* Campo que o comprador corrige clicando (Fortal: celula editavel tracejada). */
body.admin-theme-blue .tsw-ed { border-bottom: 1px dashed var(--admin-theme-text-soft); cursor: pointer; }
body.admin-theme-blue .tsw-ed:hover,
body.admin-theme-blue .tsw-ed:focus { background: var(--admin-theme-primary-soft); outline: none; }
body.admin-theme-blue .tsw-ed-input { display: inline-block; width: 90px; height: 24px; padding: 2px 6px; font-size: 12px; text-align: right; }
body.admin-theme-blue .tsw-ed-erro { display: block; font-size: 11px; }

/* Giro + codigo antes do nome do produto (Fortal cotacao.phtml:456-460). */
body.admin-theme-blue .tsw-prod-giro { background: none; border: 0; padding: 0 2px 0 0; vertical-align: -2px; cursor: pointer; }
body.admin-theme-blue .tsw-prod-cod { color: var(--admin-theme-text-soft); font-size: 11px; margin-right: 2px; }
body.admin-theme-blue .tsw-conta-prod .tsw-prod-nome { font-weight: 600; }

/* Tabela dentro de .table-responsive que PRECISA quebrar linha (o BS3 poe
   nowrap em toda celula ali, bootstrap.css:1750) -- janelas de Compras. */
body.admin-theme-blue .table-responsive > .table.tsw-quebra > tbody > tr > td,
body.admin-theme-blue .table-responsive > .table.tsw-quebra > thead > tr > th,
body.admin-theme-blue .table-responsive > .table.tsw-quebra > tfoot > tr > td { white-space: normal; }
/* ...mas valor em dinheiro do comparativo nao parte no meio ("R$" numa linha, numero na outra) */
body.admin-theme-blue .table-responsive > .table.tsw-quebra.tsw-conta-tabela > tbody > tr > td.text-right,
body.admin-theme-blue .table-responsive > .table.tsw-quebra.tsw-conta-tabela > tfoot > tr > td.text-right { white-space: nowrap; }
body.admin-theme-blue .table-responsive > .table.tsw-quebra > tbody > tr > td.tsw-cel-corte {
    white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 767px) {
    /* 16px impede o iOS de dar zoom ao tocar o campo */
    body.admin-theme-blue .tsw-ed-input { font-size: 16px; height: 32px; width: 110px; }
    body.admin-theme-blue .tsw-veredito { font-size: 16px; }
    /* Comparativo no celular: Produto estreito para o 1o fornecedor caber ao lado
       (mockup 2, versao celular). Sem isto o nome do produto ocupava os 322px. */
    body.admin-theme-blue .tsw-conta-tabela .tsw-conta-col-prod,
    body.admin-theme-blue .tsw-conta-tabela td.tsw-conta-prod { min-width: 120px; max-width: 135px; }
    body.admin-theme-blue .tsw-conta-tabela td.tsw-conta { min-width: 190px; }
}

/* Janela "Nova ordem de compra" (27/09/2026, openspec compras-resumo-de-decisao, mockup ①) */
body.admin-theme-blue .pc-sec { border-top: 1px solid var(--admin-theme-border); margin-top: 18px; padding-top: 10px; }
body.admin-theme-blue .pc-sec-tit { margin-top: 12px; }
body.admin-theme-blue .pc-sugestao { margin: 4px 0 10px; max-height: 220px; overflow-y: auto; }
body.admin-theme-blue .pc-sem-cad { margin-top: 8px; }
body.admin-theme-blue .pc-topo-8 { margin-top: 8px; }

/* Busca de produto da janela "Nova ordem de compra" em tabela colorida, titulo
   verde e Buscar redondo (28/09/2026, openspec compras-busca-produto-colorida,
   mockup ①-⑧ aprovado pelo Rafael). */
:root {
    --tsw-modal-topo-verde: rgba(92, 184, 92, .22);  /* verde do .btn-success a 22% */
    --tsw-pilula: 20px;
    --tsw-cinza-decidido: #eceff1;   /* cartao do chat "Ja decidido por..." (= chat-mobile.css), 28/09/2026 */  /* canto de pilula: excecao ao raio do tema pedida pelo Rafael (28/09/2026), so no Buscar desta janela */
}
body.admin-theme-blue #modalPuxarCompra .modal-header {
    background: var(--tsw-modal-topo-verde); border-bottom-color: var(--admin-theme-ok-border);
    border-top-left-radius: inherit; border-top-right-radius: inherit; }
body.admin-theme-blue #modalPuxarCompra .modal-header .modal-title { color: var(--admin-theme-ok); font-weight: 600; }
body.admin-theme-blue .pc-busca { display: flex; align-items: center; gap: 8px; }
body.admin-theme-blue .pc-busca .form-control { flex: 1 1 auto; }
body.admin-theme-blue .pc-busca .pc-btn-buscar { flex: 0 0 auto; border-radius: var(--tsw-pilula); padding-left: 18px; padding-right: 18px; }
body.admin-theme-blue .pc-res { margin: 4px 0 10px; max-height: 260px; overflow-y: auto; border: 1px solid var(--admin-theme-border); border-radius: 4px; }
body.admin-theme-blue .pc-res > .table { margin-bottom: 0; border: 0; }
body.admin-theme-blue .pc-res > .table > thead > tr > th {
    position: sticky; top: 0; z-index: 1; background: var(--admin-theme-primary-soft); color: var(--admin-theme-primary-dark); }
body.admin-theme-blue .pc-res > .table > tbody > tr > td { white-space: normal; }
/* nome com palavra grudada ("(DUPLICADO)DISJUNTOR") nao pode empurrar o Incluir para fora no celular */
body.admin-theme-blue .pc-res > .table > tbody > tr > td:first-child { overflow-wrap: anywhere; word-break: break-word; }
body.admin-theme-blue .pc-cod { color: var(--admin-theme-primary); font-weight: 700; font-size: 12px; margin-right: 4px; }
body.admin-theme-blue .pc-est-zero { color: var(--admin-theme-danger); font-weight: 700; }
body.admin-theme-blue .pc-data { display: block; color: var(--admin-theme-text-soft); font-size: 11px; }
body.admin-theme-blue .pc-res td.pc-acao { text-align: center; white-space: nowrap; }
body.admin-theme-blue .pc-res td.pc-acao .btn-xs,
body.admin-theme-blue .pc-res td.pc-acao .pc-na-ordem { min-width: 92px; }
body.admin-theme-blue .pc-na-ordem {
    display: inline-block; padding: 2px 8px; border-radius: 3px; background: var(--admin-theme-primary-dark);
    color: var(--admin-theme-btn-fill); font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap; cursor: default; }
body.admin-theme-blue .pc-res > .table > tbody > tr.pc-escolhido > td:first-child { border-left: 4px solid var(--admin-theme-primary-dark); padding-left: 3.5px; }  /* compensa o filete (medido: o codigo nao anda) */
body.admin-theme-blue .pc-res tr.pc-escolhido .pc-nome { font-weight: 700; }
/* linha escolhida pintada de verde claro (excecao ao "sem fundo em linha" do DESIGN.md,
   pedida pelo Rafael em 28/09/2026: ver de longe o que ja foi adicionado); vence zebra e hover */
body.admin-theme-blue .pc-res > .table > tbody > tr.pc-escolhido > td,
body.admin-theme-blue .pc-res > .table > tbody > tr.pc-escolhido:hover > td { background: var(--admin-theme-ok-bg); }
body.admin-theme-blue .pc-ult-cel { display: none; }
@media (max-width: 767px) {
    body.admin-theme-blue .pc-ult-cel { display: block; color: var(--admin-theme-text-soft); font-size: 11px; }
    body.admin-theme-blue .pc-na-ordem { padding: 12px 8px; font-size: 13px; text-align: center; }
    body.admin-theme-blue .pc-res td.pc-acao { padding-left: 3px; padding-right: 3px; }
    body.admin-theme-blue .pc-res td.pc-acao .btn-xs,
    body.admin-theme-blue .pc-res td.pc-acao .pc-na-ordem { min-width: 96px; padding-left: 8px; padding-right: 8px; }
}

/* Aba Itens da ordem (27/09/2026, openspec compras-resumo-de-decisao, mockup 8):
   botoes da linha lado a lado; no celular o .table-responsive rola e cortaria o
   menu "Cadastro", entao ali ele abre dentro da propria celula. */
body.admin-theme-blue .tsw-acoes-item { white-space: nowrap; }
body.admin-theme-blue .tsw-acoes-item .tsw-cadastro-item { margin-left: 4px; }
@media (max-width: 767px) {
    /* O menu abre DENTRO da celula (static). O Bootstrap 3.0.3 poe um .dropdown-backdrop
       (fixed, z-index 990) no toque, logo depois do botao: com o menu estatico o toque caia
       no backdrop (medido com elementFromPoint). Aqui ele sai; tocar fora fecha pelo clique
       no document, que o Bootstrap tambem escuta. */
    body.admin-theme-blue .tsw-cadastro-item .dropdown-menu { position: static; float: none; margin-top: 4px; text-align: left; }
    body.admin-theme-blue .tsw-cadastro-item .dropdown-backdrop { display: none; }
    body.admin-theme-blue .tsw-acoes-item { white-space: normal; }
    body.admin-theme-blue .tsw-acoes-item .tsw-cadastro-item { float: none !important; display: block; margin: 4px 0 0; }
    body.admin-theme-blue .tsw-cadastro-item .dropdown-toggle { width: 100%; }
    body.admin-theme-blue .tsw-cadastro-item .dropdown-menu { width: 100%; min-width: 0; }
    body.admin-theme-blue .tsw-cadastro-item .dropdown-menu > li > a { white-space: normal; padding: 8px 10px; }
}
body.admin-theme-blue .tsw-col-respostas { width: 110px; }
body.admin-theme-blue .tsw-col-acoes-item { width: 150px; }
body.admin-theme-blue .tsw-col-num { width: 34px; }
body.admin-theme-blue .tsw-col-codigo, body.admin-theme-blue .tsw-col-estoque { width: 110px; }
body.admin-theme-blue .tsw-col-grupo { width: 120px; }

/* Configuracoes > Alertas > Compras (27/09/2026, openspec compras-resumo-de-decisao, mockup 9):
   modelo do Fortal -- nomes com x, janela "Escolher pessoas" com codigo/perfil/cargo. */
body.admin-theme-blue .alertas-ac-item { margin-bottom: 22px; }
body.admin-theme-blue .alertas-ac-item .ac-quem { margin: 8px 0 0 20px; max-width: 620px; }
body.admin-theme-blue .alertas-ac-item .ac-quem .help-block { margin: 4px 0 6px; font-size: 12px; }
body.admin-theme-blue .alertas-ac-item .ac-dias { margin: 8px 0 0 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.admin-theme-blue .alertas-ac-item .ac-dias input { width: 80px; }
body.admin-theme-blue .ac-dias-rot { font-weight: 600; font-size: 12px; margin: 0; }
body.admin-theme-blue .ac-titulo { font-weight: 600; cursor: pointer; }
body.admin-theme-blue .ac-desc { font-size: 12px; margin-left: 20px; }
body.admin-theme-blue .ac-quem-rot { font-weight: 600; font-size: 12px; display: block; }
body.admin-theme-blue .ac-escolhidos { margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
body.admin-theme-blue .ac-pessoa { font-size: 13px; font-weight: 600; padding: 5px 4px 5px 10px; display: inline-flex; align-items: center; gap: 4px; }
body.admin-theme-blue .ac-pessoa-x { background: transparent; border: 0; color: inherit; font-size: 16px; line-height: 1; padding: 0 6px; cursor: pointer; }
body.admin-theme-blue .ac-vazio { font-size: 13px; font-weight: 600; }
body.admin-theme-blue .ac-status { margin-bottom: 8px; }
body.admin-theme-blue .ac-status-rodada { font-size: 12px; margin-bottom: 18px; }
body.admin-theme-blue .ac-feedback { display: block; margin: 6px 0 14px; }
body.admin-theme-blue .ac-subtitulo { font-weight: 600; margin-top: 14px; }
body.admin-theme-blue .ac-pequeno { font-size: 12px; }
body.admin-theme-blue .ac-nowrap { white-space: nowrap; }
body.admin-theme-blue .ac-tabela { font-size: 12px; }
body.admin-theme-blue .ac-tabela td, body.admin-theme-blue .ac-tabela th { vertical-align: middle !important; }
body.admin-theme-blue .ac-motivo { max-width: 320px; white-space: normal; }
body.admin-theme-blue .ac-p-busca { margin-bottom: 8px; }
body.admin-theme-blue .ac-p-rola { max-height: calc(100vh - 300px); overflow-y: auto; border: 1px solid var(--admin-theme-border); border-radius: 4px; }
body.admin-theme-blue .ac-p-linha { cursor: pointer; }
body.admin-theme-blue .ac-p-linha > td:first-child { width: 40px; }
body.admin-theme-blue .ac-p-linha.ac-p-sel td { font-weight: 700; }
body.admin-theme-blue .table-responsive.ac-p-rola > .table > tbody > tr > td.ac-p-nome { white-space: normal; word-break: break-word; }
body.admin-theme-blue .ac-p-rola th { text-align: left; }
body.admin-theme-blue .ac-p-cod { width: 70px; white-space: nowrap; color: var(--admin-theme-text-soft); }
body.admin-theme-blue .ac-p-perfil { white-space: nowrap; }
body.admin-theme-blue .ac-p-cargo { color: var(--admin-theme-text-soft); }
body.admin-theme-blue .ac-p-sub { display: none; font-size: 12px; font-weight: 400; color: var(--admin-theme-text-soft); }
body.admin-theme-blue #modal-ac-pessoas .modal-body, body.admin-theme-blue #modal-ac-pessoas td { text-align: left; }
body.admin-theme-blue .ac-p-rodape { display: flex; align-items: center; gap: 8px; }
body.admin-theme-blue .ac-p-conta { margin-right: auto; }
@media (max-width: 767px) {
    /* no iPhone (WebKit) uma regra mais fraca nao escondia as colunas (medido no Fortal, 27/09) */
    body.admin-theme-blue .ac-p-rola .table > thead > tr > th.ac-p-col,
    body.admin-theme-blue .ac-p-rola .table > tbody > tr > td.ac-p-col { display: none !important; }
    body.admin-theme-blue .ac-p-sub { display: block; }
    body.admin-theme-blue .alertas-ac-item .ac-quem, body.admin-theme-blue .alertas-ac-item .ac-dias { margin-left: 0; max-width: 100%; }
    body.admin-theme-blue .ac-desc { margin-left: 0; }
    body.admin-theme-blue .ac-pessoa-x { min-width: 40px; min-height: 32px; }
}

/* ABAS DA RAT (28/09/2026, openspec rat-relatorios-numa-tela).
   Servicos/abas_rat.phtml usa o mesmo bloco das abas de Compras
   (.compras-abas, acima: respiro, negrito, rolagem no celular); aqui so a
   fileira das abas de relatorio (Faturamento | Tecnico | Uso de veiculos),
   que no celular rola para o lado em vez de quebrar em tres linhas. */
body.admin-theme-blue .rat-abas .rat-abas-sub {
  padding: 10px 0 0;
}
@media (max-width: 767px) {
  body.admin-theme-blue .rat-abas .rat-abas-sub {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  body.admin-theme-blue .rat-abas .rat-abas-sub .btn-group {
    display: inline-flex;
    flex-wrap: nowrap;
  }
  body.admin-theme-blue .rat-abas .rat-abas-sub .btn {
    min-height: 40px;
    line-height: 26px;
  }
}
/* Abas internas da aba Tecnico (Servicos/abas_rat_tecnico.phtml): o respiro
   entre a fileira e o conteudo da aba. No celular rolam para o lado, como as
   de cima. */
body.admin-theme-blue .rat-abas-tecnico {
  margin-bottom: 15px;
}
/* No celular as 4 abas internas QUEBRAM em duas linhas (como no desenho): com
   rolagem lateral a aba ativa ficava fora da vista (QA de navegador 28/09/2026). */
/* Dois botoes no canto das abas (PDF + Imprimir nas Horas extras): 4px entre
   eles, o espaco da barra de acoes (DESIGN.md, secao 4). */
body.admin-theme-blue .rat-abas .compras-abas-acoes .btn + .btn {
  margin-left: 4px;
}
/* Pecas com o tecnico: os dois modos (Com ele agora | Todas do periodo). */
body.admin-theme-blue .rat-pecas-modo {
  margin-bottom: 10px;
}
@media (max-width: 767px) {
  /* os dois modos lado a lado, cada um com metade, texto quebrando dentro */
  body.admin-theme-blue .rat-pecas-modo {
    display: flex;
    width: 100%;
  }
  body.admin-theme-blue .rat-pecas-modo > .btn {
    flex: 1 1 50%;
    white-space: normal;
    min-height: 40px;
  }
}
/* Pecas com o tecnico: larguras minimas das colunas de texto novas. */
body.admin-theme-blue .rat-col-para-que { min-width: 160px; }
body.admin-theme-blue .rat-col-situacao { min-width: 170px; }

/* Faturamento da RAT: a tabela tem 22 colunas. O .table-responsive do BS3 so
   rola abaixo de 768px -- no desktop quem rolava era a PAGINA (scrollWidth 1807
   em 1366, QA 28/09/2026). A rolagem fica dentro da caixa da tabela. */
body.admin-theme-blue .relatorio-rat-panel .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Janelas Nova despesa e Nova receita em VERDE CLARO (29/09/2026, openspec
   contas-modal-verde-e-destino-recusa, mockup aprovado). Rafael: "muito apagado sem
   cor". So aparencia: a classe `jl-verde` fica no .modal-content das duas views
   (Contasapagar/modal-incluir-despesa, Contasareceber/modal-incluir-receita) -- e nao
   no id, porque Transacoes usa o mesmo id #modal-incluir-despesa para outra janela.
   Topo = o da "Nova ordem de compra" (--tsw-modal-topo-verde); secoes separadas por
   titulo + fio, sem caixa colorida.
   29/09/2026 (openspec modal-despesa-verde-e-azul), Rafael: "esta muito verde, coloque
   umas partes azul". Verde nas pontas (topo, Valor Total, rodape, Salvar); AZUL no meio
   (abas, aba aberta no degrade dos botoes do sistema, titulos, rotulos, foco).
   29/09/2026 (openspec modal-despesa-topo-azul, mockup Opcao A), Rafael: "coloque azul no
   modal onde esta escrito nova despesa". O TOPO passa para o degrade azul dos botoes, com
   titulo e X brancos; verde ficam so Valor Total, rodape e Salvar.
   29/09/2026, Rafael: "coloque igual a Telplastic Fortal... so muda as cores". Os titulos de
   secao (Valores, Classificacao, Anexos e tags, classe jl-secao) SAIRAM das duas views: davam
   131px a mais de altura que o Fortal. Tamanho e arrumacao = Fortal; aqui so as cores.
   E o ALINHAMENTO: no Fortal o conteudo destas janelas herda o text-align:center do .modal
   (style.css), porque la o `//text-align: left` do .modal-dialog e invalido e cai. Na TSW
   essa linha foi escrita de verdade em 22/08 (commit 2af8502b, para a RAT) e vale para TODO
   modal -- por isso "Conta Contabil", "Pagar agora", "Tags" e o titulo ficavam a esquerda.
   Devolvemos o center SO nestas duas janelas; o resto do sistema continua como esta. */
body.admin-theme-blue .modal-content.jl-verde { text-align: center; }
body.admin-theme-blue .modal-content.jl-verde > .modal-header {
    background: linear-gradient(135deg, var(--admin-theme-primary), var(--admin-theme-primary-light));
    border-bottom-color: var(--admin-theme-primary-dark);
    border-top-left-radius: inherit; border-top-right-radius: inherit; }
body.admin-theme-blue .modal-content.jl-verde > .modal-header .modal-title { color: var(--tsw-btn-texto); }
body.admin-theme-blue .modal-content.jl-verde > .modal-header .close { color: var(--tsw-btn-texto); opacity: .85; text-shadow: none; }
body.admin-theme-blue .modal-content.jl-verde .nav-tabs { background: var(--admin-theme-primary-soft); border-color: var(--admin-theme-primary-soft); }
body.admin-theme-blue .modal-content.jl-verde .nav-tabs > li > a { background: transparent; color: var(--admin-theme-primary-dark); }
body.admin-theme-blue .modal-content.jl-verde .nav-tabs > li > a:hover { background: var(--admin-theme-surface); }
body.admin-theme-blue .modal-content.jl-verde .nav-tabs > li.active > a,
body.admin-theme-blue .modal-content.jl-verde .nav-tabs > li.active > a:hover,
body.admin-theme-blue .modal-content.jl-verde .nav-tabs > li.active > a:focus {
    background: linear-gradient(135deg, var(--admin-theme-primary), var(--admin-theme-primary-light)); color: var(--tsw-btn-texto); border-color: transparent; }
body.admin-theme-blue .modal-content.jl-verde .control-label { color: var(--admin-theme-primary-dark); }
body.admin-theme-blue .modal-content.jl-verde .form-control:focus {
    border-color: var(--admin-theme-primary-light); }
body.admin-theme-blue .modal-content.jl-verde #valor_total {
    background: var(--admin-theme-ok-bg); border-color: var(--admin-theme-ok-border); color: var(--admin-theme-ok); font-weight: 700; }
body.admin-theme-blue .modal-content.jl-verde > .modal-footer { border-top: 2px solid var(--admin-theme-ok-border); }

/* Caixinha "Desligados" ao lado do rotulo de um <select> de funcionario (29/09/2026,
   app/design/admin/Admin/filtro-desligados.phtml). Na linha do rotulo, a direita: embaixo
   do select ela deixaria a coluna mais alta que as vizinhas e entortaria a linha de baixo. */
.fd-caixa { float: right; margin: 0; font-weight: normal; font-size: 12px; line-height: 20px;
    color: var(--admin-theme-text-soft); cursor: pointer; white-space: nowrap; }
.fd-caixa input[type="checkbox"] { margin: 0 3px 0 0; vertical-align: -2px; cursor: pointer; }
/* Campo em coluna flex (Pedidos > Servico, .psf-campo): float nao vale dentro de flex e a
   caixinha virava uma linha propria, descendo o select. Presa no canto, fora do fluxo. */
.psf-campo { position: relative; }
.psf-campo > .fd-caixa { position: absolute; top: 0; right: 0; float: none; line-height: 16px; }
/* No celular o campo de 139px nao cabe rotulo + caixinha (141px): o campo com a caixinha
   ocupa a linha inteira (Painel/pedidos.phtml, .psf-campo-fd). O seletor precisa vencer o
   `.pedidos-servico-filtros .psf-campo` do <style> da propria tela, que vem DEPOIS desta
   folha. O checkbox tem 22px no celular de proposito (toque, regra do @media ~3349), mais
   alto que a linha do rotulo: sobe 4px para o vao de 10px entre as linhas de filtro. */
@media (max-width: 767px) {
    .pedidos-servico-filtros .psf-campo.psf-campo-fd { flex: 1 1 100%; }
    .pedidos-servico-filtros .psf-campo-fd > .fd-caixa { top: -4px; }
}

/* Conta corrente: selo ATIVA/DESLIGADA + Desligar/Religar no cabecalho da conta (29/09/2026,
   openspec conta-corrente-desligar). */
body.admin-theme-blue .cc-situacao { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; }
body.admin-theme-blue .cc-situacao .label { padding: 5px 10px; font-size: 12px; }
/* Celular: o Historico fica preso a direita do cabecalho (conta.phtml, .cad-historico-inline);
   DESLIGADA + Religar no tamanho normal invadiam 10px dele em 375px (QA 29/09/2026). Mesmo
   tamanho compacto dos botoes do cabecalho no celular. */
@media (max-width: 767px) {
  body.admin-theme-blue .cc-situacao { gap: 4px; margin-left: 4px; max-width: 100%; flex-wrap: wrap; justify-content: flex-end; }
  body.admin-theme-blue .cc-situacao .label { padding: 3px 6px; font-size: 10px; }
  body.admin-theme-blue .cc-situacao .btn { padding: 3px 8px; font-size: 11px; }
}

/* Lista de contas do Painel mais leve (29/09/2026, openspec lista-contas-arejada, mockup
   aprovado). Rafael: vermelho do saldo "muito forte", tela "muito fechada", moldura do saldo
   "muito grande", credito em AZUL. So a tabela .painel-tbl -- as outras telas com .tsw-saldo
   nao mudam. A zebra vira o azul-gelo; o hover, que ja usava essa cor, sobe para o
   --primary-soft, senao a linha sob o mouse sumiria nas linhas impares. */
body.admin-theme-blue .painel-tbl > tbody > tr > td { padding: 11px 12px; }
body.admin-theme-blue .painel-tbl > thead > tr > th { padding: 12px 12px; }
body.admin-theme-blue .painel-tbl .painel-badge-perfil { margin-left: 12px; }
body.admin-theme-blue .painel-tbl.table-striped > tbody > tr:nth-child(odd) > td { background-color: var(--admin-theme-surface-alt); }
body.admin-theme-blue .painel-tbl.table > tbody > tr:hover > td { background: var(--admin-theme-primary-soft); }
body.admin-theme-blue .painel-tbl .tsw-saldo { padding: 0 6px; line-height: 17px; font-size: 12px; }
body.admin-theme-blue .painel-tbl .tsw-saldo.tsw-saldo-neg { background: var(--admin-theme-danger-bg); color: var(--admin-theme-danger); }
body.admin-theme-blue .painel-tbl .tsw-saldo.tsw-saldo-pos { background: var(--admin-theme-primary-soft); color: var(--admin-theme-primary); }
body.admin-theme-blue .painel-tbl .tsw-saldo:not(.tsw-saldo-neg):not(.tsw-saldo-pos) { background: var(--admin-theme-mute-bg); color: var(--admin-theme-text-soft); }
/* Selo do saldo (EM ABERTO, PEDIDO S/ RECEB., RECEB. S/ PEDIDO) na MESMA linha do valor
   (29/09/2026, openspec selo-ao-lado-do-saldo). Rafael: "em aberto coloca do lado do valor,
   nao coloque embaixo, as linhas estao grandes". A coluna era estreita e o selo quebrava
   linha. So no computador: abaixo de 768px a coluna Saldo ja fica escondida. O balao do
   PEDIDO S/ RECEB. mora dentro da celula e volta a quebrar texto normalmente. */
@media (min-width: 768px) {
    body.admin-theme-blue .painel-tbl .painel-col-sit { white-space: nowrap; }
    body.admin-theme-blue .painel-tbl .painel-col-sit .painel-pop { white-space: normal; }
    body.admin-theme-blue .painel-tbl .painel-col-sit .painel-badge-devedor,
    body.admin-theme-blue .painel-tbl .painel-col-sit .painel-badge-psr { margin-left: 6px; vertical-align: middle; }
}
body.admin-theme-blue .painel-tbl .painel-val-pos { color: var(--admin-theme-primary); }
/* ...menos o "0,00" de Vencidos: ali painel-val-pos quer dizer "nada vencido" e continua verde
   (coluna .painel-col-atr no computador; no celular o <b> logo depois do icone de ok). */
body.admin-theme-blue .painel-tbl .painel-col-atr .painel-val-pos,
body.admin-theme-blue .painel-tbl .fa-check-circle + b.painel-val-pos { color: var(--admin-theme-pos); }

/* Desligado RISCADO, letra preta (29/09/2026, openspec riscar-desligados): funcionario
   desligado na lista de funcionarios e conta corrente desligada na lista de contas.
   Em <select> o navegador nao desenha risco -- la continua o "(desligado)" no nome. */
:root { --tsw-texto-preto: #000; }
body.admin-theme-blue .tsw-desligado { text-decoration: line-through; color: var(--tsw-texto-preto); }

/* NOTA DO FORNECEDOR NA ORDEM (01/10/2026, openspec compras-nota-na-ordem).
   .tsw-nowrap: celula que nao pode quebrar no meio (CNPJ, botoes da coluna Acao).
   .cmp-nr-sub: a segunda linha pequena de uma celula (CNPJ do fornecedor, "bate com o pedido").
   .cmp-dif: diferenca entre a nota e a ordem (valor ou preco que nao bate). */
body.admin-theme-blue .tsw-nowrap { white-space: nowrap; }
body.admin-theme-blue .cmp-nr-sub { display: block; color: var(--admin-theme-text-soft); font-size: 11px; }
body.admin-theme-blue .cmp-dif { color: var(--admin-theme-danger); font-weight: 700; }
/* Seletor "Mostrar NF-e | CT-e" da aba Notas recebidas: no celular a regra de toque de 44px
   (`body.admin-theme-blue .btn` -> inline-flex) desfazia o btn-group-justified e cada botao
   ficava com 44px num grupo de 310px. Volta a celula de tabela so aqui. */
@media (max-width: 767px) {
  body.admin-theme-blue .nr-modo.btn-group-justified > .btn { display: table-cell; }
}
/* Janela "Registrar como ordem": no celular o tema poe 5px de recuo nas colunas, mas a .row
   continua puxando 15px -- os campos ficavam 10px para fora do texto e da tabela da janela. */
@media (max-width: 767px) {
  body.admin-theme-blue .modal .row.nr-campos { margin-left: -5px; margin-right: -5px; }
}

/* ===========================================================================
   COMPRAS PELO MERCADO LIVRE (14/10/2026, openspec compras-mercado-livre).
   Faixa da situacao na ordem, linha de apoio sob o titulo, caixinha da lista de
   fornecedores e o cabecalho "Contas de compra" do item de Configuracoes.
   So variaveis do tema; nenhuma cor nova.
   =========================================================================== */
body.admin-theme-blue .cmp-sub { display: block; color: var(--admin-theme-text-soft); font-size: 11px; font-weight: 400; }
body.admin-theme-blue .cmp-ml-marca { margin: 4px 0 0; }
body.admin-theme-blue .cmp-ml-marca label { font-size: 11px; color: var(--admin-theme-text-soft); }
body.admin-theme-blue .cmp-ml-total { margin: 10px 0 0; text-align: right; }
body.admin-theme-blue .cmp-ml-faixa {
  padding: 10px 0;
  margin: 0 0 10px;
  border-top: 1px solid var(--admin-theme-border);
  border-bottom: 1px solid var(--admin-theme-border);
  line-height: 24px;
}
body.admin-theme-blue .cmp-ml-faixa-acoes { white-space: nowrap; }
/* resumo do pago no ML: pares rotulo/valor que quebram de linha no celular (compras-ml-dados-completos) */
body.admin-theme-blue .cmp-ml-valores { margin-top: 4px; }
/* janela de conferencia da entrega (era style inline) */
body.admin-theme-blue .cmp-conf-tab { font-size: 12px; }
/* Contas a pagar: descricao da parcela do ML num bloco so (a celula empilhada do celular e flex) */
.cap-ml-desc { display: block; min-width: 0; flex: 1 1 auto; white-space: normal; word-break: break-word; }
body.admin-theme-blue .cmp-ml-valores > span { display: inline-block; margin-right: 18px; white-space: nowrap; }
body.admin-theme-blue .cmp-ml-faixa-acoes .btn { margin-left: 5px; }
body.admin-theme-blue .cmp-ml legend .cmp-ml-legend-acoes { font-size: 13px; font-weight: 400; }
body.admin-theme-blue .cmp-ml-mostrar { margin: 0 10px 0 0; font-weight: 400; }
@media (max-width: 767px) {
  body.admin-theme-blue .cmp-ml legend .cmp-ml-legend-acoes { float: none !important; display: block; margin: 5px 0; }
  body.admin-theme-blue .cmp-ml-faixa-acoes { display: block; white-space: normal; margin-top: 5px; }
  body.admin-theme-blue .cmp-ml-faixa-acoes .btn { margin: 0 5px 5px 0; }
  /* no celular a coluna cede: largura fixa de desktop somada estourava 330 px */
  body.admin-theme-blue th[class*="cmp-ml-w"] { width: auto; }
  /* etiqueta longa ("Aguardando o Administrador", "Na COT-...") quebra em vez de alargar a coluna */
  body.admin-theme-blue .cmp-ml-tab .label { white-space: normal; display: inline-block; }
  /* texto do botao so no desktop (hidden-xs do BS 3.0.3 vira display:block fora do celular e quebrava o botao) */
  body.admin-theme-blue .cmp-ml-so-desk { display: none; }
  /* acoes da conta numa linha so: menos recuo na celula, os dois botoes de 44 px cabem (QA r2, D6) */
  body.admin-theme-blue .table-responsive > .table.tsw-quebra.cmp-ml-tab > tbody#mlContas > tr > td:last-child { white-space: nowrap; padding-left: 2px; padding-right: 2px; }
  /* so o e-mail (sem espaco) parte; palavra e valor em dinheiro nunca */
  body.admin-theme-blue .table-responsive > .table.tsw-quebra.cmp-ml-tab > tbody > tr > td.text-right { white-space: nowrap; }
}
/* itens da janela Fechar compra quebram linha (o BS3 poe nowrap dentro de .table-responsive) */
body.admin-theme-blue .table-responsive #ccItens > tr > td { white-space: normal; }
/* larguras de coluna das tabelas do Mercado Livre (no lugar de style="" nas <th>) */
body.admin-theme-blue .cmp-ml-w60 { width: 60px; }
body.admin-theme-blue .cmp-ml-w80 { width: 80px; }
body.admin-theme-blue .cmp-ml-w90 { width: 90px; }
body.admin-theme-blue .cmp-ml-w100 { width: 100px; }
body.admin-theme-blue .cmp-ml-w110 { width: 110px; }
body.admin-theme-blue .cmp-ml-w120 { width: 120px; }
body.admin-theme-blue .cmp-ml-w130 { width: 130px; }
body.admin-theme-blue .cmp-ml-w140 { width: 140px; }
body.admin-theme-blue .cmp-ml-w150 { width: 150px; }
/* Pagamentos a lancar (15/10/2026, mockup 9): numero da ordem e valor sem quebrar; no
   celular o "o que falta" desce para baixo da compra */
body.admin-theme-blue .cmp-ml-nowrap { white-space: nowrap; }
body.admin-theme-blue .cmp-ml-falta-xs { margin-top: 4px; }
/* Trocar cartao (16/10/2026, compras-ml-trocar-cartao): cartao atual e troca numa linha que quebra */
body.admin-theme-blue .cmp-ml-tc { margin-top: 4px; white-space: normal; word-break: break-word; }
body.admin-theme-blue .cmp-ml-tc .btn { margin-left: 6px; }
/* janela aberta por cima de outra (Trocar cartao sobre o Resumo da compra): um degrau acima */
.modal.tsw-modal-sobre { z-index: 1060; }
.modal-backdrop.tsw-modal-sobre { z-index: 1055; }
/* tabela de parcelas da janela de troca: sem a margem de 20px que sobrava dentro da caixa */
#modalMlTrocaCartao .table-responsive .table { margin-bottom: 0; }
body.admin-theme-blue .cmp-ml-w180 { width: 180px; }
body.admin-theme-blue .cmp-ml-w200 { width: 200px; }
/* #left ul.nav li .sign (style.css:2137) tem id e vence classe: os vizinhos usam style inline */
#left ul.nav li .sign.cmp-ml-sign { width: 29px; }
/* janela "Ligar a uma nota": a frase do topo (era style inline; na ordem do ML diz pedido/loja/valor) */
#vnIntro.cmp-vn-intro { font-size: 13px; }
/* lista de ordens: ordem so do ML nao tem o status da cotacao acima, entao a 1a linha nao leva o tracejado */
body.admin-theme-blue td > .acomp-linha:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ====================================================================
   CONFIGURACOES > BOLETOS > BANCOS LIBERADOS (15/10/2026, openspec
   recebimento-bancos-liberados). Faixa de pesquisa/acoes e colunas curtas.
   ==================================================================== */
#page-bancos-liberados .bl-faixa { padding: 10px 0 0; margin-bottom: 10px; }
#page-bancos-liberados .bl-faixa input.pesquisa { padding-left: 35px; }
#page-bancos-liberados .bl-faixa .bl-acoes { text-align: right; }
#page-bancos-liberados .bl-faixa .bl-acoes .btn { margin-left: 5px; }
#page-bancos-liberados .bl-col-curta { width: 90px; }
#page-bancos-liberados td.bl-ck { text-align: center; }
#page-bancos-liberados td.bl-ck input { margin: 0; cursor: pointer; }
@media (max-width: 767px) {
    #page-bancos-liberados .bl-faixa .bl-acoes { text-align: left; margin-top: 10px; }
    #page-bancos-liberados .bl-faixa .bl-acoes .bl-contador { display: block; margin-bottom: 5px; }
    #page-bancos-liberados .bl-faixa .bl-acoes .btn { margin: 0 5px 5px 0; }
}

/* ====================================================================
   CONFIGURACOES > CADASTROS > CONTAS DA EMPRESA (19/10/2026, openspec
   contas-da-empresa). Faixa de pesquisa/filtros, colunas curtas e linha
   desligada em texto apagado (sem fundo colorido).
   ==================================================================== */
#page-contas-empresa legend .btn { margin-top: -5px; }
#page-contas-empresa .ce-faixa { padding: 10px 0 0; margin-bottom: 5px; }
#page-contas-empresa .ce-faixa input.pesquisa { padding-left: 35px; }
#page-contas-empresa .ce-faixa .ce-acoes { text-align: right; }
#page-contas-empresa .ce-faixa .chip-estado { display: inline-block; margin: 0 0 5px 5px; cursor: pointer; }
#page-contas-empresa .ce-col-cod { width: 80px; }
#page-contas-empresa .ce-col-curta { width: 80px; }
#page-contas-empresa .ce-col-media { width: 105px; }
#page-contas-empresa td.ce-ck { text-align: center; white-space: nowrap; }
#page-contas-empresa td.ce-ck input { margin: 0; cursor: pointer; }
#page-contas-empresa .ce-receb-msg { display: block; font-size: 11px; }
#page-contas-empresa tr.ce-desligada td.ce-nome { color: var(--admin-theme-text-faint); }
@media (max-width: 767px) {
    /* O BS3 poe white-space:nowrap em toda celula de .table-responsive no celular: o nome
       da conta ficava numa linha so e empurrava Tipo/Recebimento para fora (QA 19/10/2026). */
    /* Nome que comeca com "ZZZZ..." sem espaco nao quebrava e alargava a tabela para 523px. */
    #page-contas-empresa .table-responsive > .table > tbody > tr > td.ce-nome { white-space: normal; overflow-wrap: anywhere; word-break: break-word; min-width: 100px; }
    #page-contas-empresa .table-responsive > .table > thead > tr > th { white-space: normal; }
    #page-contas-empresa .ce-col-media, #page-contas-empresa .ce-col-curta { width: auto; }
    #page-contas-empresa .ce-faixa .ce-acoes { text-align: left; margin-top: 10px; }
    #page-contas-empresa .ce-faixa .chip-estado { margin: 0 5px 5px 0; }
}

/* Configuracoes > Boletos > Parametros conta / Parametros banco (19/10/2026): o multiselect nasce
   com buttonWidth 330px (configuracao.phtml) e o texto centralizado sem reticencias. Nome comprido
   passava da caixa: no celular (coluna de 322px) saia pelos dois lados e o "[id]" sumia. Mesmo
   padrao de "Selecione a Empresa" (custom.css): cabe na coluna, texto a esquerda, reticencias. */
#page-contas label, #page-bancos label,
#page-contas .multiselect-native-select > .btn-group, #page-bancos .multiselect-native-select > .btn-group,
#page-contas .btn-group > .multiselect, #page-bancos .btn-group > .multiselect { max-width: 100%; }
#page-contas .btn-group > .multiselect, #page-bancos .btn-group > .multiselect { text-align: left; }
#page-contas .multiselect .multiselect-selected-text, #page-bancos .multiselect .multiselect-selected-text {
    display: inline-block; max-width: calc(100% - 14px); overflow: hidden; text-overflow: ellipsis; vertical-align: top;
}
/* No celular a lista aberta crescia pelo nome mais longo (548px numa tela de 390) e a pagina
   ganhava rolagem lateral; fica na largura do campo e quebra a linha (padrao do Contas a pagar). */
@media (max-width: 767px) {
    #page-contas .multiselect-container, #page-bancos .multiselect-container { max-width: 100%; min-width: 0; }
    #page-contas .multiselect-container > li > a > label, #page-bancos .multiselect-container > li > a > label { white-space: normal; }
    /* O botao vira inline-flex centralizado no celular (alvo de toque, linha ~3287): texto a
       esquerda como no desktop e a seta encostada na direita. */
    #page-contas .btn-group > .multiselect, #page-bancos .btn-group > .multiselect { justify-content: flex-start; }
    #page-contas .btn-group > .multiselect .caret, #page-bancos .btn-group > .multiselect .caret { margin-left: auto; }
}

/* Janela Incluir recebimento (15/10/2026): os seletores com busca (banco do cheque e
   Vincular pedido) ocupam a largura da propria coluna, sem cobrir a foto nem passar da janela. */
#modal-incluir-recebimento .dados-cheque .col-lg-2 > span { display: block; width: 100%; float: none !important; }
#modal-incluir-recebimento .dados-cheque .col-lg-2 .btn-group,
#modal-incluir-recebimento .vincular-pedido-wrap .btn-group { display: block; width: 100%; }
#modal-incluir-recebimento .dados-cheque .col-lg-2 .btn-group .multiselect,
#modal-incluir-recebimento .vincular-pedido-wrap .btn-group .multiselect { overflow: hidden; text-overflow: ellipsis; }
/* 19/10/2026 (QA antes x depois): a regra da linha da janela poe max-width 12% em TODO
   .col-lg-2 da lista -- o banco do cheque ficava com 39px (12% do bloco) e o seletor
   acima, que agora respeita a coluna, mostrava so "1...". A coluna do banco volta aos 50%
   do bloco. No celular o bloco do cheque ocupa a linha inteira, como juros/multa. */
#modal-incluir-recebimento #lista-lancamentos .dados-cheque .col-lg-2 { max-width: 50%; }
/* 19/10/2026: o bootstrap-multiselect esconde o select nativo 30px abaixo da caixa (top:30px).
   Na ultima linha do bloco (banco do cheque) ele sobrava 21px; o bloco tem overflow-x:auto
   (grade de 920px no celular), o que liga tambem a rolagem vertical, e qualquer rolagem ali
   escondia o botao "Gerar parcelas" sob a borda de cima. O select escondido fica no topo da caixa. */
#modal-incluir-recebimento #lista-lancamentos span.multiselect-native-select select { top: 0; }
@media (max-width: 767px) {
    #modal-incluir-recebimento #lista-lancamentos .lista-de-lancamentos .dados-cheque:not(.hide) {
        width: 100% !important; max-width: 100% !important; flex: none !important;
        display: flex !important; gap: 4px; padding: 2px 0;
    }
    #modal-incluir-recebimento #lista-lancamentos .lista-de-lancamentos .dados-cheque .col-lg-1:not(.fileUpload) {
        flex: 0 0 30% !important; width: 30% !important; max-width: 30% !important;
    }
    #modal-incluir-recebimento #lista-lancamentos .lista-de-lancamentos .dados-cheque .col-lg-2 {
        flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0;
    }
    #modal-incluir-recebimento #lista-lancamentos .lista-de-lancamentos .dados-cheque .fileUpload {
        flex: 0 0 44px !important; width: 44px !important; max-width: 44px !important;
    }
}

/* DISPAROS DE E-MAIL DE BOLETOS (16/10/2026, openspec boletos-email-automatico).
   Lista de boletos com o envio manual em lote: resumo em faixa de texto (sem caixa),
   sub-linha do e-mail de destino e a barra de envio presa no rodape quando ha marcados. */
body.admin-theme-blue .tsw-eb-sem-recuo { padding-left: 0; }
body.admin-theme-blue #frmRelEmailsBoletos .control-label { margin-bottom: 5px; font-weight: 600; }
body.admin-theme-blue #frmRelEmailsBoletos > div { margin-bottom: 10px; }
body.admin-theme-blue .tsw-eb-carregando { padding: 20px; }
body.admin-theme-blue .tsw-eb-resumo { padding: 5px 0 10px; color: var(--admin-theme-text-soft); }
body.admin-theme-blue .tsw-eb-resumo strong { color: var(--admin-theme-text); }
body.admin-theme-blue .tsw-eb-sub { display: block; color: var(--admin-theme-text-soft); font-size: 11px; }
/* bottom 40px na barra de lote: o rodape fixo (.admin-shell-footer, z-index 1001) tem ~40px e cobria os botoes (QA 16/10). */
body.admin-theme-blue .tsw-eb-sub.text-danger { color: var(--admin-theme-danger); }
body.admin-theme-blue .tools a.tsw-eb-config { letter-spacing: 0; }
body.admin-theme-blue .tsw-eb-col-marca { width: 30px; }
body.admin-theme-blue .tsw-eb-col-acoes { width: 110px; white-space: nowrap; }
/* Janela do PDF do boleto (16/10/2026, boletos-email-pdf-e-extrato): mesma medida da "Arquivo do recebimento" do Contas a receber. */
body.admin-theme-blue .tsw-eb-pdf-dialog { width: 800px; max-width: calc(100vw - 20px); }
body.admin-theme-blue .tsw-eb-pdf-barra { margin-bottom: 10px; }
body.admin-theme-blue .tsw-eb-pdf-barra .btn { margin-right: 5px; }
body.admin-theme-blue .tsw-eb-pdf-barra .tsw-eb-sub { display: inline; margin-left: 5px; }
body.admin-theme-blue .tsw-eb-pdf-palco { border: 1px solid var(--admin-theme-border); background: var(--admin-theme-surface); min-height: 520px; }
@media (max-width: 767px) {
    body.admin-theme-blue .tsw-eb-pdf-dialog { width: auto; margin: 5px; }
    body.admin-theme-blue .tsw-eb-pdf-palco { min-height: 360px; }
}
body.admin-theme-blue .tsw-eb-label-quebra { white-space: normal; display: inline-block; text-align: left; }
body.admin-theme-blue .tsw-eb-barra-lote { display: none; position: sticky; bottom: 40px; z-index: 50; margin: 10px -15px -15px; padding: 10px 15px; text-align: right;
    background: var(--admin-theme-surface); border-top: 2px solid var(--admin-theme-primary); }
body.admin-theme-blue .tsw-eb-barra-lote.tsw-eb-barra-on { display: block; }
body.admin-theme-blue .tsw-eb-barra-lote .btn { margin-left: 10px; }
body.admin-theme-blue .tsw-eb-barra-lote .tsw-eb-qtd { float: left; line-height: 30px; font-weight: 700; color: var(--admin-theme-text); }
@media (max-width: 767px) {
    body.admin-theme-blue .tsw-eb-barra-lote { text-align: left; }
    body.admin-theme-blue .tsw-eb-barra-lote .tsw-eb-qtd { float: none; display: block; }
    body.admin-theme-blue .tsw-eb-barra-lote .btn { margin: 5px 10px 0 0; }
    /* table-responsive do BS3 poe nowrap nas celulas: o e-mail longo empurrava o Resultado para fora. */
    body.admin-theme-blue .table-responsive td.tsw-eb-quebra { white-space: normal; word-break: break-all; min-width: 140px; }
}
body.admin-theme-blue .tsw-eb-btn-extrato { height: 33px; }

/* ===================================================================== */
/* ORDENS DE COMPRA: coluna Pedido, faixa azul, pecas a vista e inativada  */
/* (16/10/2026, openspec compras-ordens-pecas-a-vista-e-inativar)           */
/* A faixa azul na linha de cada ordem e EXCECAO pedida pelo Rafael a regra */
/* "sem fundo colorido em linha" (DESIGN.md): separa uma ordem da outra.    */
/* ===================================================================== */
body.admin-theme-blue .oc-tabela .oc-col-acoes { width: 40px; }
body.admin-theme-blue .oc-tabela .oc-col-num { width: 132px; }
body.admin-theme-blue .oc-tabela .oc-col-itens { width: 56px; }
body.admin-theme-blue .oc-tabela .oc-col-forn { width: 230px; }
body.admin-theme-blue .oc-tabela .oc-col-status { width: 150px; }
body.admin-theme-blue .oc-tabela .oc-col-data { width: 120px; }
body.admin-theme-blue .oc-tabela > tbody > tr.linha-ordem > td {
  background: var(--admin-theme-primary-soft);
  border-top: 3px solid var(--admin-theme-primary);
}
body.admin-theme-blue .oc-tabela > tbody > tr.linha-ordem.oc-inativa > td {
  background: var(--admin-theme-surface-alt);
  border-top-color: var(--tsw-st-cinza);
  color: var(--admin-theme-text-soft);
}
body.admin-theme-blue .oc-acoes .btn { display: block; width: 26px; margin: 0 auto 5px; padding-left: 0; padding-right: 0; }
body.admin-theme-blue .oc-ped { font-weight: 700; }
body.admin-theme-blue .oc-sub { display: block; color: var(--admin-theme-text-soft); font-size: 12px; }
body.admin-theme-blue .oc-sub strong { color: var(--admin-theme-text); }
body.admin-theme-blue .oc-num-xs { font-weight: 700; }
body.admin-theme-blue .oc-cod { color: var(--admin-theme-text-soft); font-size: 11px; margin-left: 5px; }
body.admin-theme-blue .oc-inativa-faixa { display: block; color: var(--admin-theme-warn); font-size: 12px; }
body.admin-theme-blue .oc-label-quebra { display: inline-block; white-space: normal; text-align: left; }
body.admin-theme-blue .oc-tabela > tbody > tr.oc-pecas-linha > td { padding: 0 5px 5px; border-top: 0; background: var(--admin-theme-surface); }
body.admin-theme-blue .oc-pecas { max-height: 160px; overflow-y: auto; border: 1px solid var(--admin-theme-border); border-radius: 4px; }
body.admin-theme-blue .oc-pecas .table { margin: 0; }
body.admin-theme-blue .oc-pecas .table > thead > tr > th { position: sticky; top: 0; z-index: 1; background: var(--admin-theme-surface-alt); }
body.admin-theme-blue .oc-pecas .table > thead > tr > th,
body.admin-theme-blue .oc-pecas .table > tbody > tr > td,
body.admin-theme-blue .oc-pecas .table > tfoot > tr > td { padding: 3px 10px; font-size: 12px; }
body.admin-theme-blue .oc-pecas .oc-col-qtd { width: 70px; }
body.admin-theme-blue .oc-pecas .oc-col-valor { width: 100px; }
body.admin-theme-blue .oc-pecas-total { color: var(--admin-theme-text-soft); }
/* frete e total ficam sempre a vista no pe do quadro, mesmo com rolagem (QA 16/10/2026, R1) */
body.admin-theme-blue .oc-pecas .table > tfoot > tr > td { position: sticky; bottom: 0; z-index: 1; background: var(--admin-theme-surface-alt); }
body.admin-theme-blue .tsw-ml-trz-msg .alert { margin: 10px 0 0; }
@media (max-width: 767px) {
  /* table-responsive do BS3 poe nowrap e o Status tinha 150px fixos: a tabela passava de 390
     e cortava o Subtotal e o Total (QA 16/10/2026, T7). No celular tudo quebra linha e cabe. */
  body.admin-theme-blue .table-responsive .oc-tabela td.oc-cel-pedido,
  body.admin-theme-blue .table-responsive .oc-tabela td.oc-cel-status,
  body.admin-theme-blue .table-responsive .oc-pecas td,
  body.admin-theme-blue .table-responsive .oc-pecas-total { white-space: normal; }
  body.admin-theme-blue .oc-tabela .oc-col-status { width: 110px; }
  body.admin-theme-blue .oc-pecas .oc-col-qtd { width: 55px; }
  body.admin-theme-blue .oc-pecas .oc-col-valor { width: 85px; }
}

/* ===========================================================================
   PAGAMENTO DA COMPRA DO ML NA ORDEM E NA LISTA (17/10/2026, openspec
   compras-ml-pagamento-na-ordem). Topo da ordem, linha na lista e a trava da
   entrada. So variaveis do tema; nenhuma cor nova.
   =========================================================================== */
body.admin-theme-blue .ml-pag-bloco { white-space: normal; word-break: break-word; }
body.admin-theme-blue .ml-pag-bloco .label { margin-right: 4px; }
body.admin-theme-blue .ml-pag-bloco a.small { margin-left: 6px; white-space: nowrap; }
body.admin-theme-blue .ml-pag-acoes { margin-top: 4px; }
body.admin-theme-blue .ml-pag-acoes .btn,
body.admin-theme-blue .ml-pag-acoes .label { margin: 0 6px 4px 0; }
body.admin-theme-blue .ml-pag-acoes .label.ml-pag-cap { white-space: normal; display: inline-block; text-align: left; }
body.admin-theme-blue .oc-pag { display: block; font-size: 12px; margin-top: 2px; color: var(--admin-theme-text); }
body.admin-theme-blue .ml-pag-trava { margin: 6px 0 2px; line-height: 22px; }
body.admin-theme-blue .ml-pag-trava .btn { margin-left: 6px; }
body.admin-theme-blue .ml-pago-com { font-size: 13px; }
@media (max-width: 767px) {
  body.admin-theme-blue .ml-pag-bloco { margin-top: 8px; }
  body.admin-theme-blue .ml-pag-trava .btn { display: inline-block; margin: 4px 0 0; }
}

/* ===== Contas a pagar: filtro rapido Todas / Bancos / Cartoes + "qual conta" (17/10/2026,
   openspec financeiro-cartao-credito-tipo-conta). Embaixo dos botoes de coluna; o select
   fica ao lado no desktop e numa linha propria no celular. ===== */
body.admin-theme-blue .cap-filtro-tipo { margin: 6px 0 4px; }
body.admin-theme-blue .cap-filtro-tipo .btn-group { vertical-align: middle; }
body.admin-theme-blue .cap-filtro-tipo #conta_filtro { display: inline-block; width: 320px; max-width: 100%; height: 30px; min-height: 30px; padding: 4px 8px; margin-left: 8px; vertical-align: middle; }
@media (max-width: 767px) {
  body.admin-theme-blue .cap-filtro-tipo .btn-group { display: flex; }
  body.admin-theme-blue .cap-filtro-tipo .btn-group .btn { flex: 1 1 auto; min-height: 40px; }
  body.admin-theme-blue .cap-filtro-tipo #conta_filtro { display: block; width: 100%; margin: 6px 0 0; font-size: 16px; height: 40px; min-height: 40px; }
}

/* "Aguarde" das listas de contas: o overflow-y que estava em style="" no #modalAguarde (22/10/2026).
   :not(.fade) = so Contas a pagar/receber (as unicas sem fade); remessas/retornos ficam como estao. */
body.admin-theme-blue #modalAguarde:not(.fade) { overflow-y: auto; }

/* ===== Contas a pagar / a receber: select "Vencimento" (22/10/2026, openspec
   contas-data-vencimento-coluna-filtro, porte do Fortal). Na linha dos botoes de coluna (.options,
   com float), e nao ao lado do Todas/Bancos/Cartoes: la o #conta_filtro de 320px estourava a linha. ===== */
body.admin-theme-blue .contas-filtro-venc { float: left; margin: 2px 0 2px 8px; }
body.admin-theme-blue .contas-filtro-venc label { margin: 0 6px 0 0; font-weight: 600; vertical-align: middle; }
body.admin-theme-blue .contas-filtro-venc #vencimento_filtro { display: inline-block; width: 140px; height: 30px; min-height: 30px; padding: 4px 8px; vertical-align: middle; }
@media (max-width: 767px) {
  body.admin-theme-blue .contas-filtro-venc { float: none; clear: both; margin: 6px 0 0; padding-top: 4px; }
  body.admin-theme-blue .contas-filtro-venc label { display: block; margin-bottom: 4px; }
  body.admin-theme-blue .contas-filtro-venc #vencimento_filtro { display: block; width: 100%; font-size: 16px; height: 40px; min-height: 40px; }
}

/* ===== Contas a pagar / a receber: setas "Ir para o comeco" / "Ir para o fim" (22/10/2026).
   Dentro da faixa do rodape fixo (.admin-shell-footer, z-index 1001), no canto ESQUERDO: a direita
   ja tem a pilha de botoes redondos (#menu) e o Chat. No rodape nada da lista passa por baixo. ===== */
body.admin-theme-blue .contas-nav-rolagem { position: fixed; left: 8px; bottom: 2px; z-index: 1030; }
body.admin-theme-blue .contas-nav-rolagem .btn { width: 36px; height: 36px; padding: 0; margin-right: 4px; }
@media (max-width: 991px) {
  /* O texto do rodape comeca depois das setas e fica numa linha so (sem isto o recuo quebrava o
     texto em 2 linhas e o rodape fixo dobrava de altura por cima da lista -- defeito pego no Fortal). */
  body.admin-theme-blue:has(.contas-nav-rolagem:not(.hide)) .footer-section.admin-shell-footer { padding-left: 92px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 767px) {
  /* Celular: a politica de alvo de toque (bloco "Alvo de toque e POLITICA" acima) poe todo .btn com 44px,
     entao as setas medem 44, nao 36 -- QA 22/10: elas subiam 9px sobre a lista e cobriam o "C" do texto.
     O rodape (36,7px) cresce para 48px so com as setas visiveis, e o texto comeca depois delas
     (8 + 44 + 4 + 44 + 8 = 108px). Numa linha so o texto era cortado em "2026 |..." (QA 22/10, Chrome 390):
     ele quebra em ate 2 linhas de 14px dentro dos 48px (10 + 28 + 10), sem "..." e sem crescer o rodape. */
  body.admin-theme-blue .contas-nav-rolagem .btn { width: 44px; height: 44px; }
  body.admin-theme-blue:has(.contas-nav-rolagem:not(.hide)) .footer-section.admin-shell-footer { padding-left: 108px; min-height: 48px; line-height: 14px; white-space: normal; text-overflow: clip; display: flex; align-items: center; }
}

/* Contas a pagar, painel de filtros no celular: a lista do campo Conta (bootstrap-multiselect)
   cresce pelo nome mais longo e passava da borda da tela; fica na largura do campo e quebra a linha. */
@media (max-width: 767px) {
  body.admin-theme-blue .cap-filtro-conta .multiselect-container { max-width: 100%; min-width: 0; }
  body.admin-theme-blue .cap-filtro-conta .multiselect-container > li > a > label { white-space: normal; }
}

/* ===== Contas a pagar / a receber: celula "D. Criacao" com data, hora e quem lancou
   (18/10/2026, openspec contas-criacao-com-usuario). Duas linhas (data no tamanho da tabela + 10px, linha de 11px)
   na altura de UMA linha de texto, e a coluna na largura da DATA, como antes: a 2a linha tem
   width:0 (nao alarga a coluna) e usa 4px do padding; o que passar ganha "...", o nome
   completo esta no title. A data NAO pode ter fonte menor: a coluna estreitava 80->74,7px e o
   titulo "D. Criacao" quebrava em 2 linhas (cabecalho 33->48px, QA 18/10/2026). ===== */
body.admin-theme-blue .tsw-criacao { display: inline-block; white-space: nowrap; line-height: 11px; vertical-align: top; }
body.admin-theme-blue .tsw-criacao-quem { display: block; width: 0; min-width: calc(100% + 4px); overflow: hidden; text-overflow: ellipsis; font-size: 10px; line-height: 11px; letter-spacing: -0.4px; color: var(--admin-theme-text-soft); }
/* Despesa que veio de uma guia do NF-e (30/10/2026): o nome de quem lancou la, em azul e negrito. */
body.admin-theme-blue .tsw-criacao-nfe { font-weight: 700; color: var(--admin-theme-primary); }
/* Celular (bloco por conta): as mesmas duas linhas, alinhadas a direita como os outros valores.
   Numa linha so ("data hora NOME") passava 9-17px da borda do bloco (QA 18/10/2026, 390px). */
@media (max-width: 767px) {
  body.admin-theme-blue .tsw-criacao { text-align: right; line-height: 16px; }
  body.admin-theme-blue .tsw-criacao-quem { width: auto; min-width: 0; font-size: 12px; line-height: 16px; letter-spacing: 0; }
}

/* Configuracoes > Email / Envio de Boletos > "Envio pelo WhatsApp no chat" (21/10/2026):
   a lista de usuarios da janela "Dar acesso" rola dentro dela, como a .pc-res. */
body.admin-theme-blue .tsw-envio-acesso-lista { margin: 8px 0; max-height: 300px; overflow-y: auto; border: 1px solid var(--admin-theme-border); border-radius: 4px; }
body.admin-theme-blue .tsw-envio-acesso-lista .table { margin-bottom: 0; }
body.admin-theme-blue #tbl-chat-envio-disponiveis tbody tr { cursor: pointer; }
body.admin-theme-blue #tbl-chat-envio-disponiveis td:first-child { width: 36px; }

/* RAT, abas no celular (22/10/2026, Rafael: "igual o antigo"): uma aba por linha, na largura
   toda, como o TSW antigo empilhava. Soltas, as 8 abas quebravam numa grade irregular
   (2-3 por linha conforme o tamanho do nome). Desktop continua numa linha so. */
@media (max-width: 767px) {
  body.admin-theme-blue #abas-rat > li { float: none; display: block; margin: 0 0 4px; }
  body.admin-theme-blue #abas-rat > li:last-child { margin-bottom: 0; }
  body.admin-theme-blue #abas-rat > li > a { display: block; margin-right: 0; min-height: 44px; line-height: 24px; }
}

/* Seletor TSW <-> Telplastic SP (plano mestre, 22/10/2026), o mesmo do SP. So existe no cabecalho de quem tem
   o acesso "os dois" (classe --seletor no header). No celular o cabecalho vira grade de 2 linhas:
   logo e usuario na 1a (o usuario encolhe como sem o seletor) e o seletor centralizado na 2a.
   Sem o seletor, nada daqui se aplica. */
@media (max-width: 767px) {
  body.admin-theme-blue .admin-shell-header--seletor {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }
  body.admin-theme-blue .admin-shell-header--seletor .admin-shell-brand {
    grid-column: 1;
    grid-row: 1;
  }
  body.admin-theme-blue .admin-shell-header--seletor .admin-shell-topnav {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    margin-top: 0 !important;
  }
  body.admin-theme-blue .admin-shell-header--seletor .admin-shell-seletor {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: auto !important;
    float: none !important;
    margin: 8px 0 0 0 !important;
  }
  /* O tema esconde o .username do topo no celular (o nome do usuario vai para dentro do menu).
     No seletor o texto e o nome do SISTEMA e tem de aparecer, como no SP (QA 22/10/2026). */
  body.admin-theme-blue .admin-shell-header--seletor .admin-shell-seletor .username {
    display: inline;
  }
}
/* O menu do seletor abre a partir da ESQUERDA do botao: a setinha do tema fica a 9% da esquerda
   (.top-menu .dropdown-menu:before) e, com o menu alinhado pela direita (style.css:116), apontava
   para longe do botao (QA 22/10/2026). */
body.admin-theme-blue .admin-shell-seletor li.dropdown .dropdown-menu {
  left: 0;
  right: auto;
}
/* ===== ORIGEM "SP n. 000301" NAS LISTAS DE CONTAS (24/10/2026, openspec financeiro-sp-no-tsw,
   elemento 3 do mockup aprovado). Etiqueta com texto, nas cores do tema; so no desktop
   (a celula e hidden-xs). Helper/OrigemSp.php. ===== */
body.admin-theme-blue .tsw-origem { display: inline-block; padding: 1px 6px; border: 1px solid var(--admin-theme-border); border-radius: 3px; background-color: var(--admin-theme-primary-soft); color: var(--admin-theme-primary); font-size: 11px; font-weight: 600; white-space: nowrap; }
/* Lancado no TSW (pedido do Rafael, 24/10/2026): "TSW" neutro, para o "SP #" se destacar. */
body.admin-theme-blue .tsw-origem--tsw { background-color: var(--admin-theme-mute-bg); color: var(--admin-theme-text-soft); }
/* Copia do SP (24/10/2026, openspec financeiro-sp-no-tsw): o resumo nao estica na tela larga (mockup: 720px). */
body.admin-theme-blue .tsw-copia-resumo { max-width: 720px; }
/* ===== JANELA "CONFERIR ANTES DE CONCILIAR" (26/10/2026, openspec conciliacao-confirmar-fora-da-data,
   mockup aprovado). No celular a tabela rola de lado dentro do .table-responsive em vez de espremer
   a descricao palavra por palavra; as etiquetas de motivo quebram linha. modal-pares-outra-conta.phtml. ===== */
body.admin-theme-blue #modal-pares-outra-conta .conf-col-desp { min-width: 230px; }
body.admin-theme-blue #modal-pares-outra-conta .conf-col-motivo { min-width: 190px; }
body.admin-theme-blue #modal-pares-outra-conta .conf-col-motivo .label { display: inline-block; white-space: normal; text-align: left; line-height: 1.4; }
/* O BS3 poe white-space:nowrap nas celulas da .table-responsive abaixo de 768px (bootstrap.css): sem isto a descricao corta. */
body.admin-theme-blue #modal-pares-outra-conta .table > tbody > tr > td.conf-col-desp,
body.admin-theme-blue #modal-pares-outra-conta .table > tbody > tr > td.conf-col-motivo { white-space: normal; }
/* A seta de troca de conta fica na mesma linha da etiqueta da conta que pagou (mockup, elemento C). */
body.admin-theme-blue #modal-pares-outra-conta td.conf-col-pagou { white-space: nowrap; }
/* ===== GIRO DO PRODUTO (30/10/2026, openspec giro-produto-compras, mockup aprovado pelo Rafael em
   30/10/2026: "mais colorido, seguindo o padrao do site"). Vale em todo lugar que abre o giro: lupa e
   janela de criar ordem em Compras, Cotacao e Cadastros > Produtos (pergunta 5 do mockup). So tokens do
   tema; a sombra e os raios sao os do proprio tema (--admin-theme-shadow-soft / --admin-theme-radius-*).
   Telas: Utilitarios/giro_produtos.phtml, giro_produtos_detalhe.phtml, Compras/giro_faixa_compra.phtml. ===== */
/* (1) a janela: cabecalho no verde do topo do site, corpo no azul-claro do tema */
body.admin-theme-blue .gp-modal .modal-content { overflow: hidden; border-radius: var(--admin-theme-radius-md); }
body.admin-theme-blue .gp-modal .modal-header {
  background: linear-gradient(135deg, var(--admin-theme-brand-green-dark), var(--admin-theme-brand-green-soft));
  border-bottom: 0; padding: 14px 20px; color: var(--admin-theme-surface);
}
body.admin-theme-blue .gp-modal .modal-title { color: var(--admin-theme-surface); font-weight: 700; }
body.admin-theme-blue .gp-modal .modal-title small { color: var(--admin-theme-surface); opacity: .85; font-weight: normal; }
body.admin-theme-blue .gp-modal .modal-header .close { color: var(--admin-theme-surface); opacity: .9; text-shadow: none; }
body.admin-theme-blue .gp-modal .modal-body { background: var(--admin-theme-surface-alt); padding: 16px 18px; }
body.admin-theme-blue .gp-modal .modal-footer { background: var(--admin-theme-surface); border-top: 1px solid var(--admin-theme-border); }
/* linha do produto */
body.admin-theme-blue .gp-prod { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
body.admin-theme-blue .gp-prod h4 { margin: 0; color: var(--admin-theme-primary-dark); font-weight: 800; font-size: 17px; word-break: break-word; }
body.admin-theme-blue .gp-prod h4 .gp-cod { color: var(--admin-theme-primary); }
/* (2)-(6) faixa de compra: uma linha, cada numero com o icone e a cor do que ele e */
body.admin-theme-blue .gp-faixa {
  display: flex; flex-wrap: wrap; background: var(--admin-theme-surface); border: 1px solid var(--admin-theme-border);
  border-radius: var(--admin-theme-radius-sm); box-shadow: var(--admin-theme-shadow-soft); margin-bottom: 8px; overflow: hidden;
}
body.admin-theme-blue .gp-faixa > div { flex: 1 1 0; min-width: 128px; padding: 10px 12px; border-right: 1px solid var(--admin-theme-border); border-top: 4px solid transparent; }
body.admin-theme-blue .gp-faixa > div:last-child { border-right: 0; }
body.admin-theme-blue .gp-faixa .gp-lb { display: block; font-size: 11px; font-weight: 700; color: var(--admin-theme-text-soft); text-transform: uppercase; letter-spacing: .3px; }
body.admin-theme-blue .gp-faixa .gp-lb .fa { margin-right: 3px; }
body.admin-theme-blue .gp-faixa strong { display: block; font-size: 19px; line-height: 1.3; }
body.admin-theme-blue .gp-faixa small { display: block; color: var(--admin-theme-text-soft); font-size: 11px; }
body.admin-theme-blue .gp-faixa .gp-k-est { border-top-color: var(--admin-theme-text-soft); }
body.admin-theme-blue .gp-faixa .gp-k-est strong { color: var(--admin-theme-ink); }
body.admin-theme-blue .gp-faixa .gp-k-est.gp-baixo { border-top-color: var(--admin-theme-neg); }
body.admin-theme-blue .gp-faixa .gp-k-est.gp-baixo strong,
body.admin-theme-blue .gp-faixa .gp-k-est.gp-baixo .fa { color: var(--admin-theme-neg); }
body.admin-theme-blue .gp-faixa .gp-k-min { border-top-color: var(--admin-theme-text-soft); }
body.admin-theme-blue .gp-faixa .gp-k-min strong { color: var(--admin-theme-ink); }
body.admin-theme-blue .gp-faixa .gp-k-med { border-top-color: var(--admin-theme-brand-teal); }
body.admin-theme-blue .gp-faixa .gp-k-med strong,
body.admin-theme-blue .gp-faixa .gp-k-med .fa { color: var(--admin-theme-brand-teal); }
body.admin-theme-blue .gp-faixa .gp-k-pre { border-top-color: var(--admin-theme-primary); }
body.admin-theme-blue .gp-faixa .gp-k-pre strong,
body.admin-theme-blue .gp-faixa .gp-k-pre .fa { color: var(--admin-theme-primary); }
body.admin-theme-blue .gp-faixa .gp-k-pag { border-top-color: var(--admin-theme-primary-dark); }
body.admin-theme-blue .gp-faixa .gp-k-pag strong,
body.admin-theme-blue .gp-faixa .gp-k-pag .fa { color: var(--admin-theme-primary-dark); }
body.admin-theme-blue .gp-faixa .gp-k-vem { border-top-color: var(--admin-theme-accent); background: var(--admin-theme-surface-alt); }
body.admin-theme-blue .gp-faixa .gp-k-vem strong { color: var(--admin-theme-primary); }
body.admin-theme-blue .gp-faixa .gp-k-vem .fa { color: var(--admin-theme-accent); }
body.admin-theme-blue .gp-faixa .gp-k-nec { border-top-color: var(--admin-theme-danger); background: var(--admin-theme-danger-bg); }
body.admin-theme-blue .gp-faixa .gp-k-nec strong,
body.admin-theme-blue .gp-faixa .gp-k-nec .fa { color: var(--admin-theme-danger); }
body.admin-theme-blue .gp-faixa .gp-k-nec.gp-ok { border-top-color: var(--admin-theme-brand-green); background: var(--admin-theme-ok-bg); }
body.admin-theme-blue .gp-faixa .gp-k-nec.gp-ok strong,
body.admin-theme-blue .gp-faixa .gp-k-nec.gp-ok .fa { color: var(--admin-theme-brand-green); }
/* a frase da conta */
body.admin-theme-blue .gp-conta {
  font-size: 12.5px; margin: 0 0 12px; padding: 7px 12px; background: var(--admin-theme-surface);
  border-left: 4px solid var(--admin-theme-primary); border-radius: 0 var(--admin-theme-radius-sm) var(--admin-theme-radius-sm) 0; color: var(--admin-theme-ink);
}
/* secoes: um titulo colorido + o conteudo (como os quadros do Fortal) */
body.admin-theme-blue .gp-sec {
  background: var(--admin-theme-surface); border: 1px solid var(--admin-theme-border); border-radius: var(--admin-theme-radius-sm);
  box-shadow: var(--admin-theme-shadow-soft); margin-bottom: 12px; overflow: hidden; min-width: 0;
}
body.admin-theme-blue .gp-sec.is-loading { opacity: .72; }
body.admin-theme-blue .gp-sec-h { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; padding: 9px 14px; font-weight: 700; color: var(--admin-theme-surface); }
body.admin-theme-blue .gp-sec-h .gp-tot { font-weight: 600; font-size: 13px; opacity: .95; }
body.admin-theme-blue .gp-h-azul  { background: linear-gradient(135deg, var(--admin-theme-primary), var(--admin-theme-accent)); }
body.admin-theme-blue .gp-h-verde { background: linear-gradient(135deg, var(--admin-theme-brand-green-dark), var(--admin-theme-brand-green-soft)); }
body.admin-theme-blue .gp-h-teal  { background: linear-gradient(135deg, var(--admin-theme-brand-teal), var(--admin-theme-accent)); }
body.admin-theme-blue .gp-sec .table-responsive { border: 0; margin: 0; box-shadow: none; border-radius: 0; }
body.admin-theme-blue .gp-sec .table { margin: 0; font-size: 12.5px; }
body.admin-theme-blue .gp-sec .table > thead > tr > th { background: var(--admin-theme-primary-soft); color: var(--admin-theme-primary-dark); white-space: nowrap; border-bottom: 1px solid var(--admin-theme-border); text-align: left; }
body.admin-theme-blue .gp-sec .table > tbody > tr > td { text-align: left; vertical-align: middle; }
body.admin-theme-blue .gp-sec td small { display: block; color: var(--admin-theme-text-soft); font-size: 10.5px; }
body.admin-theme-blue .gp-sec .table > tbody > tr > td.text-right,
body.admin-theme-blue .gp-sec .table > thead > tr > th.text-right { white-space: nowrap; text-align: right; }
body.admin-theme-blue .gp-sec .gp-vazio { color: var(--admin-theme-text-soft); text-align: center; padding: 16px; margin: 0; }
body.admin-theme-blue .gp-sec .gp-scroll { max-height: 260px; overflow: auto; -webkit-overflow-scrolling: touch; }
body.admin-theme-blue .gp-chega { color: var(--admin-theme-primary); font-weight: 700; }
body.admin-theme-blue .gp-total { font-weight: 800; color: var(--admin-theme-brand-green-dark); }
body.admin-theme-blue .gp-aud { text-align: right; padding: 8px 14px; font-size: 12px; color: var(--admin-theme-text-soft); background: var(--admin-theme-surface-alt); border-top: 1px solid var(--admin-theme-border); }
body.admin-theme-blue .gp-neg { color: var(--admin-theme-danger); }
/* (7) pilulas e media */
body.admin-theme-blue .gp-pilulas { display: flex; gap: 12px; margin-bottom: 12px; }
body.admin-theme-blue .gp-pilulas > button {
  flex: 1 1 0; text-align: center; border: 0; border-radius: var(--admin-theme-radius-lg); padding: 8px; font-size: 13px;
  color: var(--admin-theme-surface); box-shadow: var(--admin-theme-shadow-soft);
}
body.admin-theme-blue .gp-pilulas > button.gp-p-verde { background: linear-gradient(135deg, var(--admin-theme-brand-green-dark), var(--admin-theme-brand-green-soft)); }
body.admin-theme-blue .gp-pilulas > button.gp-p-azul  { background: linear-gradient(135deg, var(--admin-theme-primary), var(--admin-theme-accent)); }
body.admin-theme-blue .gp-pilulas > button[disabled] { opacity: .6; cursor: default; }
body.admin-theme-blue .gp-media {
  text-align: center; background: linear-gradient(135deg, var(--admin-theme-primary-soft), var(--admin-theme-surface));
  border: 1px solid var(--admin-theme-border); border-radius: var(--admin-theme-radius-sm); padding: 10px; margin-bottom: 12px;
}
body.admin-theme-blue .gp-media .gp-lb { display: block; font-size: 12px; font-weight: 700; color: var(--admin-theme-text-soft); letter-spacing: .4px; text-transform: uppercase; }
body.admin-theme-blue .gp-media strong { display: block; font-size: 22px; color: var(--admin-theme-brand-teal); }
body.admin-theme-blue .gp-media small { color: var(--admin-theme-text-soft); }
/* (8) quadros mes a mes: zebra verde (Compras/Entradas) e azul (Saidas); o mes aberto em verde cheio */
body.admin-theme-blue .gp-grid { display: flex; flex-wrap: wrap; gap: 12px; }
body.admin-theme-blue .gp-grid > .gp-sec { flex: 1 1 220px; }
body.admin-theme-blue .gp-meses { max-height: 250px; overflow-y: auto; padding: 6px 8px; }
body.admin-theme-blue .gp-meses table { width: 100%; }
body.admin-theme-blue .gp-meses td { padding: 7px 10px; font-size: 13px; text-align: left; }
body.admin-theme-blue .gp-meses td.gp-q { text-align: right; white-space: nowrap; }
body.admin-theme-blue .gp-meses td.gp-seta { width: 28px; text-align: center; }
body.admin-theme-blue .gp-meses .giro-mes-btn { background: transparent; border: 0; padding: 0; font-weight: 700; cursor: pointer; }
body.admin-theme-blue .gp-meses-verde tr:nth-child(odd) td { background: var(--admin-theme-ok-bg); }
body.admin-theme-blue .gp-meses-verde .giro-mes-btn { color: var(--admin-theme-brand-green-dark); }
body.admin-theme-blue .gp-meses-azul tr:nth-child(odd) td { background: var(--admin-theme-primary-soft); }
body.admin-theme-blue .gp-meses-azul .giro-mes-btn { color: var(--admin-theme-primary); }
body.admin-theme-blue .gp-meses tr.is-active td { background: var(--admin-theme-brand-green); color: var(--admin-theme-surface); }
body.admin-theme-blue .gp-meses tr.is-active td .giro-mes-btn,
body.admin-theme-blue .gp-meses tr.is-active td .fa { color: var(--admin-theme-surface); }
body.admin-theme-blue .gp-up { color: var(--admin-theme-brand-green); }
body.admin-theme-blue .gp-dn { color: var(--admin-theme-danger); }
/* celular: a faixa em duas colunas, quadros e pilulas um embaixo do outro, tabelas rolam na propria caixa */
@media (max-width: 767px) {
  body.admin-theme-blue .gp-modal .modal-body { padding: 10px; }
  body.admin-theme-blue .gp-faixa > div { flex: 1 1 50%; border-bottom: 1px solid var(--admin-theme-border); }
  body.admin-theme-blue .gp-grid,
  body.admin-theme-blue .gp-pilulas { flex-direction: column; }
}

/* ===== CONTAS A PAGAR: LANCAMENTOS PARECIDOS AGRUPADOS (30/10/2026, openspec
   cap-agrupar-lancamentos-parecidos, mockup aprovado). Linha-resumo com "+" (treegrid que a
   lista ja usa) para multas da mesma placa, fatura do cartao e tag "Lancar agrupado".
   Helper/CapAgrupamento.php + Contasapagar/lista_contas.phtml. O !important vence a zebra do tema. ===== */
body.admin-theme-blue .js-cap-agrupar { float: left; margin: 2px 0 2px 8px; height: 30px; }
body.admin-theme-blue #tbl-cap-principal tr.cap-grp-resumo > td { background-color: var(--admin-theme-primary-soft) !important; border-top: 2px solid var(--admin-theme-primary); }
body.admin-theme-blue #tbl-cap-principal tr.cap-grp-resumo.cap-grp-alerta > td { background-color: var(--admin-theme-danger-bg) !important; border-top-color: var(--admin-theme-danger); }
body.admin-theme-blue #tbl-cap-principal tr.cap-grp-resumo.cap-grp-alerta > td:first-child { border-left: 4px solid var(--admin-theme-danger) !important; }
body.admin-theme-blue #tbl-cap-principal tr.cap-grp-resumo.cap-grp-pago > td { background-color: var(--admin-theme-ok-bg) !important; border-top-color: var(--admin-theme-ok); }
body.admin-theme-blue #tbl-cap-principal tr.cap-grp-resumo .treegrid-expander { cursor: pointer; color: var(--admin-theme-primary); font-size: 15px; }
body.admin-theme-blue #tbl-cap-principal tr.cap-grp-filha > td { font-size: 12px; }
body.admin-theme-blue #tbl-cap-principal td.cap-grp-valor { white-space: nowrap; } /* QA 30/10: "R$" e o numero quebravam em 2 linhas (R$ 414.920,55) */
body.admin-theme-blue .cap-grp-ico { color: var(--admin-theme-text-soft); margin-right: 4px; }
body.admin-theme-blue .cap-grp-selo { display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.5; padding: 0 7px; border-radius: 3px; margin-left: 6px; white-space: nowrap; vertical-align: 1px; }
body.admin-theme-blue .cap-grp-selo.hoje { background-color: var(--admin-theme-danger); color: var(--admin-theme-surface); }
body.admin-theme-blue .cap-grp-selo.vencida { background-color: var(--admin-theme-neg); color: var(--admin-theme-surface); } /* vermelho escuro ("vinho" do mockup, 30/10/2026) */
body.admin-theme-blue .cap-grp-selo.qtd { background-color: var(--admin-theme-surface); color: var(--admin-theme-text); border: 1px solid var(--admin-theme-border); font-weight: 400; white-space: normal; } /* QA 30/10: sem quebra, "46 lancamentos · ... · 34 pagas" alargava a tabela e a pagina rolava de lado em 1280px */
/* O treegrid poe um expander em TODA linha da coluna Descricao; na conta sem filhas ele e um vao vazio. */
body.admin-theme-blue #tbl-cap-principal .treegrid-expander:not(.fa) { display: none !important; }
@media (min-width: 768px) {
  body.admin-theme-blue #tbl-cap-principal tr.cap-grp-filha > td:nth-child(5) { padding-left: 28px; } /* mockup: filha recuada sob o resumo */
}
@media (max-width: 767px) {
  body.admin-theme-blue .js-cap-agrupar { float: none; clear: both; display: block; width: 100%; height: 40px; margin: 6px 0 0; }
  /* Celula sem dado na linha-resumo some no celular (o rotulo vem por posicao: custom.css). */
  body.admin-theme-blue #tbl-cap-principal tr.cap-grp-resumo > td.cap-grp-vazio { display: none !important; }
  body.admin-theme-blue .cap-grp-selo { white-space: normal; margin: 3px 4px 0 0; }
  body.admin-theme-blue .cap-grp-conteudo { flex: 1 1 auto; min-width: 0; text-align: right; }
  /* QA 30/10: o "+" ficava solto entre o rotulo e o texto, e o resumo virava 5 linhas estreitas.
     "+" na ponta da linha do rotulo; titulo e selos descem para a largura toda. */
  body.admin-theme-blue #tbl-cap-principal tr.cap-grp-resumo > td.cap-grp-desc { flex-wrap: wrap; row-gap: 4px; }
  body.admin-theme-blue #tbl-cap-principal tr.cap-grp-resumo > td.cap-grp-desc .treegrid-indent { display: none; }
  body.admin-theme-blue #tbl-cap-principal tr.cap-grp-resumo > td.cap-grp-desc .treegrid-expander { margin-left: auto; font-size: 20px; }
  body.admin-theme-blue #tbl-cap-principal tr.cap-grp-resumo > td.cap-grp-desc .cap-grp-conteudo { flex: 1 1 100%; }
}

/* ===== CONCILIACAO MANUAL DE PAGAMENTOS (31/10/2026, openspec conciliacao-manual-pagamentos; mockup aprovado) =====
   Janela jl-verde (topo azul, abas em faixa) do Contas a Pagar. Despesa x linha do banco lado a lado. */
body.admin-theme-blue #modal-conciliacao-manual .modal-dialog { width: 1280px; max-width: 96vw; margin: 20px auto; } /* sem display:block: o tema centraliza com .modal::before (QA 31/10) */
body.admin-theme-blue #modal-conciliacao-manual .modal-content.jl-verde { text-align: left; }
body.admin-theme-blue #modal-conciliacao-manual .modal-content.jl-verde > .modal-header { text-align: center; }
body.admin-theme-blue .cm-resumo { padding: 8px 12px; margin: 10px 0; background: var(--admin-theme-primary-soft); border-radius: 4px; color: var(--admin-theme-primary-dark); }
body.admin-theme-blue .cm-sec { font-weight: 700; color: var(--admin-theme-primary-dark); margin: 10px 0 8px; font-size: 14px; }
body.admin-theme-blue .cm-tab { max-height: 380px; overflow-y: auto; }
body.admin-theme-blue .cm-tab td { vertical-align: middle !important; font-size: 13px; }
body.admin-theme-blue .cm-tab td.cm-desc { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.admin-theme-blue .cm-tab td.cm-ext { max-width: 330px; font-size: 12px; white-space: normal; }
body.admin-theme-blue .cm-tab td.cm-val { white-space: nowrap; }
body.admin-theme-blue .cm-tab td.cm-acao { width: 130px; text-align: center; }
body.admin-theme-blue #cm-pares tr.cm-ativa > td { background-color: var(--admin-theme-warn-bg) !important; font-weight: 600; }
body.admin-theme-blue #cm-pares tr.cm-ativa > td:first-child { border-left: 4px solid var(--tsw-btn-warn-b); }
body.admin-theme-blue #cm-pares tr.cm-ligada > td { background-color: var(--admin-theme-ok-bg) !important; }
body.admin-theme-blue .cm-banco { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 700; border: 1px solid var(--admin-theme-border); color: var(--admin-theme-primary); background: var(--admin-theme-surface-alt); }
body.admin-theme-blue .cm-alvo { padding: 8px 12px; margin-bottom: 8px; border-left: 4px solid var(--tsw-btn-warn-b); background: var(--admin-theme-warn-bg); border-radius: 3px; }
body.admin-theme-blue .cm-filtros .form-control, body.admin-theme-blue .cm-filtros .btn { margin-bottom: 6px; }
body.admin-theme-blue .cm-ext-xs { margin-top: 6px; padding: 4px 6px; background: var(--admin-theme-surface-alt); border-left: 3px solid var(--admin-theme-primary); font-size: 12px; white-space: normal; }
body.admin-theme-blue .cm-dif-ops .radio { display: block; padding: 8px 10px 8px 30px; border: 1px solid var(--admin-theme-border); border-radius: 4px; margin: 0 0 6px; font-weight: 400; }
body.admin-theme-blue .cm-dif-ops .radio.cm-on { border-color: var(--tsw-btn-warn-b); background: var(--admin-theme-warn-bg); }
body.admin-theme-blue .cm-dif-ops .radio.cm-off { opacity: .45; }
body.admin-theme-blue .cm-como-fica { margin-top: 8px; padding: 8px 10px; background: var(--admin-theme-primary-soft); border-radius: 4px; font-size: 13px; }
body.admin-theme-blue .cm-frete-box { display: none; margin-top: 6px; }
body.admin-theme-blue .radio.cm-on .cm-frete-box { display: block; }
body.admin-theme-blue .cm-tab .switch { margin: 0; vertical-align: middle; }
body.admin-theme-blue .cm-fw-normal { font-weight: 400; }
body.admin-theme-blue .cm-mt4 { margin-top: 4px; }
body.admin-theme-blue .cm-mt6 { margin-top: 6px; }
body.admin-theme-blue .cm-mt8 { margin-top: 8px; }
body.admin-theme-blue .cm-mt10 { margin-top: 10px; }
body.admin-theme-blue .cm-mt12 { margin-top: 12px; }
body.admin-theme-blue .cm-mb6 { margin: 0 0 6px; }
body.admin-theme-blue .cm-m0 { margin: 0; }
body.admin-theme-blue .cm-vazio { padding: 24px !important; }
body.admin-theme-blue .cm-w110 { width: 110px; }
body.admin-theme-blue #menu li.cm-fab-li { margin-bottom: 10px; }
/* QA 31/10: o radio do BS3 flutua a esquerda e empurrava a coluna Juros para a direita no celular */
body.admin-theme-blue .cm-dif-ops .cm-op-mais .row { clear: left; }
@media (max-width: 767px) {
  body.admin-theme-blue #modal-conciliacao-manual .modal-dialog { width: 100%; max-width: none; margin: 0; }
  body.admin-theme-blue #modal-conciliacao-manual { padding: 0 !important; }
  /* QA 31/10: a tabela do painel de diferenca nao quebrava o texto e passava da tela */
  body.admin-theme-blue #cm-dif .table-responsive > .table > tbody > tr > td { white-space: normal; }
  body.admin-theme-blue #cm-dif .cm-op-mais .row .small { display: block; }
  body.admin-theme-blue #modal-conciliacao-manual .modal-content { border-radius: 0; }
  body.admin-theme-blue .cm-tab { max-height: none; }
  body.admin-theme-blue #cm-pares td { padding: 6px !important; }
  body.admin-theme-blue .cm-tab.table-responsive > .table > tbody > tr > td.cm-desc { max-width: 195px; white-space: normal; overflow: visible; }
  body.admin-theme-blue .cm-tab.table-responsive > .table > tbody > tr > td.cm-desc small,
  body.admin-theme-blue .cm-tab.table-responsive > .table > tfoot > tr > td { white-space: normal; }
  body.admin-theme-blue .cm-tab.table-responsive > .table > tbody > tr > td.cm-acao { white-space: normal; width: 90px; }
  /* QA 31/10: aviso de lista vazia (Mapas, Ja conciliadas) cortado: o BS3 nao quebra linha em td de .table-responsive */
  body.admin-theme-blue .cm-tab.table-responsive > .table > tbody > tr > td.cm-vazio { white-space: normal; }
  body.admin-theme-blue .cm-tab td.cm-acao .btn { white-space: normal; padding: 4px 6px; }
  body.admin-theme-blue #modal-conciliacao-manual .modal-footer .btn { width: 100%; margin: 4px 0 !important; float: none !important; }
}