/* =====================================================================
   Sistema de Agendamento de Exames - estilo profissional
   ===================================================================== */

:root {
    --azul:        #1565c0;
    --azul-escuro: #0d47a1;
    --azul-claro:  #e3f2fd;
    --verde:       #2e7d32;
    --vermelho:    #c62828;
    --amarelo:     #f9a825;
    --cinza-bg:    #f4f6f9;
    --cinza-bord:  #e0e0e0;
    --texto:       #263238;
    --texto-fraco: #607d8b;
    --branco:      #ffffff;
    --sombra:      0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.06);
    --sombra-card: 0 8px 30px rgba(13,71,161,.18);
    --fundo:       linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
    --radius:      14px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--fundo);
    background-attachment: fixed;
    color: var(--texto);
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh;
}

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------- Barra lateral (menu) ---------------------- */
:root { --sidebar-w: 244px; }

.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    background: linear-gradient(180deg, #0d47a1 0%, #093170 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 16px 14px;
    box-shadow: 2px 0 18px rgba(0,0,0,.18);
    z-index: 200;
    overflow-y: auto;
    /* Barra de rolagem fina e discreta */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.28) transparent;
}
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.22);
    border-radius: 4px;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.38); }
.sidebar::-webkit-scrollbar-button { display: none; height: 0; }
.sidebar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    padding: 4px 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    margin-bottom: 8px;
}
.sidebar .brand:hover { text-decoration: none; }
.brand-ico { font-size: 22px; line-height: 1; }
.brand-txt { line-height: 1.2; }
/* Logo do sistema na barra lateral */
.sidebar .brand-com-logo { display: block; padding: 10px 0 16px; margin: 0 -6px; }
.brand-logo { display: block; width: 100%; height: auto; }

.sidebar .nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #cfe0f5;
    padding: 9px 13px;
    border-radius: 10px;
    font-size: 14.5px;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.nav-item.ativo {
    background: rgba(255,255,255,.18);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 #fff;
}
.nav-item .ico { flex-shrink: 0; opacity: .95; }
.nav-sep {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.45);
    padding: 10px 13px 4px;
}

.sidebar-user {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.12);
}
.su-nome { font-weight: 600; font-size: 14px; }
.su-papel { font-size: 12px; color: rgba(255,255,255,.7); margin-bottom: 10px; }

/* ---------------------- Topo (somente no celular) ---------------------- */
.mobile-top { display: none; }
.sidebar-overlay { display: none; }
.menu-toggle-cb { display: none; }

/* ---------------------- Área principal ---------------------- */
.layout-main { min-height: 100vh; }
body.com-sidebar .layout-main { margin-left: var(--sidebar-w); }
.rodape { text-align: center; color: rgba(255,255,255,.7); font-size: 12px; padding: 20px; }

/* ---------------------- Conteúdo ---------------------- */
.container {
    max-width: 1200px;
    margin: 28px auto;
    padding: 0 24px;
}
.page-title {
    font-size: 24px;
    margin: 0 0 4px;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.page-sub { color: rgba(255,255,255,.85); margin: 0 0 20px; }

.card {
    background: var(--branco);
    border-radius: var(--radius);
    box-shadow: var(--sombra-card);
    padding: 22px;
    margin-bottom: 20px;
}
.card h2 { margin-top: 0; font-size: 17px; color: var(--azul-escuro); }

/* ---------------------- Botões ---------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--azul);
    color: #fff;
    border: none;
    padding: 9px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
}
.btn:hover { background: var(--azul-escuro); text-decoration: none; }
.btn-sec { background: #eceff1; color: var(--texto); }
.btn-sec:hover { background: #cfd8dc; }
.btn-verde { background: var(--verde); }
.btn-verde:hover { background: #1b5e20; }
.btn-vermelho { background: var(--vermelho); }
.btn-vermelho:hover { background: #8e0000; }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-bloco { width: 100%; justify-content: center; }
/* Botão do seletor de exames: contornado com o acento do sistema (teal/azul),
   leve para não competir com os nomes dos exames logo abaixo. */
.btn-exame {
    background: transparent;
    color: var(--azul);
    border: 1px solid var(--azul);
    font-weight: 600;
}
.btn-exame:hover { background: var(--azul-claro); color: var(--azul); }
/* Botão de ação encostado à direita do cabeçalho da etapa */
.etapa-header-acao { margin-left: auto; flex-shrink: 0; white-space: nowrap; }

/* ---------------------- Formulários ---------------------- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.form-grid .full { grid-column: 1 / -1; }

/* Telefone + Nome de quem atende, na mesma linha (telefone na frente) */
.linha-telefone { display: grid; grid-template-columns: 200px 1fr; gap: 16px; }
/* Endereço + Número na mesma linha (endereço ocupa mais espaço) */
.linha-endereco { display: grid; grid-template-columns: 1fr 120px; gap: 16px; }
/* CEP + Bairro na mesma linha (CEP na frente, mais estreito) */
.linha-cep-bairro { display: grid; grid-template-columns: 140px 1fr; gap: 16px; }
/* Cidade + UF na mesma linha (UF ao lado, só 2 letras) */
.linha-cidade-uf { display: grid; grid-template-columns: 1fr 90px; gap: 16px; }
@media (max-width: 500px) {
    .linha-telefone { grid-template-columns: 1fr; }
    .linha-endereco { grid-template-columns: 1fr 90px; }
    .linha-cep-bairro { grid-template-columns: 110px 1fr; }
    .linha-cidade-uf { grid-template-columns: 1fr 70px; }
}
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.field label { font-size: 13px; font-weight: 600; color: var(--texto-fraco); }
.field .obrig { color: var(--vermelho); }
input[type=text], input[type=password], input[type=email], input[type=date],
input[type=time], input[type=number], input[type=tel], select, textarea {
    padding: 9px 11px;
    border: 1px solid var(--cinza-bord);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    width: 100%;
    background: #fff;
    color: var(--texto);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(21,101,192,.15);
}
textarea { resize: vertical; min-height: 70px; }

/* Campo numérico sem as setinhas nativas do navegador (visual mais limpo) */
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.form-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.hint { font-size: 12px; color: var(--texto-fraco); }

/* Lista de exames com caixinha de marcar (mais de um exame na mesma visita) */
.exame-lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--cinza-bord);
    border-radius: 8px;
    overflow: hidden;
}
.exame-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--cinza-bord);
    transition: background .12s;
}
.exame-item:last-child { border-bottom: none; }
.exame-item:hover { background: var(--cinza-bg); }
.exame-item input { width: auto; margin: 0; }
.exame-item-nome { flex: 1; font-size: 14px; color: var(--texto); }

/* ----- Datas por clínica (etapa 4 do novo agendamento) ----- */
.clinica-data-bloco {
    border: 1px solid var(--cinza-bord);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: var(--cinza-bg);
}
.clinica-data-nome {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 14px;
    color: var(--texto);
}
.clinica-data-siglas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 12px;
}
/* Bolinha verde-clara com a sigla do exame (nome completo no title/hover) */
.exame-sig {
    background: #e8f5e9;
    color: #1b5e20;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: default;
}

