/* ============================================================================
   LINHA · refino (01/10/2026): blocos com mais contraste e acabamento moderno.
   Carregada por último. Cartão = superfície branca com sombra suave sobre o fundo
   esverdeado (em vez de borda cinza fina que sumia), cantos de 14px, cabeçalho de
   bloco sem fio, e cartão clicável que sobe de leve ao passar o mouse.
   ============================================================================ */

/* cartões de conteúdo dos painéis */
:is(.l-bloco, .glass, .card, .panel-container, .ds-card, .cl-col, .pc-card, .presc-builder, .un-form,
    .ret-card, .fx-quadro, .rf-confirm, .pp-lista, .l-cartao, .table-wrap, .panel-grupo, .unit-links-list, .tc-bpa,
    .op-comando, .issued-ticket-card, .cap-card, .srv-group, .fat-trecho){
  border-color:transparent !important;
  border-radius:var(--l-raio-bloco) !important;
  box-shadow:var(--l-sombra-bloco) !important;
}
/* faixas verdes de números: mesma geometria dos cartões */
:is(.kpis, .stats){ border-radius:var(--l-raio-bloco) !important; box-shadow:var(--l-sombra-bloco) !important }
.un-kpi{ border-radius:var(--l-raio-bloco); box-shadow:var(--l-sombra-bloco) }

/* cabeçalho de bloco: sem fio, título um pouco maior, respiro no lugar da linha */
.l-bloco-cab{ border-bottom:0 !important; padding-bottom:var(--l-e2) !important }
.l-bloco-cab h3{ font-size:var(--l-t-med); font-weight:600; letter-spacing:-.01em }
.l-bloco > .au-table-wrap .au-table thead th{ background:var(--l-sup-2) }

/* cartão dentro de cartão não ganha sombra (só um nível de elevação) */
:is(.l-bloco, .card, .cl-col, .glass) :is(.l-bloco, .card, .glass, .presc-builder){ box-shadow:none !important; border-color:var(--l-fio) !important }

/* cartões clicáveis: sobem de leve */
:is(.un-kpi, .rf-disp-card, .cl-card, .uni-item, .un-item, .leito, .tile){
  transition:transform var(--l-rapido) var(--l-curva), box-shadow var(--l-rapido) var(--l-curva), border-color var(--l-rapido);
}
:is(.un-kpi, .rf-disp-card, .cl-card, .leito, .tile):hover{ transform:translateY(-2px); box-shadow:var(--l-sombra-bloco-alto) !important }
@media (prefers-reduced-motion:reduce){ :is(.un-kpi, .rf-disp-card, .cl-card, .leito, .tile):hover{ transform:none } }

/* cabeçalho de abas dos painéis: superfície com sombra curta em vez de fio */
.l-secoes, .ubs-topo{ border-bottom-color:transparent !important; box-shadow:0 1px 0 rgba(20,26,12,.06), 0 6px 18px -14px rgba(20,26,12,.35) }
body.theme-dark :is(.l-secoes, .ubs-topo){ box-shadow:0 1px 0 rgba(255,255,255,.05) }

/* campos e botões secundários um pouco mais definidos sobre o branco */
.btn:not(.primary):not(.btn-primary):not(.ghost):not(.danger):not(.soft){ box-shadow:0 1px 2px rgba(20,26,12,.06) }

/* listas e vazios dentro de bloco: menos “caixa dentro de caixa” */
.l-bloco .au-empty{ border:0 !important; background:none !important }

/* o que flutua (modal, menus, paleta): sem fio, só a sombra própria e o canto maior */
:is(.modal-box, .modal-content, .ds-modal, .au-modal, .app-modal-box, .pf-modal, .recibo-cx, .l-paleta-caixa){ border-color:transparent !important; border-radius:18px !important }
:is(.l-conta-menu, .cl-menu, .sd-drop, .in-search-results, .reg-ac-list, .rf-ac-pop, .l-sugestoes){ border-color:transparent !important; box-shadow:var(--l-sombra-flutua) !important }

/* aba selecionada em verde: texto e sublinhado na cor da marca (topo dos painéis, topo da
   unidade, abas internas das páginas avulsas) */
:root{ --l-aba-ativa:#4f7a1e }   /* verde vivo: 5,4:1 sobre o branco */
body.theme-dark{ --l-aba-ativa:var(--l-marca-tinta) }
.l-secao:is(.active, .is-active){ color:var(--l-aba-ativa) !important; font-weight:600 }
.l-secao:is(.active, .is-active)::after{ background:var(--l-aba-ativa) !important; height:3px !important }
.l-secoes-grupo.com-rotulo .l-secao:is(.active, .is-active){ color:var(--l-aba-ativa) !important }
/* segmentos (filtros em abas): o marcado fica verde cheio */
.l-seg :is(button.on, button.active, button[aria-pressed="true"], button.is-active),
.pc-tabs .tab.active, .tabs .tab.active{ background:var(--l-verde) !important; color:var(--l-verde-texto) !important; box-shadow:none !important }

/* ================================================================ vazio com ícone (01/10)
   A frase sozinha no meio de um bloco grande parecia erro de carregamento. Um ícone
   suave em cima diz "não tem nada aqui" de relance. */
.lg-vazio, .au-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px }
.lg-vazio::before, .au-empty::before{
  content:""; flex:none; width:44px; height:44px; border-radius:14px;
  background:var(--l-marca-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8f98' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") no-repeat center / 22px 22px;
}
/* linha de tabela vazia e listas compactas seguem só com a frase */
td.au-empty, tr .au-empty, .au-empty.compacto{ display:block }
td.au-empty::before, tr .au-empty::before, .au-empty.compacto::before{ content:none }

/* ================================================================ cabeçalhos com a cor do portal (01/10)
   Faixa branca lisa parecia vazia. Um brilho suave da cor escolhida no canto
   direito e um fio de cor embaixo do título dão identidade sem pesar. */
@media (min-width:981px){
  .l-secoes, .ubs-topo, :is(#view-intranet, #view-ubs-intranet) .in-topbar{
    background-image:
      radial-gradient(120% 180% at 100% 0%, color-mix(in srgb, var(--l-aba-ativa, var(--l-marca)) 13%, transparent) 0%, transparent 55%),
      linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--l-aba-ativa, var(--l-marca)) 4%, transparent) 100%) !important;
  }
}

