/**
 * ECargo — CSS próprio do app, carregado DEPOIS do tema Diamond (template
 * logado e template-nao-logado). Regra da casa, herdada do InspX: o visual vem
 * do tema; aqui só entra o que o tema não resolve ou resolve errado — cada
 * bloco diz por quê.
 *
 * Marca: azul do Diamond "blue" (#105DA1 escuro / #1F8CE3 médio / #2196F3 do
 * tema) + âmbar da fita do logo (#F59E0B). Nada de hex solto nas telas: usar
 * as variáveis abaixo.
 */

:root {
    --ecargo-azul: #105DA1;
    --ecargo-azul-medio: #1F8CE3;
    --ecargo-ambar: #F59E0B;
    --ecargo-borda: #e5e7eb;
}

/* ========== MENSAGENS ========== */
/* p:message por campo renderiza um <div class="ui-message"> vazio quando não
   há erro; qualquer borda/margem aplicada a ele vira "sujeira" embaixo de todo
   campo. :empty não casa com mensagem de verdade (tem <span> filho). */
.ui-message:empty {
    display: none;
    border: none;
    margin: 0;
    padding: 0;
}

/* ========== AUTOCOMPLETE COM DROPDOWN EM LARGURA CHEIA ========== */
/* As telas do TMS usam p:autoComplete dropdown="true" com styleClass e
   inputStyleClass "w-full". O w-full do PrimeFlex é width:100% !important, e
   o span do componente é inline-block: o input ocupa a largura toda e o botão
   do dropdown QUEBRA para a linha de baixo (visto em Veículo, Rota, Tabela de
   frete). Como flex, o input cede exatamente a largura do botão. */
.ui-autocomplete.ui-autocomplete-dd.w-full {
    display: flex;
}

.ui-autocomplete.ui-autocomplete-dd.w-full > .ui-autocomplete-input {
    flex: 1 1 0;
    min-width: 0;
}

/* p:inputNumber com styleClass="w-full" alarga só o <span> do componente; o
   <input> de dentro fica com a largura default e transborda sobre a coluna
   vizinha (Ano de fabricação × Ano do modelo, no Veículo). */
.ui-inputnumber.w-full > .ui-inputfield {
    width: 100%;
}

/* <fieldset> tem min-width:min-content por padrão do navegador: uma tabela
   larga dentro dele (p:dataTable responsiveLayout="scroll") alarga o fieldset
   e a PÁGINA inteira, em vez de rolar só a tabela — o conteúdo passava por
   baixo do menu lateral (Tabela de frete). */
.fieldset_group_fields {
    min-width: 0;
}

/* ========== BARRA DE BOTÕES (Novo / Salvar / Cancelar) ========== */
/* Só layout: os botões usam o visual nativo do tema. Serve para botões que
   precisam ficar FORA de um .grid.ui-fluid — dentro dele o tema estica todo
   botão a width:100% (achado do InspX na tela de denúncia). */
.ecargo-button-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.ecargo-button-bar .ui-button {
    margin: 0 !important;
}

/* ========== AJUDA CONTEXTUAL ========== */
/* "?" de campo (<ecargo:ajuda>). Classe em vez de style inline para ter foco
   visível: o ícone é focável por Tab/toque de propósito. */
.hint-ajuda {
    color: #9ca3af;
    font-size: .9rem;
    margin-left: 5px;
    cursor: help;
    vertical-align: middle;
    border-radius: 50%;
}

.hint-ajuda:hover {
    color: var(--primary-color);
}

