/* ⚠️ O corpo da página, a rolagem, o casco (conteúdo principal, topbar, menu lateral) e o padrão dos
   componentes do MudBlazor moram em css/sysmed-design.css — o DESIGN SYSTEM, carregado antes deste
   arquivo. Aqui fica o que é de cada tela. */

.sysmed-contato-clickable {
    cursor: pointer;
    border-radius: 6px;
    padding: 1px 4px;
    margin-left: -4px;
    transition: background-color .12s ease;
}

.sysmed-contato-clickable:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* ---------------------------------------------------------------------------
   LOADMASK — máscara da tela inteira com a caixa "Carregando..." no centro.
   Ver `sysmedMascara` no sysmed-bridge.js.

   É o desenho do `ShowMask = true` do legado (X.Mask do Ext.NET): véu escuro por cima de tudo e
   uma caixinha central com spinner e texto. Substituiu uma barra de 3px no topo — que avisava,
   mas era fácil de não ver e, principalmente, NÃO bloqueava clique durante a espera.

   Acima de tudo: AppBar é 1200, menu 1300, diálogo do MudBlazor 1400. Sinal de sistema vem por
   cima até do diálogo, porque é ele que está esperando.
   --------------------------------------------------------------------------- */
.sysmed-mascara {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .38);
    opacity: 0;
    /* Enquanto invisível não pode engolir clique; ao ativar, é justamente o que deve fazer. */
    pointer-events: none;
    transition: opacity .18s ease;
}

.sysmed-mascara.ativo {
    opacity: 1;
    pointer-events: auto;
    cursor: progress;
}

.sysmed-mascara-caixa {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
    /* Sobe junto com o véu, em vez de aparecer parada — o mesmo gesto do diálogo do MudBlazor. */
    transform: translateY(6px);
    transition: transform .18s ease;
}

.sysmed-mascara.ativo .sysmed-mascara-caixa {
    transform: translateY(0);
}

.sysmed-mascara-giro {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2.5px solid var(--mud-palette-lines-default);
    border-top-color: var(--mud-palette-primary);
    animation: sysmed-mascara-gira .7s linear infinite;
}

.sysmed-mascara-texto {
    font-size: .9rem;
    font-weight: 500;
    white-space: nowrap;
}

@keyframes sysmed-mascara-gira {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sysmed-mascara,
    .sysmed-mascara-caixa {
        transition: none;
    }

    .sysmed-mascara-giro {
        animation-duration: 2.2s;
    }
}

/* ===========================================================================
   ⚠️ `MudDivider` dentro de coluna flex

   `.mud-divider` vem com `flex-grow: 1` da CSS do MudBlazor. Isso faz sentido para o divisor
   VERTICAL numa linha flex, onde ele precisa esticar; num flex column ele cresce na vertical e vira
   um vão que disputa a folga com o conteúdo real.

   Mordeu duas vezes: no painel de escopo do mapa mensal (um divisor empurrou a lista de agendas
   para o pé do painel) e no menu lateral (dois divisores ficaram com dois terços da folga e
   deixaram os itens centrados verticalmente em vez de ancorados no topo). Em vez de remendar caso a
   caso, a regra é geral — divisor horizontal em coluna nunca cresce.
   =========================================================================== */
.d-flex.flex-column > .mud-divider:not(.mud-divider-vertical),
.sysmed-sidebar > .mud-divider,
.agenda-escopo > .mud-divider {
    flex: 0 0 auto;
}

/* Module Host */
.sysmed-module-host {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--mud-palette-background);
}

.sysmed-empty-state {
    height: 100%;
    background: var(--mud-palette-background);
}

.sysmed-tabs {
    display: flex;
    align-items: center;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-divider);
    padding-right: 8px;
}

.sysmed-tabs-bar {
    flex-grow: 1;
}

.sysmed-tabs-list {
    display: flex;
    flex-grow: 1;
    overflow-x: auto;
    gap: 4px;
    padding: 4px 4px 0 4px;
}

.sysmed-tab {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background);
    border: 1px solid transparent;
    border-bottom: none;
    min-width: 120px;
    max-width: 220px;
}

.sysmed-tab:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.sysmed-tab.active {
    color: var(--mud-palette-primary);
    background-color: var(--mud-palette-surface);
    border-color: var(--mud-palette-divider);
    border-bottom: 2px solid var(--mud-palette-primary);
}

.sysmed-tab-title {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
}

.sysmed-tab-close {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.sysmed-tab-close:hover {
    opacity: 1;
}

.sysmed-tab-actions {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
    border-left: 1px solid var(--mud-palette-divider);
    align-items: center;
}

.sysmed-iframes {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
}

.sysmed-iframe-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s ease;
}

.sysmed-iframe-wrapper.active {
    opacity: 1;
    z-index: 1;
}

.sysmed-iframe-wrapper.hidden {
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.sysmed-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: var(--mud-palette-background);
}

.sysmed-iframe-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background);
    z-index: 2;
}

/* Login e escolha de clínica
   As telas de autenticação são renderizadas estáticas (form POST de verdade, porque assinar cookie
   exige HttpContext). Por isso os campos são <input> puro e têm estilo próprio aqui — não dá para
   usar MudTextField, que não emite `name` para o POST, nem reaproveitar as classes
   `mud-input-*`, que pressupõem a estrutura completa do componente e fazem o label flutuante
   cair por cima do placeholder. */
.sysmed-login-layout {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-secondary) 100%);
}

.sysmed-login-card {
    width: 100%;
    background: var(--mud-palette-surface);
}

.sysmed-login-title {
    font-weight: 700;
    letter-spacing: -1px;
}

.sysmed-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sysmed-campo-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.sysmed-campo-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 8px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Campo de telefone (intl-tel-input) --------------------------------------------------------------
   A biblioteca reparenta o <input> dentro de um `div.iti` que é `display:inline-block` SEM largura,
   então o campo encolhe para o tamanho intrínseco. O `width:100%` aqui é requisito documentado dela. */
.iti {
    width: 100%;
}

.sysmed-fone-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    /* PLURAL. No singular o var() é inválido e o border inteiro vira `none`. */
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sysmed-fone-input:hover {
    border-color: var(--mud-palette-action-default);
}

.sysmed-fone-input:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .18);
}

.sysmed-campo-wrap {
    position: relative;
    display: block;
}

/* Espaço à direita para o indicador não ficar por cima do texto digitado. */
.sysmed-campo-wrap .sysmed-campo-input {
    padding-right: 42px;
}

.sysmed-campo-status {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}

.sysmed-campo-status.ok {
    opacity: 1;
    color: var(--mud-palette-success);
}

.sysmed-campo-status.erro {
    opacity: 1;
    color: var(--mud-palette-error);
}

.sysmed-campo-input[aria-invalid="true"] {
    border-color: var(--mud-palette-error);
}

.sysmed-campo-input[aria-invalid="true"]:focus {
    border-color: var(--mud-palette-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .18);
}

.sysmed-campo-input[aria-invalid="false"] {
    border-color: var(--mud-palette-success);
}

.sysmed-campo-input[aria-invalid="false"]:focus {
    border-color: var(--mud-palette-success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}

.sysmed-campo-input::placeholder {
    color: var(--mud-palette-text-disabled);
}

.sysmed-campo-input:hover {
    border-color: var(--mud-palette-action-default);
}

.sysmed-campo-input:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}

.sysmed-lembrar {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.sysmed-lembrar input {
    width: 16px;
    height: 16px;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

/* O CPF da primeira etapa, em cima da senha, com a volta ("Não é você?"). */
.sysmed-login-cpf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 8px;
    font-size: 0.95rem;
}

.sysmed-login-cpf a {
    font-size: 0.8125rem;
    color: var(--mud-palette-primary);
}

/* O CPF repetido no formulário da senha, para o gerenciador de senhas do navegador: fora da vista, não fora da página
   (um campo `hidden` ele não lê). */
.sysmed-login-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* A regra da senha nova, que acende ao digitar (sysmed-senha.js). */
.sysmed-senha-check {
    list-style: none;
    margin: -8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.sysmed-senha-check li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sysmed-senha-check li::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border: 2px solid var(--mud-palette-lines-inputs);
    border-radius: 50%;
}

.sysmed-senha-check li.ok {
    color: var(--mud-palette-success);
}

.sysmed-senha-check li.ok::before {
    border-color: var(--mud-palette-success);
    background: var(--mud-palette-success);
    box-shadow: inset 0 0 0 2px var(--mud-palette-surface);
}

.sysmed-senha-check li.erro {
    color: var(--mud-palette-error);
}

.sysmed-senha-check li.erro::before {
    border-color: var(--mud-palette-error);
}

/* Cartão de clínica: o <form> inteiro é o botão, então o <button> precisa ficar transparente. */
.sysmed-cliente-card-botao {
    all: unset;
    display: block;
    width: 100%;
    cursor: pointer;
}

.sysmed-cliente-card {
    transition: transform .15s ease, box-shadow .15s ease;
    border: 1px solid transparent;
}

.sysmed-cliente-card-botao:hover .sysmed-cliente-card,
.sysmed-cliente-card-botao:focus-visible .sysmed-cliente-card {
    transform: translateY(-2px);
    border-color: var(--mud-palette-primary);
    box-shadow: var(--mud-elevation-8);
}

/* ==========================================================================================
   INÍCIO — a tela de entrada: saudação, cinco indicadores do dia, as últimas fichas e o acesso
   rápido. Os indicadores e os atalhos levam a cor de situação (`--st`, das classes `.sm-st--*`).
   ========================================================================================== */
.inicio {
    display: flex;
    flex-direction: column;
    gap: var(--sm-esp-3);
}

.inicio-cabecalho {
    display: flex;
    align-items: center;
    gap: var(--sm-esp-2);
}

.inicio-saudacao-bloco { flex: 1; min-width: 0; }

.inicio-saudacao {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
}

.inicio-data {
    font-size: var(--sm-fonte-sm);
    color: var(--mud-palette-text-secondary);
}

.inicio-data::first-letter { text-transform: uppercase; }

.inicio-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--sm-esp-2);
}

.inicio-kpis > .mud-tooltip-root { display: block; min-width: 0; }

.inicio-kpi {
    --st: var(--sm-cor-azul);
    display: flex;
    align-items: center;
    gap: var(--sm-esp-3);
    min-width: 0;
    height: 100%;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sm-raio-lg);
    background: var(--mud-palette-surface);
    box-shadow: var(--sm-sombra-1);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.inicio-kpi.abre:hover {
    border-color: color-mix(in srgb, var(--st) 55%, transparent);
    box-shadow: var(--sm-sombra-2);
    transform: translateY(-1px);
}

.inicio-kpi-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--st) 14%, transparent);
    color: var(--st);
}

.inicio-kpi-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.inicio-kpi-valor {
    font-size: var(--sm-fonte-kpi);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.inicio-kpi-rotulo,
.inicio-kpi-nota {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inicio-kpi-rotulo {
    font-size: var(--sm-fonte-2xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.inicio-kpi-nota {
    font-size: var(--sm-fonte-xs);
    color: color-mix(in srgb, var(--st) 75%, var(--mud-palette-text-primary));
}

.inicio-corpo {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
    gap: var(--sm-esp-3);
    align-items: start;
}

.inicio-secao-cab {
    display: flex;
    align-items: center;
    gap: var(--sm-esp-2);
    margin-bottom: var(--sm-esp-2);
    color: var(--mud-palette-text-secondary);
}

.inicio-secao-titulo {
    font-size: var(--sm-fonte-md);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.inicio-dica {
    font-size: var(--sm-fonte-2xs);
    white-space: nowrap;
}

.inicio-lista {
    display: flex;
    flex-direction: column;
}

.inicio-ficha {
    display: flex;
    align-items: center;
    gap: var(--sm-esp-3);
    min-height: 44px;
    padding: 5px 8px;
    margin: 0 -8px;
    border-radius: var(--sm-raio);
    color: inherit;
    text-decoration: none;
}

.inicio-ficha + .inicio-ficha { border-top: 1px solid var(--mud-palette-table-lines); }
.inicio-ficha[href]:hover { background: var(--mud-palette-table-hover); }

.inicio-ficha-hora {
    flex: 0 0 78px;
    font-size: var(--sm-fonte-xs);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.inicio-ficha-texto {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.inicio-ficha-nome,
.inicio-ficha-detalhe {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inicio-ficha-nome {
    font-size: var(--sm-fonte-sm);
    font-weight: 600;
}

.inicio-ficha-detalhe {
    font-size: var(--sm-fonte-xs);
    color: var(--mud-palette-text-secondary);
}

.inicio-atalhos-grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sm-esp-2);
}

.inicio-atalho {
    --st: var(--sm-cor-azul);
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sm-raio);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}

.inicio-atalho:hover {
    border-color: color-mix(in srgb, var(--st) 55%, transparent);
    background: color-mix(in srgb, var(--st) 6%, transparent);
}

.inicio-atalho-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--sm-raio);
    background: color-mix(in srgb, var(--st) 14%, transparent);
    color: var(--st);
}

.inicio-atalho-titulo {
    flex: 1;
    min-width: 0;
    font-size: var(--sm-fonte-sm);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablet: o acesso rápido desce para baixo das fichas. Celular: os indicadores em duas colunas, e a
   hora e o selo da ficha encolhem para o nome caber. */
@media (max-width: 1023.98px) {
    .inicio-corpo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .inicio-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inicio-kpi { padding: 8px 10px; gap: var(--sm-esp-2); }
    .inicio-kpi-icone { width: 32px; height: 32px; }
    .inicio-kpi-nota { display: none; }
    /* Na largura do celular "AGUARDANDO ATENDIMENTO" e "Pacientes Aguardando" não cabem numa linha:
       aqui quebrar é inevitável, e cortar esconderia o nome da tela. */
    .inicio-kpi-rotulo,
    .inicio-atalho-titulo { white-space: normal; line-height: 1.2; }
    .inicio-atalho { gap: 8px; padding: 8px; }
    .inicio-atalho-icone { width: 28px; height: 28px; }
    .inicio-atalho-titulo { font-size: var(--sm-fonte-xs); }
    .inicio-dica { display: none; }
    .inicio-ficha-hora { flex-basis: 44px; }
    .inicio-ficha .sm-st--rosa { display: none; }
    .inicio-selo-texto { display: none; }
}

/* Tenant card */
.sysmed-tenant-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sysmed-tenant-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mud-elevation-8);
}

/* Module layout */
.sysmed-module-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--mud-palette-background);
}

