/* ==========================================================
   GHR PULSE — RECEPÇÃO
   Painel operacional compacto
   ========================================================== */

.operation-hero {
    position: relative;
    height: 58px;
    margin-bottom: 10px !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08) !important;
}

.hero-image {
    width: 100%;
    height: 58px;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0, 35, 48, .88),
            rgba(0, 35, 48, .48),
            rgba(0, 0, 0, .12)
        );
}

.hero-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 6px 18px;
    color: #fff;
}

.hero-content h3 {
    font-size: 22px;
    line-height: 1;
    font-weight: 600;
}

.hero-content small {
    font-size: 12px;
}

.hero-content .badge {
    font-size: 11px;
    padding: 5px 10px !important;
}

.hero-content .text-end .small {
    font-size: 10px;
    margin-top: 1px !important;
}


/* ==========================================================
   BUSCA
   ========================================================== */

.reception-search {
    margin-bottom: 10px !important;
    border: 1px solid #e4e7eb !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .045) !important;
}

.reception-search .card-body {
    padding: 6px !important;
}

.search-box {
    height: 38px;
    border-radius: 7px;
    font-size: 14px;
}

.reception-search .input-group-text {
    height: 38px;
    border-radius: 7px 0 0 7px;
    padding: 0 12px;
    color: #667085;
}

.search-filter-btn {
    height: 38px;
    border-radius: 7px;
    padding: 0 14px;
    font-size: 13px;
}




/* ==========================================================
   AÇÕES RÁPIDAS
   ========================================================== */

.quick-actions-card {
    margin-bottom: 10px !important;
    border: 1px solid #e4e7eb !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .045) !important;
}

.quick-actions-card .card-body {
    padding: 5px 10px !important;
}

.quick-actions-card strong {
    font-size: 13px;
    color: #475467 !important;
}

.quick-actions-card .btn {
    height: 32px;
    padding: 3px 11px;
    border-radius: 6px;
    font-size: 12px;
}


/* ==========================================================
   ÁREA PRINCIPAL
   ========================================================== */

.present-list-card,
.reception-sidebar > .card {
    border: 1px solid #e4e7eb !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .045) !important;
}

.present-list-card .card-header {
    min-height: 42px;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 1px solid #e7e9ed;
}

.present-list-card .card-header h5,
.present-list-card .card-header h6 {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: #8a1127;
}


/* ==========================================================
   TABELA OPERACIONAL
   ========================================================== */

.present-table-wrapper {
    max-height: calc(100vh - 390px);
    min-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.present-table {
    width: 100%;
    margin: 0;
    font-size: .78rem;
}

.present-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8f9fb;
    color: #667085;
    border-bottom: 1px solid #dfe3e8;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 7px 8px;
}

.present-table td {
    height: 38px;
    padding: 5px 8px;
    vertical-align: middle;
    line-height: 1.15;
    border-bottom: 1px solid #eef0f2;
}

.present-table tbody tr:hover {
    background: #fafbfc;
}

.present-table .badge {
    font-size: .61rem;
    padding: .22rem .38rem;
    border-radius: 20px;
}

.present-table button {
    padding: .15rem .35rem;
}

.present-table button.finish-visitor {
    width: 30px;
    height: 30px;
    padding: 0;
}

.present-table button.finish-visitor i {
    margin: 0;
}

.present-table td.fw-semibold {
    font-size: .82rem;
}


/* ==========================================================
   COLUNAS DA TABELA
   ========================================================== */

.present-table th:first-child,
.present-table td:first-child {
    width: 60px;
}

.present-table th:nth-child(2),
.present-table td:nth-child(2) {
    width: 145px;
    max-width: 145px;
}

.present-table th:nth-child(3),
.present-table td:nth-child(3) {
    width: 62px;
}

.present-table th:nth-child(4),
.present-table td:nth-child(4) {
    width: 100px;
}

.present-table th:nth-child(5),
.present-table td:nth-child(5) {
    min-width: 150px;
}

.present-table th:nth-child(6),
.present-table td:nth-child(6) {
    width: 155px;
}

.present-table th:nth-child(7),
.present-table td:nth-child(7) {
    width: 65px;
}

