/* Ajustes sobre o MudBlazor, copiados do Sanare (mesma identidade visual). Cor do tema,
   tipografia e raio moram no TemaDoPortal.cs; aqui fica o que o tema nao alcanca: o menu
   escuro, as telas de acesso e os cartoes dos sistemas. */

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: #CCFBF1;
    color: #0B5C55;
    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: #0F766E;
    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: #0F766E;
    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: #134E48;
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: inset 3px 0 0 #5EEAD4;
}

.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 #5EEAD4;
    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: #0B2E2B;
}

.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: #0F766E;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .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: #0F766E;
    border: none;
    border-radius: 12px;
    cursor: pointer;
}

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

.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: #0F766E;
    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 #0F766E; 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 #CCFBF1;
}

/* 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; }

/* Campo com o cursor (pedido do Jean, 28/10/2026): alem da borda azul de 2px do MudBlazor, o mesmo
   halo azul claro dos campos do login, para ver de longe em que campo se esta digitando no balcao.
   Campo com erro fica vermelho; desabilitado nao muda. */
.mud-input.mud-input-outlined:not(.mud-disabled):not(.mud-input-error):focus-within > .mud-input-outlined-border,
.mud-input.mud-input-outlined:not(.mud-disabled):not(.mud-input-error):focus-within .mud-shrink > .mud-input-outlined-border {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .18);
}

/* --- Nova entrada (28/10/2026, pedido do Jean: tela amigavel e confiavel) ------------------
   Resumo da nota em cima, um cartao por item (cabecalho com o que falta, tres grupos de campos,
   a conferencia na caixa em destaque no rodape) e a barra de lancar sempre a vista. */
.resumo-da-nota { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px; flex-wrap: wrap; }
.resumo-da-nota-icone {
    width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: var(--mud-palette-primary-lighten); color: var(--mud-palette-primary-darken); flex-shrink: 0;
}
.resumo-da-nota-titulo { font-size: 1.0625rem; font-weight: 700; }
.resumo-da-nota-numeros { min-width: 200px; text-align: right; }
.resumo-da-nota-total { font-size: 1.25rem; font-weight: 700; }

