/* ===== Variáveis do tema — Dashboard Administrativo Clean ===== */
:root {
    --cor-fundo: #f4f6f8;
    --cor-fundo-alt: #ffffff;
    --cor-superficie: #ffffff;
    --cor-superficie-alt: #f8f9fa;
    --cor-borda: #e5e7eb;
    --cor-texto: #1f2937;
    --cor-texto-fraco: #6b7280;
    --cor-primaria: #10b981;
    --cor-primaria-hover: #059669;
    --cor-primaria-fraca: #ecfdf5;
    --cor-secundaria: #3b82f6;
    --cor-secundaria-hover: #2563eb;
    --cor-secundaria-fraca: #eff6ff;
    --cor-sucesso: #10b981;
    --cor-erro: #ef4444;
    --cor-alerta: #f59e0b;
    --raio: 12px;
    --raio-pequeno: 8px;
    --sombra: 0 2px 4px rgba(0, 0, 0, 0.05);
    --sombra-media: 0 4px 14px rgba(0, 0, 0, 0.07);
    --fonte: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--fonte);
    background: var(--cor-fundo);
    color: var(--cor-texto);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ===== Barra superior ===== */
.barra-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    background: var(--cor-fundo-alt);
    border-bottom: 1px solid var(--cor-borda);
}

.barra-topo__marca {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--cor-texto);
}

.barra-topo__logo { font-size: 1.4rem; }

.barra-topo__usuario {
    display: flex;
    align-items: center;
    gap: 14px;
}

.barra-topo__nome { color: var(--cor-texto-fraco); font-weight: 500; }

