/* Ajustes sobre o MudBlazor. Cor do tema, tipografia e raio moram no
   TemaSanare.cs; aqui fica o que o tema nao alcanca: o menu escuro, as telas de
   acesso e os destaques de validade e estoque. */

html, body {
    font-family: Inter, 'Segoe UI', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* --- Moldura: topo e menu ------------------------------------------------ */

.barra-topo {
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* O topo segue o do CAC: nome em caixa alta e firme, e embaixo o CNPJ e a cidade, em
   tom de apoio. Do outro lado, quem esta usando, que abre o menu da conta. */
.topo-marca-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }

.topo-estabelecimento {
    font-weight: 700;
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topo-detalhe { font-size: 0.75rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }

.chip-modo {
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: #DBEAFB;
    color: #0A4C8C;
    font-size: 0.8125rem;
    font-weight: 600;
}

.topo-usuario {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 6px 6px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s;
}

.topo-usuario:hover, .topo-usuario:focus-visible { background: var(--mud-palette-action-default-hover); }
.topo-usuario:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

.topo-avatar {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #0E62B5;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8125rem;
    flex: none;
}

.topo-usuario-texto { flex-direction: column; min-width: 0; max-width: 280px; line-height: 1.25; }
.topo-nome { font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-perfil { font-size: 0.6875rem; color: var(--mud-palette-text-secondary); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-seta { color: var(--mud-palette-text-secondary); }

.menu-lateral { border-right: 0; }

.menu-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 8px;
}

.menu-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #0E62B5;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.menu-nome { font-weight: 700; font-size: 0.9375rem; color: #FFFFFF; }
.menu-sub { font-size: 0.75rem; color: #98A2B3; }

.menu-links { padding: 8px 12px 24px; }

.rotulo-secao {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #98A2B3;
    padding: 18px 12px 6px;
}

/* Link do menu com 44 px de altura: alvo de toque confortavel, a recepcao
   tambem usa tablet. */
.menu-links .mud-nav-link {
    min-height: 44px;
    border-radius: 10px;
    color: #D0D5DD;
}

.menu-links .mud-nav-link:hover {
    background: rgba(255, 255, 255, .06);
    color: #FFFFFF;
}

/* Ativo: fundo verde-escuro e uma barra clara na esquerda, para achar a tela
   atual de relance mesmo com o menu cheio. */
.menu-links .mud-nav-link.active {
    background: #13355C;
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: inset 3px 0 0 #60A5FA;
}

.menu-links .mud-nav-link.active .mud-nav-link-icon { color: #FFFFFF; }

/* O menu ocupa a altura toda: a lista rola, o rodape com o usuario fica no pe. */
.menu-lateral .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.menu-rolagem {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .15) transparent;
}

/* --- Secoes que abrem e fecham (SecaoDoMenu) --- */

.secao-menu + .secao-menu { margin-top: 4px; }

.cabecalho-secao {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 36px;
    margin-top: 10px;
    padding: 6px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #98A2B3;
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
}

.cabecalho-secao:hover { color: #FFFFFF; background: rgba(255, 255, 255, .04); }

.cabecalho-secao:focus-visible {
    outline: 2px solid #60A5FA;
    outline-offset: 1px;
}

.cabecalho-secao .icone-secao { font-size: 1.05rem; opacity: .85; }
.texto-secao { flex: 1 1 auto; }

.cabecalho-secao .seta-secao {
    font-size: 1.15rem;
    transition: transform .2s ease;
    transform: rotate(-90deg);
}

.secao-menu.aberta .seta-secao { transform: rotate(0deg); }

/* Abre e fecha pela altura da grade (0fr -> 1fr): anima sem medir nada em JS. */
.itens-secao {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .2s ease;
}

.secao-menu.aberta .itens-secao { grid-template-rows: 1fr; }
.itens-secao-dentro { overflow: hidden; min-height: 0; }

@media (prefers-reduced-motion: reduce) {
    .itens-secao, .cabecalho-secao .seta-secao { transition: none; }
}

/* Menu recolhido (so no computador): a coluna de icones, com o nome no
   tooltip. O titulo de secao vira um traco, para os grupos continuarem
   separados sem texto cortado pela metade. */
.menu-recolhido .menu-marca { padding: 20px 18px 8px; }
.menu-recolhido .menu-marca-texto { display: none; }
.menu-recolhido .menu-links { padding: 8px 10px 24px; }

.menu-recolhido .rotulo-secao {
    font-size: 0;
    height: 1px;
    padding: 0;
    margin: 12px 8px;
    background: rgba(255, 255, 255, .12);
}

.menu-recolhido .mud-nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}


.menu-recolhido .mud-nav-link .mud-nav-link-text { display: none; }
.menu-recolhido .mud-nav-link .mud-nav-link-icon { margin: 0; }

.area-conteudo {
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px 32px 64px;
}

@media (max-width: 600px) {
    .area-conteudo { padding: 20px 16px 48px; }
}

/* --- Cartoes ------------------------------------------------------------- */

.cartao {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 14px;
}

/* --- Tabelas e textos ---------------------------------------------------- */

.mud-table-root .mud-table-head .mud-table-cell {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.texto-forte { font-weight: 600; }
.texto-apoio { font-size: 0.8125rem; color: var(--mud-palette-text-secondary); }

/* Colunas de numero e dinheiro alinham digito com digito. */
.numeros,
.coluna-numero,
.coluna-valor { font-variant-numeric: tabular-nums; }

.coluna-numero { text-align: center; }
.coluna-valor { text-align: right; }

.estoque-baixo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-warning);
    font-weight: 600;
}

.linha-clicavel { cursor: pointer; }

/* Estoque da rede: uma coluna por unidade. O produto fica parado na rolagem para o lado. */
.tabela-rede { overflow-x: auto; }
.tabela-rede th, .tabela-rede td { white-space: nowrap; }
.tabela-rede th.coluna-unidade { text-transform: none !important; letter-spacing: 0 !important; max-width: 140px; white-space: normal; text-align: right; }
.tabela-rede .coluna-produto { position: sticky; left: 0; z-index: 1; background: var(--mud-palette-surface); min-width: 240px; white-space: normal; }
.tabela-rede .coluna-total { font-weight: 700; background: var(--mud-palette-background-gray); }
.tabela-rede .sem-saldo { color: var(--mud-palette-text-disabled); }

/* Quadro de assinatura: o dedo desenha, a pagina nao rola. Fundo branco tambem no tema escuro (vira papel). */
.quadro-assinatura { position: relative; border: 1px dashed var(--mud-palette-lines-inputs); border-radius: 10px; background: #fff; }
.quadro-assinatura canvas { display: block; width: 100%; height: 200px; touch-action: none; cursor: crosshair; border-radius: 10px; }
.quadro-assinatura-linha { position: absolute; left: 24px; right: 24px; bottom: 36px; border-top: 1px solid #999; padding-top: 2px;
    font-size: 0.75rem; color: #777; pointer-events: none; }

/* Comprovante da dispensacao: na tela, um cartao; no papel, a folha. */
.comprovante { max-width: 800px; }
.comprovante-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-bottom: 2px solid currentColor; padding-bottom: 8px; margin-bottom: 16px; }
.comprovante-titulo { font-size: 1.25rem; font-weight: 700; }
.comprovante-estorno { border: 2px solid var(--mud-palette-error); color: var(--mud-palette-error); font-weight: 700; padding: 6px 10px; margin-bottom: 12px; }
.comprovante-itens { width: 100%; border-collapse: collapse; }
.comprovante-itens th, .comprovante-itens td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--mud-palette-divider); }
.comprovante-itens th.coluna-valor, .comprovante-itens td.coluna-valor { text-align: right; }
.comprovante-assinatura { max-width: 420px; margin: 24px auto 0; text-align: center; }
.comprovante-assinatura img { display: block; width: 100%; max-height: 140px; object-fit: contain; }
.comprovante-espaco { height: 70px; }
.comprovante-linha { border-top: 1px solid currentColor; padding-top: 4px; }
.comprovante-terceiro { margin-top: 20px; font-size: 0.8rem; text-align: left; }

.abas .mud-tabs-tabbar { background: transparent; }
.abas .mud-tabs-panels { padding-top: 16px; }

/* --- Estado vazio -------------------------------------------------------- */

.estado-vazio {
    text-align: center;
    padding: 44px 24px;
    color: var(--mud-palette-text-secondary);
}

.estado-vazio .mud-icon-root {
    color: var(--mud-palette-text-disabled);
    margin-bottom: 10px;
}

/* --- Telas de acesso (SSR estatico: <input> nativo, sem MudTextField) ----- */

.acesso-fundo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #0B1726;
}

.acesso-cartao {
    width: 100%;
    max-width: 400px;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 32px 28px 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.acesso-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: #101828;
}

.acesso-titulo {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: #101828;
}

.acesso-ajuda {
    font-size: .875rem;
    line-height: 1.5;
    color: #475467;
    margin: 0 0 20px;
}

.acesso-rotulo {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #344054;
}

.acesso-campo {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font: inherit;
    font-size: 0.9375rem;
    color: #101828;
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    border-radius: 10px;
    outline: none;
}

.acesso-campo:focus {
    border-color: #0E62B5;
    box-shadow: 0 0 0 3px rgba(14, 98, 181, .18);
}

.acesso-botao {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    margin-top: 8px;
    padding: 12px 16px;
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    background: #0E62B5;
    border: none;
    border-radius: 12px;
    cursor: pointer;
}

.acesso-botao:hover { background: #0A4C8C; }

.acesso-botao-secundario {
    color: #344054;
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
}

.acesso-botao-secundario:hover { background: #F2F4F7; }

.acesso-opcao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 12px 16px;
    font: inherit;
    text-align: left;
    color: #101828;
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    border-radius: 12px;
    cursor: pointer;
}

.acesso-opcao:hover {
    border-color: #0E62B5;
    background: #EFF6FF;
}

.acesso-opcao-nome { font-weight: 600; }
.acesso-opcao-perfil { font-size: .8125rem; color: #475467; }

/* --- Erro do Blazor ------------------------------------------------------ */

#blazor-error-ui {
    color-scheme: light only;
    background: #fff3cd;
    border-top: 1px solid #ffe69c;
    bottom: 0;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, .1);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.9rem 1.4rem;
    position: fixed;
    width: 100%;
    z-index: 1200;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.9rem;
    top: 0.7rem;
}


/* --- Telas de acesso: complementos -------------------------------------- */

.acesso-rotulo { text-transform: uppercase; letter-spacing: .04em; font-size: .75rem; color: #475467; }

.acesso-campo-erro { border-color: #D92D20 !important; }
.acesso-erro-campo { display: block; margin: -10px 0 12px; font-size: .8125rem; color: #B42318; }
.acesso-erro-campo:empty { display: none; }

.acesso-senha { position: relative; }
.acesso-senha .acesso-campo { padding-right: 48px; }
.acesso-olho {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #667085;
    cursor: pointer;
}
.acesso-olho:hover { background: #F2F4F7; color: #344054; }
.acesso-olho:focus-visible { outline: 2px solid #0E62B5; outline-offset: 1px; }
.acesso-olho svg { width: 20px; height: 20px; fill: currentColor; }
.acesso-olho .olho-fechado, .acesso-olho.ativo .olho-aberto { display: none; }
.acesso-olho.ativo .olho-fechado { display: block; }

.acesso-subtitulo { display: block; font-size: .75rem; font-weight: 500; color: #667085; }
.acesso-rodape-cartao { margin: 18px 0 0; text-align: center; font-size: .75rem; color: #98A2B3; }

.acesso-selo {
    position: fixed;
    right: 16px;
    bottom: 16px;
    max-width: calc(100% - 32px);
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(16, 24, 40, .72);
    color: #D0D5DD;
    font-size: .6875rem;
}
.acesso-selo strong { color: #FFFFFF; font-weight: 600; }

@media (max-width: 600px) {
    .acesso-fundo { flex-direction: column; gap: 20px; }
    .acesso-selo { position: static; }
}

/* --- Indicadores da tela inicial ------------------------------------------ */

.indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.indicador { padding: 18px 20px; }
.indicador-rotulo { font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.indicador-valor { font-size: 1.75rem; font-weight: 700; font-variant-numeric: proportional-nums; margin-top: 4px; }
.indicador-apoio { font-size: .8125rem; color: var(--mud-palette-text-secondary); }
.indicador.alerta { border-left: 4px solid var(--mud-palette-warning); }
.indicador.critico { border-left: 4px solid var(--mud-palette-error); }

/* --- Validade e estoque -------------------------------------------------- */

/* A cor so reforca: o texto ao lado ("vencido", "vence em 12 dias") sempre diz o estado. */
.validade-vencida { color: var(--mud-palette-error); font-weight: 600; }
.validade-proxima { color: var(--mud-palette-warning); font-weight: 600; }

/* --- Dispensacao: formulario + historico do paciente ----------------------- */

/* Historico a direita na tela larga, embaixo no celular. */
.dispensacao {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1100px) {
    .dispensacao { grid-template-columns: minmax(0, 1fr); }
}

.lateral-fixa { position: sticky; top: 84px; }

.item-dispensacao {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    padding: 14px 16px;
}

.item-dispensacao + .item-dispensacao { margin-top: 12px; }
.item-dispensacao.bloqueado { border-color: var(--mud-palette-warning); background: #FFFAEB; }

.lotes-previstos { font-size: .8125rem; color: var(--mud-palette-text-secondary); margin-top: 6px; }

.historico-linha { padding: 10px 0; border-bottom: 1px solid var(--mud-palette-divider); }
.historico-linha:last-child { border-bottom: 0; }
.historico-linha.estornada { opacity: .55; text-decoration: line-through; }

.paciente-escolhido {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #EFF6FF;
    border: 1px solid #DBEAFB;
}

/* Detalhe de documento (entrada, saida): rotulo em cima, valor embaixo. */
.ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px 20px;
}

.ficha dt { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.ficha dd { margin: 2px 0 0; font-weight: 600; }

.senha-provisoria {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-align: center;
    padding: 14px;
    border-radius: 12px;
    background: #F2F4F7;
}

/* Filtro de data: largura fixa, lado a lado, sem esticar pela linha. */
.campo-data { flex: 0 0 170px; max-width: 170px; }

/* O Blazor foca o h1 ao navegar (FocusOnNavigate), para o leitor de tela anunciar a
   pagina. O foco continua; so o contorno, que aparecia como uma caixa em volta do titulo, sai. */
h1:focus { outline: none; }

/* --- Relatorios: tela e papel ------------------------------------------------- */

.relatorio-tabela th, .relatorio-tabela td { white-space: nowrap; }
.relatorio-tabela td.quebra { white-space: normal; min-width: 260px; }
.relatorio-total td { font-weight: 700; border-top: 2px solid var(--mud-palette-divider); }
.so-impressao { display: none; }

.cartao-relatorio { display: block; padding: 18px 20px; color: inherit; text-decoration: none; height: 100%; }
.cartao-relatorio:hover { border-color: var(--mud-palette-primary); }

/* No papel: sem menu, barra, filtros e botoes; com o cabecalho da Secretaria e a folha inteira. */
@media print {
    .mud-appbar, .mud-drawer, .nao-imprimir, .mud-snackbar-provider { display: none !important; }
    .mud-main-content { padding: 0 !important; margin: 0 !important; }
    .area-conteudo { padding: 0 !important; max-width: none !important; }
    .so-impressao { display: block; }
    .cartao { border: 0 !important; box-shadow: none !important; }
    .relatorio-tabela { font-size: 9pt; }
    .relatorio-tabela th, .relatorio-tabela td { padding: 2px 6px !important; }
    .folha-do-livro { break-after: page; }
    .comprovante { max-width: none; padding: 0 !important; color: #000; }
    .comprovante-itens th, .comprovante-itens td { border-bottom: 1px solid #999; }
    body { background: #fff !important; }
}

/* Aviso dos cadastros que deixam itens fora da BNAFAR (Inicio e tela da BNAFAR) */
.lista-cadastros-bnafar {
    margin: 0;
    padding-left: 1.25rem;
}
.lista-cadastros-bnafar li + li {
    margin-top: 0.25rem;
}

/* Guia de transporte: transportador e quem recebe lado a lado (um embaixo do outro no celular). */
.guia-assinaturas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.guia-assinaturas .comprovante-assinatura { margin-top: 0; }

/* Atender requisicao: o detalhe (lotes previstos, falta) fica colado na linha do produto. */
.tabela-atender { overflow-x: auto; }
.tabela-atender tr.linha-detalhe td { border-top: none; padding-top: 0; padding-bottom: 12px; }
.tabela-atender td { vertical-align: top; }

/* Combo de busca (ComboDeBusca): o nome e, embaixo, menor e mais claro, o complemento. */
.linha-combo { display: flex; flex-direction: column; line-height: 1.3; padding: 2px 0; }
.linha-combo-nome { font-weight: 500; }