.sysmed-module-content {
    flex-grow: 1;
    overflow: auto;
    padding-top: 8px;
}

/* Blazor error */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Ocorreu um erro no sistema."
}

/* Agenda - página full height */
.agenda-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    overflow: hidden;
}

.agenda-header {
    display: flex;
    align-items: center;
    gap: var(--sm-esp-2);
    padding: 8px 12px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}

/* "Quem" e "quando": o seletor de agenda faz as vezes de título (nome em negrito) e o campo de data
   fica ao lado, com o dia da semana escrito depois. */
/* O bloco CRESCE com a folga da barra (e a agenda com ele, até 340px): com `flex: 0` ele ficava no
   tamanho do conteúdo e a folga ia inteira para o espaçador, com o nome da agenda cortado ao lado. */
.agenda-header-quem {
    display: flex;
    align-items: center;
    gap: var(--sm-esp-2);
    flex: 1 1 auto;
    min-width: 0;
}

/* A agenda é a que mais precisa de largura: "TOMOGRAFIA + RESSONÂNCIA" não cabia em 240px. Ela cresce
   até 340px e é a primeira a ceder quando a tela aperta. */
.agenda-header-agenda { flex: 1 1 340px; min-width: 180px; max-width: 340px; }
.agenda-header-agenda.mud-input-control { margin-top: 0; }
.agenda-header-agenda .mud-input-slot,
.agenda-header-agenda input {
    font-size: var(--sm-fonte-md);
    font-weight: 700;
}

.agenda-header-data { flex: 0 0 156px; }
.agenda-header-data .mud-input-control { margin-top: 0; }

/* Dia/Mês e a navegação de data, colados: as setas ficam encostadas no "Hoje" que elas movem. */
.agenda-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.agenda-nav .agenda-visao-toggle { margin-right: 4px; }
.agenda-nav .mud-icon-button { padding: 6px; }

/* O rótulo "Data · terça-feira" não pode ser cortado pela largura do campo. */
.agenda-header-data .mud-input-label { white-space: nowrap; max-width: none; }

/* A busca fecha a barra, depois da navegação: navegar é o que se faz o tempo todo, buscar é
   pontual. Largura fixa em vez de `flex-grow` — crescendo, ela empurrava a navegação para longe
   da borda e o grupo mudava de lugar conforme o título da esquerda aparecia ou não. */
.agenda-header-search {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 1 320px;
    min-width: 200px;
}

.agenda-busca-campo {
    position: relative;
    flex: 1;
    min-width: 0;
}

/* O botão da busca avançada fica sobre a borda direita do campo; o texto digitado para antes dele. */
.agenda-busca-campo .mud-input-slot { padding-right: 34px; }

.agenda-busca-avancada {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    z-index: 1;
}

.agenda-busca-avancada .mud-icon-button { padding: 5px; }

.agenda-header-search .mud-input-control {
    margin: 0;
}

.agenda-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.agenda-left {
    width: 264px;
    flex-shrink: 0;
    padding: 12px;
    overflow-y: auto;
    border-right: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}

.agenda-right {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
}

/* O resumo do dia: seis mini-indicadores em duas colunas, com a cor de situação (a variável `--st` vem
   das classes `.sm-st--*` do design system). */
.agenda-resumo-titulo {
    margin: 4px 0 6px;
    font-size: var(--sm-fonte-2xs);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.agenda-resumo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

/* ⚠️ Sem `--st` padrão aqui: este arquivo vem DEPOIS do design system, e um padrão com a mesma
   especificidade apagava a cor que a classe `.sm-st--*` do item traz — os seis saíam cinza. */
.agenda-resumo-item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border-radius: var(--sm-raio);
    background: color-mix(in srgb, var(--st) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--st) 22%, transparent);
    cursor: help;
}

.agenda-resumo-icone {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--st) 16%, transparent);
    color: var(--st);
}

.agenda-resumo-valor {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.1;
    color: color-mix(in srgb, var(--st) 70%, var(--mud-palette-text-primary));
}

.agenda-resumo-rotulo {
    font-size: var(--sm-fonte-2xs);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* NO DIA o painel da esquerda é só o resumo: seis cartões, um embaixo do outro, numa coluna de 130px
   — ícone à esquerda, número em cima e rótulo embaixo. "Bloqueados", o rótulo mais longo, cabe
   inteiro. Só a partir do tablet: no celular vale o bloco de baixo. */
@media (min-width: 768px) {
    .agenda-left--resumo { width: 130px; padding: var(--sm-esp-2); }
    .agenda-left--resumo .agenda-resumo { grid-template-columns: 1fr; gap: 6px; }
    .agenda-left--resumo .agenda-resumo-item { column-gap: 6px; padding: 6px; }
    .agenda-left--resumo .agenda-resumo-icone { width: 26px; height: 26px; }
}

/* CELULAR: o cabeçalho quebra em linhas (agenda e data, navegação, busca), o painel da esquerda vai para o
   topo com o resumo em três colunas, e a lista de horários ganha a largura inteira — antes ela ficava
   fora da tela, à direita do painel de 280px. Os botões do rodapé rolam para o lado. */
@media (max-width: 767.98px) {
    .agenda-header { flex-wrap: wrap; gap: 8px; padding: 8px; }
    .agenda-header > .flex-grow-1 { display: none; }
    .agenda-header-search { flex: 1 1 100%; min-width: 0; }
    .agenda-header-quem { flex: 1 1 100%; }
    .agenda-header-agenda { flex: 1 1 auto; min-width: 0; }
    .agenda-header-data { flex: 0 0 150px; }

    .agenda-body { flex-direction: column; overflow-y: auto; }
    .agenda-left { width: auto; border-right: 0; border-bottom: 1px solid var(--mud-palette-divider); overflow: visible; padding: 8px; }
    .agenda-resumo { grid-template-columns: repeat(3, 1fr); }
    .agenda-right { overflow: visible; padding: 8px; }

    .agenda-footer { overflow-x: auto; flex-wrap: nowrap; padding: 6px 8px; }
    .agenda-footer .mud-button-root { flex: 0 0 auto; }
}

.agenda-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    flex-shrink: 0;
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    min-height: 48px;
}