.etiqueta-papel {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.etiqueta-papel--master { background: #ede9fe; color: #6d28d9; }
.etiqueta-papel--recepcionista { background: #dbeafe; color: #1d4ed8; }
.etiqueta-papel--enfermeira { background: #fce7f3; color: #be185d; }
.etiqueta-papel--medico { background: #d1fae5; color: #047857; }

/* ===== Conteúdo ===== */
.conteudo-principal {
    padding: 32px;
    max-width: 1100px;
    margin: 0 auto;
}

.cabecalho-pagina { margin-bottom: 28px; }
.cabecalho-pagina h1 { margin: 0 0 4px; font-size: 1.6rem; font-weight: 700; color: var(--cor-texto); }
.cabecalho-pagina p { margin: 0; color: var(--cor-texto-fraco); }

/* ===== Cartões ===== */
.cartao {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 28px;
    box-shadow: var(--sombra);
    margin-bottom: 20px;
}

.aviso-construcao h2 { margin-top: 0; }
.aviso-construcao p { color: var(--cor-texto-fraco); line-height: 1.6; margin-bottom: 0; }

/* ===== Tela centralizada (login / erro) ===== */
.tela-centralizada {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--cor-fundo);
}

.cartao-login {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 0;
}

.cartao-login__cabecalho { text-align: center; margin-bottom: 8px; }
.cartao-login__logo { font-size: 2.2rem; display: block; margin-bottom: 8px; }
.cartao-login__cabecalho h1 { margin: 0; font-size: 1.3rem; font-weight: 700; }
.cartao-login__cabecalho p { margin: 6px 0 0; color: var(--cor-texto-fraco); font-size: 0.9rem; }

.cartao-erro { text-align: center; max-width: 420px; margin-bottom: 0; }
.cartao-erro h1 { font-size: 3rem; margin: 0; color: var(--cor-primaria); font-weight: 800; }
.cartao-erro p { color: var(--cor-texto-fraco); margin: 12px 0 24px; }

/* ===== Formulários ===== */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 0.85rem; color: var(--cor-texto-fraco); font-weight: 500; }

.campo input,
.campo select,
.campo textarea {
    background: var(--cor-superficie-alt);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    padding: 10px 12px;
    color: var(--cor-texto);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
    background: var(--cor-superficie);
}

/* ===== Botões ===== */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: var(--raio-pequeno);
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
}

.botao--primario { background: var(--cor-primaria); color: #fff; }
.botao--primario:hover { background: var(--cor-primaria-hover); }

.botao--fantasma { background: var(--cor-superficie); border: 1px solid var(--cor-borda); color: var(--cor-secundaria); }
.botao--fantasma:hover { background: var(--cor-secundaria-fraca); border-color: var(--cor-secundaria); }

.botao--pequeno { padding: 6px 14px; font-size: 0.85rem; }
.botao--bloco { width: 100%; }

/* ===== Avisos / flash messages (toasts) ===== */
.lista-avisos {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 40px));
}

.aviso {
    position: relative;
    padding: 12px 34px 12px 16px;
    border-radius: var(--raio-pequeno);
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid transparent;
    box-shadow: var(--sombra-media);
    animation: toast-entrada 200ms ease-out;
}

.aviso--saindo { animation: toast-saida 200ms ease-in forwards; }

@keyframes toast-entrada {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toast-saida {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(24px); }
}

.aviso__fechar {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    padding: 4px;
}

.aviso__fechar:hover { opacity: 1; }

.aviso--erro { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.aviso--sucesso { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.aviso--info { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }

@media (max-width: 640px) {
    .lista-avisos { left: 20px; right: 20px; width: auto; top: 12px; }
}

/* ===== Painel de TV (mantém tema escuro — tela pública, sem interação) ===== */
.pagina-painel-tv { background: var(--cor-fundo); }
.pagina-painel-tv .conteudo-principal { padding: 0; max-width: none; margin: 0; }

.painel-tv {
    position: relative;
    display: flex;
    height: 100vh;
    min-height: 100vh;
    gap: 0;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    overflow: hidden;
}

.oculto { display: none !important; }

/* Linhas "posto + especialidade + sala" do cadastro único (templates/_cadastro_pessoa.html) */
.lista-atuacoes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.atuacao {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: end;
    padding: 12px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    background: var(--cor-superficie-alt);
}
.atuacao .campo { margin-bottom: 0; }
.lista-atuacoes--sem-atender .atuacao { grid-template-columns: minmax(0, 1fr); }
.lista-atuacoes--sem-atender .atuacao__atendimento,
.lista-atuacoes--sem-atender .atuacao__remover,
.lista-atuacoes--sem-atender .atuacao:not(:first-child) { display: none; }
.atuacao__remover { margin-bottom: 4px; }
@media (max-width: 720px) {
    .atuacao { grid-template-columns: 1fr; }
}

.formulario__secao {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cor-texto-fraco);
    margin: 8px 0 12px;
}

/* ----- Coluna da chamada (~65%) ----- */
.painel-tv__chamada {
    flex: 0 0 65%;
    display: flex;
    flex-direction: column;
    padding: 3vh 4vw;
    box-sizing: border-box;
    min-width: 0;
    min-height: 0; /* permite que os filhos flexíveis encolham em vez de
                       empurrar o histórico para fora da tela cheia */
}

.painel-tv__marca {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cor-texto-fraco);
    letter-spacing: 0.02em;
}

.painel-tv__logo {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    color: var(--cor-secundaria);
}

.painel-tv__estado {
    flex: 1 1 0%;
    min-height: 0; /* deixa esta área encolher (em vez do histórico sumir)
                      quando o conteúdo não cabe na altura da tela cheia */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.2vh;
}

.painel-tv__aguardando-texto {
    font-size: clamp(2rem, 4vw, 3.5rem);
    color: var(--cor-texto-fraco);
    font-weight: 600;
}

.etiqueta-prioridade {
    display: inline-block;
    padding: 0.6vh 2vw;
    border-radius: 999px;
    font-size: clamp(1.1rem, 1.6vw, 1.8rem);
    font-weight: 800;
    letter-spacing: 0.08em;
}

.etiqueta-prioridade--prioritario { background: var(--cor-erro); color: #fff; }
.etiqueta-prioridade--normal { background: var(--cor-secundaria); color: #fff; }

.painel-tv__nome-paciente {
    margin: 0;
    padding: 1.5vh 3vw;
    font-size: clamp(72px, 9vw, 160px); /* tamanho padrão; painel.js reduz via
                                            style inline se o nome não couber */
    line-height: 1.05;
    font-weight: 800;
    color: var(--cor-texto);
    border: 6px solid transparent;
    border-radius: 28px;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Pisca só enquanto a chamada está "fresca" na tela — a animação tem
   iteration-count finito, então some sozinha e a borda volta a ficar
   transparente. Roxo para chamada normal, vermelho para prioritária. */
.painel-tv__nome-paciente--piscando {
    --cor-destaque: #7c3aed;
    animation: painel-destaque-nome 1.1s ease-in-out 5;
}

.painel-tv__nome-paciente--piscando.painel-tv__nome-paciente--prioritario {
    --cor-destaque: var(--cor-erro);
}

@keyframes painel-destaque-nome {
    0%, 100% {
        border-color: transparent;
        box-shadow: 0 0 0 0 transparent;
    }
    50% {
        border-color: var(--cor-destaque);
        box-shadow: 0 0 45px 14px var(--cor-destaque);
    }
}

.painel-tv__profissional {
    margin: 0;
    font-size: clamp(1.6rem, 2.6vw, 2.6rem);
    color: var(--cor-texto);
    font-weight: 600;
}

.painel-tv__especialidade {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 2rem);
    color: var(--cor-secundaria);
}

.painel-tv__sala {
    margin: 0;
    font-size: clamp(1.3rem, 2.2vw, 2.2rem);
    color: #b45309;
    font-weight: 700;
}

.painel-tv__chamada-ativa--anim { animation: painel-flash 900ms ease-out; }

@keyframes painel-flash {
    0% { transform: scale(0.92); opacity: 0; }
    60% { transform: scale(1.03); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.painel-tv__historico {
    flex: 0 0 auto; /* nunca encolhe — as últimas chamadas ficam sempre visíveis */
    padding-top: 1vh;
    border-top: 1px solid var(--cor-borda);
}

.painel-tv__historico h2 {
    margin: 0 0 0.6vh;
    font-size: clamp(0.8rem, 1vw, 1rem);
    color: var(--cor-texto-fraco);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.painel-tv__historico ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7vh 1vw;
}

/* Cards menores, só para conferência rápida — a chamada em destaque fica
   sempre na parte de cima; quando há mais chamados do que cabe na grade, o
   painel.js reveza esses cards automaticamente (ver TAMANHO_PAGINA_HISTORICO
   no painel.js). */
.painel-tv__historico-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.8vh 1vw;
    border-radius: var(--raio-pequeno);
    background: var(--cor-superficie-alt);
    border: 1px solid var(--cor-borda);
}

.painel-tv__historico-card--prioritario { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.35); }

.painel-tv__historico-nome {
    font-size: clamp(1.05rem, 1.6vw, 1.6rem);
    line-height: 1.1;
    font-weight: 800;
    color: var(--cor-texto);
}

.painel-tv__historico-detalhe {
    font-size: clamp(0.7rem, 0.9vw, 0.9rem);
    color: var(--cor-texto-fraco);
    font-weight: 600;
}

.painel-tv__historico-horario {
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    color: var(--cor-texto-fraco);
}

/* ----- Coluna de propaganda (~35%) ----- */
.painel-tv__propaganda {
    flex: 0 0 35%;
    position: relative;
    background: var(--cor-superficie-alt);
    border-left: 1px solid var(--cor-borda);
    display: flex;
    align-items: center;
    justify-content: center;
}

.painel-tv__propaganda video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.painel-tv__sem-video {
    color: var(--cor-texto-fraco);
    font-size: 1.3rem;
    text-align: center;
    padding: 0 24px;
}

.botao-som {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(15, 23, 42, 0.75);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 0.95rem;
    cursor: pointer;
}

.botao-som:hover { background: rgba(15, 23, 42, 0.9); }

@media (max-width: 1100px) {
    .painel-tv { flex-direction: column; }
    .painel-tv__chamada,
    .painel-tv__propaganda { flex: 1 1 auto; width: 100%; }
    .painel-tv__propaganda { border-left: none; border-top: 1px solid var(--cor-borda); min-height: 30vh; }
}

/* ===== Área Master: layout com menu lateral ===== */
.pagina-master .conteudo-principal { max-width: 1300px; }

.master-shell {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.master-sidebar {
    flex: 0 0 220px;
    position: sticky;
    top: 24px;
}

.master-sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 10px;
    box-shadow: var(--sombra);
}

.master-sidebar__link {
    padding: 10px 14px;
    border-radius: var(--raio-pequeno);
    color: var(--cor-texto-fraco);
    font-weight: 600;
    font-size: 0.9rem;
}

.master-sidebar__link:hover { background: var(--cor-superficie-alt); color: var(--cor-texto); }

.master-sidebar__link--ativo {
    background: var(--cor-primaria-fraca);
    color: var(--cor-primaria-hover);
}

.master-conteudo { flex: 1; min-width: 0; }

@media (max-width: 800px) {
    .master-shell { flex-direction: column; }
    .master-sidebar { flex: 1 1 auto; width: 100%; position: static; }
    .master-sidebar nav { flex-direction: row; overflow-x: auto; }
}

/* ===== Cartões de estatística ===== */
.grade-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.cartao-estatistica {
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    margin-bottom: 0;
}

.cartao-estatistica:hover { box-shadow: var(--sombra-media); transform: translateY(-2px); }

.cartao-estatistica__numero { font-size: 2.1rem; font-weight: 700; color: var(--cor-texto); }
.cartao-estatistica__rotulo { color: var(--cor-texto-fraco); font-size: 0.85rem; font-weight: 500; }

/* Card "Tempo médio de espera" (ver templates/_tempo_medio_espera.html) */
.cartao-espera { flex-direction: row; align-items: center; gap: 16px; cursor: default; }
.cartao-espera:hover { box-shadow: var(--sombra); transform: none; }
.cartao-espera--avulso { margin-bottom: 20px; }
.cartao-espera__icone {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cor-secundaria-fraca);
    color: var(--cor-secundaria);
}
.cartao-espera__icone svg { width: 26px; height: 26px; }
.cartao-espera__textos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cartao-espera__detalhe { color: var(--cor-texto-fraco); font-size: 0.8rem; }

/* ===== Barra de ações ===== */
.barra-acoes {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.form-inline { display: inline; }

/* ===== Tabelas ===== */
.cartao-tabela { padding: 0; overflow-x: auto; }

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.tabela th,
.tabela td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--cor-borda);
    white-space: nowrap;
}

.tabela th {
    color: var(--cor-texto-fraco);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    background: var(--cor-superficie-alt);
}

.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: var(--cor-superficie-alt); }
.tabela__acoes { display: flex; gap: 6px; }

