@charset "UTF-8";
/* ============================================================================
   FICHA — padrão das telas de detalhes do sistema
   ============================================================================
   Camada de leitura: substitui as listas corridas de rótulo/valor em
   p-col-4 / p-col-8 por blocos com hierarquia. Vale para qualquer entidade
   (processo, estabelecimento, serviço, notificação...), por isso nada aqui
   carrega o nome de uma tela. A primeira adoção é a
   tags/cepi/processoDetails.xhtml + ui/interno/processo/details.xhtml.

   Como montar uma ficha nova:

     <h:outputStylesheet library="css" name="sistema/ficha.css"/>

     .ficha-cabecalho    faixa de identificação: rótulo curto, identificador
                         em destaque (.ficha-numero), subtítulo e .ficha-chips
                         com a situação do registro.
     .ficha-chip         estado em uma palavra — ok / info / alerta.
     .ficha-destaque     bloco realçado para o que muda a leitura de todo o
                         resto (o processo gestor, o vínculo, o bloqueio).
     .ficha-secao        agrupamento temático, com .ficha-secao-titulo
                         (ícone + rótulo curto em caixa alta).
     .ficha-campo        par rótulo/valor dentro de um .p-grid, sempre com as
                         classes de coluna do primeflex
                         (ex.: "ficha-campo p-col-12 p-md-6").
     .ficha-nota         orientação/impedimento ao operador dentro de uma aba.
     .ficha-abas         p:tabView com ícone no facet "title" de cada p:tab.
     .ficha-acoes        barra de botões de uma aba/seção.
     .ficha-acao-inline  botão pequeno dentro de um .ficha-valor.

   Regras do padrão: rótulo em cima e valor embaixo (nunca lado a lado, que é
   o que quebra no celular); "—" com .ficha-vazio quando não há valor; nenhuma
   cor literal — tudo sai dos tokens do Bootstrap/AdminLTE (--bs-*) e da
   identidade (--ce-*), para acompanhar o modo claro/escuro do template.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cabeçalho — identificador do registro + chips de situação
   -------------------------------------------------------------------------- */
.ficha-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-left: 4px solid var(--ce-primary);
  border-radius: 10px;
  background: rgba(var(--ce-primary-rgb), .05);
}

.ficha-identificacao {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.ficha-cabecalho-rotulo {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.ficha-numero {
  font-family: var(--ce-fonte-titulo);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ce-primary);
}

.ficha-subtitulo {
  font-size: .9rem;
  color: var(--bs-body-color);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   2. Chips de situação
   -------------------------------------------------------------------------- */
.ficha-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.ficha-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}

.ficha-chip i {
  font-size: .8rem;
}

.ficha-chip-ok {
  color: #1b7f3b;
  border-color: rgba(38, 167, 55, .35);
  background: rgba(var(--ce-realce-rgb), .12);
}

.ficha-chip-info {
  color: var(--ce-grafite);
  border-color: rgba(var(--ce-btn-rgb), .3);
  background: rgba(var(--ce-btn-rgb), .10);
}

.ficha-chip-alerta {
  color: #b42318;
  border-color: rgba(180, 35, 24, .35);
  background: rgba(180, 35, 24, .10);
}

[data-bs-theme="dark"] .ficha-chip-ok {
  color: #7ee08d;
}

[data-bs-theme="dark"] .ficha-chip-info {
  color: var(--bs-body-color);
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
}

[data-bs-theme="dark"] .ficha-chip-alerta {
  color: #ff8a80;
  border-color: rgba(255, 138, 128, .35);
  background: rgba(255, 138, 128, .12);
}

/* --------------------------------------------------------------------------
   3. Seções
   -------------------------------------------------------------------------- */
.ficha-secao + .ficha-secao {
  margin-top: 1.1rem;
}

.ficha-secao-titulo {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .35rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--bs-border-color);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.ficha-secao-titulo i {
  color: var(--ce-primary);
}

/* --------------------------------------------------------------------------
   4. Campo (rótulo em cima, valor embaixo)
   -------------------------------------------------------------------------- */
.ficha-campo {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding-block: .4rem;
  min-width: 0;
}

.ficha-rotulo {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--bs-secondary-color);
}

.ficha-valor {
  font-size: .95rem;
  color: var(--bs-body-color);
  overflow-wrap: anywhere;
}

/* Números/medidas ganham fonte tabular para alinhar na leitura em coluna. */
.ficha-valor-num {
  font-variant-numeric: tabular-nums;
}

.ficha-vazio {
  color: var(--bs-secondary-color);
}

/* Botão dentro de um valor (MAPA do endereço, PDF do DAE): discreto e sem
   quebrar a linha. ficha-mapa é o nome antigo, mantido por já estar em uso. */