.item-entrada {
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-divider); border-radius: 14px;
    margin-bottom: 16px; overflow: hidden; transition: border-color .2s;
}
.item-entrada.pronto { border-color: #ABEFC6; }
.item-entrada-topo {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    background: #F9FAFB; border-bottom: 1px solid var(--mud-palette-divider);
}
.item-entrada.pronto .item-entrada-topo { background: #F6FEF9; }
.item-entrada-titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-numero {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .875rem; background: var(--mud-palette-primary-lighten); color: var(--mud-palette-primary-darken);
}
.item-entrada.pronto .item-numero { background: #DCFAE6; color: #067647; }
.selo-item {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: .75rem;
    font-weight: 600; flex-shrink: 0; max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.selo-pronto { background: #DCFAE6; color: #067647; }
.selo-falta { background: #FEF0C7; color: #93370D; }
.item-entrada-corpo { padding: 4px 16px 12px; }
.secao-rotulo {
    font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary); margin: 14px 0 6px;
}
.aviso-do-registro {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding: 10px 12px;
    border-radius: 10px; background: #FFFAEB; border: 1px solid #FEDF89; font-size: .8125rem;
}
.item-entrada-rodape {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 8px 16px; border-top: 1px solid var(--mud-palette-divider);
}
.conferencia {
    display: inline-flex; align-items: center; gap: 2px; padding: 0 12px 0 2px; border-radius: 10px; cursor: pointer;
    border: 1px dashed #FEC84B; background: #FFFAEB; color: #93370D; font-size: .8125rem; font-weight: 600;
}
.conferencia.feita { border: 1px solid #ABEFC6; background: #ECFDF3; color: #067647; }
span.conferencia { padding: 6px 12px; gap: 6px; cursor: default; }
.barra-de-lancar {
    position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 16px; padding: 12px 16px; border-radius: 14px; background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider); box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}

/* 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; }

/* --- Portal: celular nas telas de acesso -----------------------------------
   O EasyFrota e usado no posto pelo celular, e o login dele E este. Campo com 16px: abaixo
   disso o Safari do iPhone da zoom ao tocar no campo e a tela "foge" para o lado. */
@media (max-width: 600px) {
    .acesso-fundo { padding: 16px 12px; justify-content: flex-start; }
    .acesso-cartao { padding: 24px 18px 20px; border-radius: 14px; }
    .acesso-campo { font-size: 16px; min-height: 48px; }
    .acesso-botao { min-height: 52px; font-size: 1rem; }
}

/* --- Portal: tela inicial (31/10/2026, pedido do Jean: simples e elegante) -------------------
   Faixa de boas-vindas no verde do portal e um cartao por sistema, com a cor do sistema
   (--cor-sistema, vinda de IconesDosSistemas.Estilo) na faixa de cima e no icone. */

.inicio-boas-vindas {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 32px 36px;
    margin-bottom: 32px;
    border-radius: 20px;
    color: #FFFFFF;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(94, 234, 212, .28) 0%, rgba(94, 234, 212, 0) 55%),
        linear-gradient(135deg, #0B2E2B 0%, #0F766E 100%);
}
.inicio-boas-vindas-texto { max-width: 620px; }
.inicio-data { font-size: .8125rem; font-weight: 500; color: #99F6E4; letter-spacing: .02em; }
.inicio-titulo { margin: 6px 0 8px; font-size: 1.875rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.inicio-ajuda { margin: 0; font-size: .9375rem; color: #CCFBF1; line-height: 1.55; }

.inicio-atalho-painel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .24);
    color: #FFFFFF;
    font-weight: 600;
    font-size: .875rem;
    text-decoration: none;
    transition: background .15s;
}
.inicio-atalho-painel:hover { background: rgba(255, 255, 255, .2); }
.inicio-atalho-painel:focus-visible { outline: 2px solid #5EEAD4; outline-offset: 2px; }

.inicio-secao { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.inicio-secao-titulo { margin: 0; font-size: 1.0625rem; font-weight: 700; color: #101828; }
.inicio-secao-contagem { font-size: .8125rem; color: #667085; }
.inicio-rodape { margin: 20px 0 0; font-size: .8125rem; color: #667085; }

.grade-sistemas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.cartao-sistema {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px 24px 22px;
    min-height: 210px;
    background: #FFFFFF;
    border: 1px solid #E4E7EC;
    border-radius: 16px;
    color: #101828;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cartao-sistema-faixa { position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--cor-sistema, #0F766E); }
.cartao-sistema:hover, .cartao-sistema:focus-visible {
    border-color: var(--cor-sistema, #0F766E);
    box-shadow: 0 12px 28px rgba(16, 24, 40, .10);
    transform: translateY(-2px);
    outline: none;
}

.cartao-sistema-icone {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--cor-sistema-clara, #CCFBF1);
    color: var(--cor-sistema, #0F766E);
}
.cartao-sistema-icone .mud-icon-root { font-size: 1.75rem; }

.cartao-sistema-nome { margin-top: 6px; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.cartao-sistema-descricao { font-size: .875rem; color: #475467; line-height: 1.5; flex-grow: 1; }
.cartao-sistema-abrir {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--cor-sistema, #0F766E);
}
.cartao-sistema-seta { transition: transform .2s; }
.cartao-sistema:hover .cartao-sistema-seta, .cartao-sistema:focus-visible .cartao-sistema-seta { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
    .cartao-sistema, .cartao-sistema-seta { transition: none; }
    .cartao-sistema:hover { transform: none; }
}

@media (max-width: 600px) {
    .inicio-boas-vindas { padding: 24px 20px; border-radius: 16px; margin-bottom: 24px; }
    .inicio-titulo { font-size: 1.5rem; }
    .inicio-atalho-painel { width: 100%; justify-content: center; }
    .grade-sistemas { grid-template-columns: 1fr; gap: 14px; }
    .cartao-sistema { min-height: 0; padding: 22px 20px 18px; }
}

.segredo-uma-vez {
    font-family: Consolas, 'Courier New', monospace;
    font-size: .95rem;
    padding: 10px 14px;
    background: #FFF8E1;
    border: 1px dashed #B54708;
    border-radius: 10px;
    word-break: break-all;
}

/* --- Painel do Gestor (31/10/2026: resumo em cima, a lista do que precisa de atencao, um bloco
   por sistema). Alerta sempre com icone + texto (SeloDoAlerta), nunca so a cor; a variacao nao
   tem cor, porque subir nem sempre e ruim: quem diz o alerta e o sistema. -------------------- */

.painel-resumo {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 24px;
    background: #FFFFFF;
    border: 1px solid #E4E7EC;
    border-radius: 16px;
    overflow: hidden;
}
.painel-resumo-item { display: flex; flex-direction: column; gap: 2px; padding: 18px 22px; }
.painel-resumo-item + .painel-resumo-item { border-left: 1px solid #F2F4F7; }
.painel-resumo-rotulo {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #667085;
}
.painel-resumo-rotulo .mud-icon-root { font-size: 1rem; }
.painel-resumo-valor { font-size: 1.75rem; font-weight: 700; color: #101828; line-height: 1.2; font-variant-numeric: tabular-nums; }
.painel-resumo-de { font-size: 1rem; font-weight: 500; color: #667085; }
.painel-resumo-apoio { font-size: .8125rem; color: #667085; }
.painel-resumo-critico .painel-resumo-rotulo, .painel-resumo-critico .painel-resumo-valor { color: #B42318; }
.painel-resumo-atencao .painel-resumo-rotulo, .painel-resumo-atencao .painel-resumo-valor { color: #B54708; }

.selo-alerta {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    padding: 2px 10px 2px 6px; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.selo-alerta .mud-icon-root { font-size: 1rem; }
.selo-alerta-critico { background: #FEE4E2; color: #B42318; }
.selo-alerta-atencao { background: #FEF0C7; color: #93370D; }

.painel-atencao { margin-bottom: 28px; background: #FFFFFF; border: 1px solid #E4E7EC; border-radius: 16px; padding: 18px 22px 8px; }
.painel-atencao-titulo { margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: #101828; }
.painel-atencao-lista { list-style: none; margin: 0; padding: 0; }
.painel-atencao-linha {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #F2F4F7;
    font-size: .875rem;
}
.painel-atencao-linha:first-child { border-top: 0; }
.painel-atencao-sistema { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #344054; white-space: nowrap; }
.painel-atencao-sistema::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cor-sistema, #0F766E); }
.painel-atencao-texto { color: #344054; min-width: 0; }
.painel-atencao-valor { font-weight: 700; color: #101828; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.painel-atencao-detalhe { display: block; font-size: .75rem; font-weight: 500; color: #667085; }
.painel-atencao-ver { font-weight: 600; color: #0F766E; text-decoration: none; padding: 4px 8px; border-radius: 6px; }
.painel-atencao-ver:hover { background: #F0FDFA; }

.painel-sistema { margin-bottom: 32px; }
.painel-sistema-topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.painel-sistema-topo .cartao-sistema-icone { width: 44px; height: 44px; border-radius: 12px; }
.painel-sistema-topo .cartao-sistema-icone .mud-icon-root { font-size: 1.5rem; }
.painel-sistema-nome h2 { margin: 0; font-size: 1.25rem; font-weight: 700; color: #101828; line-height: 1.2; }
.painel-retrato { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: #667085; }
.painel-retrato-ponto { width: 8px; height: 8px; border-radius: 50%; background: #17B26A; }
.painel-retrato-velho { color: #B54708; font-weight: 600; }
.painel-retrato-velho .painel-retrato-ponto { background: #F79009; }
.painel-atualizando { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; color: #475467; }
.painel-nao-respondeu { font-size: .8125rem; color: #93370D; background: #FFFAEB; border: 1px solid #FEDF89; border-radius: 8px; padding: 4px 10px; }
.painel-sem-retrato, .painel-aviso-velho { margin: 12px 0 0; font-size: .875rem; color: #475467; }
.painel-aviso-velho { color: #93370D; }

.painel-grupo { display: flex; align-items: center; gap: 12px; margin: 22px 0 12px; }
.painel-grupo span { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #667085; white-space: nowrap; }
.painel-grupo::after { content: ""; flex: 1; height: 1px; background: #E4E7EC; }

.grade-indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.painel-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    background: #FFFFFF;
    border: 1px solid #E4E7EC;
    border-radius: 14px;
    overflow: hidden;
}
.painel-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: transparent; }
.painel-kpi-atencao::before { background: #F79009; }
.painel-kpi-critico::before { background: #D92D20; }

.painel-kpi-topo { display: flex; align-items: flex-start; gap: 6px; }
.painel-kpi-titulo { flex: 1; font-size: .875rem; font-weight: 600; color: #344054; line-height: 1.4; }
.painel-kpi-info { color: #98A2B3; cursor: help; }
.painel-kpi-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.painel-kpi-periodo { font-size: .75rem; color: #667085; }
.painel-kpi-valor {
    margin-top: 4px; font-size: 1.625rem; font-weight: 700; color: #101828; line-height: 1.2; letter-spacing: -.01em;
    font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.painel-kpi-comparacao { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .75rem; color: #475467; }
.painel-variacao {
    display: inline-flex; align-items: center; gap: 2px; padding: 1px 8px 1px 4px; border-radius: 999px;
    background: #F2F4F7; color: #344054; font-weight: 600; font-variant-numeric: tabular-nums;
}
.painel-variacao .mud-icon-root { font-size: .875rem; }

.painel-serie { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; }
.painel-serie-area { fill: var(--cor-sistema, #0F766E); opacity: .08; }
.painel-serie-linha { fill: none; stroke: var(--cor-sistema, #0F766E); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.painel-serie-fim { fill: var(--cor-sistema, #0F766E); stroke: #FFFFFF; stroke-width: 2; }
.painel-serie-alvo { fill: transparent; }
.painel-serie-alvo:hover { fill: rgba(16, 24, 40, .04); }

.painel-recortes { list-style: none; margin: 4px 0 0; padding: 0; }
.painel-recortes-com-total { margin-top: 10px; padding-top: 8px; border-top: 1px solid #F2F4F7; }
.painel-recorte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 4px;
    padding: 6px 0;
    font-size: .8125rem;
}
.painel-recorte-nome { display: flex; align-items: center; gap: 4px; min-width: 0; color: #344054; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-recorte-icone { font-size: 1rem !important; flex-shrink: 0; }
.painel-recorte-valor { font-weight: 600; color: #101828; font-variant-numeric: tabular-nums; text-align: right; }
.painel-recorte-barra { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: #F2F4F7; overflow: hidden; }
.painel-recorte-barra span { display: block; height: 100%; border-radius: 4px; background: var(--cor-sistema, #0F766E); opacity: .55; }
.painel-recorte-critico .painel-recorte-nome, .painel-recorte-critico .painel-recorte-valor { color: #B42318; }
.painel-recorte-atencao .painel-recorte-nome, .painel-recorte-atencao .painel-recorte-valor { color: #93370D; }

.painel-recortes-mais {
    align-self: flex-start; margin-top: 2px; padding: 4px 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: .8125rem; font-weight: 600; color: #0F766E;
}
.painel-recortes-mais:hover { text-decoration: underline; }

.painel-kpi-link {
    display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 10px;
    font-size: .8125rem; font-weight: 600; color: var(--cor-sistema, #0F766E); text-decoration: none;
}
.painel-kpi-link .mud-icon-root { font-size: 1rem; transition: transform .2s; }
.painel-kpi-link:hover .mud-icon-root { transform: translateX(3px); }

.painel-rodape { margin: 8px 0 0; font-size: .75rem; color: #667085; }

@media (max-width: 900px) {
    .painel-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .painel-resumo-item:nth-child(3) { border-left: 0; }
    .painel-resumo-item:nth-child(n+3) { border-top: 1px solid #F2F4F7; }
}

@media (max-width: 600px) {
    .painel-resumo-item { padding: 14px 16px; }
    .painel-resumo-valor { font-size: 1.5rem; }
    .painel-atencao { padding: 14px 16px 6px; }
    .painel-atencao-linha { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 4px; }
    .painel-atencao-sistema { grid-column: 2; grid-row: 1; }
    .painel-atencao-texto { grid-column: 1 / -1; grid-row: 2; }
    .painel-atencao-valor { grid-column: 3; grid-row: 1; }
    .painel-atencao-ver { grid-column: 3; grid-row: 2; justify-self: end; }
    .grade-indicadores { grid-template-columns: 1fr; }
}