.hint-ajuda:focus-visible {
    color: var(--primary-color);
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.hint-ajuda-balao .ui-tooltip-text {
    max-width: 340px;
    line-height: 1.45;
}

/* Pastilha "Ajuda" ao lado do <h2> (<ecargo:ajudaPagina>). Tamanho próprio
   porque mora dentro do <h2> e herdaria a fonte do título. */
.ajuda-pagina-gatilho {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .6rem;
    padding: .15rem .55rem;
    border: 1px solid var(--surface-300, #d1d5db);
    border-radius: 999px;
    background: var(--surface-0, #fff);
    color: #6b7280;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.6;
    cursor: pointer;
    vertical-align: middle;
    user-select: none;
}

.ajuda-pagina-gatilho:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.ajuda-pagina-gatilho:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* A largura vai no CONTEÚDO: o widget OverlayPanel escreve max-width inline
   ao posicionar, e inline ganha de classe. */
.ajuda-pagina-painel .ui-overlaypanel-content {
    width: min(480px, 88vw);
    max-height: 65vh;
    overflow-y: auto;
    padding: 1rem 1.15rem;
}

.ajuda-pagina-titulo {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary-color);
    margin-bottom: .6rem;
    padding-right: 1.2rem; /* não passar por baixo do X de fechar */
}

.ajuda-pagina-texto {
    font-size: .86rem;
    line-height: 1.55;
    color: #374151;
}

.ajuda-pagina-texto p { margin: 0 0 .6rem; }
.ajuda-pagina-texto p:last-child { margin-bottom: 0; }
.ajuda-pagina-texto ol,
.ajuda-pagina-texto ul { margin: 0 0 .6rem; padding-left: 1.2rem; }
.ajuda-pagina-texto li { margin-bottom: .28rem; }

/* O tema pendura o X de fechar meio para fora do painel; no celular o
   collision="flipfit" encosta o painel na borda e o X fica cortado. O `body`
   é para vencer a especificidade da regra do tema (0,2,1). */
@media (max-width: 600px) {
    body .ajuda-pagina-painel.ui-overlaypanel .ui-overlaypanel-close {
        right: .25rem;
        top: .25rem;
    }

    body .ajuda-pagina-painel.ui-overlaypanel .ajuda-pagina-titulo {
        padding-right: 2.2rem;
    }
}

/* ========== FOCO SÓ PARA QUEM USA TECLADO ========== */
/* O PrimeFaces põe tabindex nas células das listagens e o tema desenha anel
   de foco; como clicar também foca, a célula clicada ficava "selecionada".
   Some só quando o foco não veio do teclado. */
.ui-datatable-data td[role="gridcell"]:focus:not(:focus-visible),
.ui-datatable-data td[role="grid"] [tabindex="0"]:focus:not(:focus-visible) {
    outline: none;
}

body .layout-sidebar .logo:focus:not(:focus-visible) {
    box-shadow: none;
}

/* ========== TELAS PÚBLICAS (template-nao-logado) ========== */
/* O template login-body do tema é um painel estreito à esquerda + uma arte à
   direita. Formulário longo (contato, cadastre-se) não cabe no painel
   estreito: .painel-formulario usa a largura toda e dispensa a arte. */
.login-body .login-wrapper .login-panel.painel-formulario {
    width: 100%;
    max-width: 52rem;
    height: auto;
    margin: 0 auto;
    align-items: stretch;
    text-align: left;
}

.login-body .login-wrapper .login-panel.painel-formulario > * {
    width: 100%;
}

.login-body .login-wrapper .login-panel.painel-formulario > .logo {
    width: auto;
    align-self: center;
}

/* marca ao lado do logo nas telas públicas */
.login-body .login-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    color: var(--ecargo-azul);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.login-body .login-marca img {
    width: 48px;
    height: 48px;
}

/* O .login-form do tema é um flex em coluna que encolhe até o conteúdo; os
   inputs têm width:85% DELE, então cada campo saía com uma largura (o
   p:password com toggleMask vem embrulhado num <span> que o tema não
   conhece). Largura cheia no form e o mesmo 85%/310px para o wrapper. */
.login-body .login-wrapper .login-panel .login-form {
    width: 100%;
}

.login-body .login-wrapper .login-panel .login-form > .ui-password,
.login-body .login-wrapper .login-panel .login-form > .login-links {
    width: 85%;
    max-width: 310px;
}

.login-body .login-wrapper .login-panel .login-form > .ui-password {
    margin-bottom: 20px;
}

.login-body .login-wrapper .login-panel .login-form > .ui-password > input {
    width: 100%;
}

.login-body .login-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin: -.5rem 0 1.25rem;
    font-size: .9rem;
}

.login-body .login-image .login-image-content .login-destaques {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}

.login-body .login-image .login-image-content .login-destaques li {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .7rem;
    color: #fff;
    font-size: 1.05rem;
}

.login-body .login-image .login-image-content .login-destaques .pi {
    color: #FBBF24;
}

/* ========== TABELA DA ANTT (tms/tabela-antt.xhtml) ========== */
.tabela-antt .antt-secao-titulo {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: .9rem;
}

.tabela-antt .antt-secao-titulo .pi {
    color: var(--ecargo-azul-medio);
}

.tabela-antt .antt-secao-sub {
    font-weight: 400;
    font-size: .85rem;
    color: #6b7280;
}

/* linha do tempo: a lista vem da mais nova para a mais antiga; row-reverse
   deixa a leitura da esquerda (antiga) para a direita (vigente) */
.tabela-antt .antt-linha-tempo {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: .75rem;
    overflow-x: auto;
    padding: .25rem .1rem .6rem;
    position: relative;
}

.tabela-antt .antt-marco {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 11.5rem;
    padding: .7rem .9rem .7rem 1.6rem;
    border: 1px solid var(--ecargo-borda);
    border-radius: 10px;
    background: var(--surface-0, #fff);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.tabela-antt .antt-marco:hover {
    border-color: var(--ecargo-azul-medio);
    transform: translateY(-1px);
}

.tabela-antt .antt-marco.ativo {
    border-color: var(--ecargo-azul);
    box-shadow: 0 0 0 2px rgba(31, 140, 227, .25);
}

.tabela-antt .antt-marco-ponto {
    position: absolute;
    left: .6rem;
    top: .95rem;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: #9ca3af;
}

.tabela-antt .antt-marco.vigente .antt-marco-ponto {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .25);
}

.tabela-antt .antt-marco-ato {
    font-weight: 700;
    color: var(--ecargo-azul);
}

.tabela-antt .antt-marco-data,
.tabela-antt .antt-marco-tipo {
    font-size: .78rem;
    color: #6b7280;
    white-space: nowrap;
}

.tabela-antt .antt-versao {
    height: 100%;
    border-left: 4px solid #9ca3af;
}

.tabela-antt .antt-versao.vigente {
    border-left-color: #22c55e;
}

.tabela-antt .antt-versao-topo {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.tabela-antt .antt-versao-origem {
    font-size: .8rem;
    color: #6b7280;
}

.tabela-antt .antt-versao-ato,
.tabela-antt .antt-previa-ato {
    margin: .5rem 0 .1rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ecargo-azul);
}

.tabela-antt .antt-versao-titulo {
    font-size: .85rem;
    color: #4b5563;
    margin-bottom: .6rem;
}

.tabela-antt .antt-versao-dados > div {
    margin: .2rem 0;
    font-size: .9rem;
}

.tabela-antt .antt-versao-dados .rotulo {
    color: #6b7280;
    margin-right: .3rem;
}

.tabela-antt .antt-hash code {
    font-size: .72rem;
    word-break: break-all;
    color: #6b7280;
}

.tabela-antt .antt-versao-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .9rem;
}