.miniatura-video {
    width: 140px;
    height: 78px;
    background: #000;
    border-radius: 6px;
    object-fit: cover;
}

/* ===== Marcadores de situação (ativo/inativo) ===== */
.marcador {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.marcador--sucesso { background: rgba(16, 185, 129, 0.12); color: #047857; }
.marcador--erro { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }

.contador-titulo {
    display: inline-block;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--cor-superficie-alt);
    border: 1px solid var(--cor-borda);
    color: var(--cor-texto-fraco);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

/* ===== Formulários (Master) ===== */
.formulario {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 640px;
}

.linha-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.campo--checkbox {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.campo--checkbox input { width: auto; }
.campo--checkbox label { color: var(--cor-texto); font-size: 0.9rem; }

.campo--checkbox-inline { margin-top: 26px; }

.texto-auxiliar {
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: var(--cor-texto-fraco);
}

.formulario-inline {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.formulario-inline h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }

.formulario-inline form:not(.linha-campos) {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.botao--perigo { background: var(--cor-erro); color: #fff; }
.botao--perigo:hover { background: #dc2626; }

.botao:disabled,
.campo input:disabled,
.campo select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.botao--grande {
    padding: 14px 24px;
    font-size: 1.05rem;
    width: 100%;
}

/* ===== Alternar visibilidade de senha ===== */
.campo-senha-wrapper { position: relative; }

.campo-senha-wrapper input { width: 100%; padding-right: 42px; }

.botao-alternar-senha {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    line-height: 1;
    font-size: 1.05rem;
    color: var(--cor-texto-fraco);
}

.botao-alternar-senha:hover { color: var(--cor-texto); }

/* ===== Autocomplete de pacientes (Recepção) ===== */
.campo-autocomplete { position: relative; }

.lista-sugestoes {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    margin-top: 4px;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    overflow: hidden;
    box-shadow: var(--sombra-media);
}

.lista-sugestoes--visivel { display: block; }

.lista-sugestoes__item {
    padding: 10px 14px;
    font-size: 0.9rem;
    cursor: pointer;
}

.lista-sugestoes__item:hover { background: var(--cor-superficie-alt); }

/* ===== Prioridade (radio) ===== */
.grupo-radios {
    display: flex;
    gap: 20px;
    padding-top: 4px;
}

.opcao-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--cor-texto);
    font-weight: normal;
}

.opcao-radio input { width: auto; }

/* ===== Fila de espera (Recepção / Médico) ===== */
.titulo-secao {
    margin: 0 0 16px;
    font-size: 1rem;
    font-weight: 700;
}

.grade-fila {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 16px;
}

/* Cada coluna (Aguardando/Chamados/Atendidos) cresce até a altura da tela;
   a partir daí rola sozinha, mantendo o título visível no topo. */
.coluna-fila {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 100vh;
    overflow-y: auto;
}

/* O espaço de cima da coluna passa a ser do próprio título fixo — assim os
   nomes, ao rolar, somem por baixo dele em vez de aparecerem acima. */
.coluna-fila { padding-top: 0; }

.coluna-fila > .titulo-secao {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    padding-bottom: 6px;
    background: var(--cor-superficie);
}

.cartao.coluna-fila > .titulo-secao { padding-top: 28px; }

.coluna-fila > .item-fila { flex-shrink: 0; }

.item-fila {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 10px 12px;
    background: var(--cor-superficie-alt);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
}

.item-fila--prioritario { border-color: var(--cor-alerta); background: #fffbeb; }

.item-fila__acoes {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
}

.item-fila__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.item-fila__info strong { font-size: 0.9rem; color: var(--cor-texto); }

.marcador--prioritario { background: rgba(245, 158, 11, 0.15); color: #b45309; }

@media (max-width: 900px) {
    .grade-fila { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .barra-topo { flex-direction: column; gap: 10px; align-items: flex-start; }
    .conteudo-principal { padding: 20px; }
    .linha-campos { grid-template-columns: 1fr; }
}

/* ===== Busca por paciente na fila (Recepção / Médico) ===== */
.campo-busca-fila { max-width: 360px; margin-bottom: 4px; }

/* ===== Gráfico de barras (CSS puro) — Dashboard Master ===== */
.grafico-barras {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 180px;
    padding-top: 24px;
}

.grafico-barras__coluna {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 6px;
}

.grafico-barras__valor {
    font-size: 0.75rem;
    color: var(--cor-texto-fraco);
    min-height: 1em;
    font-weight: 600;
}

.grafico-barras__barra {
    width: 100%;
    max-width: 28px;
    min-height: 2px;
    background: var(--cor-primaria);
    border-radius: 4px 4px 0 0;
    transition: height 0.2s ease;
}

.grafico-barras__rotulo {
    font-size: 0.7rem;
    color: var(--cor-texto-fraco);
}

/* ===== Atalhos rápidos — Dashboard Master ===== */
.grade-atalhos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.atalho {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--cor-superficie-alt);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--cor-texto);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.atalho:hover { border-color: var(--cor-primaria); background: var(--cor-primaria-fraca); }
.atalho__icone { font-size: 1.3rem; }

/* ===== Paginação ===== */
.paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.paginacao__info { color: var(--cor-texto-fraco); font-size: 0.85rem; }
.paginacao__info--unica { margin-top: 16px; }
.paginacao__botoes { display: flex; gap: 8px; }
.paginacao__botoes span[aria-disabled] { opacity: 0.4; cursor: not-allowed; }

/* ===== Campos auxiliares de formulário (filtros de busca) ===== */
.campo--acao-busca { justify-content: flex-end; }
.linha-campos--3 { grid-template-columns: repeat(3, 1fr); align-items: end; }

@media (max-width: 900px) {
    .linha-campos--3 { grid-template-columns: 1fr; }
}

/* ===== Separador simples entre seções de formulário ===== */
.separador { border: none; border-top: 1px solid var(--cor-borda); margin: 8px 0; }

/* ===== Cabeçalho de cartão com ação à direita (Teste de Voz) ===== */
.cabecalho-com-acao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.cabecalho-com-acao h2 { margin: 0; font-weight: 700; }

.grupo-radios--filtros { margin-bottom: 16px; }

.area-desativada { opacity: 0.45; pointer-events: none; }

/* ===== Painel de TV: banners de aviso (voz / navegador recomendado) ===== */
.painel-tv__banner {
    position: relative;
    margin-bottom: 1.5vh;
    padding: 10px 34px 10px 16px;
    border-radius: var(--raio-pequeno);
    font-size: 0.95rem;
    line-height: 1.4;
    max-width: 640px;
}

.painel-tv__banner--erro { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.painel-tv__banner--aviso { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }

.painel-tv__banner-fechar {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    padding: 4px;
}

.painel-tv__banner-fechar:hover { opacity: 1; }

/* ===== Painel de TV: botões flutuantes discretos (áudio / tela cheia) ===== */
.botao-flutuante {
    position: absolute;
    background: var(--cor-superficie);
    color: var(--cor-texto);
    border: 1px solid var(--cor-borda);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: var(--sombra-media);
    transition: background-color 0.15s ease, opacity 0.15s ease;
    z-index: 5;
}

.botao-flutuante:hover { background: var(--cor-superficie-alt); }
.botao-flutuante:disabled { opacity: 0.4; cursor: not-allowed; }

.botao-flutuante--audio { top: 20px; right: 20px; }
.botao-flutuante--tela-cheia { bottom: 20px; left: 20px; }

@media (max-width: 1100px) {
    .botao-flutuante--tela-cheia { bottom: auto; top: 20px; left: 20px; }
}

/* Em tela cheia o painel fica sem interação (TV de parede): os botões
   flutuantes somem para não cobrir o nome do paciente nem outros textos. */
.painel-tv--tela-cheia .botao-flutuante,
.painel-tv--tela-cheia .botao-som {
    display: none;
}

/* ===== Multi-tenant: seletor de posto (Master) ===== */
.seletor-posto {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 12px 14px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.seletor-posto label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cor-texto-fraco);
    font-weight: 600;
}

.seletor-posto select {
    width: 100%;
    background: var(--cor-superficie-alt);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    padding: 8px 10px;
    color: var(--cor-texto);
    font-size: 0.9rem;
    font-weight: 600;
}

.link-gerenciar-postos { font-size: 0.78rem; color: var(--cor-secundaria); font-weight: 600; }

/* ===== Multi-tenant: indicador de posto (Médico / Recepção) ===== */
.indicador-posto { font-size: 0.85rem; color: var(--cor-texto-fraco); margin-top: 4px; }
.indicador-posto a { color: var(--cor-secundaria); font-weight: 600; }

/* ===== Multi-tenant: seleção de posto no login ===== */
.grupo-radios--postos {
    flex-direction: column;
    gap: 10px;
}

.opcao-radio--posto {
    padding: 12px 14px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    background: var(--cor-superficie-alt);
    font-weight: 600;
}

.opcao-radio--posto:has(input:checked) { border-color: var(--cor-primaria); background: var(--cor-primaria-fraca); }

/* ===== Botão "Abrir Painel de TV" na sidebar do master ===== */
.botao-painel-tv { margin-bottom: 16px; }

/* ===== Modal (ex.: "Adicionar à fila" na grade de pacientes) ===== */
.modal {
    width: min(520px, calc(100vw - 32px));
    padding: 32px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    box-shadow: var(--sombra-media);
}

.modal::backdrop { background: rgba(17, 24, 39, 0.45); }

.modal form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.modal h2 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; }
.modal .texto-auxiliar { margin: 0; }
.modal .barra-acoes { margin: 4px 0 0; }