.agenda-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.agenda-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.agenda-legend-color {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.agenda-legend-encaixe { background-color: #ffd83b; }
.agenda-legend-bloqueado { background-color: #ffa0a0; }
.agenda-legend-atendido { background-color: #a3a2fc; }

.agenda-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.agenda-toolbar-btn .mud-button-root {
    font-size: 0.75rem !important;
    padding: 2px 10px !important;
    min-height: 30px;
}

/* Agenda - card layout */
.agenda-slots {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.agenda-slot-card {
    display: flex;
    align-items: stretch;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    border: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
}

.agenda-slot-highlight,
.agenda-slot-highlight.agenda-card-agendado,
.agenda-slot-highlight.agenda-card-atendido,
.agenda-slot-highlight.agenda-card-encaixe,
.agenda-slot-highlight.agenda-card-livre,
.agenda-slot-highlight.agenda-card-bloqueado {
    border: 2px solid #ffc107 !important;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.35);
}

.agenda-slot-card:hover {
    box-shadow: var(--mud-elevation-2);
}

.agenda-slot-time {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    padding: 6px 10px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    flex-shrink: 0;
    border-radius: 8px 0 0 8px;
}

.agenda-slot-time .mud-typography {
    font-size: 0.85rem !important;
}

.agenda-slot-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4px 10px;
    gap: 1px;
    min-width: 0;
}

.agenda-slot-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.agenda-slot-row2 {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    flex-wrap: wrap;
}

.agenda-slot-row2 .mud-icon {
    opacity: 0.6;
}

.agenda-card-atendido {
    border-left: 4px solid var(--mud-palette-success);
}

.agenda-card-agendado {
    border-left: 4px solid var(--mud-palette-primary);
}

.agenda-card-bloqueado {
    border-left: 4px solid var(--mud-palette-table-lines);
    background-color: rgba(128, 128, 128, 0.08);
}

.agenda-card-bloqueado .agenda-slot-time {
    background: var(--mud-palette-table-lines);
    color: var(--mud-palette-text-secondary);
}

.agenda-card-encaixe {
    border-left: 4px solid var(--mud-palette-info);
    background-color: rgba(33, 150, 243, 0.08);
}

.agenda-card-livre {
    border-left: 4px solid transparent;
}

.agenda-card-livre .agenda-slot-time {
    background: var(--mud-palette-table-lines);
    color: var(--mud-palette-text-secondary);
}

/* Agenda - action buttons overlay on hover */
.agenda-slot-actions {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    gap: 6px;
}

.agenda-slot-card:hover .agenda-slot-actions {
    display: flex;
}

.agenda-slot-actions .mud-button-root {
    font-size: 0.7rem !important;
    padding: 2px 10px !important;
    min-height: 28px;
    white-space: nowrap;
}

/* Chips de contato no cabeçalho do diálogo: TODOS os números aparecem (o teto de 5 é da lista),
   cada um com o nome quando houver, e a estrela marca quem recebe mensagem. */
.sysmed-contato-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    line-height: 1.3;
    padding: 1px 6px;
    margin-right: 4px;
    border-radius: 10px;
    background: var(--mud-palette-action-default-hover);
    white-space: nowrap;
}

.sysmed-contato-chip-principal {
    background: var(--mud-palette-warning-hover);
    font-weight: 500;
}

.sysmed-contato-chip-nome {
    opacity: .65;
    font-style: italic;
}

.sysmed-contato-chip-nome::before {
    content: "· ";
}

/* ---------------------------------------------------------------------------
   Presença e transições de estado na agenda.

   O selo mostra as INICIAIS de quem está com o horário aberto — as mesmas que o legado grava em
   `MarcadorDigit`, para "em edição por JOTA" e "marcado por JOTA" falarem a mesma língua.
   --------------------------------------------------------------------------- */
.agenda-selo-edicao {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 1px 5px;
    border-radius: 8px;
    color: var(--mud-palette-warning-text);
    background: var(--mud-palette-warning);
    /* Pulso lento: chama atenção sem competir com o conteúdo do card. */
    animation: sysmed-pulso-selo 2.4s ease-in-out infinite;
}

@keyframes sysmed-pulso-selo {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}

/* Transição de estado: só o card que MUDOU pisca, e uma vez. A cor acompanha o novo estado. */
.agenda-transicao-marcou   { animation: sysmed-flash-marcou   1.1s ease-out 1; }
.agenda-transicao-liberou  { animation: sysmed-flash-liberou  1.1s ease-out 1; }
.agenda-transicao-atendeu  { animation: sysmed-flash-atendeu  1.1s ease-out 1; }
.agenda-transicao-bloqueou { animation: sysmed-flash-bloqueou 1.1s ease-out 1; }
.agenda-transicao-mudou    { animation: sysmed-flash-liberou  1.1s ease-out 1; }

@keyframes sysmed-flash-marcou {
    0%   { background: color-mix(in srgb, var(--mud-palette-warning) 45%, transparent); transform: scale(1.012); }
    100% { background: transparent; transform: none; }
}

@keyframes sysmed-flash-liberou {
    0%   { background: color-mix(in srgb, var(--mud-palette-info) 40%, transparent); transform: scale(1.012); }
    100% { background: transparent; transform: none; }
}

@keyframes sysmed-flash-atendeu {
    0%   { background: color-mix(in srgb, var(--mud-palette-success) 40%, transparent); transform: scale(1.012); }
    100% { background: transparent; transform: none; }
}

@keyframes sysmed-flash-bloqueou {
    0%   { background: color-mix(in srgb, var(--mud-palette-text-disabled) 40%, transparent); }
    100% { background: transparent; }
}

/* Quem pediu menos animação recebe a classe e não vê movimento nenhum. Vale para a agenda inteira:
   piscar e pulsar são exatamente o tipo de coisa que essa preferência existe para desligar. */
@media (prefers-reduced-motion: reduce) {
    .agenda-selo-edicao,
    .agenda-transicao-marcou,
    .agenda-transicao-liberou,
    .agenda-transicao-atendeu,
    .agenda-transicao-bloqueou,
    .agenda-transicao-mudou {
        animation: none;
    }
}

/* Seleção de horários no estilo do Explorer: clique, Ctrl, Shift e arraste. */
.agenda-card-selecionado {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

/* O texto dos cards NUNCA é selecionável.
   Não é só estética: Shift+clique e arrastar são gestos de seleção de HORÁRIO, e o navegador
   respondia a eles pintando seleção de TEXTO por cima — no Ctrl+A pegava a página inteira. Com
   `user-select: none` o gesto sobra só para a nossa seleção. */
.agenda-slots,
.agenda-slot-card,
.agenda-slot-card * {
    user-select: none;
    -webkit-user-select: none;
}

/* O conteúdo dos diálogos e do painel esquerdo continua selecionável: ali copiar texto é útil. */
.agenda-slot-card {
    cursor: default;
}

.agenda-slot-card .agenda-slot-actions .mud-button-root {
    cursor: pointer;
}

.agenda-selecao-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px 10px;
    margin-bottom: 8px;
    border-radius: 6px;
    font-size: 0.8125rem;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
    border: 1px solid var(--mud-palette-primary);
    /* Fica visível ao rolar a lista: a seleção pode passar de horários fora da tela. */
    position: sticky;
    top: 0;
    z-index: 3;
}

/* Nome do paciente no cabeçalho do diálogo: é campo de texto (dá para digitar paciente sem
   cadastro, como no legado), mas com cara de título — a borda só aparece no foco, para não
   transformar o cabeçalho num formulário. */
/* O nome não cresce: `flex: 0 1 auto` com base fixa. Deixá-lo esticar empurrava a lupa e o chip de
   status para o extremo oposto do cabeçalho, longe do nome a que se referem. */
.sysmed-nome-wrap {
    flex: 0 1 300px;
    min-width: 140px;
}

.sysmed-nome-paciente .mud-input-slot {
    font-size: 1rem;
    font-weight: 500;
    padding-top: 0;
    padding-bottom: 0;
}

/* Título de bloco dentro do formulário (Procedimento, Preparo de exame). */
.sysmed-form-titulo {
    display: block;
    text-transform: uppercase;
    letter-spacing: .5px;
    opacity: .6;
    margin-top: 4px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* Linhas seguintes de uma lista repetida não têm label; sem isto elas subiriam, porque o MudBlazor
   reserva a altura do label só quando ele existe. */
.sysmed-form-dense .mud-input-control:not(:has(label)) {
    margin-top: 0;
}

.sysmed-nome-paciente .mud-input.mud-input-underline::before,
.sysmed-nome-paciente .mud-input.mud-input-underline::after {
    border-bottom-color: transparent;
}

.sysmed-nome-paciente:hover .mud-input.mud-input-underline::before {
    border-bottom-color: var(--mud-palette-lines-inputs);
}

.sysmed-nome-paciente .mud-input.mud-input-underline.mud-input-focused::after {
    border-bottom-color: var(--mud-palette-primary);
}

.sysmed-nome-paciente .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Estado vazio da agenda: centralizado, com as saídas à mão.
   --------------------------------------------------------------------------- */
.agenda-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    /* Ocupa a área toda, para o card ficar no centro óptico e não colado no topo. */
    min-height: 100%;
    padding: 24px 16px;
}

.agenda-vazio-ilustra {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: 4px;
    border-radius: 50%;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.agenda-vazio-ilustra .mud-icon-root {
    font-size: 38px;
}

.agenda-vazio-titulo {
    font-weight: 600;
    max-width: 30rem;
}

.agenda-vazio-texto {
    color: var(--mud-palette-text-secondary);
    max-width: 30rem;
}

.agenda-vazio-acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.agenda-vazio-nota {
    color: var(--mud-palette-text-disabled);
    margin-top: 6px;
    max-width: 26rem;
}

/* ===========================================================================
   VISÃO MENSAL DA AGENDA

   Substitui o "Horários Disponíveis", que ficava três cliques abaixo de "Outras opções" sendo a
   informação mais pedida ao telefone. O mesmo par de botões serve para Dia/Mês (no cabeçalho) e
   para o escopo do mapa (esta agenda / todas) — é o mesmo gesto, então é o mesmo controle.
   =========================================================================== */
.agenda-visao-toggle {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.agenda-visao-toggle button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.8125rem;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.agenda-visao-toggle button + button {
    border-left: 1px solid var(--mud-palette-lines-default);
}

.agenda-visao-toggle button:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.agenda-visao-toggle button.ativo {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
}

.agenda-visao-toggle button.ativo:hover {
    background: var(--mud-palette-primary-darken);
}

/* ---------------------------------------------------------------------------
   Painel esquerdo no mês: uma agenda por linha, ligada ou desligada.
   --------------------------------------------------------------------------- */
.agenda-escopo {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.agenda-escopo-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.agenda-escopo-dica {
    color: var(--mud-palette-text-secondary);
    margin-bottom: 8px;
}

/* A lista começa logo abaixo do título e cresce até o rodapé.
   ⚠️ Nada de `MudDivider` como filho direto daqui: `.mud-divider` vem com `flex-grow: 1` e, num
   flex column, engole toda a folga — foi o que jogou a lista de agendas para o pé do painel. */
.agenda-escopo-lista {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 4px;
}

/* O NOME é o botão, e ele fica pressionado enquanto a agenda está no mapa. */
.agenda-escopo-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.agenda-escopo-chip:hover:not(:disabled) {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
}

.agenda-escopo-chip:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* Pressionado: cor cheia da primária e uma sombra interna, para o estado se ler pela peça inteira
   e não pela posição de um interruptor. */
.agenda-escopo-chip.ativa {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
    color: var(--mud-palette-primary);
    font-weight: 600;
    box-shadow: inset 0 1px 3px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

.agenda-escopo-chip.ativa:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, var(--mud-palette-surface));
}

.agenda-escopo-nome {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Contador de vagas do MÊS: é o que diz se vale a pena ligar aquela agenda. */
.agenda-escopo-vagas {
    flex-shrink: 0;
    min-width: 30px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.agenda-escopo-vagas.tem {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent);
}

.agenda-escopo-vagas.zero {
    color: var(--mud-palette-text-disabled);
    background: var(--mud-palette-background-gray);
}

/* Filtrada: continua visível (some da lista faria procurar uma agenda que se sabe existir), mas
   somente leitura — ligá-la não acrescentaria nada ao calendário. */
.agenda-escopo-chip.sem-vaga {
    border-style: dashed;
    background: transparent;
    cursor: default;
}

.agenda-escopo-chip.sem-vaga .agenda-escopo-nome {
    color: var(--mud-palette-text-disabled);
    text-decoration: line-through;
    text-decoration-color: var(--mud-palette-lines-default);
}

.agenda-escopo-rodape {
    flex-shrink: 0;
    padding-top: 8px;
    border-top: 1px solid var(--mud-palette-divider);
}

.agenda-escopo-rodape .mud-switch {
    margin: 0;
}

.agenda-mapa {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100%;
    padding: 4px 4px 12px;
}

/* Três colunas com as laterais iguais: o mês fica no centro ÓPTICO do painel, e não desloca
   quando o escopo à esquerda ou o resultado da busca à direita mudam de largura. */
.agenda-mapa-barra {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 2px 0 4px;
}

.agenda-mapa-mes {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-align: center;
    white-space: nowrap;
}

/* Só a primeira letra: em pt-BR o mês vem minúsculo, e `capitalize` daria "Julho De 2026". */
.agenda-mapa-mes::first-letter {
    text-transform: uppercase;
}

.agenda-mapa-barra-dir {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.agenda-mapa-semana {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    padding: 0 2px;
}

.agenda-mapa-semana span {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
}

.agenda-mapa-grade {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    padding: 0 2px;
}

/* O MudTooltip embrulha cada dia num <div> inline-block; sem isto a célula perde a largura da
   coluna e a grade desalinha. */
.agenda-mapa-grade > .mud-tooltip-root {
    display: block;
    width: 100%;
}

.agenda-mapa-dia {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1px;
    width: 100%;
    /* 96px é a altura do dia COM conteúdo (topo, vagas, barra e rodapé). Fixar aqui faz a semana
       sem grade nenhuma ter a mesma altura das outras — abaixo disso a primeira linha encolhia. */
    min-height: 96px;
    padding: 6px 8px 7px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.agenda-mapa-dia:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--mud-elevation-3);
}

.agenda-mapa-dia:disabled {
    cursor: default;
}

/* Linha de cima: número à esquerda, marcador à direita — em vez de tudo empilhado no canto. */
.agenda-mapa-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
}

/* Altura fixa em TODOS os dias: o "hoje" ganha uma pílula em volta do número, e sem uma caixa
   comum ele empurrava a linha inteira 2px para baixo, desalinhando aquela semana das outras. */
.agenda-mapa-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    margin-left: -3px;
    padding: 0 5px;
    border-radius: 11px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
}

/* Quantas agendas compõem aquele número — sem isto, 21 de 37 no escopo múltiplo não diz de quem é. */
.agenda-mapa-agendas {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    border-radius: 9px;
    padding: 1px 6px;
    white-space: nowrap;
}

.agenda-mapa-achado {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--mud-palette-info-text);
    background: var(--mud-palette-info);
    border-radius: 9px;
    padding: 1px 6px;
    white-space: nowrap;
}

/* O número de vagas é o dado que se lê de longe; o rótulo fica na mesma linha, na linha de base,
   em vez de virar mais uma linha de texto empilhada. */
.agenda-mapa-meio {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: auto;
    width: 100%;
}

.agenda-mapa-livres {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
}

.agenda-mapa-rotulo {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

/* Rodapé: ocupados de um lado, total do outro. */
.agenda-mapa-pe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
    margin-top: 3px;
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
}

.agenda-mapa-barrinha {
    display: block;
    width: 100%;
    height: 3px;
    margin-top: 4px;
    border-radius: 2px;
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}

.agenda-mapa-barrinha i {
    display: block;
    height: 100%;
    background: currentColor;
    opacity: .55;
}

/* --- Estados do dia -------------------------------------------------------
   A cor sai da PROPORÇÃO de vagas, não do número absoluto: 3 livres de 4 é agenda vazia, 3 de 40 é
   agenda cheia, e quem atende precisa separar as duas num relance. */
.agenda-mapa-dia.bom {
    border-left-color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 8%, var(--mud-palette-surface));
}

.agenda-mapa-dia.bom .agenda-mapa-livres {
    color: var(--mud-palette-success);
}

.agenda-mapa-dia.medio {
    border-left-color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, var(--mud-palette-surface));
}

.agenda-mapa-dia.medio .agenda-mapa-livres {
    color: var(--mud-palette-warning);
}

.agenda-mapa-dia.lotado {
    border-left-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 8%, var(--mud-palette-surface));
}

.agenda-mapa-dia.lotado .agenda-mapa-livres {
    color: var(--mud-palette-error);
}

/* Sem grade não é "lotado": é dia que a agenda não abre. Não pode competir com os que abrem. */
.agenda-mapa-dia.sem {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-disabled);
    border-style: dashed;
    border-left-style: dashed;
}

.agenda-mapa-dia.fora {
    opacity: .45;
}

.agenda-mapa-dia.hoje .agenda-mapa-numero {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.agenda-mapa-dia.selecionado {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -1px;
}

.agenda-mapa-legenda {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 4px;
    padding: 0 2px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.agenda-mapa-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.agenda-mapa-amostra {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--mud-palette-lines-default);
}

.agenda-mapa-amostra.bom {
    background: color-mix(in srgb, var(--mud-palette-success) 45%, var(--mud-palette-surface));
    border-color: var(--mud-palette-success);
}

.agenda-mapa-amostra.medio {
    background: color-mix(in srgb, var(--mud-palette-warning) 45%, var(--mud-palette-surface));
    border-color: var(--mud-palette-warning);
}

.agenda-mapa-amostra.lotado {
    background: color-mix(in srgb, var(--mud-palette-error) 45%, var(--mud-palette-surface));
    border-color: var(--mud-palette-error);
}

.agenda-mapa-amostra.sem {
    background: var(--mud-palette-background-gray);
    border-style: dashed;
}

.agenda-mapa-achados {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-info);
    background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent);
}

.agenda-mapa-achados.vazio {
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
}

/* ---------------------------------------------------------------------------
   Tooltip do dia — a resposta longa: quem tem vaga, quanta, e quanto já foi.
   O tooltip do MudBlazor é estreito e centrado por padrão; aqui ele vira um painel.
   --------------------------------------------------------------------------- */
/* A classe do MudTooltip cai no popover, não no conteúdo — por isso ela é o gancho aqui. */
.mud-tooltip.agenda-mapa-tip-wrap {
    max-width: none;
    padding: 0;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: var(--mud-elevation-8);
    text-align: left;
    opacity: 1;
}

.agenda-tip {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 260px;
    max-width: 340px;
    padding: 8px 10px 9px;
    font-size: 0.75rem;
    line-height: 1.4;
}

.agenda-tip-cabeca {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.agenda-tip-data {
    font-weight: 600;
    font-size: 0.8125rem;
}

/* Só a primeira letra: `text-transform: capitalize` também maiusculiza depois do hífen e
   transformava "sexta-feira" em "Sexta-Feira". */
.agenda-tip-data::first-letter {
    text-transform: uppercase;
}

.agenda-tip-total {
    color: var(--mud-palette-success);
    font-weight: 600;
    white-space: nowrap;
}

.agenda-tip-vazio {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--mud-palette-text-secondary);
}

/* Uma agenda por linha, alinhadas em colunas: nome, barra, livres, ocupados. É o que torna as
   agendas comparáveis de relance em vez de virar um parágrafo. */
.agenda-tip-lista {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 190px;
    overflow-y: auto;
}

.agenda-tip-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px auto auto auto;
    align-items: center;
    gap: 6px;
}

.agenda-tip-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-tip-barra {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
}

.agenda-tip-barra i,
.sysmed-escolha-barra i {
    display: block;
    height: 100%;
}

.agenda-tip-barra i.livre,
.sysmed-escolha-barra i.livre {
    background: var(--mud-palette-success);
}

