/**
 * HorusConnect — CSS próprio do app, carregado DEPOIS do tema Diamond (templates
 * logado, página do paciente e não logado). O visual vem do tema; aqui só entra o
 * que o tema não resolve ou resolve errado — cada bloco diz por quê.
 * Criado em 2026-09-18 junto com a atualização para o PrimeFaces 16 (mesmo
 * padrão do cargatech-theme.css / inspx-theme.css).
 */

/* ========== FORMULÁRIO COMO CARD DO DIAMOND (2026-09-18) ========== */
/* Sem estilo, o <fieldset> dos formulários ficava com a borda "groove" cinza do
   navegador. Mesmo visual do .card do Diamond (layout-*.css); --surface-card
   vem do tema PrimeFaces e acompanha os esquemas light/dim/dark. */
.fieldset_group_fields {
    margin: 0 0 2rem 0;
    padding: 1.25rem;
    border: 0 none;
    border-radius: 4px;
    background: var(--surface-card, #ffffff);
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}

.fieldset_group_fields:last-child {
    margin-bottom: 0;
}

/* Dentro de aba ou diálogo o painel já é a superfície branca (como no
   Diamond): card dentro dele viraria moldura dupla. */
.ui-tabs-panel .fieldset_group_fields,
.ui-dialog-content .fieldset_group_fields {
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* ========== DATEPICKER COM ÍCONE EM COLUNA ESTREITA ========== */
/* Mesmo problema no p:datePicker showIcon com "w-full": o <input> fica com a
   largura default (~193px) e, em coluna estreita (ex.: md:col-2), o
   botão do calendário quebra para baixo e o campo invade a coluna vizinha. */
.ui-calendar.ui-trigger-calendar.w-full {
    display: flex;
}

.ui-calendar.ui-trigger-calendar.w-full > .ui-inputfield {
    flex: 1 1 0;
    min-width: 0;
}

/* ========== DIALOG: PRIMEFACES 16 × DIAMOND 15 ========== */
/* No PF 16 o .ui-dialog virou a camada de rolagem (tela inteira) e a caixa
   passou para o .ui-dialog-box. O Diamond 15 ainda estiliza o .ui-dialog como a
   caixa: sem isto a camada fica do tamanho da caixa e o JS posiciona a caixa em
   relação a ela, fora da tela. Estrutura copiada do tema saga do PF 16; a
   sombra/raio são os do Diamond. Remover quando vier o Diamond para o PF 16. */
body.ui-dialog-open {
    position: relative;
}

body .ui-dialog {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    /* a camada cobre a tela: em dialog não modal ela não pode engolir os cliques */
    pointer-events: none;
}

body .ui-dialog.ui-overflow-hidden,
body .ui-dialog.ui-dialog-absolute,
body .ui-dialog.ui-dialog-fitviewport {
    overflow-y: hidden;
}

body .ui-dialog .ui-dialog-box {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: 0 none;
    border-radius: 4px;
    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
    pointer-events: auto;
}

body .ui-dialog.ui-dialog-absolute .ui-dialog-box {
    position: absolute;
}

/* O width do <p:dialog> vai para a caixa (o `style` vai para a camada de tela cheia:
   um diálogo com style="width:.." abria encostado na esquerda). Em tela estreita a
   caixa não passa da largura útil da camada. */
body .ui-dialog .ui-dialog-box {
    max-width: 100%;
}

/* ========== ROLAGEM DO MENU LATERAL ========== */
/* O scroll do menu não passa para a página quando chega no fim, e a barra fica
   fina e discreta (cinza neutro serve nos esquemas claro e escuro). A posição é
   guardada/restaurada pelo layout.js (sessionStorage) e por um script logo após o
   menu no sidebar.xhtml, para não aparecer no topo e "pular" a cada página. */
.layout-sidebar .layout-menu-container {
    overscroll-behavior: contain;
    scroll-behavior: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(127, 127, 127, 0.35) transparent;
}

/* Escondido só até o layout.js restaurar a posição (no máximo 1,5 s): sem isto o
   primeiro quadro pintado mostra o menu no topo e ele "pula" logo depois. */
html.menu-restaurando .layout-sidebar .layout-menu-container {
    visibility: hidden;
}

.layout-sidebar .layout-menu-container::-webkit-scrollbar {
    width: 6px;
}

.layout-sidebar .layout-menu-container::-webkit-scrollbar-track {
    background: transparent;
}

.layout-sidebar .layout-menu-container::-webkit-scrollbar-thumb {
    background: rgba(127, 127, 127, 0.35);
    border-radius: 3px;
}

.layout-sidebar .layout-menu-container::-webkit-scrollbar-thumb:hover {
    background: rgba(127, 127, 127, 0.6);
}

/* Menu do perfil (topbar): quando o <li> vira display:flex, o <a> — e o <h:form>
   que embrulha os p:commandLink de "Trocar senha" e "Sair" — encolhe até o texto:
   o hover destaca só a palavra e clicar no resto da linha não faz nada.
   Mesmo ajuste do InspX (2026-09-21); o CargaTech não tem o problema. */
.layout-topbar .topbar-menu > li > ul.profile-menu > li > a,
.layout-topbar .topbar-menu > li > ul.profile-menu > li > form {
    flex: 1 1 auto;
    min-width: 0;
}

.layout-topbar .topbar-menu > li > ul.profile-menu > li form a {
    width: 100%;
    box-sizing: border-box;
}

/* Galeria do paciente: diálogo "Enviar pelo celular" (QR code) */
.captura-celular {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.captura-qr {
    flex: 0 0 220px;
    width: 220px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid var(--surface-border, #dee2e6);
    border-radius: 8px;
}

.captura-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.captura-instrucoes ol {
    margin: 0 0 0.75rem 1.1rem;
    padding: 0;
    line-height: 1.5;
}

.captura-instrucoes li {
    margin-bottom: 0.4rem;
}

.captura-dica {
    font-size: 0.85rem;
    color: var(--text-color-secondary, #6c757d);
    margin: 0.4rem 0;
}

.captura-link {
    font-family: monospace;
    font-size: 0.75rem;
    word-break: break-all;
    user-select: all;
}

.captura-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--surface-border, #dee2e6);
}

.captura-status > span {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.captura-recebidas {
    font-weight: 600;
}

.captura-recebidas .pi {
    margin-right: 0.35rem;
}

.captura-expirado {
    width: 100%;
    color: var(--text-color-secondary, #6c757d);
}

@media (max-width: 640px) {
    .captura-celular {
        flex-direction: column;
        align-items: center;
    }
}