/* ----- Escolha de exames por modal ----- */
.exame-escolha { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.exame-escolha .btn { align-self: flex-start; }
.exame-escolha-vazio { margin: 0; font-size: 13px; color: var(--texto-fraco); }
.exame-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.exame-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--azul-claro);
    border: 1px solid var(--cinza-bord);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--texto);
}

.ex-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8,11,15,0);
    padding: 20px;
    opacity: 0;
    transition: opacity .2s ease, background .2s ease, backdrop-filter .2s ease;
}
.ex-modal-overlay[hidden] { display: none; }
.ex-modal-overlay.aberto {
    background: rgba(8,11,15,.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 1;
}
.ex-modal-caixa {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--branco);
    border-radius: 16px;
    box-shadow: 0 24px 60px -12px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.1);
    max-width: 460px;
    width: 100%;
    max-height: 85vh;
    padding: 22px;
    transform: scale(.95) translateY(10px);
    transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.ex-modal-overlay.aberto .ex-modal-caixa { transform: scale(1) translateY(0); }
[data-tema="escuro"] .ex-modal-caixa {
    border: 1px solid var(--cinza-bord);
    box-shadow: 0 24px 60px -12px rgba(0,0,0,.65), 0 4px 16px rgba(0,0,0,.3);
}
.ex-modal-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ex-modal-titulo { font-size: 16.5px; font-weight: 700; color: var(--texto); }
.ex-modal-busca { margin-bottom: 12px; }
.ex-modal-lista {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.ex-modal-nada { text-align: center; color: var(--texto-fraco); padding: 20px; font-size: 14px; margin: 0; }
.ex-modal-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.ex-modal-conta { font-size: 13px; color: var(--texto-fraco); }

/* ---------------------- Autocomplete customizado ---------------------- */
.ac-wrap { position: relative; }
.ac-lista {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #fff;
    border: 1px solid var(--cinza-bord);
    border-radius: 10px;
    box-shadow: var(--sombra-card);
    max-height: 220px;
    overflow-y: auto;
    z-index: 400;
    scrollbar-width: thin;
    scrollbar-color: var(--cinza-bord) transparent;
}
.ac-lista::-webkit-scrollbar { width: 6px; }
.ac-lista::-webkit-scrollbar-thumb { background: var(--cinza-bord); border-radius: 4px; }
.ac-item {
    padding: 9px 14px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 0;
    color: var(--texto);
    transition: background .1s;
}
.ac-item:first-child { border-radius: 10px 10px 0 0; }
.ac-item:last-child  { border-radius: 0 0 10px 10px; }
.ac-item:only-child  { border-radius: 10px; }
.ac-item:hover, .ac-item.ac-ativo {
    background: var(--azul-claro);
    color: var(--azul-escuro);
    font-weight: 500;
}
.ac-sem-resultado {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--texto-fraco);
}

/* Campo com sufixo/prefixo fixo (ex.: CRM + /SP) */
.input-grupo {
    display: flex;
    align-items: stretch;
}
.input-grupo input {
    flex: 1;
    min-width: 0;
}
.input-grupo-sufixo {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: #f0f0f0;
    border: 1px solid var(--cinza-bord);
    border-left: none;
    border-radius: 0 6px 6px 0;
    font-size: 14px;
    color: var(--texto-fraco);
    white-space: nowrap;
    user-select: none;
}

/* ---------------------- Cards de etapa (agendamento) ---------------------- */
.etapa-card {
    background: var(--branco);
    border-radius: var(--radius);
    box-shadow: var(--sombra-card);
    margin-bottom: 16px;
}
.etapa-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid #e8eef6;
    background: #f5f8ff;
    border-radius: var(--radius) var(--radius) 0 0;
}
.etapa-num {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--azul);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.etapa-titulo {
    font-weight: 700;
    font-size: 15px;
    color: var(--azul-escuro);
}
.etapa-sub {
    font-size: 12px;
    color: var(--texto-fraco);
    margin-top: 1px;
}
.etapa-corpo { padding: 18px 20px; }

/* ---------------------- Diário: barra de dia + novo ---------------------- */
.ag-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.dia-nav { display: flex; align-items: center; gap: 8px; }
.dia-nav-seta {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--cinza-bord);
    border-radius: 9px;
    background: var(--branco);
    color: var(--texto);
}
.dia-nav-seta:hover { border-color: var(--azul); color: var(--azul); text-decoration: none; }
.dia-nav-campo { margin: 0; }
.dia-nav-campo input { height: 38px; }
.dia-nav-hoje {
    height: 38px;
    display: inline-flex; align-items: center;
    padding: 0 14px;
    border: 1px solid var(--cinza-bord);
    border-radius: 9px;
    background: var(--branco);
    color: var(--texto-fraco);
    font-size: 13px; font-weight: 600;
}
.dia-nav-hoje:hover { border-color: var(--azul); color: var(--azul); text-decoration: none; }

/* Dia sem agendamentos */
.ag-vazio { text-align: center; padding: 40px 20px; }
.ag-vazio-ico { color: var(--cinza-bord); margin-bottom: 6px; }
.ag-vazio-txt { font-size: 16px; font-weight: 600; color: var(--texto); }
.ag-vazio-sub { font-size: 13.5px; color: var(--texto-fraco); margin: 4px 0 16px; }

/* ---------------------- Modal do formulário de agendamento ---------------------- */
.ag-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: rgba(8,11,15,.72);
    /* Sem backdrop-filter aqui de propósito: ele criaria um "containing block"
       e o modal de exames (position:fixed, filho deste overlay) passaria a se
       posicionar por este contêiner rolável em vez da viewport — o que jogava
       o formulário para o topo / travava a rolagem ao abrir a lista. */
    padding: 24px 16px;
    overflow-y: auto;
}
.ag-modal-overlay[hidden] { display: none; }
.ag-modal-caixa {
    width: 100%;
    max-width: 820px;
    margin: auto;
    background: var(--branco);
    border: 1px solid var(--cinza-bord);
    border-radius: 16px;
    box-shadow: 0 24px 60px -12px rgba(0,0,0,.4);
}
.ag-modal-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid var(--cinza-bord);
    background: var(--branco);
    border-radius: 16px 16px 0 0;
}
.ag-modal-titulo { font-size: 16px; font-weight: 700; color: var(--texto); }
.ag-modal-corpo { padding: 18px 20px 20px; }

/* Formulário mais compacto dentro do modal */
.ag-modal-corpo .etapa-card { margin-bottom: 14px; box-shadow: none; border: 1px solid var(--cinza-bord); }
.ag-modal-corpo .etapa-header { padding: 10px 14px; gap: 11px; }
.ag-modal-corpo .etapa-num { width: 26px; height: 26px; font-size: 13px; }
.ag-modal-corpo .etapa-titulo { font-size: 14px; }
.ag-modal-corpo .etapa-corpo { padding: 14px; }
.ag-modal-corpo .field { margin-bottom: 0; }
.ag-modal-corpo textarea { min-height: 58px; }
.ag-modal-corpo .form-actions {
    margin: 0;
    padding: 14px 0 2px;
}
@media (max-width: 560px) {
    .ag-toolbar { align-items: stretch; }
    .ag-toolbar .btn { justify-content: center; }
}

