/* Tema novo (Fase A) — carregado por ÚLTIMO, depois de components.css e
   print.css, e só sobrescreve aparência. Nenhum id, classe ou estrutura de
   tela muda: remover a linha <link> deste arquivo no index.html devolve o
   visual anterior por inteiro (é o rollback). A especificação visual está em
   design/ (ver design/README.md). */

:root {
  --tn-radius-btn: 11px;
  --tn-gradiente-marca: linear-gradient(155deg, #032047 0%, #07326b 100%);
  --tn-fundo: #eceef0;
}

@media screen {

/* ------------------------------------------------------------- fundo */
body {
  background: var(--tn-fundo);
}
.app-shell {
  position: relative;
  background: var(--tn-fundo);
}
/* Textura de mapa (SP) bem suave. Vai numa camada própria, atrás de tudo,
   porque background-image não aceita opacidade independente. */
.app-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("../img/mapa-sp-textura.png");
  background-size: 21.6px 13.8px;
  background-repeat: repeat;
  opacity: 0.18;
}
.app-shell > .sidebar,
.app-shell > .content,
.app-shell > .app-bottom-bar {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------- barra lateral flutuante */
.sidebar {
  background: transparent;
  box-shadow: none;
  padding: 6px;
  gap: 8px;
}
.sidebar-brand,
.sidebar-nav {
  background: var(--tn-gradiente-marca);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(6, 14, 40, 0.28);
}
.sidebar-brand {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 14px 12px 12px;
}
.sidebar-brand .sub {
  display: none;
}
.sidebar-brand .name {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c3d3f7;
}
.sidebar-nav {
  flex: 0 1 auto;
  padding: 8px 0;
  overflow-x: hidden;
}
/* "Dados no servidor da FL — não ficam neste computador": fora (pedido
   explícito; azul claro sobre o fundo cinza novo também não tinha contraste) */
.sidebar-foot {
  display: none;
}
.nav-item {
  border-radius: 0;
  padding: 6px 20px;
}
/* Item ativo preenche a linha inteira (pedido explícito) */
.nav-item.active {
  border-radius: 0;
}

/* ------------------------------------------------------------- conteúdo */
.content {
  padding: 6px 6px 6px 5px;
}
/* Cabeçalho da tela vira o "cartão de título" */
.content-header {
  position: relative;
  align-items: center;
  margin-bottom: 8px;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.content-icon {
  border-radius: 8px;
}

/* ---------------------------------------------------------------- botões */
button,
.btn-sm {
  border-radius: var(--tn-radius-btn);
}

/* --------------------------------------------------------------- títulos */
.panel-head h2,
.card-head h3,
.panel-simple-head h3,
.section-title {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
}
.section-title {
  border-bottom: none;
  margin: 8px 0;
  padding: 0;
}
.panel-head {
  justify-content: center;
}

/* ------------------------------------------------- containers de cards */
/* Como no design/: os cards de um mesmo bloco ficam num container só (cinza
   claro, faixa azul no topo), a 3 mm de distância entre si na horizontal e
   2 mm na vertical. A grade de cards JÁ é esse container; nenhuma tela muda. */
.stat-grid,
.charts-grid {
  padding: 12px;
  background: #f6f7f9;
  border: 1px solid #dce7f2;
  border-top: 3px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  column-gap: 3mm;
  row-gap: 2mm;
  margin-bottom: 2mm;
}
/* Grade ainda sem cards (o JS preenche depois): sem container vazio */
.stat-grid:empty,
.charts-grid:empty {
  display: none;
}
/* Título logo acima da grade passa a ser o topo do mesmo container */
.section-title:has(+ .stat-grid),
.section-title:has(+ .charts-grid) {
  margin: 0;
  padding: 12px 12px 0;
  background: #f6f7f9;
  border: 1px solid #dce7f2;
  border-bottom: none;
  border-top: 3px solid var(--accent);
  border-radius: 8px 8px 0 0;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.section-title + .stat-grid,
.section-title + .charts-grid {
  margin-top: 0;
  border-top: none;
  border-radius: 0 0 8px 8px;
}
/* A faixa dos cards fixos da tela de Requisições cobre o que rola por baixo */
.view-requests-topo-fixo {
  background: var(--tn-fundo);
}

/* --------------------------------------------------------------- tabelas */
/* Tudo centralizado; só dinheiro fica à direita, para a vírgula alinhar. Quem
   marca `.dinheiro` é js/tema-tabelas.js (lê o texto da célula), porque o
   `.num` do sistema é usado também para contagem, código e data. */
th,
td,
th.num,
td.num {
  text-align: center;
}
th.dinheiro,
td.dinheiro {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Zebrado na LINHA, com especificidade zero (:where). Assim qualquer regra do
   sistema que pinte a linha ou a célula (linha clicada, pendência da
   importação, quantidade excedida na baixa em massa, catálogo selecionado…)
   ganha sem precisar de truque, e não cobre o fundo que o sistema já pintava
   na linha. Pintar as células (como na primeira versão do tema) escondia
   todos esses destaques. */
:where(tbody tr:nth-child(even)) {
  background: #f2f3f5;
}
/* Colunas fixas pintam fundo próprio (para o conteúdo não passar por baixo na
   rolagem) e por isso não herdam o zebrado da linha. */
.matrix tbody tr:nth-child(even) .col-dept,
.doc-grade tbody tr:nth-child(even) td.doc-col-nome {
  background: #f2f3f5;
}
.matrix tbody tr:hover .col-dept {
  background: var(--surface-sunken);
}
/* Linha clicada (enableRowSelection, js/components/tableTools.js) e linha
   marcada no catálogo: o fundo já vem do sistema; aqui entra só o filete, que
   separa do zebrado e continua visível com o mouse em outra linha. */
tbody tr.row-selected td,
.cat-tabela tr.is-selecionada > td {
  box-shadow: inset 0 1px 0 var(--accent-hover), inset 0 -1px 0 var(--accent-hover);
}
tbody tr.row-selected td:first-child,
.cat-tabela tr.is-selecionada > td:first-child {
  box-shadow: inset 3px 0 0 var(--accent-hover), inset 0 1px 0 var(--accent-hover), inset 0 -1px 0 var(--accent-hover);
}

/* ------------------------------------------------- indicadores de situação */
/* Em tabela, o indicador preenche a linha da coluna (todos do mesmo tamanho) */
td .pill {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  border-radius: 6px;
  padding: 4px 9px;
}
/* Situação da requisição */
.pill-pendente { --pill-color: #f59e0b; }
/* Aprovado é VERDE (o mesmo do "Pago"): em azul ficava igual ao Solicitado/Entregue */
.pill-aprovado { --pill-color: var(--success); }
.pill-entregue { --pill-color: #1689e8; }
.pill-rejeitado { --pill-color: #dc2626; }
.pill-cancelado { --pill-color: #4b5563; }
/* Status da ordem de orçamento — paleta do gestor: amarelo = pede atenção,
   azul = ativo sem urgência, verde = fechado, cinza = encerrado sem sucesso.
   Os dois azuis são tons diferentes de propósito, para Solicitado e Enviado
   ao cliente não se confundirem na coluna; o de Enviado é bem mais escuro
   (pedido do gestor) porque o degradê da pílula clareia a cor. Declinado é a ordem que expirou
   (25 dias sem resposta, purchases_engine.hpp) — por isso cinza, não vermelho:
   não existe status de recusa na ordem. */
.pill-ord-pendente { --pill-color: #f59e0b; }
.pill-ord-solicitado { --pill-color: #3b82f6; }
.pill-ord-enviado_cliente { --pill-color: #1e40af; }
.pill-ord-aprovado { --pill-color: #10b981; }
.pill-ord-declinado { --pill-color: #6b7280; }
/* "E-mail enviado" em Serviços: cinza = ainda não saiu, azul escuro =
   enviado. Cor SÓLIDA, sem o degradê com branco das outras pílulas: com ele
   o azul escuro saía lilás claro, e o pedido foi azul escuro de fato. */
.pill-email-nao,
.pill-email-enviado { background: var(--pill-color); color: #fff; }
.pill-email-nao { --pill-color: #6b7280; }
.pill-email-enviado { --pill-color: #1e40af; }

/* ------------------------------------------------------ botão Filtro (Fase B) */
/* Mesmo desenho do design/: botão branco de borda azul à direita da barra; o
   menu abre embaixo, alinhado à direita, com a faixa azul no topo. Os campos
   lá dentro são os da própria tela (movidos por js/tema-filtro.js). */
.filtro-menu {
  position: relative;
  margin-left: auto;
}
/* Busca fora do menu, logo à esquerda do botão Filtro (js/tema-filtro.js).
   Ela é quem empurra o grupo para a direita; o menu vem colado nela. Largura
   fixa para a barra ter o mesmo desenho em toda tela, seja qual for o
   min-width que o campo trazia de quando morava solto na barra. */
.busca-fora {
  margin-left: auto;
  display: flex;
  align-items: center;
  width: clamp(200px, 26vw, 320px);
}
.busca-fora + .filtro-menu {
  margin-left: 0;
}
.busca-fora > .field {
  flex: 1;
  margin: 0;
  max-width: none !important;
  min-width: 0 !important;
}
.busca-fora > .field > label {
  display: none;
}
.busca-fora input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box;
}
.btn-filtro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: #fff;
  border: 1px solid var(--accent);
}
.btn-filtro.tem-filtro {
  background: var(--accent-soft);
}
.filtro-n {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.filtro-painel {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 20;
  width: 290px;
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  margin-top: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border: 1px solid #dce7f2;
  border-top: 3px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.18);
  text-align: left;
  font-size: 13px;
}
.filtro-painel[hidden] {
  display: none;
}
.filtro-rotulo,
.filtro-painel .field > label {
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #334155;
  text-align: center;
}
.filtro-campos {
  display: flex;
  align-items: center;
  gap: 6px;
}
.filtro-painel .field {
  flex: 1;
  width: 100%;
  max-width: none !important;
  min-width: 0 !important;
}
.filtro-painel select,
.filtro-painel input:not([type="checkbox"]):not([type="radio"]) {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  max-width: none !important;
  box-sizing: border-box;
}
.filtro-painel .filtro-grupo-espelhado {
  display: none;
}
.filtro-painel select,
.filtro-painel input:not([type="checkbox"]):not([type="radio"]) {
  border: 1px solid #dce7f2;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  font-size: 13px;
}
/* Data lado a lado em 290 px: sem a folga do campo comum, senão o texto corta */
.filtro-painel input[type="date"],
.filtro-painel input[type="month"] {
  padding: 8px 6px;
  font-size: 12px;
}
.filtro-painel input[type="date"]::-webkit-calendar-picker-indicator,
.filtro-painel input[type="month"]::-webkit-calendar-picker-indicator {
  margin: 0 0 0 2px;
  padding: 0;
}
.filtro-rodape {
  display: flex;
}
/* "Limpar filtros" é um botão, como no design, e não texto solto */
.filtro-rodape button {
  flex: 1;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #dce7f2;
  border-radius: 8px;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.filtro-rodape button:hover {
  background: var(--accent-soft);
}

/* ---------------------------------------------- containers de tabelas (Fase B) */
/* Mesmo container dos cards: cinza claro, faixa azul no topo. js/tema-blocos.js
   embrulha os painéis do index.html; o painel que a tela desenha depois mora
   num elemento fixo, que vira container aqui mesmo (:has). */
.bloco,
.view > div[id]:not([class]):has(> .panel) {
  padding: 12px;
  background: #f6f7f9;
  border: 1px solid #dce7f2;
  border-top: 3px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  margin-bottom: 2mm;
  min-width: 0;
}
.bloco[hidden] {
  display: none;
}
.bloco > .panel {
  margin: 0;
}
.bloco > .section-title {
  margin: 0 0 8px;
  padding: 0;
}
/* Painéis empilhados dentro do mesmo container ficam a 2 mm um do outro */
.view > div[id]:not([class]):has(> .panel) > .panel + .panel {
  margin-top: 2mm;
}
/* Tabela de altura cheia: o container passa a ser o item que cresce, e o
   painel dentro dele continua crescendo (view--tabela-cheia, components.css) */
.view--tabela-cheia .bloco-cresce {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 160px;
}
.view--tabela-cheia .bloco-cresce > .panel-cresce {
  flex: 1;
  min-height: 0;
}
.toolbar {
  margin-bottom: 8px;
}

/* ------------------------------------------------ chip do usuário (Fase B) */
/* Avatar + nome + papel no canto direito do cabeçalho de cada tela, como no
   design/ (js/tema-usuario.js). O cartão do usuário do rodapé sai daqui: as
   ações (trocar senha, sair) passam a ser o menu do chip. */
.app-bottom-bar .user-box,
.app-bottom-bar .user-menu {
  display: none;
}
.content-header {
  justify-content: flex-start;
  align-items: center;
}
.content-header > :first-child {
  margin-right: auto;
}
.chip-usuario {
  position: relative;
  flex: none;
  margin-left: 12px;
}
.chip-usuario-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 4px;
  background: #f6f7f9;
  border: 1px solid #dce7f2;
  border-radius: 999px;
  text-align: left;
  cursor: pointer;
}
.chip-avatar {
  width: 28px;
  height: 28px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent) center / cover no-repeat;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.chip-ident {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.chip-nome {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}
.chip-papel {
  font-size: 10.5px;
  color: #64748b;
}
.chip-menu {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 25;
  min-width: 190px;
  margin-top: 6px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid #dce7f2;
  border-top: 3px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.18);
}
.chip-menu[hidden],
.chip-menu-item[hidden] {
  display: none;
}
.chip-menu-item {
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  text-align: left;
}
.chip-menu-item:hover {
  background: var(--accent-soft);
}

/* ------------------------------------------- logo e tela de login (design/) */
/* Logo do design na barra lateral: a imagem inteira, sem moldura */
.sidebar-logo-fl-preview {
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  background: none;
}
.sidebar-logo-fl-preview img {
  width: 132px;
  height: auto;
  background: none;
}

/* Login: foto da cidade em preto e branco esmaecida no alto, logo centralizada
   e um cartão branco único no meio — o painel de prédios da tela antiga sai.
   Os ids e o que o app.js lê do formulário continuam os mesmos. */
.login-screen {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(180deg, #0a2a55 0%, #032047 100%);
}
.login-screen::before,
.login-screen::after {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  top: -12px;
  height: 564px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 85%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 85%, transparent 100%);
}
.login-screen::before {
  background: url("../img/login-fundo.jpg") center 40% / cover no-repeat;
  filter: grayscale(1) blur(3px) contrast(0.92);
}
.login-screen::after {
  background: linear-gradient(180deg, rgba(7, 50, 107, 0.80) 0%, rgba(7, 50, 107, 0.74) 60%, rgba(3, 32, 71, 0.88) 100%);
}
.login-logo {
  display: block;
  position: absolute;
  top: 46px;
  left: 50%;
  z-index: 1;
  width: 200px;
  height: auto;
  transform: translateX(-50%);
}
.login-card {
  position: relative;
  z-index: 1;
  display: block;
  width: 398px;
  max-width: calc(100vw - 24px);
  min-height: 515px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.login-side {
  display: none;
}
.login-form {
  justify-content: flex-start;
  min-height: 515px;
  box-sizing: border-box;
  padding: 40px 44px;
  gap: 14px;
}
.login-input-icon .ico {
  display: none;
}
.login-input-icon input {
  padding-left: 10px;
}
.login-submit {
  background: var(--accent);
  border-radius: var(--tn-radius-btn);
  padding: 11px;
  font-size: 14px;
}

.login-form .login-foot {
  margin-top: auto;
}

}

/* ================================================== telas de 13" (Fase E) */
/* O tema novo abriu mais espaço (cartão de título, containers, cards com
   folga) pensando em tela de mesa. Num notebook de 13" (1366x768, 1280x720,
   1152x648) isso come metade da altura antes da primeira linha de dados. O
   sistema já tinha regras compactas para tela baixa (max-height: 850px, em
   components.css e layout.css); como o tema carrega por último e passou por
   cima delas, aqui elas voltam — no mesmo limiar. */

/* ---- altura: cabeçalho, barras, cards e tabelas mais justos */
@media screen and (max-height: 850px) {
  .content {
    padding: 4px;
  }
  .content-header {
    padding: 8px 16px;
    margin-bottom: 6px;
  }
  .content-header h1 {
    font-size: 17px;
  }
  .content-header .sub {
    margin-top: 0;
    font-size: 11px;
  }
  .content-icon {
    width: 32px;
    height: 32px;
  }
  .toolbar {
    margin-bottom: 6px;
  }
  .toolbar button,
  .btn-filtro {
    padding: 6px 12px;
    font-size: 12.5px;
  }
  .stat-grid,
  .charts-grid,
  .bloco,
  .view > div[id]:not([class]):has(> .panel) {
    padding: 8px;
    margin-bottom: 6px;
  }
  .stat-grid,
  .charts-grid {
    row-gap: 6px;
  }
  .section-title:has(+ .stat-grid),
  .section-title:has(+ .charts-grid) {
    padding: 8px 8px 0;
  }
  .bloco > .section-title {
    margin-bottom: 6px;
  }
  .stat-tile {
    padding: 9px 12px;
    gap: 10px;
  }
  .stat-tile-icon {
    width: 30px;
    height: 30px;
  }
  .stat-tile .value {
    margin-top: 3px;
    font-size: 14px;
  }
  th {
    padding: 8px 10px;
  }
  td {
    padding: 7px 10px;
  }
  .info-box,
  .carteira-box {
    padding: 6px 10px;
    font-size: 11.5px;
  }
  .app-bottom-bar {
    height: 28px;
  }
  .sidebar-brand {
    padding: 10px 10px 8px;
    gap: 5px;
  }
  .sidebar-logo-fl-preview img {
    width: 104px;
  }
  .nav-item {
    padding: 5px 16px;
  }
  .chip-usuario-btn {
    padding: 3px 12px 3px 3px;
  }
  .chip-avatar {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
  /* O menu de filtros nunca passa da janela: rola por dentro */
  .filtro-painel {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }
}

/* ---- largura: cards menores para caber todos numa linha, células mais justas */
@media screen and (max-width: 1400px) {
  .stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .charts-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  }
  th,
  td {
    padding-left: 8px;
    padding-right: 8px;
  }
  .panel-head {
    padding-left: 12px;
    padding-right: 12px;
  }
  /* Tabelas de planilha (Serviços tem 12 colunas): fonte e campos menores. O
     limite é max-width porque a largura vem escrita no HTML de cada campo, e
     assim só encolhe o que passa dele. */
  .table-scroll table {
    font-size: 12px;
  }
  .table-scroll td input,
  .table-scroll td select {
    padding: 4px 6px;
    font-size: 12px;
  }
  .table-scroll td input[type="number"] {
    max-width: 84px;
  }
  .table-scroll td input[type="month"],
  .table-scroll td input[type="date"] {
    max-width: 104px;
  }
  /* Os avisos de tela ocupam a largura toda, em uma linha, e não 820 px em duas */
  .info-box,
  .carteira-box {
    max-width: none !important;
  }
}

/* ---- login: logo e cartão em coluna (no design a logo fica no alto da tela,
   mas com 720 px de altura ela ficaria por baixo do cartão) */
.login-screen {
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}
.login-logo {
  position: static;
  transform: none;
  width: 160px;
}
.login-card {
  min-height: 0;
}
.login-form {
  min-height: 0;
  padding: 30px 40px;
  gap: 11px;
}
.login-form .login-foot {
  margin-top: 6px;
}
@media screen and (min-height: 860px) {
  /* Tela alta: como no design, logo solta no alto e cartão no centro */
  .login-screen {
    flex-direction: row;
    gap: 0;
  }
  .login-logo {
    position: absolute;
    top: 46px;
    left: 50%;
    width: 200px;
    transform: translateX(-50%);
  }
  .login-card {
    min-height: 515px;
  }
  .login-form {
    min-height: 515px;
    padding: 40px 44px;
    gap: 14px;
  }
  .login-form .login-foot {
    margin-top: auto;
  }
}

/* ------------------------------------------------ ficha do condomínio
   Espelha design/telas/FichaCondominio.dc.html. Escopo no id do modal para
   não mexer nos outros detalhes. Minimizar (com doca no canto) depende de
   comportamento novo e fica fora desta etapa. */
@media screen {
#modalCondominioDetalhe .modal-head { background: #f2f3f5; justify-content: center; position: relative; }
#modalCondominioDetalhe .modal-head h3 { font-size: 13px; font-weight: 700; color: #334155; text-align: center; margin: 0; }
#modalCondominioDetalhe .modal-head .btn-ghost { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
#modalCondominioDetalhe .modal-body { display: flex; flex-direction: column; gap: 8px; }
#modalCondominioDetalhe .detalhe-bloco {
  background: #f6f7f9; border: 1px solid #dce7f2; border-top: 3px solid #07326b;
  border-radius: 8px; padding: 12px 14px;
}
#modalCondominioDetalhe .detalhe-cabecalho { display: flex; align-items: center; justify-content: center; gap: 10px; }
#modalCondominioDetalhe .detalhe-cod {
  font-size: 13px; font-weight: 700; color: #07326b; background: #eef4fa;
  border: 1px solid #dce7f2; border-radius: 6px; padding: 2px 8px;
}
#modalCondominioDetalhe .detalhe-secao {
  font-size: 13px; font-weight: 700; color: #334155; text-align: center;
  border-bottom: 1px solid #dce7f2; padding-bottom: 4px;
}
#modalCondominioDetalhe .detalhe-item label { font-size: 10.5px; color: #64748b; }
#modalCondominioDetalhe .detalhe-item span { font-size: 14px; font-weight: 600; }
#modalCondominioDetalhe .modal-foot { justify-content: flex-start; gap: 8px; }
}


/* ------------------------------------------------- Requisições no celular
 *
 * Três defeitos medidos num aparelho de 360px (print do gestor):
 *  1. O topo fixo (cabeçalho + aviso de janela + cards) ocupava 517px dos
 *     780 da tela — as requisições, que são o motivo de abrir a tela, ficavam
 *     com um terço dela. No desktop o topo fixo é pedido do gestor e fica; no
 *     celular ele passa a rolar junto com a página.
 *  2. Os cards saíam um por linha: a regra de 2 colunas de components.css
 *     perdia para `repeat(auto-fit, minmax(150px, 1fr))` do bloco de 1400px
 *     deste arquivo (mesma especificidade, este vem depois).
 *  3. A tabela de 7 colunas obrigava a rolar para o lado para ver Situação,
 *     Andamento e Ações. Em vez disso, cada pedido vira um cartão com
 *     "rótulo: valor" empilhado (os rótulos vêm de data-label no requests.js). */
@media screen and (max-width: 680px) {
  .view-requests-topo-fixo {
    position: static;
  }
  .content-header {
    padding: 10px 12px;
    gap: 8px;
  }
  .content-header .row-actions {
    flex-wrap: wrap;
  }
  .content-header .row-actions button {
    padding: 6px 10px;
    font-size: 12px;
  }
  /* Campos de busca trazem min-width inline (240-280px): num aparelho de
     360px estouram a largura e empurram a página para o lado. */
  .toolbar input,
  .toolbar select {
    min-width: 0 !important;
  }
  .janela-banner {
    padding: 8px 12px;
    margin-bottom: 6px;
  }
  .janela-banner .detalhe {
    font-size: 12px;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 6px;
    column-gap: 6px;
    row-gap: 6px;
  }
  .stat-grid .stat-tile {
    padding: 6px 8px;
    gap: 8px;
    max-height: none;
  }
  .stat-grid .stat-tile-icon {
    width: 24px;
    height: 24px;
  }

  .table-scroll table.tabela-empilhada {
    display: block;
    width: 100%;
  }
  .table-scroll table.tabela-empilhada thead {
    display: none;
  }
  .table-scroll table.tabela-empilhada tbody {
    display: block;
  }
  .table-scroll table.tabela-empilhada tr {
    display: flex;
    flex-direction: column;
    margin: 0 0 8px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #dce7f2;
    border-left: 3px solid var(--accent);
    border-radius: 6px;
  }
  .table-scroll table.tabela-empilhada td {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 3px 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    border: 0;
    box-shadow: none;
    min-width: 0;
  }
  .table-scroll table.tabela-empilhada td::before {
    content: attr(data-label);
    flex: 0 0 96px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-muted);
  }
  /* A etiqueta não estica até a borda do cartão. As classes são .pill (e
     .pill-ok, .pill-warn...) conforme a tela, por isso o seletor por prefixo. */
  .table-scroll table.tabela-empilhada td span[class*="pill"] {
    align-self: flex-start;
    flex: none;
    width: auto;
    display: inline-block;
  }
  /* .celula-titulo é o título do cartão (sobe para o topo com `order`, mesmo
     quando não é a primeira coluna); .celula-acoes são os botões, sem rótulo */
  .table-scroll table.tabela-empilhada td.celula-titulo {
    order: -1;
    display: block;
    padding-bottom: 5px;
    margin-bottom: 3px;
    border-bottom: 1px solid #e5edf6;
  }
  .table-scroll table.tabela-empilhada td.celula-titulo::before,
  .table-scroll table.tabela-empilhada td.celula-acoes::before {
    content: none;
  }
  .table-scroll table.tabela-empilhada td.celula-acoes {
    display: block;
    padding-top: 6px;
  }
  /* !important: Prazos escreve flex-wrap:nowrap inline nesse contêiner */
  .table-scroll table.tabela-empilhada td.celula-acoes .row-actions {
    flex-wrap: wrap !important;
  }
  .table-scroll table.tabela-empilhada td.col-codigo {
    width: auto;
  }
  .table-scroll table.tabela-empilhada .empty-row {
    padding: 0;
    border: 0;
  }
  .table-scroll table.tabela-empilhada .empty-row td {
    display: block;
    text-align: center;
  }
  .table-scroll table.tabela-empilhada .req-track {
    min-width: 0;
  }
}