.agenda-tip-barra i.ocupado,
.sysmed-escolha-barra i.ocupado {
    background: var(--mud-palette-warning);
}

.agenda-tip-num {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.agenda-tip-num.livre {
    color: var(--mud-palette-success);
}

.agenda-tip-num.ocupado {
    color: var(--mud-palette-warning);
}

.agenda-tip-sep {
    color: var(--mud-palette-text-disabled);
}

.agenda-tip-rodape {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 5px;
    border-top: 1px solid var(--mud-palette-divider);
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
}

.agenda-tip-rodape span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.agenda-tip-rodape .ponto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.agenda-tip-rodape .ponto.livre {
    background: var(--mud-palette-success);
}

.agenda-tip-rodape .ponto.ocupado {
    background: var(--mud-palette-warning);
}

/* Bloco da busca: só existe quando há termo, e é o que responde "quando ele vem?". */
.agenda-tip-achados {
    padding-top: 5px;
    border-top: 1px solid var(--mud-palette-divider);
}

.agenda-tip-achados-titulo {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 3px;
    font-weight: 600;
    color: var(--mud-palette-info);
}

.agenda-tip-achado {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.7rem;
}

.agenda-tip-achado .hora {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.agenda-tip-achado .nome {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-tip-achado .ag {
    color: var(--mud-palette-text-secondary);
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-tip-achado.mais {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

/* ---------------------------------------------------------------------------
   "Qual agenda abrir?" — cada linha traz o que decide a escolha.
   --------------------------------------------------------------------------- */
.sysmed-escolha-agenda {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 340px;
    overflow-y: auto;
}

.sysmed-escolha-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.sysmed-escolha-item:hover {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.sysmed-escolha-item.lotada {
    opacity: .7;
}

.sysmed-escolha-nome {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.sysmed-escolha-barra {
    display: flex;
    width: 72px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 3px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
}

.sysmed-escolha-num {
    flex-shrink: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
}

.sysmed-escolha-num small {
    font-weight: 400;
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
}

.sysmed-escolha-num.livre {
    color: var(--mud-palette-success);
}

.sysmed-escolha-num.ocupado {
    color: var(--mud-palette-warning);
}

.sysmed-escolha-seta {
    flex-shrink: 0;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 900px) {
    .agenda-mapa-dia {
        min-height: 72px;
        padding: 4px 6px 6px;
    }

    .agenda-mapa-livres {
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .agenda-mapa-dia,
    .agenda-visao-toggle button {
        transition: none;
    }

    .agenda-mapa-dia:hover:not(:disabled) {
        transform: none;
    }
}

/* ===========================================================================
   CADASTRO DE PACIENTE

   Cabeçalho fixo (a ficha continua identificada enquanto se rola o formulário) e corpo em coluna
   única com seções. Reusa `.sysmed-dialog-header`, `.sysmed-section`, `.sysmed-form-titulo` e
   `.sysmed-form-dense` do diálogo de agendamento — mesma linguagem, mesma densidade.
   =========================================================================== */
.sysmed-paciente {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* O cabeçalho é a identidade da ficha: acompanha a rolagem em vez de sumir no topo. */
.sysmed-paciente-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--mud-palette-surface);
}

.sysmed-paciente-corpo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
}

.sysmed-paciente-corpo .sysmed-section {
    padding: 8px 10px 10px;
}

/* Últimos agendamentos: colunas alinhadas para a leitura ser vertical, não um parágrafo. */
.sysmed-paciente-agendamentos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 210px;
    overflow-y: auto;
}

.sysmed-paciente-agendamento {
    display: grid;
    grid-template-columns: 5.5rem 3.5rem minmax(0, 1fr) minmax(0, 1.6fr) auto;
    align-items: center;
    gap: 8px;
    padding: 3px 4px;
    border-radius: 6px;
    font-size: 0.8125rem;
}

.sysmed-paciente-agendamento:nth-child(odd) {
    background: var(--mud-palette-background-gray);
}

.sysmed-paciente-agendamento .data {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sysmed-paciente-agendamento .hora {
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.sysmed-paciente-agendamento .agenda,
.sysmed-paciente-agendamento .exame {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sysmed-paciente-agendamento .exame {
    color: var(--mud-palette-text-secondary);
}

/* Pendências no rodapé, todas de uma vez: o legado alerta um campo por vez, na ordem, e descobrir
   seis erros custa seis tentativas de salvar. */
.sysmed-paciente-pendencias {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding-left: 4px;
    font-size: 0.8125rem;
    color: var(--mud-palette-error);
}

.sysmed-paciente-pendencias span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .sysmed-paciente-agendamento {
        grid-template-columns: 5.5rem 3.5rem minmax(0, 1fr) auto;
    }

    .sysmed-paciente-agendamento .exame {
        display: none;
    }
}

/* ===========================================================================
   CADASTRO DE AGENDAS (menu Gerenciamento)
   =========================================================================== */
.sysmed-agendas-lista {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 52vh;
    overflow-y: auto;
}

.sysmed-agenda-item {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1.2fr) auto auto auto 20px;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.sysmed-agenda-item:hover {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

/* Agenda inativa continua na lista — some dela faria procurar uma que se sabe existir. */
.sysmed-agenda-item.inativa {
    border-style: dashed;
    background: transparent;
}

.sysmed-agenda-item.inativa .nome {
    color: var(--mud-palette-text-disabled);
}

.sysmed-agenda-item .nome {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Os sete dias sempre nas mesmas posições: assim dá para comparar duas agendas de relance. */
.sysmed-agenda-item .dias {
    display: inline-flex;
    gap: 2px;
}

.sysmed-agenda-item .dias i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 4px;
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--mud-palette-text-disabled);
    background: var(--mud-palette-background-gray);
}

.sysmed-agenda-item .dias i.on {
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
}

.sysmed-agenda-item .faixa,
.sysmed-agenda-item .medicos {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sysmed-agenda-item .sem-grade {
    font-style: italic;
}

.sysmed-agenda-item .seta {
    color: var(--mud-palette-text-secondary);
}

/* Dias da semana no formulário: mesmo idioma de botão pressionado do escopo do mapa mensal. */
.sysmed-dias-semana {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.sysmed-dias-semana button {
    width: 38px;
    height: 34px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.sysmed-dias-semana button:hover {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
}

.sysmed-dias-semana button.ativo {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
    color: var(--mud-palette-primary);
    box-shadow: inset 0 1px 3px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

@media (max-width: 800px) {
    .sysmed-agenda-item {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .sysmed-agenda-item .faixa,
    .sysmed-agenda-item .medicos {
        display: none;
    }
}

/* Lista do "desmarcar vários": um por linha, com a confirmação individual à esquerda. */
.sysmed-desmarcar-lista {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 320px;
    overflow-y: auto;
}

.sysmed-desmarcar-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

/* Confirmado: fica vermelho, porque é o que vai ser apagado. */
.sysmed-desmarcar-item.confirmado {
    border-left-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 8%, var(--mud-palette-surface));
}

.sysmed-desmarcar-hora {
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
    min-width: 40px;
}

.sysmed-desmarcar-dados {
    min-width: 0;
    flex-grow: 1;
    font-size: 0.75rem;
    line-height: 1.25;
}

.sysmed-desmarcar-detalhe {
    font-size: 0.68rem;
    opacity: .65;
}

/* ---------------------------------------------------------------------------
   Diálogo de transferência: escolha à esquerda, grade do destino à direita.

   O legado mostrava a agenda de destino INTEIRA (`w1078gridHorarios`), com os ocupados visíveis —
   é o contexto que faz a recepção escolher bem. Um combo só de livres esconde quem está nos
   horários vizinhos.
   --------------------------------------------------------------------------- */
.sysmed-transf {
    display: grid;
    grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

@media (max-width: 719px) {
    /* Empilha no estreito: a grade fica embaixo, com a escolha em cima. */
    .sysmed-transf {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sysmed-transf-esq {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 380px;
    overflow-y: auto;
}

.sysmed-transf-rotulo {
    text-transform: uppercase;
    letter-spacing: .5px;
    opacity: .6;
    display: block;
}

/* Agenda e data do destino: valem para todos os horários da transferência. */
.sysmed-transf-destino-barra {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

@media (max-width: 719px) {
    .sysmed-transf-destino-barra {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Um agendamento a transferir, do lado esquerdo. Arrastável, e clicável como alternativa. */
.sysmed-transf-origem-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--mud-palette-warning);
    background: var(--mud-palette-surface);
    cursor: grab;
    transition: background-color .12s ease, box-shadow .12s ease;
}

.sysmed-transf-origem-item:active {
    cursor: grabbing;
}

/* Selecionado para pareamento: é o que vai para o próximo horário clicado. */
.sysmed-transf-origem-item.ativo {
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, var(--mud-palette-surface));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-warning) 40%, transparent);
}

/* Já tem destino: sai do caminho visual, o trabalho ali está feito. */
.sysmed-transf-origem-item.pareado {
    border-left-color: var(--mud-palette-success);
    opacity: .85;
}

.sysmed-transf-origem-hora {
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
}

.sysmed-transf-origem-nome {
    min-width: 0;
    flex-grow: 1;
    font-size: 0.72rem;
    line-height: 1.25;
}

.sysmed-transf-origem-para {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 600;
    color: var(--mud-palette-success);
}

.sysmed-transf-origem-pendente {
    opacity: .55;
    font-style: italic;
}

.sysmed-transf-dir {
    min-width: 0;
}

/* A grade se adapta à largura; `auto-fill` evita coluna órfã em agenda de 40 horários. */
.sysmed-transf-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 5px;
    max-height: 340px;
    overflow-y: auto;
    padding: 2px;
}

.sysmed-transf-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 34px;
    padding: 3px 4px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, transform .08s ease;
}

.sysmed-transf-slot-hora {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.1;
}

.sysmed-transf-slot-quem {
    font-size: 0.6rem;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .8;
}

/* Livre: a cor que convida ao clique. */
.sysmed-transf-slot.livre {
    border-color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, var(--mud-palette-surface));
    color: var(--mud-palette-success-darken, var(--mud-palette-text-primary));
}

.sysmed-transf-slot.livre:hover {
    background: color-mix(in srgb, var(--mud-palette-success) 26%, var(--mud-palette-surface));
    transform: translateY(-1px);
}

/* Escolhido: preenchido, para não haver dúvida de qual vai receber. */
.sysmed-transf-slot.escolhido {
    background: var(--mud-palette-success);
    color: var(--mud-palette-success-text);
    border-color: var(--mud-palette-success);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-success) 35%, transparent);
}

/* Ocupado e bloqueado: legíveis, mas claramente fora de alcance. */
.sysmed-transf-slot.ocupado,
.sysmed-transf-slot.bloqueado,
.sysmed-transf-slot.atual {
    cursor: not-allowed;
    /* Listrado leve: distingue "indisponível" de "apenas apagado", sem depender só da cor. */
    background: repeating-linear-gradient(
        135deg,
        var(--mud-palette-background-gray),
        var(--mud-palette-background-gray) 5px,
        transparent 5px,
        transparent 10px);
    border-color: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-disabled);
}

.sysmed-transf-slot.bloqueado {
    border-style: dashed;
}

/* O horário de onde o paciente está saindo. */
.sysmed-transf-slot.atual {
    border-color: var(--mud-palette-info);
    color: var(--mud-palette-info);
    font-style: italic;
}

/* Destino já pareado com um dos agendamentos (modo múltiplo): mostra QUEM vai receber. */
.sysmed-transf-slot.pareado {
    cursor: pointer;
    background: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
    border-color: var(--mud-palette-warning);
    border-style: solid;
    font-weight: 600;
}

/* Sob o cursor durante o arraste: alvo de soltura evidente. */
.sysmed-transf-slot.hover {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-success) 55%, transparent);
    transform: translateY(-1px);
}

.sysmed-transf-amostra.pareado {
    background: var(--mud-palette-warning);
    border-color: var(--mud-palette-warning);
}

.sysmed-transf-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
    font-size: 0.68rem;
    opacity: .75;
}

.sysmed-transf-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sysmed-transf-amostra {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    border: 1px solid var(--mud-palette-lines-default);
    display: inline-block;
}

.sysmed-transf-amostra.livre {
    border-color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 30%, var(--mud-palette-surface));
}

.sysmed-transf-amostra.ocupado {
    background: repeating-linear-gradient(135deg,
        var(--mud-palette-background-gray), var(--mud-palette-background-gray) 3px,
        transparent 3px, transparent 6px);
}

.sysmed-transf-amostra.bloqueado {
    border-style: dashed;
    background: repeating-linear-gradient(135deg,
        var(--mud-palette-background-gray), var(--mud-palette-background-gray) 3px,
        transparent 3px, transparent 6px);
}

.sysmed-transf-amostra.atual {
    border-color: var(--mud-palette-info);
}

@media (prefers-reduced-motion: reduce) {
    .sysmed-transf-slot,
    .sysmed-transf-slot.livre:hover,
    .sysmed-transf-slot.hover,
    .sysmed-transf-origem-item {
        transition: none;
        transform: none;
    }
}

/* De/para do telefone: o valor antigo riscado e o novo em destaque, para a recepção conferir num
   olhar antes de aceitar. */
.sysmed-depara {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
}

.sysmed-depara-linha {
    display: grid;
    grid-template-columns: 68px 1fr 18px 1fr;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
}

.sysmed-depara-rotulo {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    opacity: .6;
}

.sysmed-depara-de {
    text-decoration: line-through;
    opacity: .55;
}

.sysmed-depara-para {
    font-weight: 600;
    color: var(--mud-palette-primary);
}

/* Uma linha do modal de contatos. Grid em vez de MudGrid: as cinco colunas ficam alinhadas de
   verdade (`AlignItems` não é parâmetro de MudGrid — virava atributo HTML cru e não alinhava nada). */
.sysmed-contato-linha {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr) 34px 34px;
    align-items: center;
    column-gap: 6px;
    padding: 2px 0;
}

@media (max-width: 599px) {
    /* Coluna única no celular; a estrela e a lixeira dividem a última linha. */
    .sysmed-contato-linha {
        grid-template-columns: minmax(0, 1fr) 34px 34px;
        row-gap: 4px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--mud-palette-divider);
    }

    .sysmed-contato-linha > .iti,
    .sysmed-contato-linha > .mud-input-control {
        grid-column: 1 / -1;
    }
}