/* Divisões do cadastro do paciente (Identificação, Filiação, Documentos...) */
.cad-secao {
    margin: 22px 0 12px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--cinza-bord);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--texto-fraco);
}
.cad-secao:first-child { margin-top: 4px; }

/* Selo de paciente reconhecido (ficha já existente reaproveitada) */
.pac-selo {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    padding: 9px 13px;
    border-radius: 9px;
    background: var(--azul-claro);
    border: 1px solid var(--cinza-bord);
    font-size: 13px;
    font-weight: 600;
    color: var(--azul);
}
.pac-selo[hidden] { display: none; }
.pac-selo svg { flex: none; }
.pac-selo-txt { flex: 1; min-width: 0; }
.pac-selo-btn {
    flex: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--texto-fraco);
    text-decoration: underline;
    cursor: pointer;
}
.pac-selo-btn:hover { color: var(--texto); }

/* Sugestões de fichas já cadastradas (busca por nome ou CPF) */
.pac-sugestoes {
    margin-top: 12px;
    background: var(--branco);
    border: 1px solid var(--cinza-bord);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--sombra);
}
.pac-sug-cab {
    padding: 7px 14px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--texto-fraco);
    background: var(--cinza-bg);
    border-bottom: 1px solid var(--cinza-bord);
}
.pac-sug-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--cinza-bord);
    transition: background .12s;
}
.pac-sug-item:last-child { border-bottom: none; }
.pac-sug-item:hover { background: var(--azul-claro); }
.pac-sug-nome { font-weight: 600; font-size: 14px; color: var(--texto); }
.pac-sug-meta { font-size: 12.5px; color: var(--texto-fraco); white-space: nowrap; }
[data-tema="escuro"] .pac-sug-item:hover { background: #1d2b3f; }

/* ---------------------- Calendário customizado ---------------------- */
.dp-wrap { position: relative; }
.dp-input { cursor: pointer; padding-right: 38px; }
.dp-icone {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--texto-fraco);
    pointer-events: none;
    display: flex;
}
.dp-cal {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 500;
    width: 286px;
    max-width: calc(100vw - 32px);
    background: var(--branco);
    border: 1px solid var(--cinza-bord);
    border-radius: 12px;
    box-shadow: var(--sombra-card);
    padding: 12px;
}
.dp-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-mes { font-weight: 700; font-size: 14px; color: var(--texto); }
.dp-nav {
    width: 30px; height: 30px;
    border: none; border-radius: 8px; cursor: pointer;
    background: transparent; color: var(--texto-fraco);
    font-size: 18px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.dp-nav:hover { background: var(--cinza-bg); color: var(--texto); }
.dp-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.dp-semana span { text-align: center; font-size: 11px; font-weight: 700; color: var(--texto-fraco); padding: 4px 0; }
.dp-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-vazio { aspect-ratio: 1; }
.dp-dia {
    border: none; background: transparent; cursor: pointer;
    aspect-ratio: 1; border-radius: 8px;
    font-size: 13px; color: var(--texto);
    display: flex; align-items: center; justify-content: center;
}
.dp-dia:hover { background: var(--azul-claro); }
.dp-dia.dp-hoje { font-weight: 800; color: var(--azul); }
.dp-dia.dp-sel { background: var(--azul); color: #fff; font-weight: 700; }
.dp-dia.dp-desab { color: var(--texto-fraco); opacity: .4; cursor: default; }
.dp-dia.dp-desab:hover { background: transparent; }
.dp-rodape {
    display: flex; justify-content: space-between;
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--cinza-bord);
}
.dp-acao {
    border: none; background: transparent; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--azul);
    padding: 4px 8px; border-radius: 6px;
}
.dp-acao:hover { background: var(--azul-claro); }

/* ---------------------- Tabelas ---------------------- */
.tabela-wrap { overflow-x: auto; }
table.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
table.tabela th, table.tabela td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--cinza-bord);
    vertical-align: middle;
}
table.tabela th {
    background: #fafafa;
    color: var(--texto-fraco);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
table.tabela tbody tr:hover { background: var(--azul-claro); }
.acoes {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
}
td.acoes {
    min-width: 160px;
    /* Mantém a célula como célula de tabela: alinha verticalmente com as demais
       colunas e faz a borda inferior (divisória) coincidir. Não usar flex no <td>. */
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
}
td.acoes > * { vertical-align: middle; }   /* botões centralizados na linha */
td.acoes > * + * { margin-left: 6px; }     /* recria o espaçamento entre os botões */
.acoes .btn { min-width: 60px; justify-content: center; text-align: center; }

/* Tabela de pacientes: nada quebra. O espaço livre é dividido entre a coluna
   Nome e a coluna Telefone, deixando CPF/Telefone com folga dos dois lados
   (depois do nome e antes dos botões) — grupo centralizado. */
.tabela-pacientes th, .tabela-pacientes td { white-space: nowrap; }
.tabela-pacientes th:first-child,  .tabela-pacientes td:first-child,   /* Nome     */
.tabela-pacientes th:nth-child(3), .tabela-pacientes td:nth-child(3) { /* Telefone */
    width: 50%;
}
.tabela-pacientes td.acoes { text-align: right; }

/* Médicos: CRM em baixo do nome */
.med-nome { font-weight: 500; }
.med-crm { font-size: 12px; color: var(--texto-fraco); margin-top: 2px; }

/* ---------------------- Modal de confirmação (substitui o confirm() do navegador) ---------------------- */
.confirmar-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8,11,15,0);
    padding: 20px;
    opacity: 0;
    transition: opacity .2s ease, background .2s ease, backdrop-filter .2s ease;
}
.confirmar-overlay.aberto {
    background: rgba(8,11,15,.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 1;
}
.confirmar-caixa {
    position: relative;
    background: var(--branco);
    border-radius: 16px;
    box-shadow: 0 24px 60px -12px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.1);
    max-width: 400px;
    width: 100%;
    padding: 26px 26px 22px;
    transform: scale(.95) translateY(10px);
    transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.confirmar-overlay.aberto .confirmar-caixa { transform: scale(1) translateY(0); }
[data-tema="escuro"] .confirmar-caixa {
    border: 1px solid var(--cinza-bord);
    box-shadow: 0 24px 60px -12px rgba(0,0,0,.65), 0 4px 16px rgba(0,0,0,.3);
}
.confirmar-fechar {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--texto-fraco);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s;
}
.confirmar-fechar:hover { background: var(--cinza-bg); color: var(--texto); }
.confirmar-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.confirmar-icone {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(249,168,37,.14);
    color: var(--amarelo);
    box-shadow: 0 0 0 6px rgba(249,168,37,.07);
}
.confirmar-overlay.tom-perigo .confirmar-icone {
    background: rgba(198,40,40,.13);
    color: var(--vermelho);
    box-shadow: 0 0 0 6px rgba(198,40,40,.07);
}
.confirmar-titulo { font-size: 16.5px; font-weight: 700; color: var(--texto); margin: 0; letter-spacing: -.01em; }
.confirmar-texto { font-size: 14px; color: var(--texto-fraco); line-height: 1.55; margin: 0 0 22px; padding-left: 56px; }
.confirmar-acoes { display: flex; gap: 10px; justify-content: flex-end; }
.confirmar-acoes .btn { min-width: 92px; justify-content: center; }
@media (max-width: 460px) {
    .confirmar-texto { padding-left: 0; }
}