.present-table td:nth-child(2) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.present-table td:nth-child(4) {
    white-space: nowrap;
}

.present-table td:nth-child(7) {
    white-space: nowrap;
}

.observation-cell {
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entry-cell {
    white-space: nowrap;
}


/* ==========================================================
   PAINEL LATERAL
   ========================================================== */

.reception-sidebar {
    position: sticky;
    top: 10px;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.reception-sidebar .card-header {
    min-height: 42px;
    padding: 9px 12px;
}

.reception-sidebar .card-header h5,
.reception-sidebar .card-header h6 {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}


/* ==========================================================
   COMPACTAÇÃO DOS CARDS DE IMPACTO
   ========================================================== */

.reception-sidebar .card-body {
    padding: 10px;
}

.reception-sidebar .card-body .row {
    --bs-gutter-x: 7px;
    --bs-gutter-y: 7px;
}

.reception-sidebar .card-body .card {
    border-radius: 8px !important;
    box-shadow: none !important;
}

.reception-sidebar .card-body .card-body {
    padding: 9px !important;
}


/* ==========================================================
   RESPONSIVO
   ========================================================== */

@media (max-width: 1200px) {

    .present-table-wrapper {
        max-height: 500px;
    }
}


@media (max-width: 992px) {

    .operation-hero {
        height: 56px;
    }

    .hero-image {
        height: 56px;
    }

    .hero-content h3 {
        font-size: 20px;
    }

    .present-table-wrapper {
        max-height: 500px;
    }

    .reception-sidebar {
        position: static;
        max-height: none;
    }
}


@media (max-width: 768px) {

    .operation-hero {
        height: 52px;
    }

    .hero-image {
        height: 52px;
    }

    .hero-content {
        padding: 5px 12px;
    }

    .hero-content h3 {
        font-size: 18px;
    }

    .hero-content .text-end {
        display: none;
    }

    .traffic-current {
        grid-template-columns: 1fr;
    }

    .present-table-wrapper {
        max-height: 450px;
    }
}


@media (max-width: 576px) {

    .quick-actions-card .card-body > div {
        flex-wrap: nowrap !important;
        overflow-x: auto;
    }
}


/* ==========================================================
   PACOTE 2.3 -- REDESIGN VISUAL DA RECEPÇÃO

   Bloco acrescentado no FINAL do arquivo de propósito: a
   cascata do CSS dá prioridade ao que vem depois, então nada
   acima precisou ser removido ou reescrito (mesma técnica dos
   blocos "AJUSTE FINAL"/"CORREÇÃO DEFINITIVA" de style.css).

   O que muda: a página deixa de empilhar faixas de largura
   total e passa a ser uma grade de três colunas, cada uma com
   rolagem própria -- padrão de central operacional. Somente
   layout; nenhum id/classe consumido por JavaScript foi
   redefinido.
   ========================================================== */

:root {
    /* Altura útil das colunas: viewport menos topbar-hero (118px),
       padding do .content (24px) e a faixa de pesquisa (~78px).
       Uma variável só, para ajustar tudo em um lugar. */
    --reception-cols-offset: 232px;
}


/* ----------------------------------------------------------
   FAIXA DE PESQUISA -- os dois campos lado a lado em vez de
   dois blocos de largura total empilhados (recupera ~70px de
   altura no topo da tela).
   ---------------------------------------------------------- */

.reception-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    gap: 10px;
    align-items: start;
}

.reception-search-row .card {
    margin-bottom: 8px !important;
}

.reception-search-row .plate-search-card .form-label {
    margin-bottom: 2px !important;
    font-size: 11px;
}


/* ----------------------------------------------------------
   GRADE PRINCIPAL
   ---------------------------------------------------------- */

.reception-grid {
    display: grid;
    /* Larguras definitivas no bloco ".reception-grid" mais abaixo
       (TRES COLUNAS); aqui fica so a base da grade. */
    grid-template-columns:
        minmax(255px, 300px)
        minmax(0, 1fr)
        minmax(300px, 340px);
    gap: 9px;
    align-items: start;
}

.reception-grid__lpr,
.reception-grid__main,
.reception-grid__side {
    min-width: 0;
    max-height: calc(100vh - var(--reception-cols-offset));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

/* A coluna da direita já tinha sticky/max-height próprios em
   .reception-sidebar (bloco "PAINEL LATERAL" acima). Dentro da
   grade isso passa a ser redundante e brigaria com a altura da
   coluna -- neutralizado aqui, sem editar aquele bloco. */
.reception-grid__side.reception-sidebar {
    position: static;
    top: auto;
    max-height: calc(100vh - var(--reception-cols-offset));
}

.reception-grid .card {
    margin-bottom: 10px !important;
}

.reception-grid > * > .card:last-child {
    margin-bottom: 0 !important;
}


/* ----------------------------------------------------------
   ATENDIMENTOS ATIVOS -- a tabela agora tem a coluna central
   inteira; a altura deixa de ser calculada contra a viewport
   (a coluna já rola) e passa a ser um teto generoso, para a
   Central de Inteligência continuar alcançável logo abaixo.
   ---------------------------------------------------------- */

.reception-grid__main .present-table-wrapper {
    max-height: calc(100vh - 430px);
    min-height: 260px;
}

/* A coluna Observação (4ª, única sem largura fixa no template)
   carrega texto livre longo -- ex.: "Entrada automática via TAG
   InControl | TAG=6381755 | PLACA=RJX-8H15 | EVENTO=1113182" --
   e com table-layout:auto ela pedia 519px, empurrando a tabela
   para 1089px e forçando rolagem horizontal (comportamento que
   já existia antes deste pacote, quando a tabela era ainda mais
   estreita). Limitar a largura faz o texto QUEBRAR em duas
   linhas: nenhum dado é escondido ou truncado, e as colunas
   Entrada/Tempo/ações passam a caber na tela. */
.reception-grid__main .present-table th:nth-child(4),
.reception-grid__main .present-table td:nth-child(4) {
    width: 34%;
    max-width: 360px;
    white-space: normal;
    word-break: break-word;
}


/* ----------------------------------------------------------
   LISTA VIVA -- cards compactos.

   O HTML de cada leitura continua sendo o mesmo gerado por
   lpr_live_list.js (Pacote 2.2, não alterado): só se reduz
   densidade, tipografia e espaçamento por CSS.
   ---------------------------------------------------------- */

.reception-grid__lpr .lpr-live-list-card {
    margin-bottom: 0 !important;
}

.reception-grid__lpr .lpr-live-list-items {
    max-height: calc(100vh - var(--reception-cols-offset) - 52px);
    gap: 6px;
}

.reception-grid__lpr .lpr-live-list-item {
    display: block;
    padding: 7px 9px;
    border-left-width: 3px;
    border-radius: 5px;
    line-height: 1.3;
}

/* Placa e status na MESMA linha, placa em primeiro lugar --
   hierarquia pedida, sem quebrar em três linhas como antes. */
.reception-grid__lpr .lpr-live-list-item .lpr-plate {
    font-size: .92rem;
    letter-spacing: .3px;
}

.reception-grid__lpr .lpr-live-list-item .badge {
    font-size: 8.5px;
    padding: 2px 5px;
    letter-spacing: .2px;
    white-space: nowrap;
    flex-shrink: 0;
}

.reception-grid__lpr .lpr-live-list-item .small {
    font-size: 10.5px;
}

/* A miniatura, quando existir, vira um selo lateral discreto em
   vez de um bloco de 56px que dobrava a altura do card. */
.reception-grid__lpr .lpr-live-list-item img.lpr-thumb {
    float: left;
    width: 34px;
    height: 34px;
    margin: 0 7px 2px 0;
    border-radius: 4px;
}

.reception-grid__lpr .lpr-live-list-item .lpr-details-min-w {
    overflow: hidden;
}

.reception-grid__lpr .lpr-live-list-card .card-header {
    padding: 6px 10px;
}

.reception-grid__lpr .lpr-live-list-card .card-header strong {
    font-size: 12.5px;
}

.reception-grid__lpr .lpr-live-list-card .card-header .badge {
    font-size: 11px !important;
    padding: 3px 8px;
}


/* ----------------------------------------------------------
   IMPACTO AO MORADOR -- o componente usa col-md-4 (3 por linha),
   pensado para quando ocupava 1/3 da tela inteira. Dentro da
   coluna direita isso dava ~112px por indicador. Aqui passam a
   2 por linha, sem alterar o template do componente.
   ---------------------------------------------------------- */

.reception-grid__side .card-body .row > [class*="col-md-4"] {
    flex: 0 0 auto;
    width: 50%;
}


/* ----------------------------------------------------------
   RESPONSIVO -- a prioridade é a tela grande da recepção;
   abaixo disso a grade só degrada com segurança.
   ---------------------------------------------------------- */

@media (max-width: 1500px) {

    /* Duas colunas: Placas + Atendimentos, na mesma ordem da tela
       larga. Pedestres e Leitores descem para a linha de baixo,
       ocupando a largura inteira -- ver .reception-grid__people logo
       abaixo. A coluna elastica e a SEGUNDA, que e Atendimentos. */
    .reception-grid {
        grid-template-columns: minmax(255px, 300px) minmax(0, 1fr);
    }

    .reception-grid__people {
        grid-column: 1 / -1;
        max-height: none;
        overflow: visible;
    }

    .reception-grid__people .ped-live-list-items {
        max-height: 380px;
    }

    .reception-grid__side {
        grid-column: 1 / -1;
        max-height: none;
        overflow-y: visible;
    }

    .reception-grid__side.reception-sidebar {
        max-height: none;
    }
}

@media (max-width: 1100px) {

    .reception-search-row,
    .reception-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .reception-grid__lpr,
    .reception-grid__people,
    .reception-grid__main {
        max-height: none;
        overflow-y: visible;
    }

    .reception-grid__lpr .lpr-live-list-items {
        max-height: 380px;
    }
}


/* ==========================================================
   OPÇÃO D -- CARD DA LISTA VIVA REORGANIZADO

   Correção do defeito real apontado na auditoria: a foto de
   CADASTRO da pessoa ocupava a posição principal do card, o que
   fazia uma leitura de veículo parecer um evento de
   reconhecimento facial. Ela passa a ser miniatura secundária,
   ao lado do nome que representa.

   A posição principal fica reservada para a foto da PASSAGEM
   (.lpr-event-photo). Enquanto o backend não entregar essa
   imagem, o slot não renderiza -- nenhuma outra foto ocupa o
   lugar dela.

   Somente apresentação: nenhum dado, rota, serviço ou fluxo
   facial foi tocado.
   ========================================================== */

.reception-grid__lpr .lpr-live-list-item {
    display: block;
    padding: 8px 10px;
}

/* Foto da passagem -- imagem principal, largura total do card. */
.reception-grid__lpr .lpr-live-list-item img.lpr-event-photo {
    display: block;
    width: 100%;
    max-height: 118px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 6px;
    background: #f1f3f5;
}

/* Linha 1: horário · sentido · ponto de acesso. */
.reception-grid__lpr .lpr-when {
    color: #6c757d;
    font-size: 10.5px;
    line-height: 1.35;
    margin-bottom: 1px;
}

.reception-grid__lpr .lpr-live-list-item .lpr-plate {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .4px;
    line-height: 1.2;
}

/* Marca/modelo · cor. */
.reception-grid__lpr .lpr-vehicle {
    color: #495057;
    font-size: 10.5px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Apartamento + proprietário do CADASTRO do veículo. */
.reception-grid__lpr .lpr-registry {
    color: #198754;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pessoa do EVENTO + sua miniatura. Mantida separada do bloco de
   cadastro acima: os dois podem divergir e ambos continuam
   visíveis, como definido no Pacote 1. */
.reception-grid__lpr .lpr-event-person {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    color: #6c757d;
    font-size: 10px;
    min-width: 0;
}

.reception-grid__lpr .lpr-event-person span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reception-grid__lpr img.lpr-person-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}


/* ==========================================================
   LISTA VIVA -- CARD COMPACTO (refinamento de UI)

   O card passa de vertical (foto ocupando a largura toda, até
   118px de altura só de imagem) para horizontal: foto pequena à
   esquerda, informações à direita. Objetivo: várias placas
   visíveis ao mesmo tempo sem que um card domine a coluna.

   Somente apresentação -- o HTML continua sendo gerado pelo
   mesmo buildItem, e a imagem principal continua sendo a foto
   real da passagem.
   ========================================================== */

.reception-grid__lpr .lpr-live-list-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 9px;
}

.reception-grid__lpr .lpr-card-media {
    flex: 0 0 auto;
    width: 108px;
}

/* Foto da passagem: ~108px de largura, proporção preservada por
   object-fit: cover (nunca distorce). */
.reception-grid__lpr .lpr-live-list-item img.lpr-event-photo {
    display: block;
    width: 108px;
    height: 62px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 0;
    background: #f1f3f5;
}

.reception-grid__lpr .lpr-card-info {
    flex: 1 1 auto;
    min-width: 0;
}

.reception-grid__lpr .lpr-when {
    font-size: 10px;
    line-height: 1.3;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Placa e status em LINHAS separadas (como no layout de
   referência): lado a lado, na largura da coluna, o badge era
   cortado pelo texto "PLACA DESCONHECIDA". */
.reception-grid__lpr .lpr-plate-row {
    display: block;
    margin: 1px 0;
}

.reception-grid__lpr .lpr-plate-row .badge {
    display: inline-block;
    margin-top: 1px;
    font-size: 8px;
    padding: 2px 5px;
    letter-spacing: .2px;
}

/* Nenhuma linha do card pode empurrar a coluna para os lados:
   texto longo trunca com reticências em vez de gerar rolagem
   horizontal. */
.reception-grid__lpr .lpr-card-info > * {
    max-width: 100%;
}

.reception-grid__lpr .lpr-live-list-items {
    overflow-x: hidden;
}

.reception-grid__lpr .lpr-live-list-item .lpr-plate {
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .4px;
    line-height: 1.15;
}

/* Marca e modelo em destaque -- a informação que identifica o
   veículo mais rápido para a recepcionista. */
.reception-grid__lpr .lpr-brand-model {
    font-size: 11.5px;
    font-weight: 600;
    color: #212529;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reception-grid__lpr .lpr-vehicle,
.reception-grid__lpr .lpr-registry,
.reception-grid__lpr .lpr-event-person {
    font-size: 10px;
    line-height: 1.3;
}

.reception-grid__lpr .lpr-event-person {
    margin-top: 1px;
    gap: 4px;
}

.reception-grid__lpr img.lpr-person-thumb {
    width: 16px;
    height: 16px;
}


/* ======================================================================
   COMPOSIÇÃO OPERACIONAL DA RECEPÇÃO
   ----------------------------------------------------------------------
   Definida a partir da medição da tela real (Chrome, 1920x1080):

   - a Lista Viva de PEDESTRES começava em y=1297 (fora da tela), porque
     .reception-grid__lpr .lpr-live-list-items esticava a lista de placas
     por toda a coluna. As duas listas agora têm COLUNA PRÓPRIA;
   - a coluna direita (12% da largura, sempre visível) era ocupada só por
     infraestrutura; ela deixa de existir e a infra vira chip na faixa
     de situação do topo;
   - tipografia da coluna estava em 8,5px/10,5px -- abaixo do legível
     para uso contínuo. Piso elevado abaixo.
   ====================================================================== */

/* ORDEM DAS COLUNAS (ver reception/index.html):
     1a  Lista Viva de Placas   -- ~300px, cabe placa + miniatura
     2a  Atendimentos Ativos    -- 1fr, a maior area de trabalho
     3a  Lista Viva de Pedestres + Leitores Faciais -- ~340px

   A leitura da tela acompanha o percurso de quem chega:
   PLACA/VEICULO -> ATENDIMENTO -> PESSOA. As duas listas vivas ficam
   nas extremidades e o atendimento no centro, que e onde a
   recepcionista trabalha -- por isso e ele que fica na coluna
   elastica. A ordem vem do HTML, nunca de `order`. */
.reception-grid {
    grid-template-columns:
        minmax(255px, 300px)
        minmax(0, 1fr)
        minmax(300px, 340px);
}

.reception-grid__people {
    min-width: 0;
    max-height: calc(100vh - var(--reception-cols-offset));
    overflow: hidden;               /* quem rola são os filhos */
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* Pedestres divide a coluna com os Leitores Faciais (logo abaixo):
   a lista estica e rola, os leitores ficam com a altura natural. */
.reception-grid__people > .card:not(.ped-live-list-card) {
    flex: 0 0 auto;
    margin-bottom: 0 !important;
}

.reception-grid__people .ped-live-list-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 0 !important;
}

.reception-grid__people .ped-live-list-card .card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.reception-grid__people .ped-live-list-items {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    width: 100%;
    gap: 6px;
}

/* ----------------------------------------------------------
   LEITORES FACIAIS na base da coluna de PLACAS.
   Prioridade visual: Pedestres > Placas > Leitores. Antes o painel
   dividia a coluna com os pedestres e a lista de MAIOR prioridade
   ficava com menos área visível (522px) que a de placas (770px).
   Agora os pedestres usam a coluna inteira e quem cede altura é a
   lista de placas.
   ---------------------------------------------------------- */

.reception-grid__lpr {
    display: flex;
    flex-direction: column;
    gap: 9px;
    overflow: hidden;               /* quem rola são os filhos */
}

.reception-grid__lpr .lpr-live-list-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.reception-grid__lpr .lpr-live-list-card .card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

/* Substitui o teto preso à viewport do bloco anterior: agora a lista
   ocupa a sobra real da coluna, já descontado o painel de leitores. */
.reception-grid__lpr .lpr-live-list-items {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    width: 100%;
}

.reception-grid__lpr .facial-readers-card {
    flex: 0 0 auto;
    margin-bottom: 0 !important;
}

/* ----------------------------------------------------------
   TIPOGRAFIA das colunas vivas -- piso legível.
   ---------------------------------------------------------- */

.reception-grid__lpr .lpr-live-list-item .small,
.reception-grid__people .ped-live-list-item .small {
    font-size: 11.5px;
}

.reception-grid__lpr .lpr-live-list-item .badge {
    font-size: 10px;
    padding: 2px 6px;
}

/* Nome da pessoa e ponto de acesso são a informação prioritária:
   não encolhem e não são truncados sem necessidade. */
.reception-grid__people .ped-live-list-item .ped-name {
    font-size: .95rem;
    line-height: 1.25;
    white-space: normal;            /* deixa quebrar em vez de cortar */
}

.reception-grid__people .ped-live-list-item .text-truncate {
    white-space: normal;
    overflow: visible;
}

.reception-grid__people .ped-live-list-item {
    padding: 7px 9px;
    gap: 9px;
}


/* ======================================================================
   FAIXA DE SITUAÇÃO
   ====================================================================== */

.reception-status-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 7px 12px;
    margin-bottom: 9px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.reception-status-strip .rss-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.reception-status-strip .rss-group--infra {
    gap: 8px;
}

.reception-status-strip .rss-sep {
    width: 1px;
    align-self: stretch;
    background: #e9ecef;
}

.reception-status-strip .rss-item {
    display: flex;
    align-items: baseline;
    gap: 5px;
    line-height: 1.1;
}

.reception-status-strip .rss-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: #212529;
}

.reception-status-strip .rss-label {
    font-size: 11.5px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* Só o que exige ação ganha cor -- o resto permanece neutro, para a
   faixa não virar um segundo painel competindo por atenção. */
.reception-status-strip .rss-item--alert .rss-value { color: #dc3545; }
.reception-status-strip .rss-item--warn  .rss-value { color: #fd7e14; }

.reception-status-strip .rss-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid #e9ecef;
    background: #f8f9fa;
    font-size: 11.5px;
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
}

.reception-status-strip .rss-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #adb5bd;
    flex-shrink: 0;
}

.reception-status-strip .rss-chip--ok     { border-color: #badbcc; background: #f1f9f5; }
.reception-status-strip .rss-chip--ok     .rss-dot { background: #198754; }
.reception-status-strip .rss-chip--warn   { border-color: #ffe69c; background: #fff9e6; }
.reception-status-strip .rss-chip--warn   .rss-dot { background: #fd7e14; }
.reception-status-strip .rss-chip--danger { border-color: #f5c2c7; background: #fdf2f3; }
.reception-status-strip .rss-chip--danger .rss-dot { background: #dc3545; }


/* ======================================================================
   LEITORES FACIAIS
   ====================================================================== */

.facial-readers-items {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 190px;
    overflow-y: auto;
}

.facial-reader-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 11.5px;
    line-height: 1.3;
}

.facial-reader-item .fr-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.facial-reader-item.online  .fr-dot { background: #198754; }
.facial-reader-item.offline .fr-dot { background: #dc3545; }

.facial-reader-item .fr-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: #343a40;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.facial-reader-item .fr-last {
    flex-shrink: 0;
    color: #6c757d;
    font-variant-numeric: tabular-nums;
}

.facial-reader-item.offline .fr-name { color: #dc3545; }


/* Em telas estreitas as três colunas empilham -- as Listas Vivas
   continuam com rolagem própria, sem altura presa à viewport. */
@media (max-width: 1400px) {

    .reception-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Empilhado, nenhuma coluna fica presa à viewport: cada lista
       volta a ter teto próprio. Precisa repetir .reception-grid__lpr
       aqui porque as regras de flex acima vêm DEPOIS da media query de
       1100px já existente no arquivo e, com a mesma especificidade, a
       última venceria e quebraria o empilhamento. */
    .reception-grid__people,
    .reception-grid__lpr {
        max-height: none;
        overflow: visible;
        display: block;
    }

    .reception-grid__people .ped-live-list-items,
    .reception-grid__lpr .lpr-live-list-items {
        max-height: 360px;
        flex: none;
    }

    .reception-grid__lpr .facial-readers-card,
    .reception-grid__lpr .lpr-live-list-card {
        margin-bottom: 10px !important;
    }

}


/* ======================================================================
   MINIATURA DE PEDESTRE -- falha de carregamento é REVERSÍVEL
   ----------------------------------------------------------------------
   As iniciais ficam atrás da imagem, como marca-lugar. Enquanto a foto
   carrega, ou quando uma tentativa falha (a rota de evidências devolve
   503 quando o cliente SMB fica sem crédito sob concorrência), o que
   aparece são as iniciais -- e não um quadrado cinza vazio.

   A <img> nunca é destruída: continua no DOM, marcada com data-failed,
   e o próximo ciclo do polling tenta de novo (ver retryFailedThumbs em
   pedestrian_live_list.js). Uma foto que já carregou não é mais tocada.
   ====================================================================== */

.ped-thumb-wrap {
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.ped-thumb-wrap .ped-initials,
.ped-thumb-wrap .ped-thumb {
    position: absolute;
    inset: 0;
    width: 48px;
    height: 48px;
}

/* Dentro do wrapper a imagem não pode ter fundo próprio: ele taparia
   as iniciais enquanto a foto ainda não chegou. */
.ped-thumb-wrap .ped-thumb {
    background-color: transparent;
}

/* Estado de falha: esconde a imagem e revela as iniciais. Reversível --
   basta o atributo sair para a foto voltar a aparecer. */
.ped-thumb-wrap .ped-thumb[data-failed] {
    visibility: hidden;
}


/* ======================================================================
   MINIATURA DE PLACA -- falha de carregamento é REVERSÍVEL
   ----------------------------------------------------------------------
   Mesmo princípio já aplicado aos pedestres. Antes o onerror fazia
   this.remove() e a miniatura sumia para sempre (a reconciliação
   preserva o nó, então ela nunca voltava). Agora a <img> continua no
   DOM marcada com data-failed e o próximo ciclo tenta de novo.

   `display: none` -- e não `visibility: hidden` -- para reproduzir
   exatamente o colapso visual que o remove() causava: o card não fica
   com um vão reservado enquanto a foto não existe.

   Duas especificidades porque o bloco da coluna usa
   `.reception-grid__lpr .lpr-live-list-item img.lpr-thumb` (0,3,1) e
   uma regra mais fraca perderia dela.
   ====================================================================== */

.lpr-live-list-item img[data-failed],
.reception-grid__lpr .lpr-live-list-item img[data-failed] {
    display: none;
}