/* ================================================================ faixa de números vira cartões (01/10, 2ª rodada)
   A faixa sólida da cor do portal deixava todos os números iguais e pesados.
   Cada número é um cartão claro com o ícone num quadradinho e o tom do que
   ele significa: tempo = cor do portal, bom = verde, prazo/erro = vermelho,
   atenção = laranja, informação = azul. Mesmo desenho do Início da unidade. */
.kpis{
  display:grid !important; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)) !important; gap:var(--l-e3) !important;
  background:none !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; overflow:visible !important; color:inherit !important;
}
.kpis > .kpi{
  --kpi:var(--l-marca-tinta); --kpi-fundo:var(--l-marca-suave);
  position:relative; overflow:hidden; gap:4px; padding:var(--l-e4) var(--l-e5) !important;
  background:var(--l-sup) !important; border:1px solid var(--l-borda) !important; border-radius:16px !important;
  box-shadow:0 1px 2px rgba(10,14,6,.05) !important; transition:transform var(--l-rapido), box-shadow var(--l-rapido), border-color var(--l-rapido);
}
.kpis > .kpi:hover{ transform:translateY(-2px); border-color:var(--kpi) !important; box-shadow:0 10px 24px -14px rgba(10,14,6,.35) !important }
.kpis > .kpi::after{ content:""; position:absolute; right:-30px; top:-30px; width:92px; height:92px; border-radius:50%; background:var(--kpi-fundo); opacity:.5; pointer-events:none }
.kpis > .kpi > *{ position:relative; z-index:1 }
.kpis .k-top{ justify-content:flex-start !important; flex-direction:row-reverse; gap:var(--l-e3) !important }
.kpis .k-top .k-tag{ margin-right:auto }
.kpis .kpi .k-ico{ display:inline-grid !important; width:34px !important; height:34px !important; border-radius:10px; background:var(--kpi-fundo) !important; color:var(--kpi) !important }
.kpis .kpi .k-ico svg{ width:18px; height:18px }
.kpis :is(.k-val, .k-val b, .k-val strong){ color:var(--l-texto) !important }
.kpis :is(.k-val em, .k-sub){ color:var(--l-texto-3) !important }
.kpis .k-tag{ color:var(--l-texto-2) !important; font-weight:600 }
.kpis .k-tag.alert{ color:var(--kpi) !important }
.kpis .k-sub{ font-size:var(--l-t-mini) }
.kpis > .kpi.k-time{ --kpi:var(--l-marca-tinta); --kpi-fundo:var(--l-marca-suave) }
.kpis > .kpi.k-defer{ --kpi:var(--l-ok); --kpi-fundo:var(--l-ok-fundo) }
.kpis > .kpi.k-sla{ --kpi:var(--l-erro); --kpi-fundo:var(--l-erro-fundo) }
.kpis > .kpi.k-warn{ --kpi:var(--l-atencao); --kpi-fundo:var(--l-atencao-fundo) }
.kpis > .kpi.k-info{ --kpi:var(--l-info); --kpi-fundo:var(--l-info-fundo) }
/* número que pede atenção (prazo, alerta) ganha a cor do tom; os demais ficam na tinta de texto */
.kpis > .kpi:is(.k-sla, .k-warn):has(.k-tag.alert) .k-val{ color:var(--kpi) !important }
.kpis > .kpi.k-sla:not(:has(.k-tag.alert)) .k-val{ color:var(--l-texto) !important }

/* ================================================================ tabelas, 3ª rodada (01/10)
   Linha sob o mouse ganha um fundo leve da cor do portal e um fio à esquerda:
   em tabela longa o olho não perde a linha que está lendo. */
:is(.l-tab, .au-table, table.table) tbody tr{ transition:background var(--l-rapido) }
:is(.l-tab, .au-table, table.table) tbody tr:hover{ background:color-mix(in srgb, var(--l-aba-ativa, var(--l-marca)) 6%, var(--l-sup)) !important }
:is(.l-tab, .au-table, table.table) tbody tr:hover > td:first-child{ box-shadow:inset 3px 0 0 var(--l-aba-ativa, var(--l-marca)) }
:is(.l-tab, .au-table, table.table) tbody tr.fat-total:hover > td:first-child{ box-shadow:none }
:is(.l-tab, .au-table, table.table) th{ font-weight:600 !important; color:var(--l-texto-2) !important }