/* Botão ícone circular */
.btn-ico {
    width: 32px; height: 32px;
    padding: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: unset;
}

/* Paginação */
.paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cinza-bord);
    flex-wrap: wrap;
}
.paginacao .pag-info { font-size: 13px; color: var(--texto-fraco); }
.is-disab { opacity: .4; cursor: default; pointer-events: none; }

/* Rodapé da tabela */
.tabela-rodape {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--texto-fraco);
    border-top: 1px solid var(--cinza-bord);
    text-align: right;
}

/* ---------------------- Selos / status ---------------------- */
.selo {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.selo-agendado   { background: #e3f2fd; color: #1565c0; }
.selo-confirmado { background: #e8f5e9; color: #2e7d32; }
.selo-realizado  { background: #ede7f6; color: #5e35b1; }
.selo-cancelado  { background: #ffebee; color: #c62828; }
.selo-faltou     { background: #fff3e0; color: #ef6c00; }
.selo-jejum      { background: #fff8e1; color: #f57f17; }
.selo-pendente   { background: #fffde7; color: #f9a825; }
.selo-enviado    { background: #e8f5e9; color: #2e7d32; }
.selo-falhou     { background: #ffebee; color: #c62828; }

/* ---------------------- Avisos / flash ---------------------- */
.alerta {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 14px;
    font-size: 14px;
    border-left: 4px solid;
}
.alerta-sucesso { background: #e8f5e9; border-color: var(--verde);   color: #1b5e20; }
.alerta-erro    { background: #ffebee; border-color: var(--vermelho);color: #b71c1c; }
.alerta-aviso   { background: #fff8e1; border-color: var(--amarelo); color: #e65100; }
.alerta-info    { background: var(--azul-claro); border-color: var(--azul); color: var(--azul-escuro); }

/* ---------------------- Painel de indicadores ---------------------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.kpi {
    background: var(--branco);
    border-radius: var(--radius);
    box-shadow: var(--sombra-card);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-left: 4px solid var(--azul);
}
.kpi-azul   { border-left-color: #1565c0; }
.kpi-verde  { border-left-color: #2e7d32; }
.kpi-roxo   { border-left-color: #5e35b1; }
.kpi-amarelo{ border-left-color: #f57f17; }
.kpi-top { display: flex; align-items: center; gap: 9px; }
.kpi-ico {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.kpi-ico svg { width: 18px; height: 18px; }
.kpi-azul    .kpi-ico { background: #e3f2fd; color: #1565c0; }
.kpi-verde   .kpi-ico { background: #e8f5e9; color: #2e7d32; }
.kpi-roxo    .kpi-ico { background: #ede7f6; color: #5e35b1; }
.kpi-amarelo .kpi-ico { background: #fff8e1; color: #f57f17; }
.kpi-lbl { font-size: 13px; font-weight: 600; color: var(--texto-fraco); }
.kpi .num { font-size: 30px; font-weight: 800; line-height: 1; color: var(--texto); }
.kpi .lbl { color: var(--texto-fraco); font-size: 13px; margin-top: 4px; }
.kpi-azul    .num { color: #1565c0; }
.kpi-verde   .num { color: #2e7d32; }
.kpi-roxo    .num { color: #5e35b1; }
.kpi-amarelo .num { color: #f57f17; }

/* Título de seção com ícone */
.sec-titulo { display: flex; align-items: center; gap: 8px; }
.sec-titulo .sec-ico { color: var(--azul); flex-shrink: 0; }

/* Card com cabeçalho + ações alinhados */
.card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.card-header-row h2 { margin: 0; }

/* =====================================================================
   Tela de login — duas colunas: arte da clínica + painel de acesso
   Autossuficiente (não depende do tema): já nasce escura.
   ===================================================================== */
.login-split {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    background: #0b0e13;
}

/* --- Coluna da arte (foto da clínica com a marca) --- */
.login-arte {
    position: relative;
    background-image: url('../img/login-bg.jpg');
    background-size: cover;
    background-position: center left;
    background-repeat: no-repeat;
}
/* Véu que escurece a arte e funde com o painel da direita */
.login-arte::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(11,14,19,.25) 0%, rgba(11,14,19,0) 35%, rgba(11,14,19,.85) 92%, #0b0e13 100%),
        linear-gradient(180deg, rgba(11,14,19,.18) 0%, rgba(11,14,19,.30) 100%);
}
/* --- Coluna do formulário --- */
.login-painel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 28px;
    background: #0b0e13;
}
.login-card {
    width: 100%;
    max-width: 380px;
    background: #141922;
    border: 1px solid #232b38;
    border-radius: 16px;
    padding: 28px 30px 22px;
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
/* A logo só aparece quando a coluna da arte está escondida (celular) */
.login-logo {
    display: none;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto 22px;
}
.login-card h1 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #eef1f6;
    letter-spacing: -.01em;
}
.login-card .sub {
    color: #8b94a3;
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.5;
}

/* Campos com ícone */
.login-campo { margin-bottom: 12px; }
.login-campo label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #9aa3b2;
    margin-bottom: 5px;
}
.login-inp {
    position: relative;
    display: flex;
    align-items: center;
}
.login-inp-ico {
    position: absolute;
    left: 13px;
    display: flex;
    color: #6c7686;
    pointer-events: none;
}
.login-split input[type=text],
.login-split input[type=password] {
    width: 100%;
    padding: 11px 14px 11px 40px;
    background: #0e131b;
    border: 1px solid #262f3d;
    border-radius: 9px;
    color: #eef1f6;
    font-size: 14.5px;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.login-split input[type=text]::placeholder,
.login-split input[type=password]::placeholder { color: #5a6472; }
.login-split input[type=text]:focus,
.login-split input[type=password]:focus {
    outline: none;
    background: #111823;
    border-color: var(--teal, #00bfa5);
    box-shadow: 0 0 0 3px rgba(0,191,165,.16);
}
/* Botão de mostrar/ocultar a senha */
.login-olho {
    position: absolute;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    background: none;
    border: none;
    border-radius: 7px;
    color: #6c7686;
    cursor: pointer;
    transition: color .15s, background .15s;
}
.login-olho:hover { color: #c3cad6; background: rgba(255,255,255,.05); }

.login-entrar {
    width: 100%;
    margin-top: 4px;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 9px;
    color: #04231f;
    background: linear-gradient(135deg, #16c79a 0%, #0e9e86 100%);
    cursor: pointer;
    transition: filter .15s, transform .08s;
}
.login-entrar:hover  { filter: brightness(1.07); }
.login-entrar:active { transform: translateY(1px); }

/* Link discreto de recuperação de senha, logo abaixo do Entrar */
.login-esqueci { text-align: center; margin-top: 14px; }
.login-esqueci a {
    font-size: 13px;
    color: #7d8797;
    text-decoration: none;
    transition: color .15s;
}
.login-esqueci a:hover { color: var(--teal, #16c79a); text-decoration: underline; }

/* Instalar aplicativo: mesmo formato do botão Entrar, em versão contornada
   para o acesso continuar sendo a ação principal da tela. */
.login-instalar {
    width: 100%;
    margin-top: 8px;
    /* 1px a menos que o Entrar em cima e embaixo: compensa a borda,
       para os dois botões ficarem exatamente da mesma altura */
    padding: 11px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    border: 1px solid #1f7f6d;
    border-radius: 9px;
    color: #16c79a;
    background: rgba(22,199,154,.08);
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .08s;
}
.login-instalar:hover  { background: rgba(22,199,154,.16); border-color: #16c79a; }
.login-instalar:active { transform: translateY(1px); }
.login-instalar[hidden] { display: none; }

.login-rodape {
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid #202836;
    text-align: center;
    font-size: 11px;
    color: #5f6875;
    line-height: 1.5;
}
/* Dados da empresa que fornece o sistema */
.login-dev {
    font-size: 10.5px;
    line-height: 1.55;
    color: #59626f;
}
/* Nome: o único item com destaque, para ancorar o bloco */
.login-dev-nome {
    font-weight: 700;
    font-size: 11.5px;
    color: #96a0af;
    letter-spacing: .02em;
    margin-bottom: 1px;
}
.login-dev-cnpj {
    font-size: 10px;
    letter-spacing: .03em;
    color: #545d6a;
}
/* Endereço em duas linhas fixas (rua/bairro e cidade/UF), sem quebra torta */
.login-dev-end {
    margin-top: 4px;
}
.login-dev-end span {
    display: block;
    text-wrap: balance;
}
.login-dev-contato {
    margin-top: 4px;
    color: #69737f;
}
.login-dev a { color: #7d8797; text-decoration: none; }
.login-dev a:hover { color: var(--teal, #16c79a); text-decoration: underline; }
/* Crédito do desenvolvedor: o item mais discreto do bloco */
.login-dev-resp {
    margin-top: 5px;
    font-size: 10px;
    color: #4e5763;
}
.login-dev-versao { margin-top: 9px; font-size: 10px; color: #454d58; }

/* Alerta dentro do cartão de login */
.login-card .alerta { margin-bottom: 18px; font-size: 13.5px; }

/* --- Celular / tablet: só o formulário, com a arte ao fundo --- */
@media (max-width: 900px) {
    .login-split {
        grid-template-columns: 1fr;
        background-image: linear-gradient(rgba(8,11,16,.86), rgba(8,11,16,.94)), url('../img/login-bg-sm.jpg');
        background-size: cover;
        background-position: center;
    }
    .login-arte { display: none; }
    .login-painel { background: transparent; padding: 24px 18px; }
    .login-logo { display: block; }
    .login-card { background: rgba(20,25,34,.92); backdrop-filter: blur(6px); }
}

/* =====================================================================
   Botão flutuante "Instalar aplicativo" (PWA) — canto superior direito
   ===================================================================== */
.pwa-fab {
    position: fixed;
    top: 16px;
    right: 18px;
    z-index: 400;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: #04231f;
    background: linear-gradient(135deg, #16c79a 0%, #0e9e86 100%);
    border: none;
    border-radius: 22px;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(0,0,0,.35);
    transition: filter .15s, transform .15s;
}
.pwa-fab:hover  { filter: brightness(1.08); transform: translateY(-1px); }
.pwa-fab:active { transform: translateY(0); }
.pwa-fab[hidden] { display: none; }
@media (max-width: 600px) {
    .pwa-fab { top: auto; bottom: 16px; right: 16px; }   /* no celular fica embaixo, longe do menu */
    .pwa-fab-txt { display: none; }                       /* só o ícone */
    .pwa-fab { padding: 12px; border-radius: 50%; }
}
@media print { .pwa-fab { display: none !important; } }

/* ---------------------- Barra de filtros ---------------------- */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filtros .field { margin-bottom: 0; }
.filtros-acoes { display: flex; gap: 8px; align-items: flex-end; padding-bottom: 4px; }

.vazio { text-align: center; color: var(--texto-fraco); padding: 30px; }

/* ---------------------- Responsivo ---------------------- */
@media (max-width: 900px) {
    /* A barra lateral vira menu sanfona (desliza da esquerda) */
    body.com-sidebar .layout-main { margin-left: 0; }
    .sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
    }
    .menu-toggle-cb:checked ~ .sidebar { transform: translateX(0); }
    .menu-toggle-cb:checked ~ .layout-main .sidebar-overlay {
        display: block;
        position: fixed; inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 150;
    }
    .mobile-top {
        display: flex;
        align-items: center;
        gap: 12px;
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(13,71,161,.85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: #fff;
        padding: 12px 16px;
        box-shadow: 0 2px 12px rgba(0,0,0,.2);
    }
    .hamburger { cursor: pointer; display: flex; color: #fff; }
    .mobile-brand { font-weight: 700; font-size: 16px; }
    .container { margin: 18px auto; padding: 0 16px; }
}
@media (max-width: 800px) {
    .form-grid { grid-template-columns: 1fr; }
    .kpis { grid-template-columns: repeat(2, 1fr); }
    .card-header-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 500px) {
    .kpis { grid-template-columns: 1fr; }
    .kpi { padding: 14px 16px; gap: 10px; }
    .kpi .num { font-size: 26px; }
}

/* =====================================================================
   Listagem de agendamentos (agendamentos_lista.php) — timeline
   ===================================================================== */

.ag-dia { margin-bottom: 26px; }

/* --- Cabeçalho da data --- */
.ag-dia-cab {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

/* Bloco calendário (folhinha) */
.ag-cal {
    flex-shrink: 0;
    width: 52px;
    text-align: center;
    background: var(--branco);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--sombra);
}
.ag-cal-num {
    display: block;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: var(--texto);
    padding: 8px 0 6px;
}
.ag-cal-mes {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--azul);
    padding: 3px 0;
}
.ag-cal-hoje .ag-cal-num { color: var(--azul-escuro); }
.ag-cal-hoje .ag-cal-mes { background: var(--amarelo); color: #5d4037; }

.ag-dia-txt { flex: 1; min-width: 0; }
.ag-dia-nome {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.ag-dia-meta {
    font-size: 12px;
    color: rgba(255,255,255,.65);
    margin-top: 2px;
}

.ag-dia-tag {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ag-tag-hoje   { background: var(--amarelo); color: #5d4037; }
.ag-tag-amanha { background: rgba(255,255,255,.22); color: #fff; }

/* --- Timeline --- */
.ag-tl {
    position: relative;
    padding-left: 70px;
}
/* linha vertical da timeline */
.ag-tl::before {
    content: "";
    position: absolute;
    left: 61px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: rgba(255,255,255,.22);
}

.ag-item {
    position: relative;
    margin-bottom: 12px;
}
.ag-item:last-child { margin-bottom: 0; }

/* Rail: hora + nó sobre a linha */
.ag-rail {
    position: absolute;
    left: -70px;
    top: 0;
    width: 70px;
    height: 100%;
    display: flex;
    align-items: center;
}
.ag-rail-hora {
    width: 52px;
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.ag-rail-no {
    position: absolute;
    left: 56px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px rgba(0,0,0,.06);
}

/* --- Cartão do agendamento --- */
.ag-card {
    display: grid;
    grid-template-columns: minmax(0,1.4fr) minmax(0,1.6fr) 128px 196px;
    align-items: center;
    gap: 16px;
    background: var(--branco);
    border-radius: var(--radius);
    border-left: 4px solid var(--cor);
    box-shadow: var(--sombra);
    padding: 14px 18px;
    transition: box-shadow .15s;
}
.ag-card:hover {
    box-shadow: 0 4px 16px rgba(13,71,161,.14);
}

/* Paciente */
.ag-card-pac {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
.ag-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
}
.ag-card-pac-txt { min-width: 0; }
.ag-nome {
    font-weight: 600;
    font-size: 14px;
    color: var(--texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Detalhes (médico / exame) */
.ag-card-det {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 18px;
    min-width: 0;
    padding-left: 44px;   /* respiro entre o nome do paciente e o médico */
}
.ag-campo { min-width: 0; }
.ag-campo-lbl {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--texto-fraco);
    margin-bottom: 1px;
}
.ag-campo-val {
    display: block;
    font-size: 14px;
    color: var(--texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ag-campo-val .selo { margin-left: 6px; }

/* Status + ações — viram colunas próprias do grid (largura fixa)
   para que Médico/Exame não se desloquem quando houver menos botões. */
.ag-card-fim { display: contents; }
.ag-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 20px;
    white-space: nowrap;
    justify-self: start;
}
/* Selo de status clicável (abre o modal central) */
.ag-status-btn {
    border: none;
    font: inherit;
    cursor: pointer;
    padding: 6px 13px;
    transition: filter .12s;
}
.ag-status-btn:hover { filter: brightness(1.07); }
.ag-status-seta { opacity: .6; margin-left: 1px; }

/* Modal central de alteração de status */
.status-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8,11,15,0);
    padding: 20px;
    opacity: 0;
    transition: opacity .18s ease, background .18s ease;
}
.status-modal-overlay[hidden] { display: none; }
.status-modal-overlay.aberto { background: rgba(8,11,15,.55); opacity: 1; }
.status-modal-caixa {
    background: var(--branco);
    border: 1px solid var(--cinza-bord);
    border-radius: 16px;
    width: 100%;
    max-width: 340px;
    overflow: hidden;
    box-shadow: 0 24px 60px -12px rgba(0,0,0,.4);
    transform: scale(.96) translateY(8px);
    transition: transform .2s cubic-bezier(.16,1,.3,1);
}
.status-modal-overlay.aberto .status-modal-caixa { transform: none; }
.status-modal-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 15px 18px;
    border-bottom: 1px solid var(--cinza-bord);
}
.status-modal-titulo { font-size: 15px; font-weight: 700; color: var(--texto); }
.status-modal-nome { font-size: 13px; color: var(--texto-fraco); margin-top: 2px; }
.status-modal-corpo { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
/* Cada opção é um formulário POST (protegido por CSRF); display:contents faz
   o botão continuar sendo o item do flex, mantendo o layout de antes. */
.status-opt-form { display: contents; }
.status-opt {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid var(--cinza-bord);
    font-size: 14px;
    font-weight: 600;
    color: var(--texto);
    text-decoration: none;
    transition: background .12s;
    /* normaliza <button> para ficar igual ao antigo <a> */
    background: none;
    font-family: inherit;
    width: 100%;
    text-align: left;
    cursor: pointer;
}
.status-opt:hover { background: var(--cinza-bg); text-decoration: none; }
.status-opt-ico {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.so-conf .status-opt-ico { background: #e8f5e9; color: #2e7d32; }
.so-real .status-opt-ico { background: #ede7f6; color: #5e35b1; }
.so-falt .status-opt-ico { background: #fff3e0; color: #ef6c00; }
.so-canc { color: #c62828; }
.so-canc .status-opt-ico { background: #ffebee; color: #c62828; }
[data-tema="escuro"] .so-canc { color: #ef5350; }

/* Botão "Justificativa" (aparece em visita cancelada) */
.ag-btn-justif { background: #ffebee; color: #c62828; border: none; font-weight: 600; }
.ag-btn-justif:hover { background: #ffcdd2; color: #b71c1c; }
[data-tema="escuro"] .ag-btn-justif { background: #3a1a1a; color: #ef8a86; }
[data-tema="escuro"] .ag-btn-justif:hover { background: #4a2020; color: #ff9e99; }

/* Formulário do motivo de cancelamento (dentro do modal de status) */
.motivo-form { display: flex; flex-direction: column; }
.motivo-lbl {
    font-size: 12px; font-weight: 700; color: var(--texto-fraco);
    margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em;
}
.motivo-txt { width: 100%; resize: vertical; min-height: 76px; }
.motivo-form-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.motivo-texto { margin: 0; font-size: 14px; line-height: 1.55; color: var(--texto); white-space: pre-wrap; word-break: break-word; }

/* Modal de motivo — estilo notificação (bonito e colorido) */
.motivo-modal-caixa {
    position: relative;
    background: var(--branco);
    border: 1px solid var(--cinza-bord);
    border-radius: 18px;
    width: 100%;
    max-width: 380px;
    padding: 28px 24px 22px;
    text-align: center;
    box-shadow: 0 24px 60px -12px rgba(0,0,0,.45);
    transform: scale(.96) translateY(8px);
    transition: transform .2s cubic-bezier(.16,1,.3,1);
}
.status-modal-overlay.aberto .motivo-modal-caixa { transform: none; }
.motivo-modal-x {
    position: absolute;
    top: 12px; right: 12px;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--texto-fraco);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s;
}
.motivo-modal-x:hover { background: var(--cinza-bg); color: var(--texto); }
.motivo-modal-ico {
    width: 66px; height: 66px;
    border-radius: 50%;
    background: #ffebee;
    color: #c62828;
    display: flex; align-items: center; justify-content: center;
    margin: 4px auto 14px;
}
.motivo-modal-titulo { font-size: 18px; font-weight: 700; color: var(--texto); margin-bottom: 3px; }
.motivo-modal-nome { font-size: 13.5px; color: var(--texto-fraco); margin-bottom: 18px; }
.motivo-modal-box {
    background: #fff5f5;
    border: 1px solid #ffcdd2;
    border-radius: 12px;
    padding: 13px 15px;
    text-align: left;
    margin-bottom: 20px;
}
.motivo-modal-box-lbl {
    display: block;
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: #c62828;
    margin-bottom: 5px;
}
.motivo-modal-btn {
    width: 100%;
    justify-content: center;
    background: #c62828;
    color: #fff;
    border: none;
}
.motivo-modal-btn:hover { background: #a51c1c; color: #fff; }
[data-tema="escuro"] .motivo-modal-ico { background: #3a1a1a; color: #ef8a86; }
[data-tema="escuro"] .motivo-modal-box { background: #2a1616; border-color: #4a2222; }
[data-tema="escuro"] .motivo-modal-box-lbl { color: #ef8a86; }
[data-tema="escuro"] .motivo-modal-btn { background: #c62828; }
[data-tema="escuro"] .motivo-modal-btn:hover { background: #d84343; }

.ag-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
/* Todos os botões da barra com a mesma altura dos ícones (32px) */
.ag-acoes .btn { min-height: 32px; }

/* Ações do cartão: base neutra e discreta; a cor só aparece no hover, e o
   único botão em destaque é o Status. */
.ag-btn-print,
.ag-btn-editar { border: none; font-weight: 600; }
.ag-btn-print  { background: #e0f2f1; color: #00897b; }
.ag-btn-print:hover  { background: #b2dfdb; color: #00695c; }
.ag-btn-editar { background: #fff3e0; color: #ef6c00; }
.ag-btn-editar:hover { background: #ffe0b2; color: #e65100; }

/* --- Responsivo timeline --- */
@media (max-width: 960px) {
    .ag-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .ag-card-det { padding-left: 0; }   /* empilhado no mobile: sem recuo */
    .ag-card-fim {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }
    .ag-status-badge { justify-self: auto; }
}
@media (max-width: 600px) {
    .ag-tl { padding-left: 0; }
    .ag-tl::before { display: none; }
    .ag-rail {
        position: static;
        width: auto;
        height: auto;
        margin-bottom: 8px;
    }
    .ag-rail-hora { width: auto; text-align: left; font-size: 13px; }
    .ag-rail-no { display: none; }
    .ag-item {
        background: rgba(255,255,255,.08);
        border-radius: var(--radius);
        padding: 10px;
    }
    .ag-card-det { grid-template-columns: 1fr; gap: 8px; }
    .ag-card-fim { flex-direction: column; align-items: stretch; gap: 10px; }
    .ag-acoes { justify-content: flex-end; }
    .ag-dia-cab { gap: 10px; }
}

/* =====================================================================
   TEMA ESCURO (dashboard moderno: fundo carvão + acento teal)
   ===================================================================== */
[data-tema="escuro"] {
    --azul:        #14b8a6;   /* acento principal (teal/verde-água) */
    --azul-escuro: #0f9e8e;   /* hover do acento */
    --azul-claro:  #133b38;   /* superfície de destaque (hover) */
    --cinza-bg:    #0c0f14;
    --cinza-bord:  #272d39;
    --texto:       #e6e9ef;
    --texto-fraco: #8b94a3;
    --branco:      #181c23;   /* superfície dos cartões */
    --sombra:      0 1px 2px rgba(0,0,0,.5);
    --sombra-card: 0 6px 24px rgba(0,0,0,.45);
    --fundo:       #0f1217;   /* fundo carvão */
}

/* Bordas sutis nas superfícies */
[data-tema="escuro"] .card,
[data-tema="escuro"] .etapa-card,
[data-tema="escuro"] .ag-cal,
[data-tema="escuro"] .pac-sugestoes { border: 1px solid var(--cinza-bord); }

/* Superfícies que tinham fundo branco fixo */
[data-tema="escuro"] .kpi,
[data-tema="escuro"] .etapa-card,
[data-tema="escuro"] .ag-cal,
[data-tema="escuro"] .ag-card {
    background: var(--branco);
    color: var(--texto);
}

/* KPI e cartão de agendamento mantêm o filete colorido à esquerda */
[data-tema="escuro"] .kpi,
[data-tema="escuro"] .ag-card {
    border-top: 1px solid var(--cinza-bord);
    border-right: 1px solid var(--cinza-bord);
    border-bottom: 1px solid var(--cinza-bord);
}

/* Ícones dos KPIs com fundo escuro tonalizado (como no painel de referência) */
[data-tema="escuro"] .kpi-azul    .kpi-ico { background: #11293f; color: #5aa6f0; }
[data-tema="escuro"] .kpi-verde   .kpi-ico { background: #10301f; color: #43c478; }
[data-tema="escuro"] .kpi-roxo    .kpi-ico { background: #241a3a; color: #a98bf0; }
[data-tema="escuro"] .kpi-amarelo .kpi-ico { background: #332a10; color: #e8b54a; }
[data-tema="escuro"] .kpi-azul    .num { color: #5aa6f0; }
[data-tema="escuro"] .kpi-verde   .num { color: #43c478; }
[data-tema="escuro"] .kpi-roxo    .num { color: #a98bf0; }
[data-tema="escuro"] .kpi-amarelo .num { color: #e8b54a; }

/* Barra lateral escura com item ativo teal */
[data-tema="escuro"] .sidebar { background: #11141a; border-right: 1px solid #20252f; box-shadow: none; }
[data-tema="escuro"] .nav-item { color: #aeb6c2; }
[data-tema="escuro"] .nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
[data-tema="escuro"] .nav-item.ativo { background: var(--azul); color: #06231f; font-weight: 700; box-shadow: none; }
[data-tema="escuro"] .sidebar .brand { border-bottom-color: rgba(255,255,255,.08); }
[data-tema="escuro"] .nav-sep { color: rgba(255,255,255,.40); }
[data-tema="escuro"] .sidebar-user { border-top-color: rgba(255,255,255,.08); }

/* Títulos em superfícies escuras */
[data-tema="escuro"] .card h2,
[data-tema="escuro"] .etapa-titulo { color: #e6e9ef; }

/* Botões secundários */
[data-tema="escuro"] .btn-sec { background: #232a34; color: var(--texto); }
[data-tema="escuro"] .btn-sec:hover { background: #2e3742; }

/* Campos de formulário */
[data-tema="escuro"] input[type=text],
[data-tema="escuro"] input[type=password],
[data-tema="escuro"] input[type=email],
[data-tema="escuro"] input[type=date],
[data-tema="escuro"] input[type=time],
[data-tema="escuro"] input[type=number],
[data-tema="escuro"] input[type=tel],
[data-tema="escuro"] select,
[data-tema="escuro"] textarea {
    background: #0f1319;
    border-color: var(--cinza-bord);
    color: var(--texto);
}
[data-tema="escuro"] input::placeholder,
[data-tema="escuro"] textarea::placeholder { color: #5f6b7a; }
[data-tema="escuro"] input:focus,
[data-tema="escuro"] select:focus,
[data-tema="escuro"] textarea:focus {
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(20,184,166,.28);
}
[data-tema="escuro"] .input-grupo-sufixo {
    background: #232a34; border-color: var(--cinza-bord); color: var(--texto-fraco);
}
[data-tema="escuro"] input[type=date]::-webkit-calendar-picker-indicator,
[data-tema="escuro"] input[type=time]::-webkit-calendar-picker-indicator { filter: invert(.85); }

/* Autocomplete */
[data-tema="escuro"] .ac-lista { background: var(--branco); border-color: var(--cinza-bord); }
[data-tema="escuro"] .ac-item:hover,
[data-tema="escuro"] .ac-item.ac-ativo { background: var(--azul-claro); color: #bff0e8; }

/* Cards de etapa */
[data-tema="escuro"] .etapa-header { background: #1d222b; border-color: var(--cinza-bord); }


/* Tabelas */
[data-tema="escuro"] table.tabela th { background: #1d222b; }
[data-tema="escuro"] table.tabela th,
[data-tema="escuro"] table.tabela td { border-color: var(--cinza-bord); }
[data-tema="escuro"] table.tabela tbody tr:hover { background: var(--azul-claro); }


/* Selos de status: fundo escuro tonalizado + texto na cor viva */
[data-tema="escuro"] .selo-agendado   { background: #11293f; color: #5aa6f0; }
[data-tema="escuro"] .selo-confirmado { background: #10301f; color: #43c478; }
[data-tema="escuro"] .selo-realizado  { background: #241a3a; color: #a98bf0; }
[data-tema="escuro"] .selo-cancelado  { background: #3a1a1a; color: #ef8a86; }
[data-tema="escuro"] .selo-faltou     { background: #3a2a14; color: #f0a85a; }
[data-tema="escuro"] .selo-jejum      { background: #332a10; color: #e8b54a; }
[data-tema="escuro"] .selo-pendente   { background: #332a10; color: #e8b54a; }
[data-tema="escuro"] .selo-enviado    { background: #10301f; color: #43c478; }
[data-tema="escuro"] .selo-falhou     { background: #3a1a1a; color: #ef8a86; }

/* Sigla do exame (etapa de datas por clínica) */
[data-tema="escuro"] .exame-sig { background: #10301f; color: #43c478; }

/* Avisos / flash */
[data-tema="escuro"] .alerta-sucesso { background: #10301f; border-color: var(--verde);    color: #7fd9a2; }
[data-tema="escuro"] .alerta-erro    { background: #3a1a1a; border-color: var(--vermelho); color: #ef8a86; }
[data-tema="escuro"] .alerta-aviso   { background: #332a10; border-color: var(--amarelo);  color: #e8b54a; }
[data-tema="escuro"] .alerta-info { background: #0f302c; border-color: var(--azul); color: #a7e8df; }

/* Listagem de agendamentos */
[data-tema="escuro"] .ag-btn-print  { background: #103330; color: #5fd3c4; }
[data-tema="escuro"] .ag-btn-print:hover  { background: #15433f; color: #7fe7d8; }
[data-tema="escuro"] .ag-btn-editar { background: #3a2a14; color: #f0a85a; }
[data-tema="escuro"] .ag-btn-editar:hover { background: #4a3518; color: #ffbf74; }


/* =====================================================================
   Relatórios
   ===================================================================== */
.rel-cab {
    text-align: center;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--cinza-bord);
}
.rel-posto  { font-size: 18px; font-weight: 800; color: var(--texto); }
.rel-end    { font-size: 12px; color: var(--texto-fraco); margin-top: 2px; }
.rel-titulo { font-size: 15px; font-weight: 700; color: var(--azul); margin-top: 10px; }
.rel-periodo{ font-size: 12px; color: var(--texto-fraco); margin-top: 3px; }

/* Cartões de resumo */
/* Seções do relatório: título discreto + linha (── TÍTULO ─────────) */
.rel-sec { margin-top: 26px; }
.rel-sec-tit {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--texto-fraco);
    margin: 0 0 14px;
}
.rel-sec-tit::after { content: ''; flex: 1; height: 1px; background: var(--cinza-bord); }

/* Resumo: poucos números, grandes e diretos */
.rel-resumo-g {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px 22px;
}
.rel-rz-num { font-size: 23px; font-weight: 800; line-height: 1.1; color: var(--texto); }
.rel-rz-lbl { font-size: 11px; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .04em; margin-top: 5px; }
/* Linha secundária: contagens por situação */
.rel-sub {
    display: flex; flex-wrap: wrap; gap: 6px 20px;
    font-size: 12.5px; color: var(--texto-fraco);
    margin-top: 16px; padding-top: 12px;
    border-top: 1px dashed var(--cinza-bord);
}
.rel-sub b { color: var(--texto); font-weight: 700; }
.rel-sub i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }

/* Gráfico SVG de faturamento */
.rel-chart { display: block; width: 100%; height: auto; }
.rel-legenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--texto-fraco); margin-top: 8px; }
.rel-legenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }


.rel-rodape { margin-top: 14px; font-size: 12px; color: var(--texto-fraco); text-align: right; }

.rel-tab-fin { width: 100%; border-collapse: collapse; font-size: 13px; }
.rel-tab-fin th, .rel-tab-fin td { padding: 8px 10px; border-bottom: 1px solid var(--cinza-bord); text-align: right; white-space: nowrap; }
.rel-tab-fin th:first-child, .rel-tab-fin td:first-child { text-align: left; white-space: normal; }
.rel-tab-fin thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-fraco); }
.rel-tab-fin tfoot td { font-weight: 800; color: var(--texto); border-top: 2px solid var(--cinza-bord); border-bottom: none; }
.rel-nota { font-size: 12px; color: var(--texto-fraco); margin: 2px 0 14px; }

/* Linha de dados (histórico do paciente) */
.rel-resumo-dados { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--texto); }
.rel-resumo-dados b { color: var(--texto-fraco); font-weight: 600; }

/* Dias da semana (configurações de agenda) */
.dias-semana { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.dias-semana .chk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.dias-semana .chk input { width: auto; }

@media (max-width: 760px) {
    .rel-resumo-g { grid-template-columns: repeat(2, 1fr); }
    .rel-rz-num { font-size: 20px; }
}

/* =====================================================================
   Impressão (relatórios / qualquer página)
   ===================================================================== */
@media print {
    .sidebar, .mobile-top, .sidebar-overlay, .rodape, .no-print { display: none !important; }

    body { background: #fff !important; color: #000 !important; }
    body.com-sidebar .layout-main { margin-left: 0 !important; }
    .container { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }

    .page-title { color: #000 !important; text-shadow: none !important; }
    .page-sub   { color: #333 !important; }

    .card, .kpi {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        border: 1px solid #cccccc !important;
        break-inside: avoid;
    }
    .card h2, .rel-posto, .kpi .num { color: #000 !important; }
    .rel-titulo { color: #000 !important; }
    .rel-cab { border-color: #999 !important; }

    table.tabela th {
        background: #eeeeee !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    table.tabela th, table.tabela td { border-color: #cccccc !important; color: #000 !important; }
    table.tabela tbody tr { break-inside: avoid; }

    /* Mantém as cores dos selos de status na impressão */
    .selo {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Relatório: seções, resumo, gráfico e tabelas */
    .rel-sec-tit { color: #000 !important; }
    .rel-sec-tit::after { background: #999 !important; }
    .rel-rz-num, .rel-rz-lbl, .rel-sub, .rel-sub b, .rel-legenda,
    .rel-tab-fin, .rel-tab-fin th, .rel-tab-fin td { color: #000 !important; }
    .rel-rz-num, .rel-chart, .rel-legenda i, .rel-sub i {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .rel-tab-fin th, .rel-tab-fin td { border-color: #cccccc !important; }
    .rel-sec, .rel-resumo-g, .rel-tab-fin { break-inside: avoid; }

    a[href]::after { content: ""; }   /* não imprime a URL ao lado dos links */
}