.ficha-valor .ficha-acao-inline,
.ficha-valor .ficha-acao-inline.ui-button,
.ficha-valor .ficha-mapa,
.ficha-valor .ficha-mapa.ui-button {
  margin-left: .5rem;
  padding: .1rem .55rem;
  font-size: .75rem;
  vertical-align: baseline;
}

/* --------------------------------------------------------------------------
   5. Destaque — o vínculo/estado que muda a leitura de todo o resto da ficha
   -------------------------------------------------------------------------- */
.ficha-destaque {
  margin-bottom: 1rem;
  padding: .85rem 1rem .5rem;
  border: 1px solid rgba(var(--ce-realce-rgb), .35);
  border-left: 4px solid var(--ce-realce);
  border-radius: 10px;
  background: rgba(var(--ce-realce-rgb), .07);
}

.ficha-destaque-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ce-primary);
}

.ficha-destaque-titulo i {
  font-size: 1rem;
}

.ficha-destaque-descricao {
  margin: .15rem 0 .25rem;
  font-size: .8rem;
  color: var(--bs-secondary-color);
}

/* O identificador do registro relacionado é o principal atalho do bloco. */
.ficha-destaque-link {
  font-family: var(--ce-fonte-titulo);
  font-weight: 700;
  color: var(--ce-primary);
  text-decoration: underline;
}

.ficha-destaque-link:hover {
  color: var(--ce-primary-hover);
}

[data-bs-theme="dark"] .ficha-cabecalho {
  background: rgba(255, 255, 255, .04);
}

/* No escuro o verde a 7% some; o destaque precisa continuar sendo o primeiro
   que o olho encontra depois do cabeçalho. */
[data-bs-theme="dark"] .ficha-destaque {
  background: rgba(var(--ce-realce-rgb), .12);
}

[data-bs-theme="dark"] .ficha-numero,
[data-bs-theme="dark"] .ficha-destaque-titulo,
[data-bs-theme="dark"] .ficha-secao-titulo i {
  color: var(--ce-verde-claro);
}

/* O link do destaque sai como .ui-link quando vem de um p:link, e o
   identidade-ceara.css pinta "body .ui-link" com !important — sem !important
   aqui o escuro fica no verde do modo claro, que perde contraste no fundo
   escuro. É o único ponto do padrão que precisa disputar assim. */
[data-bs-theme="dark"] .ficha-destaque-link {
  color: var(--ce-verde-claro) !important;
}

/* --------------------------------------------------------------------------
   6. Nota — orientação curta ao operador dentro de uma aba/seção
   -------------------------------------------------------------------------- */
/* Duas formas de uso:
   - com <i> + texto fixo, para instruções da tela;
   - direto no styleClass de um h:outputText, para mensagem vinda do backend.
     Nesse caso o span sai sem filho nenhum quando a mensagem é vazia, e o
     :empty abaixo tira a caixa da tela — assim a mensagem custa uma única
     avaliação da EL (nada de repetir a chamada no rendered). */
.ficha-nota {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .75rem;
  padding: .55rem .8rem;
  border: 1px solid var(--bs-border-color);
  border-left: 3px solid var(--ce-realce);
  border-radius: 8px;
  background: var(--bs-tertiary-bg);
  font-size: .85rem;
  color: var(--bs-body-color);
}

.ficha-nota i {
  margin-top: .1rem;
  color: var(--ce-primary);
}

[data-bs-theme="dark"] .ficha-nota i {
  color: var(--ce-verde-claro);
}

.ficha-nota:empty {
  display: none;
}

/* Variante de impedimento: o que trava a operação da aba. */
.ficha-nota-alerta {
  border-color: rgba(180, 35, 24, .35);
  border-left-color: #b42318;
  background: rgba(180, 35, 24, .08);
  color: #b42318;
  font-weight: 600;
}

[data-bs-theme="dark"] .ficha-nota-alerta {
  border-color: rgba(255, 138, 128, .35);
  border-left-color: #ff8a80;
  background: rgba(255, 138, 128, .10);
  color: #ff8a80;
}

/* --------------------------------------------------------------------------
   7. Abas — título com ícone (facet "title" do p:tab)
   -------------------------------------------------------------------------- */
.ficha-aba-titulo {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
}

/* O ícone acompanha o texto: cinza na aba dormindo, verde na ativa. */
.ficha-abas .ui-tabs-header .ficha-aba-titulo i {
  font-size: .85rem;
  opacity: .75;
}

.ficha-abas .ui-tabs-header.ui-state-active .ficha-aba-titulo i {
  color: var(--ce-primary);
  opacity: 1;
}

[data-bs-theme="dark"] .ficha-abas .ui-tabs-header.ui-state-active .ficha-aba-titulo i {
  color: var(--ce-verde-claro);
}

/* Barra de ações de uma aba (botões de emissão, novo anexo, ...). */
.ficha-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
}