.tabela-antt .antt-kpis {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    height: 100%;
}

.tabela-antt .antt-kpis.linha {
    flex-direction: row;
    flex-wrap: wrap;
    height: auto;
    margin: 1rem 0;
}

.tabela-antt .antt-kpis .antt-kpi {
    flex: 1 1 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 10rem;
}

.tabela-antt .antt-kpi-valor {
    font-size: 1.7rem;
    font-weight: 700;
    color: #1f2937;
}

.tabela-antt .antt-kpi-valor.sobe,
.tabela-antt .antt-txt-sobe {
    color: #c2410c;
}

.tabela-antt .antt-kpi-valor.desce,
.tabela-antt .antt-txt-desce {
    color: #15803d;
}

.tabela-antt .antt-kpi-rotulo {
    font-size: .8rem;
    color: #6b7280;
}

.tabela-antt .antt-controles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-bottom: .75rem;
}

.tabela-antt .antt-controle {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.tabela-antt .antt-tabela-descricao {
    font-size: .88rem;
    color: #4b5563;
    margin-bottom: .75rem;
}

.tabela-antt .antt-matriz-rolagem {
    overflow-x: auto;
}

.tabela-antt .antt-matriz {
    width: 100%;
    min-width: 56rem;
    border-collapse: separate;
    border-spacing: 0;
}

.tabela-antt .antt-matriz th {
    padding: .55rem .5rem;
    font-size: .8rem;
    font-weight: 600;
    color: #4b5563;
    background: var(--surface-100, #f3f4f6);
    text-align: center;
    white-space: nowrap;
}

.tabela-antt .antt-matriz tbody th.antt-col-tipo {
    text-align: left;
    background: transparent;
    border-bottom: 1px solid var(--ecargo-borda);
    white-space: normal;
    min-width: 12rem;
    color: #1f2937;
}

.tabela-antt .antt-matriz thead th.antt-col-tipo {
    text-align: left;
}

.tabela-antt .antt-cel {
    border-bottom: 1px solid var(--ecargo-borda);
    text-align: center;
    vertical-align: middle;
    padding: 0;
}

.tabela-antt .antt-cel.vazia {
    color: #d1d5db;
    background: repeating-linear-gradient(45deg, transparent, transparent 6px, #f9fafb 6px, #f9fafb 12px);
}

.tabela-antt .antt-cel-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    padding: .45rem .3rem;
    color: inherit;
    text-decoration: none;
    border-radius: 6px;
}

.tabela-antt .antt-cel-link:hover {
    background: rgba(31, 140, 227, .08);
}

.tabela-antt .antt-ccd {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #1f2937;
}

.tabela-antt .antt-ccd small {
    font-weight: 400;
    color: #9ca3af;
}

.tabela-antt .antt-cc {
    font-size: .74rem;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

.tabela-antt .antt-piso {
    font-weight: 700;
    color: var(--ecargo-azul);
    background: rgba(245, 158, 11, .14);
    border-radius: 4px;
    padding: 0 .35rem;
    font-variant-numeric: tabular-nums;
}

.tabela-antt .antt-var {
    font-size: .72rem;
    font-weight: 600;
    padding: 0 .35rem;
    border-radius: 999px;
}

.tabela-antt .antt-var .pi {
    font-size: .6rem;
}

.tabela-antt .antt-var.sobe {
    color: #c2410c;
    background: #fff7ed;
}

.tabela-antt .antt-var.desce {
    color: #15803d;
    background: #f0fdf4;
}

.tabela-antt .antt-var.igual {
    color: #6b7280;
    background: #f3f4f6;
}

.tabela-antt .antt-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.2rem;
    margin-top: .75rem;
    font-size: .8rem;
    color: #6b7280;
}

.tabela-antt .antt-legenda-piso {
    color: var(--ecargo-azul);
}

.tabela-antt .antt-opcao {
    height: 100%;
    padding: 1rem 1.1rem;
    border: 1px dashed var(--ecargo-borda);
    border-radius: 10px;
}

.tabela-antt .antt-opcao h4 {
    margin: 0 0 .4rem;
}

.tabela-antt .antt-previa-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.tabela-antt .antt-bloco {
    margin: 1rem 0 0;
    padding: .8rem 1rem;
    border-radius: 8px;
    border-left: 4px solid;
}

.tabela-antt .antt-bloco h4 {
    margin: 0 0 .4rem;
    font-size: .95rem;
}

.tabela-antt .antt-bloco ul {
    margin: 0;
    padding-left: 1.2rem;
}

.tabela-antt .antt-bloco li {
    margin: .2rem 0;
    font-size: .88rem;
}

.tabela-antt .antt-bloco.erro {
    background: #fef2f2;
    border-color: #dc2626;
    color: #7f1d1d;
}

.tabela-antt .antt-bloco.aviso {
    background: #fffbeb;
    border-color: var(--ecargo-ambar);
    color: #78350f;
}

.tabela-antt .antt-bloco.ok {
    background: #f0fdf4;
    border-color: #22c55e;
    color: #14532d;
}

.tabela-antt .antt-checks {
    list-style: none;
    padding-left: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 0 1rem;
}

.tabela-antt .antt-checks .pi {
    color: #16a34a;
    margin-right: .35rem;
}

.tabela-antt .antt-confirmacao {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ecargo-borda);
}

.tabela-antt .antt-confirmacao .ecargo-button-bar small {
    color: #6b7280;
}

.tabela-antt .antt-vazio {
    color: #6b7280;
}

/* aviso de tabela da ANTT nova não importada (tabela-antt e piso-frete-antt) */
.antt-aviso-novo {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    margin: 0 0 1rem;
    padding: .9rem 1.1rem;
    border-radius: 10px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #78350f;
}

.antt-aviso-novo .antt-aviso-acoes {
    margin-top: .5rem;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.antt-aviso-novo > .pi {
    font-size: 1.3rem;
    color: var(--ecargo-ambar);
    margin-top: .1rem;
}

.tabela-antt .antt-varredura-estado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-bottom: .75rem;
}

.tabela-antt .antt-varrendo {
    color: var(--ecargo-azul);
    font-weight: 600;
}

.tabela-antt .antt-linha-com-tabela > td {
    background: #f0fdf4 !important;
}

/* ========== IMPRESSÃO ========== */
@media print {
    .layout-sidebar,
    .layout-topbar,
    .layout-footer,
    .hint-ajuda,
    .ajuda-pagina-gatilho {
        display: none;
    }

    .layout-content-wrapper {
        margin: 0;
    }
}