.agenda-skeleton-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px;
}

.agenda-skeleton-card {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

/* Véu de "carregando" por cima do conteúdo do diálogo. Ancorado pelo `position: relative` do
   `.sysmed-dialog-dense`. Cobre os dois tempos de espera: montar o diálogo e gravar. */
/* ---------------------------------------------------------------------------
   Ficha de atendimento em leitura.

   Campo de leitura NÃO é um input desabilitado: input cinza convida ao clique e frustra. Aqui é
   rótulo pequeno em cima e valor legível embaixo — a ficha se lê como ficha, não como formulário
   travado.
   --------------------------------------------------------------------------- */
.sysmed-campo-leitura {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    padding: 2px 0;
    min-width: 0;
}

.sysmed-campo-leitura .rotulo {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--mud-palette-text-secondary);
}

.sysmed-campo-leitura .valor {
    font-size: .9rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sysmed-campo-leitura .complemento {
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
}

/* Chips de resumo do cabeçalho da ficha, no mesmo idioma do diálogo de agendamento. */
.sysmed-ficha-chips {
    gap: 4px 14px;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.sysmed-ficha-chips span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.sysmed-ficha-chips .mud-icon-root {
    font-size: 14px;
}

/* ---------------------------------------------------------------------------
   Painel "Agendamento anterior".

   Vermelho quando cai na regra dos 30 dias — no legado é literalmente `FieldStyle = "color: red"`
   nos três campos (`Agenda_Marcacao.cs:485-487`). Aqui a cor vai também na borda e num selo, porque
   texto vermelho sozinho passa despercebido num formulário cheio.
   --------------------------------------------------------------------------- */
.sysmed-ag-anterior.alerta .mud-input-outlined-border {
    border-color: var(--mud-palette-error) !important;
}

.sysmed-ag-anterior.alerta input {
    color: var(--mud-palette-error);
    font-weight: 600;
}

.sysmed-ag-anterior-selo {
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: .66rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: #fff;
    background: var(--mud-palette-error);
}

/* ---------------------------------------------------------------------------
   Sugestão de paciente no campo de nome do agendamento.

   Duas linhas: o nome em destaque e, abaixo, o que distingue homônimos — nascimento, idade, CPF e
   telefone. Sem isso a lista de "MARIA DA SILVA" é indistinguível, e é justamente aí que o
   agendamento vai para a ficha errada.
   --------------------------------------------------------------------------- */
.sysmed-sugestao-paciente {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    padding: 2px 0;
    min-width: 0;
}

.sysmed-sugestao-paciente .nome {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sysmed-sugestao-paciente .dados {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

.sysmed-sugestao-vazia,
.sysmed-busca-vazia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 12px;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Linha de OFERTA de horário, no diálogo de agendamento.

   É o convite para acrescentar outro horário ao mesmo atendimento, e entra VAZIA. Antes ela vinha
   com um horário já escolhido — o primeiro livre do dia —, o que parecia um segundo agendamento
   pronto e ainda mudava de lugar conforme a grade. Agora ela precisa se distinguir das linhas de
   verdade à primeira vista: borda tracejada e texto de convite ao lado.
   --------------------------------------------------------------------------- */
.sysmed-linha-oferta .mud-input-outlined-border {
    border-style: dashed !important;
    opacity: .75;
}

.sysmed-oferta-dica {
    font-size: .68rem;
    line-height: 1.15;
    font-style: italic;
    opacity: .85;
}

/* Máscara DENTRO do diálogo — mesma linguagem da `.sysmed-mascara` da tela inteira: véu escuro e
   caixa central. Cobre só o corpo, de propósito: o rodapé fica de fora para "Fechar" continuar
   alcançável se a consulta demorar. */
.sysmed-dialog-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .28);
    z-index: 10;
    border-radius: inherit;
    /* Enquanto está montando, clique nenhum deve chegar aos campos por baixo. */
    cursor: progress;
}

/* A mesma caixa da máscara global, para não haver dois desenhos de "espere" no sistema. */
.sysmed-dialog-loading > .sysmed-mascara-caixa {
    transform: none;
}

/* ---------------------------------------------------------------------------
   Densidade dos diálogos.

   Até aqui esta regra só tinha `position: relative` (âncora do overlay de loading) e a densidade
   estava sendo tentada por atributos que NÃO EXISTEM no MudBlazor — `Dense` em MudTextField,
   `Density="Density.Compact"` em qualquer coisa. Atributo inexistente cai no UserAttributes e é
   emitido como HTML cru, sem efeito nenhum: era essa a causa de "está tudo grotesco/grande".

   Densidade de verdade é aqui, no CSS, sobre as classes que o MudBlazor realmente gera.
   --------------------------------------------------------------------------- */
.sysmed-dialog-dense {
    position: relative;
}

/* ---------------------------------------------------------------------------
   Campos outlined: NÃO se mexe na altura da caixa.

   ⚠️ Tentativa que deu errado e não deve voltar: encurtar o `padding` do `.mud-input-slot` para
   espremer o campo. A caixa encolhe, mas o label não acompanha — ele é posicionado por um
   `transform` que o MudBlazor calcula para a altura padrão, e as regras dele (label em repouso,
   label flutuando e a largura do `<legend>` que corta o entalhe da borda) formam um conjunto
   amarrado. Mexer só na altura produziu exatamente a bagunça relatada: label de 16px dentro de uma
   caixa de 28px, entalhe cortado na borda com o texto do label ainda por dentro, e alinhamento
   diferente entre campo e combobox.

   Vencer isso exigiria replicar TRÊS regras do componente com especificidade maior, uma delas
   condicionada por combinador irmão — frágil e refeito a cada atualização do MudBlazor. A densidade
   vem de onde é seguro: `Margin.Dense` no componente, a tipografia global do `ThemeService` e o
   padding do próprio diálogo, logo abaixo.
   --------------------------------------------------------------------------- */
.sysmed-dialog-dense .mud-input-control-margin-dense {
    margin-top: 2px;
    margin-bottom: 2px;
}

/* Título, corpo e rodapé: o padrão soma ~72px de espaço morto em diálogo denso. */
.sysmed-dialog-dense .mud-dialog-title {
    padding: 10px 16px 6px;
}

.sysmed-dialog-dense .mud-dialog-content {
    padding: 6px 16px 10px;
}

.sysmed-dialog-dense .mud-dialog-actions {
    padding: 6px 12px;
    min-height: auto;
}

.sysmed-dialog-dense .mud-table-cell,
.sysmed-dialog-dense .mud-table-head .mud-table-cell {
    padding: 3px 8px;
    font-size: 0.8125rem;
}

.sysmed-dialog-dense .mud-button-root {
    min-height: 30px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.sysmed-dialog-dense .mud-switch,
.sysmed-dialog-dense .mud-checkbox {
    margin-top: 0;
    margin-bottom: 0;
}

.sysmed-dialog-dense .mud-switch .mud-switch-label,
.sysmed-dialog-dense .mud-checkbox .mud-typography {
    font-size: 0.8125rem;
}

.sysmed-dialog-dense .mud-expand-panel .mud-expand-panel-header {
    padding: 6px 12px;
    min-height: auto;
}

.sysmed-dialog-dense .mud-expand-panel-content {
    padding: 6px 12px;
}

/* Referenciadas no markup e sem regra nenhuma até agora — definidas aqui em vez de removidas
   porque agrupam visualmente os blocos do diálogo de marcação. */
.sysmed-form-dense .mud-input-control {
    margin-top: 2px;
    margin-bottom: 2px;
}

.sysmed-section {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 6px;
}

.sysmed-dialog-header {
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    margin-bottom: 6px;
}

.paciente-search-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
}

.sysmed-search-dialog .mud-dialog-content {
    min-height: 460px;
    max-height: 460px;
}

.paciente-search-card {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.paciente-search-card:hover {
    background-color: var(--mud-palette-action-hover);
}

.paciente-search-card-selected {
    border-color: var(--mud-palette-primary) !important;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.sysmed-busca-avancada-dialog .mud-dialog {
    width: min(80vw, 1400px) !important;
    height: min(80vh, 900px) !important;
    max-width: 80vw !important;
    max-height: 80vh !important;
}

.sysmed-busca-avancada-dialog .mud-dialog-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================================
   PACIENTES AGUARDANDO — as cinco situações do legado, na paleta nova.

   O SIGNIFICADO é o do SysRad, que a recepção conhece (vermelho é atraso, verde é laudado); os hex
   chapados dele (#fc0000, #0072c5, hotpink…) deram lugar às cores de situação do design system, com
   ícone e selo na primeira coluna — decisão do responsável. A linha leva uma faixa de 3px à esquerda
   e um fundo de 6%, que identifica sem brigar com o texto nos dois temas.

   ⚠️ A PRECEDÊNCIA está no C# (`LinhaFilaAtendimento.ClasseDaLinha`), não aqui, e é a do código do
   legado — que não é a ordem da legenda dele.
   ========================================================================================== */

.fila-campo-data { flex: 0 0 160px; }
.fila-campo-agenda { flex: 0 1 230px; min-width: 170px; }
.fila-campo-situacao { flex: 0 1 250px; min-width: 170px; }

.fila-tabela tbody tr td:first-child {
    border-left: 3px solid transparent;
}

/* Larguras fixas (o ColGroup da tela) e texto cortado com "…": a tabela cabe na tela sem quebrar linha. */
.fila-tabela .mud-table-root { table-layout: fixed; }
.mud-table-root .mud-table-body .fila-tabela-celula,
.fila-tabela .mud-table-root .mud-table-body .mud-table-cell {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A coluna de ações tem DOIS botões. Sem o `nowrap` eles empilham e dobram a altura de toda linha. A
   especificidade é a que o MudBlazor impõe na célula (0,3,0) — um seletor mais curto é ignorado. */
.mud-table-root .mud-table-body .fila-tabela-acoes {
    white-space: nowrap;
    text-align: right;
}

.fila-atrasado    { --fila: var(--sm-cor-vermelho); }
.fila-emtempo     { --fila: var(--sm-cor-azul); }
.fila-atendido    { --fila: var(--sm-cor-verde); }
.fila-semficha    { --fila: var(--sm-cor-ambar); }
.fila-prioritario { --fila: var(--sm-cor-rosa); }

.fila-tabela tr[class*="fila-"] td:first-child { border-left-color: var(--fila); }
.fila-tabela tr[class*="fila-"] { background: color-mix(in srgb, var(--fila) 6%, transparent); }
.fila-tabela tr[class*="fila-"]:hover { background: color-mix(in srgb, var(--fila) 12%, transparent); }

.fila-rodape {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sm-esp-2);
    margin-top: var(--sm-esp-2);
}

/* ==========================================================================================
   LAUDOS

   O texto do laudo é HTML gravado pelo CKEditor do SysRad, com estilo inline (`<p style="...">`).
   O legado o embrulha num documento cujo <head> tem TRÊS regras — `files/reports/laudo/content.aspx`.
   Como aqui só o miolo do <body> entra na página, as três regras viram estilo deste container.
   Sem elas o laudo aparece com a fonte do sistema e com o espaçamento de parágrafo do navegador,
   e deixa de parecer com o que é impresso.
   ========================================================================================== */

/* ⚠️ O laudo é uma FOLHA, e a folha é branca nos dois temas.

   O texto traz cor inline em quase toda linha (`color:#000000` em 57.222 dos 72.542 laudos HTML),
   o que o deixaria preto-no-preto no tema escuro. A tentação é forçar `color: inherit`, e foi o
   que estava aqui — mas 253 laudos usam uma cor que NÃO é preta, e o override apagava essa ênfase
   nos dois temas, mudando em silêncio como um documento médico é lido.

   Fundo claro fixo resolve os dois: preto continua preto, vermelho continua vermelho, e é o que o
   SysRad mostra — o CKEditor dele edita sobre canvas branco e o PDF sai em papel branco. */

.sysmed-laudo-texto {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 1.35;
    background: #ffffff;
    color: #000000;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    max-height: 60vh;
    overflow-y: auto;
    /* O texto tem larguras e recuos em pt, pensados para papel: em tela estreita ele estoura, e a
       barra tem de ser deste bloco, nunca do <body> (regra da casa). */
    overflow-x: auto;
    padding: 14px 16px;
}

.sysmed-laudo-texto p {
    margin: 0;
    padding: 0;
}

.sysmed-laudo-texto table {
    border-collapse: collapse;
}

/* Linha selecionada na grade de laudos — o `SelectRecordID` do legado. */
.sysmed-linha-ativa td {
    background: var(--mud-palette-action-default-hover);
    box-shadow: inset 3px 0 0 0 var(--mud-palette-primary);
}

/* ==========================================================================================
   EDITOR DE LAUDO (CKEditor 5)

   Reproduz o "document editor" do SysRad: barra fixa acima, texto numa folha branca abaixo.
   ========================================================================================== */

.sysmed-laudo-editor {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    overflow: hidden;
    /* Preenche a altura que sobra entre o cabeçalho e o rodapé, como no legado, em vez de ter
       altura própria e deixar faixa morta. */
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.sysmed-laudo-editor-barra {
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* A barra do CKEditor traz borda e fundo próprios; aqui quem desenha a moldura é o contêiner. */
.sysmed-laudo-editor-barra .ck.ck-toolbar {
    border: 0;
    background: transparent;
    border-radius: 0;
}

.sysmed-laudo-editor-texto {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ⚠️ AQUI mora metade da correção do defeito da fonte.

   O SysRad tenta manter Arial 12pt chamando `execute('fontFamily')` a cada `setData`. Isso não é
   fonte padrão de documento: é formatação aplicada à SELEÇÃO, que o CKEditor descarta assim que o
   cursor se move. Declarando a fonte no CSS do conteúdo, texto sem marcação nenhuma já nasce certo
   — e continua certo na impressão, porque o envelope do legado
   (`files/reports/laudo/content.aspx`) declara exatamente estes mesmos valores.

   A outra metade está no JS: reaplicar os atributos depois de TODO setData, e não só no
   carregamento, para a barra refletir a fonte e para o texto digitado sair com o <span> explícito
   que o caminho Word -> PDF espera. */
.sysmed-laudo-editor .ck-content,
.ck-editor__editable.ck-content {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 1.35;
    background: #ffffff;
    color: #000000;
    padding: 14px 16px;
}

/* Mesmas duas regras do envelope de impressão do legado. */
.sysmed-laudo-editor .ck-content p {
    margin: 0;
    padding: 0;
}

.sysmed-laudo-editor .ck-content table {
    border-collapse: collapse;
}

/* O CKEditor pinta uma borda de foco que briga com a moldura do contêiner. */
.sysmed-laudo-editor .ck.ck-editor__editable_inline.ck-focused {
    border-color: transparent;
    box-shadow: none;
}

.sysmed-laudo-editor.somente-leitura .sysmed-laudo-editor-barra {
    display: none;
}


/* ==========================================================================================
   TELA DE LAUDOS — a estrutura da janela w1012 do legado.

   Duas colunas de altura cheia: uma lateral FIXA de 330px com a ficha, a lista de laudos, os
   procedimentos e os combos; e o corpo, com cabeçalho do paciente em cima, editor no meio ocupando
   o que sobra, e os botões num RODAPÉ CENTRALIZADO — que é onde o SysRad os põe
   (`HBoxLayoutConfig Pack="Center"`, mod_Digit_Laudos.ascx:352).

   Nada de cartões soltos com margem: a janela do legado é densa de propósito, porque o médico
   passa o dia nela e o que interessa é a área de texto.
   ========================================================================================== */

.laudo-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    overflow: hidden;
}

.laudo-corpo {
    display: flex;
    gap: 8px;
    flex: 1;
    min-height: 0;
    padding: 8px 0 6px 0;
}

.laudo-lateral {
    flex: 0 0 330px;
    width: 330px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.laudo-principal {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

/* Cabeçalho do paciente: foto 60px + nome em 14pt + duas linhas de dados, como no legado. */
.laudo-cabecalho {
    /* ⚠️ `header` e `footer` herdam margem de bloco do reset (3.2rem cada), e num flex column
       isso vira faixa morta: medido, o rodapé ficava 51px acima do fim do painel. */
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex: 0 0 auto;
}

.laudo-cabecalho-nome {
    font-size: 14pt;
    line-height: 1.2;
    font-weight: 500;
}

.laudo-cabecalho-dados {
    display: flex;
    flex-wrap: wrap;
    column-gap: 26px;
    row-gap: 2px;
    margin-top: 4px;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.laudo-cabecalho-dados b {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

.laudo-area {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 6px 8px;
    gap: 6px;
}

/* O rodapé do legado: botões centrados, numa faixa só. */
.laudo-rodape {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 7px 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    flex: 0 0 auto;
}

/* CELULAR: a lateral de 330px sobe para cima do texto e a página rola inteira. Lado a lado, numa
   largura de 375px, o painel do texto ficava com 37px — o editor não existia. O laudo OIT, que usa o
   mesmo molde sem a lateral, só ganha a rolagem. */
@media (max-width: 767.98px) {
    .laudo-page { overflow-y: auto; }
    .laudo-corpo { flex-direction: column; flex: 0 0 auto; padding: 8px; }
    .laudo-lateral { flex: 0 0 auto; width: auto; overflow: visible; }
    .laudo-principal { flex: 0 0 auto; min-height: 80dvh; overflow: visible; }
    .laudo-cabecalho-nome { font-size: 12pt; }
}

/* Rótulo de seção da lateral — substitui os títulos gordos de cartão. */
.laudo-secao {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
    margin: 2px 0 -2px 2px;
}


/* A lateral é densa: nenhum campo dela tem texto de ajuda, então o espaço que o MudBlazor reserva
   embaixo de cada um é faixa morta multiplicada por oito campos. */
.laudo-lateral .mud-input-control {
    margin-bottom: 0;
}

.laudo-lateral .mud-input-helper-text {
    display: none;
}

.laudo-lateral .mud-table-container {
    border-radius: 4px;
}

/* Linha da grade fica clicável de ponta a ponta. */
.laudo-lateral .mud-table-row {
    cursor: pointer;
}

/* ==========================================================================================
   LAUDO OIT — janela w1121

   O formulário da OIT/ILO é uma FOLHA DENSA: ~200 caixas de marcação em blocos numerados, e o
   médico marca quatro delas em 95% dos laudos. Por isso tudo aqui é compacto e a página inteira
   rola numa coluna só — a janela do legado tem 800x450 e rola do mesmo jeito.

   Reaproveita `.laudo-page`, `.laudo-corpo`, `.laudo-principal`, `.laudo-cabecalho` e
   `.laudo-rodape` do módulo de laudos: é a mesma casa, e o rodapé centralizado é o mesmo.
   ========================================================================================== */

/* Sem lateral fixa aqui — o formulário ocupa a largura toda. */
.oit-corpo {
    padding: 8px;
}

/* O cabeçalho é o mesmo do laudo (avatar + nome + duas linhas de dados), com a busca do legado
   encaixada à esquerda em vez de numa faixa própria. */
.oit-cabecalho {
    gap: 10px;
    flex-wrap: wrap;
}

.oit-busca {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    /* O campo tem rótulo flutuante; sem esta folga o "Cód. Exame" encosta na borda do cabeçalho. */
    padding-right: 6px;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.oit-busca .mud-input-control {
    margin-bottom: 0;
}

.oit-busca .mud-input-helper-text {
    display: none;
}

.oit-area {
    overflow-y: auto;
}

.oit-linha-topo {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 2px;
}

.oit-formulario {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Blocos lado a lado quando cabem, empilhados quando não. */
.oit-fila {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.oit-fila > * {
    flex: 1 1 auto;
    min-width: 0;
}

.oit-bloco,
.oit-grupo {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 2px 10px 8px 10px;
    margin: 0;
    min-width: 0;
}

.oit-bloco > legend,
.oit-grupo > legend {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--mud-palette-text-secondary);
    padding: 0 4px;
}

.oit-grupo {
    background: var(--mud-palette-background-gray);
}

.oit-nota {
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
}

.oit-linha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 10px;
}

/* Rótulo da linha ("Parede em perfil", "primária") numa largura fixa, para as caixas das várias
   linhas ficarem alinhadas em coluna — sem isso a grade vira escada. */
.oit-rotulo {
    flex: 0 0 108px;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

/* Os 28 símbolos: grade que se acomoda à largura, em vez das 19 colunas fixas do legado. */
.oit-simbolos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    gap: 0 4px;
}

/* As caixas do formulário são muitas; o espaçamento padrão do MudBlazor dobraria a altura da
   página e obrigaria a rolar por marcas que estão a dois cliques uma da outra. */
.oit-formulario .mud-checkbox {
    margin: 0;
}

.oit-formulario .mud-checkbox .mud-icon-button {
    padding: 3px;
}

.oit-formulario .mud-checkbox .mud-typography {
    font-size: .78rem;
}

/* ==========================================================================================
   LAUDOS AGUARDANDO LIBERAÇÃO — janela winLaudosAguardandoLiberação

   Reaproveita o esqueleto do módulo de laudos (`.laudo-page` / `.laudo-corpo` / `.laudo-principal`
   / `.laudo-rodape`), sem a lateral: aqui a grade é a tela toda. O cabeçalho vira a faixa de
   filtros, que é o que o legado põe no topo da janela.
   ========================================================================================== */

.liberacao-corpo {
    padding: 8px;
}

.liberacao-filtros {
    gap: 8px;
    flex-wrap: wrap;
    /* Os filtros são combos densos; o espaço que o MudBlazor reserva para texto de ajuda embaixo
       de cada um vira faixa morta multiplicada por sete campos. */
    align-items: flex-start;
}

.liberacao-filtros .mud-input-control {
    margin-bottom: 0;
}

.liberacao-filtros .mud-input-helper-text {
    display: none;
}

/* A grade ocupa tudo o que sobra, e rola sozinha — a lista chega a milhares de linhas. */
.liberacao-area {
    min-height: 0;
    padding: 4px 6px 6px 6px;
}

.liberacao-area .mud-table {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.liberacao-area .mud-table-container {
    flex: 1;
    min-height: 0;
}

/* Linha inteira clicável para marcar, como a grade do legado. */
.liberacao-linha {
    cursor: pointer;
}

/* ⚠️ Mesma armadilha de especificidade do tamanho da fonte: o MudBlazor declara o padding em
   `.mud-table-root .mud-table-body .mud-table-cell`, e ele vale 6px/24px/6px/16px — 40px de folga
   horizontal que comiam a data ("01/07/2..." numa coluna de 96px). */
.liberacao-area .mud-table-root .mud-table-body .mud-table-cell,
.liberacao-area .mud-table-root .mud-table-head .mud-table-cell {
    padding: 2px 8px;
    white-space: nowrap;
}

/* ⚠️ `table-layout: fixed` é o que faz as larguras declaradas nas colunas valerem. Sem ele, uma
   descrição de exame comprida esticava a coluna para 548px e a tabela ia a 1790px num container de
   1391px: "Situação", "Dt. Liberado", "Arq." e "Online" saíam da tela sem aviso nenhum. */
.liberacao-area table {
    table-layout: fixed;
    width: 100%;
    /* ⚠️ Só `table-layout: fixed` não basta: quando a soma das larguras declaradas não fecha com a
       do container, o navegador reparte proporcionalmente e ENCOLHE todas — os cabeçalhos viravam
       "Cód...", "Dt. Libe...", "A...". Com um mínimo, as larguras valem e o container rola na
       horizontal em tela estreita, em vez de espremer coluna nenhuma. */
    min-width: 1150px;
}

/* Com largura fixa, o texto longo precisa cortar em vez de empurrar. */
.liberacao-area .mud-table-cell {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ⚠️ A fonte padrão do MudTable é larga demais para a grade: com ela, "01/07/2026" e o número do
   laudo saíam cortados ("01/07/2..." e "3876...") em colunas que os comportam de sobra. Cortar o
   número do laudo é grave — é o identificador que a pessoa confere antes de assinar. */
/* ⚠️ A especificidade tem de superar a do MudBlazor, que declara o tamanho em
   `.mud-table-root .mud-table-body .mud-table-cell` (0,3,0) — um seletor mais curto aqui é
   simplesmente ignorado, e a coluna continua cortando sem nenhum sinal de que a regra não pegou. */
.liberacao-area .mud-table-root .mud-table-body .mud-table-cell {
    font-size: .76rem;
}

/* O cabeçalho corta antes do dado — "Cód. Exame" é mais largo que o número que ele rotula. */
.liberacao-area .mud-table-root .mud-table-head .mud-table-cell {
    font-size: .72rem;
}

/* ==========================================================================================
   CONSULTA DE EXAMES — a janela w1073, com o painel por cima

   A tela tem DOIS ESTADOS e uma lista só: com a busca vazia o espaço é o painel; buscando (ou
   clicando num indicador), o mesmo espaço vira o resultado. O card é o mesmo nos dois.
   ========================================================================================== */

.consulta-page {
    padding: 10px 12px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* ⚠️ A PÁGINA é quem rola, com a altura da área de conteúdo. O `.sysmed-main-content` é
       `overflow: hidden` (cada tela decide a sua rolagem), e esta dizia que quem rolava era ele: com
       uma lista longa o fim dela ficava inalcançável — medido nos Atendimentos, 1.185px de conteúdo
       numa área de 768. O `position: sticky` da barra de busca se agarra ao contêiner que rola; com
       altura definida esse contêiner é esta página, e o grude continua. O que desliga o grude é um
       `overflow` SEM altura — aí o contêiner cresce com o conteúdo e nunca rola. */
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* A busca é a heroína da tela: uma faixa só, sem rótulo, com o tipo detectado ao lado.

   ⚠️ E ela é GRUDADA no topo. Sem isso a barra rolava junto com a lista e sumia da tela — numa
   tela cujo trabalho é buscar, ter de rolar para cima para procurar de novo é o defeito mais caro
   que ela poderia ter. O `z-index` põe a barra acima dos cards, e o fundo opaco impede o conteúdo
   de aparecer por baixo enquanto desliza. */
.consulta-busca {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 7px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

.consulta-busca:focus-within {
    border-color: var(--mud-palette-primary);
}

/* `input` cru em vez de MudTextField: aqui não há rótulo flutuante nem validação, e o campo
   precisa crescer com a faixa. */
.consulta-busca-campo {
    flex: 1 1 260px;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-size: .9rem;
    font-family: inherit;
}

.consulta-busca .mud-input-control {
    margin-bottom: 0;
}

.consulta-busca .mud-input-helper-text {
    display: none;
}

/* ---------------------------------------------------------------- indicadores ---- */

/* O INDICADOR dos seis painéis (atendimentos, agendas, médicos, convênios, pacientes, usuários). Número
   grande, rótulo curto, e UMA linha de nota — a explicação inteira está na dica do indicador. Antes a
   nota quebrava em até quatro linhas e cada indicador ocupava o dobro da altura. */
.consulta-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sm-esp-2);
}

.consulta-kpi {
    position: relative;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sm-raio-lg);
    padding: 9px 12px 9px 14px;
    background: var(--mud-palette-surface);
    box-shadow: var(--sm-sombra-1);
    min-width: 0;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* A faixa de cor à esquerda: azul no indicador comum, âmbar no que pede atenção. */
.consulta-kpi::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--mud-palette-primary);
    opacity: .75;
}

/* Indicador que ABRE uma lista precisa parecer clicável — número que não abre é enfeite. */
.consulta-kpi.abre {
    cursor: pointer;
}

.consulta-kpi.abre:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: var(--sm-sombra-2);
    transform: translateY(-1px);
}

.consulta-kpi.tom-aviso {
    border-color: color-mix(in srgb, var(--sm-cor-ambar) 45%, transparent);
    background: color-mix(in srgb, var(--sm-cor-ambar) 7%, var(--mud-palette-surface));
}

.consulta-kpi.tom-aviso::before { background: var(--sm-cor-ambar); opacity: 1; }
.consulta-kpi.tom-aviso .consulta-kpi-valor { color: color-mix(in srgb, var(--sm-cor-ambar) 70%, var(--mud-palette-text-primary)); }

.consulta-kpi-rotulo {
    font-size: var(--sm-fonte-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.consulta-kpi-valor {
    font-size: var(--sm-fonte-kpi);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--mud-palette-text-primary);
}

.consulta-kpi-nota {
    font-size: var(--sm-fonte-xs);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- gráficos ---- */

.consulta-graficos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 8px;
}

.consulta-painel {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    padding: 9px 12px 4px 12px;
    min-width: 0;
}

.consulta-painel-titulo {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
}

/* ⚠️ O ApexCharts desenha SVG com `fill` INLINE, e o tema do SysMed troca em tempo de execução
   pelo `ThemeService` — que mora no Orchestrator e um módulo não alcança. Quem acerta a cor é este
   bloco, pelas variáveis do MudBlazor: sem ele o texto dos eixos fica preto no tema escuro, sem
   erro nenhum, só ilegível. O `!important` é necessário porque o estilo inline vence tudo. */
.consulta-painel .apexcharts-text tspan,
.consulta-painel .apexcharts-legend-text {
    fill: var(--mud-palette-text-secondary) !important;
    color: var(--mud-palette-text-secondary) !important;
    font-family: inherit !important;
}

.consulta-painel .apexcharts-gridline {
    stroke: var(--mud-palette-lines-default) !important;
}

.consulta-painel .apexcharts-tooltip {
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-color: var(--mud-palette-lines-default) !important;
}

.consulta-painel .apexcharts-tooltip-title {
    background: var(--mud-palette-background-gray) !important;
    border-color: var(--mud-palette-lines-default) !important;
}

/* ---------------------------------------------------------------- cards ---- */

/* O título da lista e o alternador grudam logo abaixo da barra: eles dizem O QUE está na tela e
   como vê-lo, e some junto com a busca não serve para nada. O `top` é a altura da barra. */
.consulta-cabecalho-lista {
    position: sticky;
    top: 46px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
    padding: 6px 2px 4px 2px;
    background: var(--mud-palette-background);
}

/* ------------------------------------------------------------------ abas ----
   As duas metades do histórico do paciente. Segmentado e não `MudTabs`: as abas moram DENTRO da
   barra que já gruda no topo (`.consulta-cabecalho-lista`), e o MudTabs traria painel próprio,
   com a sua própria rolagem — que é justamente o que mataria o sticky da barra de busca. */
.consulta-abas {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: 7px;
    background: var(--mud-palette-background-gray);
}

.consulta-abas button {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 0;
    cursor: pointer;
    padding: 3px 10px;
    border-radius: 5px;
    font: inherit;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    transition: background .12s, color .12s;
}

.consulta-abas button:hover { color: var(--mud-palette-text-primary); }

.consulta-abas button.ativa {
    color: var(--mud-palette-primary);
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.consulta-aba-n {
    min-width: 17px;
    padding: 0 4px;
    border-radius: 9px;
    font-size: .68rem;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-divider);
}

.consulta-abas button.ativa .consulta-aba-n {
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
}

/* ---------------------------------------------------------------- lista ---- */

/* A LISTA é o padrão, e espelha o card de horário da agenda (`.agenda-slot-card`): faixa colorida
   à esquerda, duas linhas de informação e as ações à direita. Duas telas com o mesmo desenho de
   linha é uma leitura só para aprender. */
.consulta-lista {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.consulta-linha {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    min-width: 0;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.consulta-linha:hover {
    box-shadow: var(--mud-elevation-2);
}

/* A faixa da esquerda carrega o estado do laudo — é o que deixa varrer 70 linhas com o olho e
   achar as pendentes sem ler nenhuma. */
.consulta-linha-rail {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    border-radius: 8px 0 0 8px;
    border-left: 4px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-background-gray);
}

.consulta-linha.estado-semlaudo .consulta-linha-rail { border-left-color: var(--mud-palette-warning); }
.consulta-linha.estado-aguardando .consulta-linha-rail { border-left-color: var(--mud-palette-info); }
.consulta-linha.estado-liberado .consulta-linha-rail { border-left-color: var(--mud-palette-success); }
.consulta-linha.estado-revisao .consulta-linha-rail { border-left-color: var(--mud-palette-error); }

/* A faixa da linha de AGENDAMENTO carrega a SITUAÇÃO, como a de ficha carrega o estado do laudo.
   Mesmo elemento e mesma especificidade das quatro de cima — regra em `.consulta-linha` sozinha
   perderia para elas, porque quem tem a borda é o rail. */
.consulta-linha.situacao-atendido .consulta-linha-rail  { border-left-color: var(--mud-palette-success); }
.consulta-linha.situacao-agendado .consulta-linha-rail  { border-left-color: var(--mud-palette-info); }
.consulta-linha.situacao-sem-ficha .consulta-linha-rail { border-left-color: var(--mud-palette-warning); }

.consulta-linha-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding: 5px 10px;
}

.consulta-linha-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.consulta-linha-nome {
    font-size: .88rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    min-width: 0;
}

/* A segunda linha junta ficha, data, procedimento e convênio; o separador é CSS para o markup
   não carregar pontos soltos. */
.consulta-linha-baixo {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: .76rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
}

.consulta-linha-baixo > span + span::before {
    content: "·";
    margin-right: 6px;
    color: var(--mud-palette-lines-default);
}

.consulta-linha-ficha {
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    flex: 0 0 auto;
}

.consulta-linha-balcao {
    flex: 0 0 auto;
    opacity: .75;
    font-style: italic;
}

.consulta-linha-acoes {
    display: flex;
    align-items: center;
    padding-right: 4px;
    flex: 0 0 auto;
}

.consulta-linha-acoes .mud-icon-button {
    padding: 5px;
}

/* O alternador de visualização, no canto do título da lista. */
.consulta-visao {
    margin-left: auto;
    display: flex;
    gap: 2px;
}

.consulta-visao .mud-icon-button {
    padding: 4px;
}

/* ---------------------------------------------------------------- grade ---- */

.consulta-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
}

.consulta-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

/* A pendência é a única que muda de cor — se tudo se destacasse, nada se destacaria. */
.consulta-card.pendente {
    border-color: var(--mud-palette-warning);
}

.consulta-card-topo {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
}

.consulta-card-nome {
    font-size: .88rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    line-height: 1.25;
}

.consulta-card-sub {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

.consulta-card-corpo {
    font-size: .78rem;
    color: var(--mud-palette-text-primary);
    min-width: 0;
}

.consulta-card-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin: 0;
    flex-wrap: wrap;
}

.consulta-card-acoes {
    display: flex;
    gap: 0;
}

.consulta-card-acoes .mud-icon-button {
    padding: 4px;
}


/* ==========================================================================================
   ATENDIMENTOS ANTERIORES (módulo de laudos, janela w1012winLaudosAnt)

   Lista à esquerda e texto à direita, no mesmo diálogo — no legado são duas janelas empilhadas e
   voltar para a lista fecha o texto. Quem está comparando um achado com o de meses atrás não pode
   perder o lugar a cada troca.
   ========================================================================================== */
.laudo-ant {
    display: flex;
    gap: 12px;
    height: 68vh;
    min-height: 0;
}

.laudo-ant-lista {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    padding-right: 4px;
}

.laudo-ant-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 7px;
    padding: 6px 9px;
    font: inherit;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
}

.laudo-ant-item:hover:not(:disabled) { border-color: var(--mud-palette-primary); }

.laudo-ant-item.ativo {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

/* O procedimento que nunca foi laudado CONTINUA na lista — é atendimento como os outros, e é o
   que o legado mostra. O que muda é que ele não abre nada, e a linha diz isso sem tooltip. */
.laudo-ant-item.sem-laudo {
    cursor: default;
    border-left-color: var(--mud-palette-lines-default);
    opacity: .62;
}

.laudo-ant-data  { font-weight: 600; font-size: .78rem; }
.laudo-ant-exame { font-size: .76rem; }
.laudo-ant-meta  { font-size: .68rem; color: var(--mud-palette-text-secondary); }

.laudo-ant-texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 8px;
    overflow: hidden;
}

.laudo-ant-cabecalho {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    font-size: .78rem;
    border-bottom: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-background-gray);
}

/* Rola o TEXTO, não o diálogo — senão o cabeçalho com as setas sai da tela justamente quando a
   pessoa quer trocar de laudo. */
.laudo-ant-folha {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}


/* ==========================================================================================
   ENTREGA DE EXAMES (janela w1116)

   Tela de BALCÃO: um cartão estreito e centrado, porque o trabalho é um código por vez com uma
   fila esperando. Espalhar isso na largura da tela só afastaria o campo do botão.
   ========================================================================================== */
.entrega-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    overflow-y: auto;
    padding: var(--sm-esp-3) var(--sm-esp-2);
}

.entrega-cartao {
    width: 100%;
    max-width: 620px;
    padding: var(--sm-esp-3) var(--sm-esp-4);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sm-raio-lg);
    box-shadow: var(--sm-sombra-1);
}

.entrega-busca {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.entrega-paciente {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.entrega-nome { font-size: var(--sm-fonte-md); font-weight: 700; }
.entrega-sub  { font-size: var(--sm-fonte-xs); color: var(--mud-palette-text-secondary); }

.entrega-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* O bloco do aviso por WhatsApp, no envelopamento. Destacado porque é a única coisa nesta tela que
   sai da clínica e alcança uma pessoa — o resto é escrita em coluna. */
.envelopamento-aviso {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-left: 3px solid var(--mud-palette-warning);
    border-radius: 7px;
    background: var(--mud-palette-background-gray);
}


/* ==========================================================================================
   VER LOGS (janela winLog + winLog2)

   Lista à esquerda e diffs à direita, no mesmo lugar — no legado são duas janelas empilhadas, e
   comparar o "antes" com o "depois" fechando e reabrindo uma delas é o que torna uma trilha
   inútil.
   ========================================================================================== */
.logs-page {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    min-height: 0;
    padding: 10px 12px;
}

.logs-filtros {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}

.logs-campo-data { max-width: 132px; }

.logs-corpo {
    display: flex;
    gap: 10px;
    flex: 1;
    min-height: 0;
}

.logs-lista {
    flex: 1 1 60%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
}

.logs-cabecalho {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background);
}

.logs-linha {
    display: flex;
    flex-direction: column;
    gap: 1px;
    cursor: pointer;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 7px;
    padding: 5px 9px;
    background: var(--mud-palette-surface);
}

.logs-linha:hover { border-color: var(--mud-palette-primary); }

.logs-linha.ativo {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

/* O evento que veio da consulta secundária, ligado por CodRel2 — a faixa diz que ele não é do
   registro pedido, e sim de um vizinho dele. */
.logs-linha.relacionado { border-left-color: var(--mud-palette-info); }

.logs-linha-topo {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.logs-data { font-size: .76rem; font-weight: 600; }
.logs-local { font-size: .72rem; color: var(--mud-palette-text-secondary); }

.logs-linha-baixo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

.logs-linha-baixo > span + span::before {
    content: "·";
    margin-right: 8px;
}

.logs-usuario { font-weight: 600; color: var(--mud-palette-text-primary); }

.logs-diffs {
    flex: 1 1 40%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 8px;
    overflow: hidden;
}

.logs-diffs-titulo {
    padding: 6px 9px;
    font-size: .78rem;
    border-bottom: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-background-gray);
}

.logs-diff-tabela {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px;
}

.logs-diff-linha {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) 1.2fr auto 1.2fr;
    align-items: center;
    gap: 6px;
    padding: 4px 5px;
    border-radius: 5px;
    font-size: .75rem;
}

.logs-diff-linha:nth-child(odd) { background: var(--mud-palette-background-gray); }

.logs-diff-campo  { font-weight: 600; }
.logs-diff-antes  { color: var(--mud-palette-text-secondary); text-decoration: line-through; }
.logs-diff-depois { color: var(--mud-palette-success); font-weight: 600; }


/* Data de cadastro fora de faixa plausível, no painel de pacientes. Marcada e NÃO escondida: o
   cadastro errado só é corrigido por quem o enxerga. */
.paciente-data-ruim {
    color: var(--mud-palette-warning-darken);
    text-decoration: underline dotted;
    cursor: help;
}


/* Indicador que está governando a lista agora. Sem isso, num painel em que o recorte PERMANECE
   (o de convênios), não há como saber qual dos seis está aplicado — e o alternador vira adivinha. */
.consulta-kpi.ativo {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}


/* A linha que o painel de convênios pediu. Especificidade 0,3,0 porque é a que o MudBlazor impõe
   na célula — um seletor mais curto é ignorado sem aviso. */
.mud-table-root .mud-table-body tr.convenio-destacado > td {
    background: var(--mud-palette-primary-hover);
    font-weight: 600;
}


/* ==========================================================================================
   PAINEL DE USUÁRIOS

   O de-para `usuarios`.`Codigo` x `funcionários`.`Código` é a informação que a tela existe para
   mostrar: são duas numerações independentes, e é a de FUNCIONÁRIO que vai para
   `agenda`.`Digitador`. Marcado com traço pontilhado e cursor de ajuda, como a data de cadastro
   fora de faixa do painel de pacientes — chama o olho sem gritar, porque não é erro.
   ========================================================================================== */
.usuario-depara {
    color: var(--mud-palette-info-darken);
    text-decoration: underline dotted;
    cursor: help;
}


/* ==========================================================================================
   RELAÇÃO DE EXAMES POR DIA (o primeiro relatório)

   A tabela é NOSSA, não `MudTable`, e é de propósito: as duas armadilhas de CSS que o MudBlazor
   impõe na grade da worklist (a especificidade 0,3,0 da célula e o `table-layout: fixed` que
   reparte as larguras quando elas não fecham) custaram o número do laudo saindo cortado. Aqui a
   tabela também é o que vai para o PDF, e um `<table>` simples é a mesma coisa nos dois.
   ========================================================================================== */
/* O MOLDE das 32 telas de relatório e de cadastro simples. ⚠️ Mexer aqui muda as 32 de uma vez —
   é de propósito: é o que mantém as telas iguais entre si. */
.relacao-page {
    display: flex;
    flex-direction: column;
    gap: var(--sm-esp-2);
    height: 100%;
    min-height: 0;
    padding: var(--sm-esp-3) var(--sm-esp-1) var(--sm-esp-3) 0;
}

/* A barra de filtros é um cartão: separa "o que pedir" de "o que veio". */
.relacao-filtros {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sm-esp-2);
    padding: var(--sm-esp-2) var(--sm-esp-3);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sm-raio-lg);
    box-shadow: var(--sm-sombra-1);
}

/* ⚠️ 156px, e não o `max-width: 132px` de antes: com o ícone do calendário, 132 cortava o ano
   ("07/09/20"). */
.relacao-campo-data { flex: 0 0 160px; }

/* Antes da primeira busca a tela não fica em branco: diz o que fazer. Vale quando a barra de filtros é
   o ÚLTIMO filho do molde — isto é, ainda não há total, lista, carga nem aviso embaixo dela. */
.relacao-page:has(> .relacao-filtros:last-child)::after {
    content: "Escolha os filtros e clique em Buscar.";
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 64px 16px 16px;
    color: var(--mud-palette-text-secondary);
    font-size: var(--sm-fonte-sm);
    background: no-repeat center 12px / 40px 40px
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394A3B8'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
}

.relacao-totais {
    display: flex;
    gap: var(--sm-esp-2);
    flex-wrap: wrap;
}

/* O total é um indicador pequeno: número na cor principal, rótulo curto, explicação na dica. */
.relacao-total {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sm-raio);
    background: var(--mud-palette-surface);
    box-shadow: var(--sm-sombra-1);
    cursor: help;
}

.relacao-total-valor {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mud-palette-primary);
}

.relacao-total-rotulo {
    font-size: var(--sm-fonte-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
}

.relacao-corpo {
    display: flex;
    gap: var(--sm-esp-2);
    flex: 1;
    min-height: 0;
}

.relacao-lista {
    flex: 1;
    min-width: 0;
    overflow: auto;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sm-raio-lg);
    box-shadow: var(--sm-sombra-1);
}

.relacao-resumo {
    flex: 0 0 260px;
    overflow: auto;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sm-raio-lg);
    box-shadow: var(--sm-sombra-1);
    padding: var(--sm-esp-2) var(--sm-esp-3);
}

.relacao-resumo-titulo {
    font-size: var(--sm-fonte-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: var(--sm-esp-1);
}

/* A tabela é NOSSA, não `MudTable`: as duas armadilhas de CSS que o MudBlazor impõe na grade (a
   especificidade 0,3,0 da célula e o `table-layout: fixed` que reparte as larguras) custaram o número
   do laudo saindo cortado na worklist. `separate` + espaçamento zero é o que deixa a borda do
   cabeçalho grudado acompanhar a rolagem. */
.relacao-tabela {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--sm-fonte-sm);
    table-layout: fixed;
}

/* O cabeçalho gruda: a relação de um dia cheio passa de 90 linhas. */
.relacao-tabela thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mud-palette-background-gray);
    text-align: left;
    font-size: var(--sm-fonte-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
    padding: 8px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Não quebra linha: "…" e a dica automática (sysmed-shell.js) mostra o texto inteiro no mouse. */
.relacao-tabela td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--mud-palette-table-lines);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.relacao-tabela tbody tr:hover td { background: var(--mud-palette-table-hover); }

/* A primeira linha de cada ficha ganha um traço mais forte — é o que deixa contar atendimentos
   com o olho numa lista cuja linha é procedimento. */
.relacao-tabela tr.abre-ficha td { border-top: 1px solid var(--mud-palette-lines-default); }

/* ⚠️ Negrito no PARTICULAR é o `Detalhe_Format` do subrelatório do legado, e está inerte nesta
   base: nenhum dos 98 convênios tem `TipoConv` = 1. */
.relacao-tabela tr.particular td { font-weight: 700; }

.relacao-cod { color: var(--mud-palette-text-secondary); font-size: var(--sm-fonte-xs); }

/* Celular: a página rola inteira, o resumo vai para baixo da lista, e a tabela mantém uma largura
   mínima e rola para o lado em vez de espremer cada coluna até só sobrar "…". */
@media (max-width: 767.98px) {
    .relacao-page {
        height: 100%;
        overflow-y: auto;
        padding: var(--sm-esp-2);
    }

    .relacao-filtros { padding: var(--sm-esp-2); }
    .relacao-corpo { flex: 0 0 auto; flex-direction: column; }
    .relacao-lista { max-height: 72vh; }
    .relacao-resumo { flex: 0 0 auto; }
    .relacao-tabela { min-width: 720px; }
}

/* ==========================================================================================
   FATURAMENTO TISS — a grade da `w1068`, editável na célula como a do legado.
   A linha inconsistente é vermelha e a marcada para faturar é verde — o `GetRowClass` dele
   (`bloqueado-row` / `encaixes-row`), e nessa ordem: inconsistência vence.
   ========================================================================================== */
.tiss-page { display: flex; flex-direction: column; gap: 8px; padding: 8px; height: 100%; }
.tiss-topo { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.tiss-bloco { border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; padding: 8px 10px;
              display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tiss-bloco-titulo { width: 100%; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
                     color: var(--mud-palette-text-secondary); }
.tiss-grade { overflow: auto; flex: 1; min-height: 240px; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; }
.tiss-grade table { border-collapse: collapse; font-size: .74rem; white-space: nowrap; }
.tiss-grade thead th { position: sticky; top: 0; z-index: 1; background: var(--mud-palette-surface); text-align: left;
                       font-size: .66rem; text-transform: uppercase; letter-spacing: .03em; padding: 5px 6px;
                       color: var(--mud-palette-text-secondary); border-bottom: 1px solid var(--mud-palette-lines-default); }
.tiss-grade td { padding: 1px 6px; border-bottom: 1px solid var(--mud-palette-lines-inputs); }
.tiss-grade tr.faturar td { background: rgba(46, 125, 50, .10); }
.tiss-grade tr.inconsistente td { background: rgba(211, 47, 47, .14); }
.tiss-cel { width: 100%; min-width: 40px; border: 1px solid transparent; background: transparent; color: inherit;
            font: inherit; padding: 2px 3px; border-radius: 3px; }
.tiss-cel:hover { border-color: var(--mud-palette-lines-inputs); }
.tiss-cel:focus { border-color: var(--mud-palette-primary); outline: none; background: var(--mud-palette-surface); }
.tiss-rodape { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* CELULAR: filtros e rodapé empilham e passam da altura da tela — a página rola, e a grade ganha uma
   altura própria (rola por dentro, nos dois sentidos). Sem isso o rodapé com "Gerar XML" ficava fora
   do alcance. */
@media (max-width: 767.98px) {
    .tiss-page { overflow-y: auto; }
    .tiss-grade { flex: 0 0 auto; height: 62dvh; min-height: 0; }
}
.tiss-contador { font-size: .8rem; }
.tiss-contador b { font-size: .95rem; }


/* A barra do ranking de produtividade. É `background`, não imagem: o renderizador de PDF roda sem
   rede e abortaria qualquer `src` externo — a mesma barra serve à tela e ao papel. */
.produtividade-barra-cel { padding-right: 8px; }

.produtividade-barra {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: var(--mud-palette-primary);
    min-width: 2px;
}

/* ==========================================================================================
   EXPORTAR DADOS — o corpo da janela "Configurar Dados para Exportar": duas grades lado a lado
   com a coluna de seis botões entre elas, como o `HBoxLayout` do legado.
   ========================================================================================== */
.exportar-corpo {
    display: flex;
    gap: 8px;
    flex: 1;
    min-height: 0;
    align-items: stretch;
}

.exportar-coluna {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* A da esquerda é a lista fixa de campos da fonte; a da direita cresce porque carrega o
   cabeçalho editável, que é texto livre. */
.exportar-corpo > .exportar-coluna:first-child { flex: 0 0 300px; }
.exportar-corpo > .exportar-coluna:last-child { flex: 1; }

.exportar-botoes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.relacao-tabela tr.exportar-sel td { background: var(--mud-palette-action-default-hover); }

/* Campo já escolhido continua na lista da esquerda, como no legado — só fica apagado, senão a
   lista muda de tamanho a cada clique e o olho perde o lugar. */
.relacao-tabela tr.exportar-ja td { color: var(--mud-palette-text-disabled); }

.exportar-cabecalho {
    width: 100%;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    padding: 1px 4px;
}

/* ==========================================================================================
   ATUALIZAR VALORES (cadastro de convênio) — o tamanho da rodada antes de rodar.
   ========================================================================================== */
.atualizacao-resumo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--sm-esp-2) var(--sm-esp-3);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sm-raio);
    background: var(--mud-palette-background-gray);
    font-size: var(--sm-fonte-sm);
}

.atualizacao-resumo > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.atualizacao-resumo .mud-icon-root { color: var(--mud-palette-primary); }

/* ==========================================================================================
   LIBERAR EXAMES (`w1109`) — a linha cuja caixa difere do gravado ainda não foi salva.
   ========================================================================================== */
.relacao-tabela tr.liberar-pendente td {
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, var(--mud-palette-surface));
}

.liberar-aviso {
    font-style: italic;
    color: var(--mud-palette-warning-darken);
}

/* ==========================================================================================
   AGENDA — a observação do dia (`agenda_observações`), acima dos horários. É o recado que a
   recepção deixa para o dia (feriado em fundo verde, o que a agenda não faz): a formatação dela
   é mantida, e a faixa tem altura limitada para não empurrar a grade para baixo da dobra.
   ========================================================================================== */
.agenda-obs-dia {
    display: flex;
    align-items: flex-start;
    gap: var(--sm-esp-2);
    margin: 0 0 var(--sm-esp-2);
    padding: var(--sm-esp-2) var(--sm-esp-3);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 45%, var(--mud-palette-lines-default));
    border-left: 3px solid var(--mud-palette-warning);
    border-radius: var(--sm-raio);
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
}

.agenda-obs-dia-icone { color: var(--mud-palette-warning-darken); margin-top: 2px; flex-shrink: 0; }

.agenda-obs-dia-corpo { flex: 1; min-width: 0; }

.agenda-obs-dia-rotulo {
    font-size: var(--sm-fonte-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mud-palette-text-secondary);
}

.agenda-obs-dia-texto {
    font-size: var(--sm-fonte-sm);
    max-height: 7.5em;
    overflow-y: auto;
    overflow-wrap: anywhere;
}

.agenda-obs-dia-texto p, .agenda-obs-dia-texto div { margin: 0; }

.agenda-obs-dia-novo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--sm-esp-2);
    padding: 4px 10px;
    border: 1px dashed var(--mud-palette-lines-inputs);
    border-radius: var(--sm-raio);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: var(--sm-fonte-sm);
    cursor: pointer;
}

.agenda-obs-dia-novo:hover { color: var(--mud-palette-primary); border-color: var(--mud-palette-primary); }

.agenda-obs-editor { height: 320px; display: flex; flex-direction: column; }