/* ==================================================================
   Nutri System — Design tokens (temas Claro/Escuro) + estilos globais
   Toda a paleta é definida por variáveis CSS; dark.css apenas
   redefine essas variáveis dentro de body.dark-mode. Nenhum componente
   deve usar cor fixa fora deste sistema, para não "quebrar" o tema.
   ================================================================== */

:root {
    /* ---- Tema Claro (padrão) ---- */
    --nutri-bg: #F4F6F9;
    --nutri-sidebar-bg: #FFFFFF;
    --nutri-navbar-bg: #FFFFFF;
    --nutri-card-bg: #FFFFFF;
    --nutri-input-bg: #F8FAFC;
    --nutri-border: #E2E8F0;
    --nutri-text: #1E293B;
    --nutri-text-secondary: #64748B;
    --nutri-primary: #2563EB;
    --nutri-primary-rgb: 37, 99, 235;
    --nutri-hover: #EFF6FF;
    --nutri-active-bg: #DBEAFE;
    --nutri-active-text: #1D4ED8;
    --nutri-sidebar-active-bg: var(--nutri-active-bg);
    --nutri-success: #16A34A;
    --nutri-success-rgb: 22, 163, 74;
    --nutri-warning: #D97706;
    --nutri-warning-rgb: 217, 119, 6;
    --nutri-danger: #DC2626;
    --nutri-danger-rgb: 220, 38, 38;
    --nutri-info: #0284C7;
    --nutri-purple: #7C3AED;
    --nutri-purple-rgb: 124, 58, 237;
    /* AJUSTE "PADRONIZAÇÃO DE CORES" — dois tons adicionais do sistema de
       ação de botão (Teal = navegação/secundário; Amarelo = atenção),
       reaproveitando a mesma lógica dos demais tokens semânticos. Ciano
       (documentos/comunicação) e Laranja (editar) NÃO ganham token novo —
       reaproveitam --nutri-info e --nutri-warning, que já têm exatamente
       esses tons. */
    --nutri-teal: #0D9488;
    --nutri-teal-rgb: 13, 148, 136;
    --nutri-yellow: #CA8A04;
    --nutri-yellow-rgb: 202, 138, 4;
    --nutri-stripe: rgba(15, 23, 42, .025);
    --nutri-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --nutri-radius: .5rem;
    --nutri-radius-sm: .375rem;

    /* ---- Cores semânticas (Dashboard) — sempre um alias "vivo" para o
       token --nutri-* correspondente, nunca um valor fixo próprio. Como
       body.dark-mode só redefine --nutri-*, estas variáveis já acompanham
       o tema automaticamente e nunca precisam ser redeclaradas ali. ---- */
    --dashboard-primary: var(--nutri-primary);
    --dashboard-primary-rgb: var(--nutri-primary-rgb);
    --dashboard-success: var(--nutri-success);
    --dashboard-success-rgb: var(--nutri-success-rgb);
    --dashboard-warning: var(--nutri-warning);
    --dashboard-warning-rgb: var(--nutri-warning-rgb);
    --dashboard-danger: var(--nutri-danger);
    --dashboard-danger-rgb: var(--nutri-danger-rgb);
    --dashboard-purple: var(--nutri-purple);
    --dashboard-purple-rgb: var(--nutri-purple-rgb);
    --dashboard-secondary: var(--nutri-text-secondary);
}

body.dark-mode {
    /* ---- Tema Escuro ---- */
    --nutri-bg: #111827;
    --nutri-sidebar-bg: #0F172A;
    --nutri-navbar-bg: #172033;
    --nutri-card-bg: #1E293B;
    --nutri-input-bg: #263449;
    --nutri-border: #334155;
    --nutri-text: #F1F5F9;
    --nutri-text-secondary: #94A3B8;
    --nutri-primary: #3B82F6;
    --nutri-primary-rgb: 59, 130, 246;
    --nutri-hover: #27364D;
    --nutri-active-bg: #2563EB;
    --nutri-active-text: #FFFFFF;
    --nutri-sidebar-active-bg: #263557;
    --nutri-success: #22C55E;
    --nutri-success-rgb: 34, 197, 94;
    --nutri-warning: #F59E0B;
    --nutri-warning-rgb: 245, 158, 11;
    --nutri-danger: #EF4444;
    --nutri-danger-rgb: 239, 68, 68;
    --nutri-info: #38BDF8;
    --nutri-purple: #A78BFA;
    --nutri-purple-rgb: 167, 139, 250;
    --nutri-teal: #2DD4BF;
    --nutri-teal-rgb: 45, 212, 191;
    --nutri-yellow: #EAB308;
    --nutri-yellow-rgb: 234, 179, 8;
    --nutri-stripe: rgba(255, 255, 255, .025);
    --nutri-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
}

/* ------------------------------------------------------------------
   Base / transição suave entre temas
   ------------------------------------------------------------------ */
html, body {
    background-color: var(--nutri-bg);
    color: var(--nutri-text);
}

body {
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
}

body,
.main-header,
.main-sidebar,
.content-wrapper,
.card,
.form-control,
.custom-select,
.btn,
.dropdown-menu,
.modal-content,
.nav-link,
.table,
.page-link,
.alert,
#resultadoBuscaRapida,
#buscaRapidaBox .input-group-text {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

a { color: var(--nutri-primary); }

/* ------------------------------------------------------------------
   Navbar
   ------------------------------------------------------------------ */
.main-header.navbar {
    background-color: var(--nutri-navbar-bg) !important;
    border-bottom: 1px solid var(--nutri-border);
}

.main-header .nav-link {
    color: var(--nutri-text-secondary) !important;
}

.main-header .nav-link:hover,
.main-header .nav-link:focus {
    color: var(--nutri-text) !important;
}

#btnAlternarTema {
    cursor: pointer;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#btnAlternarTema:hover {
    background-color: var(--nutri-hover);
}

#iconeTemaClaro { color: #D97706; }
#iconeTemaEscuro { color: #FACC15; }

/* ------------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------------ */
.main-sidebar {
    background-color: var(--nutri-sidebar-bg) !important;
    border-right: 1px solid var(--nutri-border);
}

.brand-link {
    border-bottom: 1px solid var(--nutri-border) !important;
    color: var(--nutri-text) !important;
}

.brand-link .brand-image {
    font-size: 1.4rem;
    color: var(--nutri-primary);
    float: left;
    line-height: .8;
    margin: .6rem .5rem 0 .8rem;
}

.nav-sidebar > .nav-item { margin-bottom: 2px; }

.nav-sidebar .nav-link {
    color: var(--nutri-text-secondary) !important;
    border-radius: var(--nutri-radius-sm);
    margin: 0 .5rem;
    padding: .55rem .75rem;
}

.nav-sidebar .nav-link p { color: inherit; }

.nav-sidebar .nav-link .nav-icon {
    width: 1.6rem;
    text-align: center;
    margin-right: .3rem;
    opacity: .85;
    transition: color .15s ease, transform .15s ease;
}

.nav-sidebar .nav-link:hover {
    background-color: var(--nutri-hover) !important;
    color: var(--nutri-text) !important;
}

.nav-sidebar .nav-link:hover .nav-icon {
    transform: scale(1.08);
}

.nav-sidebar .nav-link.active,
.nav-sidebar .nav-treeview .nav-link.active {
    background-color: var(--nutri-sidebar-active-bg) !important;
    color: var(--nutri-active-text) !important;
    font-weight: 600;
}

/* Não força cor no ícone ativo: ícones sem cor própria herdam a cor ativa
   normalmente; ícones com .menu-icon-* (abaixo) mantêm sua cor de módulo
   mesmo quando o menu está ativo, conforme exigido no ajuste de ícones. */
.nav-sidebar .nav-link.active .nav-icon {
    opacity: 1;
}

.nav-sidebar .nav-treeview .nav-link {
    color: var(--nutri-text-secondary) !important;
}

.nav-sidebar .nav-treeview {
    background: transparent !important;
}

/* ------------------------------------------------------------------
   Ícones coloridos da Sidebar
   Cada módulo possui uma cor própria e consistente (sempre a mesma
   funcionalidade = sempre a mesma cor), aplicada apenas ao ícone.
   Não substitui o sistema de tokens --nutri-* pois é uma paleta de
   identificação fixa e intencionalmente igual em claro/escuro.
   ------------------------------------------------------------------ */
.menu-icon-blue   { color: #3B82F6 !important; }
.menu-icon-green  { color: #22C55E !important; }
.menu-icon-purple { color: #8B5CF6 !important; }
.menu-icon-orange { color: #F59E0B !important; }
.menu-icon-red    { color: #EF4444 !important; }
.menu-icon-cyan   { color: #06B6D4 !important; }
.menu-icon-pink   { color: #EC4899 !important; }
.menu-icon-gray   { color: #94A3B8 !important; }
.menu-icon-teal   { color: #14B8A6 !important; }
.menu-icon-yellow { color: #CA8A04 !important; }
.menu-icon-wine   { color: #9F1239 !important; }

/* ------------------------------------------------------------------
   Conteúdo / Cards
   ------------------------------------------------------------------ */
.content-wrapper {
    background-color: var(--nutri-bg);
    min-height: calc(100vh - 110px);
}

.card {
    background-color: var(--nutri-card-bg);
    color: var(--nutri-text);
    border: 1px solid var(--nutri-border);
    border-radius: var(--nutri-radius);
    box-shadow: var(--nutri-shadow);
    margin-bottom: 1.25rem;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--nutri-border);
    border-top-left-radius: var(--nutri-radius) !important;
    border-top-right-radius: var(--nutri-radius) !important;
}

.card-title { color: var(--nutri-text); font-weight: 600; }

/* Título principal de tela — padrão único para todas as páginas (ver .content-header/.container-fluid) */
.page-title {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 0;
    color: var(--nutri-text);
    overflow-wrap: break-word;
}
.page-title i { font-size: 1rem; }
.page-title small { font-size: 0.8rem; }
.card-outline.card-primary { border-top: 3px solid var(--nutri-primary); }

.text-muted, .card-body .text-muted { color: var(--nutri-text-secondary) !important; }

.small-box {
    border-radius: var(--nutri-radius);
    box-shadow: var(--nutri-shadow);
}

.small-box h3 { font-weight: 700; }

/* ------------------------------------------------------------------
   Tabelas
   ------------------------------------------------------------------ */
.table {
    color: var(--nutri-text);
}

.table td, .table th {
    vertical-align: middle;
    border-color: var(--nutri-border);
}

.table thead th {
    color: var(--nutri-text-secondary);
    border-bottom-width: 1px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .03em;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--nutri-stripe);
}

.table-hover tbody tr:hover {
    background-color: var(--nutri-hover);
}

/* ------------------------------------------------------------------
   DataTables — padronização global (busca, quantidade de registros,
   paginação, informações, Responsive e coluna de Ações). Cobre todas as
   telas que usam nutriDataTable() (ver assets/js/datatables-nutri.js).
   Usa somente variáveis --nutri-*, então claro/escuro saem sincronizados.
   ------------------------------------------------------------------ */
.dataTables_wrapper {
    color: var(--nutri-text);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing {
    color: var(--nutri-text-secondary);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--nutri-input-bg);
    border: 1px solid var(--nutri-border);
    color: var(--nutri-text);
    border-radius: var(--nutri-radius-sm);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--nutri-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--nutri-primary-rgb), .18);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--nutri-text) !important;
    border: 1px solid transparent;
    border-radius: var(--nutri-radius-sm);
    margin-left: 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--nutri-hover) !important;
    border-color: var(--nutri-border) !important;
    color: var(--nutri-text) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--nutri-active-bg) !important;
    border-color: var(--nutri-active-bg) !important;
    color: var(--nutri-active-text) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--nutri-text-secondary) !important;
    background: transparent !important;
    border-color: transparent !important;
    cursor: default;
}

.dataTables_wrapper .dataTables_processing {
    background-color: var(--nutri-card-bg);
    border: 1px solid var(--nutri-border);
    border-radius: var(--nutri-radius-sm);
    box-shadow: var(--nutri-shadow);
}

/* Responsive (linha expandida com os campos ocultos em telas pequenas) */
table.dataTable > tbody > tr.child ul.dtr-details { color: var(--nutri-text); }
table.dataTable > tbody > tr.child ul.dtr-details li { border-bottom: 1px solid var(--nutri-border); }
table.dataTable > tbody > tr.child span.dtr-title { color: var(--nutri-text-secondary); font-weight: 600; }

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    background-color: var(--nutri-primary);
    border: none;
    box-shadow: 0 0 0 2px var(--nutri-card-bg);
    top: 50%;
    margin-top: -.65em;
}

/* Coluna de Ações — sempre compacta, não ordenável/pesquisável (marcar a
   coluna com className 'dt-acoes-col'; nutriDataTable() cuida do resto) e
   com os botões sempre lado a lado, sem quebra de linha. */
.dt-acoes-col {
    white-space: nowrap;
    width: 1%;
}

.dt-acoes {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

/* Telas pequenas: empilha busca / quantidade de registros / paginação /
   informações em vez de disputar espaço lado a lado. */
@media (max-width: 767.98px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: left !important;
        width: 100%;
        margin-bottom: .5rem;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin-left: 0 !important;
        margin-top: .25rem;
    }

    .dataTables_wrapper .dataTables_paginate {
        display: flex;
        flex-wrap: wrap;
    }
}

/* ------------------------------------------------------------------
   Sidebar global de visualização/impressão de PDF (view/layout/_pdf-sidebar.php
   + assets/js/pdf-sidebar.js). Abre da direita para a esquerda, cabeçalho
   fixo, rolagem restrita ao corpo do documento. Usa --nutri-* para o
   "chrome" da sidebar (cabeçalho, fundo, textos) acompanhar claro/escuro;
   o corpo do iframe fica sempre branco de propósito — os documentos
   (prescrição, plano alimentar) são páginas de impressão que não têm
   tema escuro próprio, igual ao papel impresso.
   ------------------------------------------------------------------ */
.pdf-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 1040;
}

.pdf-sidebar-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.pdf-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(90vw, 960px);
    max-width: 100vw;
    background-color: var(--nutri-card-bg);
    color: var(--nutri-text);
    box-shadow: -4px 0 24px rgba(0, 0, 0, .25);
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 1050;
    display: flex;
    flex-direction: column;
}

.pdf-sidebar.show {
    transform: translateX(0);
}

.pdf-sidebar-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--nutri-border);
    background-color: var(--nutri-card-bg);
}

.pdf-sidebar-titulo {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--nutri-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdf-sidebar-acoes {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
    white-space: nowrap;
}

.pdf-sidebar-corpo {
    position: relative;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--nutri-bg);
}

.pdf-sidebar-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    border: 0;
    background-color: #fff;
}

.pdf-sidebar-carregando {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: var(--nutri-text-secondary);
    background-color: var(--nutri-bg);
}

.pdf-sidebar-carregando.d-none {
    display: none;
}

body.pdf-sidebar-aberta {
    overflow: hidden;
}

@media (max-width: 991.98px) {
    .pdf-sidebar { width: 92vw; }
}

@media (max-width: 575.98px) {
    .pdf-sidebar { width: 100vw; }
    .pdf-sidebar-header { padding: .65rem .85rem; }
    .pdf-sidebar-titulo { font-size: .9rem; }
}

/* ------------------------------------------------------------------
   Toasts — feedback padronizado de sucesso/erro/alerta/informação
   (assets/js/toast.js, função global mostrarToast()). Posição configurável
   em Administração → Configurações → Mensagens e Notificações (padrão:
   Superior direita). Usa somente --nutri-* + cores semânticas já
   existentes, então claro/escuro saem sincronizados automaticamente.
   ------------------------------------------------------------------ */
.toast-container-nutri {
    position: fixed;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    max-width: 380px;
    width: calc(100% - 2rem);
    pointer-events: none;
}

.toast-container-nutri .toast-nutri {
    pointer-events: auto;
}

.toast-container-top-right { top: calc(3.5rem + 12px); right: 1rem; align-items: flex-end; }
.toast-container-top-left { top: calc(3.5rem + 12px); left: 1rem; align-items: flex-start; }
.toast-container-bottom-right { bottom: 1rem; right: 1rem; align-items: flex-end; }
.toast-container-bottom-left { bottom: 1rem; left: 1rem; align-items: flex-start; }
.toast-container-top-center { top: calc(3.5rem + 12px); left: 50%; transform: translateX(-50%); align-items: center; }
.toast-container-bottom-center { bottom: 1rem; left: 50%; transform: translateX(-50%); align-items: center; }

.toast-nutri {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    width: 340px;
    max-width: 100%;
    padding: .75rem .85rem;
    background-color: var(--nutri-card-bg);
    color: var(--nutri-text);
    border: 1px solid var(--nutri-border);
    border-left: 4px solid var(--nutri-border);
    border-radius: var(--nutri-radius-sm);
    box-shadow: var(--nutri-shadow);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease;
}

.toast-nutri.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-nutri-success { border-left-color: var(--nutri-success); }
.toast-nutri-success .toast-nutri-icone { color: var(--nutri-success); }
.toast-nutri-error { border-left-color: var(--nutri-danger); }
.toast-nutri-error .toast-nutri-icone { color: var(--nutri-danger); }
.toast-nutri-warning { border-left-color: var(--nutri-warning); }
.toast-nutri-warning .toast-nutri-icone { color: var(--nutri-warning); }
.toast-nutri-info { border-left-color: var(--nutri-info); }
.toast-nutri-info .toast-nutri-icone { color: var(--nutri-info); }

.toast-nutri-icone {
    font-size: 1.15rem;
    line-height: 1.4;
    flex-shrink: 0;
    margin-top: .05rem;
}

.toast-nutri-corpo {
    flex: 1 1 auto;
    min-width: 0;
}

.toast-nutri-titulo {
    font-weight: 600;
    font-size: .875rem;
    color: var(--nutri-text);
    margin-bottom: .1rem;
}

.toast-nutri-mensagem {
    font-size: .825rem;
    color: var(--nutri-text-secondary);
    word-break: break-word;
}

.toast-nutri-fechar {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    color: var(--nutri-text-secondary);
    padding: 0;
    line-height: 1;
    cursor: pointer;
    font-size: .8rem;
    margin-top: .15rem;
}

.toast-nutri-fechar:hover {
    color: var(--nutri-text);
}

.toast-nutri-com-acoes { width: 380px; }

.toast-nutri-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .5rem;
}

.toast-nutri-acoes .btn { font-size: .8rem; }

/* Mobile: nunca sair da tela, margem lateral, não ficar atrás da navbar
   (offset de topo já cobre isso em qualquer largura, ver acima). */
@media (max-width: 575.98px) {
    .toast-container-nutri {
        max-width: none;
        width: calc(100% - 1.5rem);
    }

    .toast-container-top-right, .toast-container-bottom-right,
    .toast-container-top-left, .toast-container-bottom-left {
        left: .75rem;
        right: .75rem;
        align-items: stretch;
    }

    .toast-container-top-center, .toast-container-bottom-center {
        left: .75rem;
        right: .75rem;
        width: auto;
        transform: none;
        align-items: stretch;
    }

    .toast-nutri {
        width: 100%;
    }
}

/* ------------------------------------------------------------------
   Formulários (inputs, selects, textarea)
   ------------------------------------------------------------------ */
.form-control,
.custom-select,
select.form-control,
textarea.form-control {
    background-color: var(--nutri-input-bg);
    border: 1px solid var(--nutri-border);
    color: var(--nutri-text);
    border-radius: var(--nutri-radius-sm);
}

.form-control:focus,
.custom-select:focus {
    background-color: var(--nutri-input-bg);
    color: var(--nutri-text);
    border-color: var(--nutri-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--nutri-primary-rgb), .18);
}

.form-control::placeholder { color: var(--nutri-text-secondary); opacity: .8; }

/* Autofill do navegador (Chrome/Edge) em qualquer input/select/textarea do
   sistema — mesmo truque usado em .login-input (box-shadow inset "pinta por
   cima" do fundo azul que o autofill força; -webkit-text-fill-color substitui
   a cor do texto). Usa só variáveis --nutri-*, então claro e escuro já saem
   corretos automaticamente, sem duplicar cores nem criar um tema à parte. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--nutri-text) !important;
    caret-color: var(--nutri-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--nutri-input-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--nutri-input-bg) inset !important;
    border: 1px solid var(--nutri-border) !important;
    border-radius: var(--nutri-radius-sm);
    transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
    border-color: var(--nutri-primary) !important;
    box-shadow: 0 0 0 1000px var(--nutri-input-bg) inset, 0 0 0 .2rem rgba(var(--nutri-primary-rgb), .18) !important;
}

label { color: var(--nutri-text); font-weight: 500; }

.input-group-text {
    background-color: var(--nutri-input-bg);
    border: 1px solid var(--nutri-border);
    color: var(--nutri-text-secondary);
}

/* Checkbox customizado (Bootstrap .custom-checkbox) acompanhando a cor primária do tema */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--nutri-primary);
    border-color: var(--nutri-primary);
}

.custom-control-label::before {
    background-color: var(--nutri-input-bg);
    border: 1px solid var(--nutri-border);
}

.custom-control-label { color: var(--nutri-text); }

/* ------------------------------------------------------------------
   Botões
   ------------------------------------------------------------------ */
.btn {
    border-radius: var(--nutri-radius-sm);
}

.btn-primary {
    background-color: var(--nutri-primary);
    border-color: var(--nutri-primary);
}

.btn-primary:hover, .btn-primary:focus {
    filter: brightness(.92);
    background-color: var(--nutri-primary);
    border-color: var(--nutri-primary);
}

.btn-outline-primary { color: var(--nutri-primary); border-color: var(--nutri-primary); }
.btn-outline-primary:hover { background-color: var(--nutri-primary); border-color: var(--nutri-primary); }

.btn-success { background-color: var(--nutri-success); border-color: var(--nutri-success); }
.btn-outline-success { color: var(--nutri-success); border-color: var(--nutri-success); }
.btn-outline-success:hover { background-color: var(--nutri-success); border-color: var(--nutri-success); }

.btn-danger { background-color: var(--nutri-danger); border-color: var(--nutri-danger); }
.btn-outline-danger { color: var(--nutri-danger); border-color: var(--nutri-danger); }
.btn-outline-danger:hover { background-color: var(--nutri-danger); border-color: var(--nutri-danger); }

.btn-warning { background-color: var(--nutri-warning); border-color: var(--nutri-warning); color: #fff; }
.btn-outline-warning { color: var(--nutri-warning); border-color: var(--nutri-warning); }
.btn-outline-warning:hover { background-color: var(--nutri-warning); border-color: var(--nutri-warning); color: #fff; }

/* AJUSTE "PADRONIZAÇÃO DE CORES — PRIMEX NUTRI": a cor do botão representa a
   AÇÃO (não o módulo — isso é papel exclusivo dos ícones da Sidebar, ver
   .menu-icon-* mais abaixo). Mapa oficial:
     Azul     (.btn-primary)          → ação principal (Salvar, Aplicar)
     Verde    (.btn-success)          → criar/adicionar/confirmar/concluir
     Roxo     (.btn-purple)           → atendimento/ação clínica (Iniciar/Continuar Atendimento)
     Laranja  (.btn-warning, já existe acima) → editar/alterar/reagendar
     Vermelho (.btn-danger, já existe acima)  → destrutivo (Excluir, Cancelar Consulta)
     Amarelo  (.btn-yellow)           → atenção/pendência (NUNCA usado em badges/status)
     Ciano    (.btn-info)             → documentos/comunicação (Prescrição, E-mail, Arquivos)
     Teal     (.btn-teal)             → navegação/secundário (Visualizar, Voltar, Fechar, Cancelar formulário)
   Todas seguem o mesmo padrão de var() + filter:brightness(.92) no hover já
   usado acima — nenhuma cor fixa fora deste bloco. */

.btn-purple { background-color: var(--nutri-purple); border-color: var(--nutri-purple); color: #fff; }
.btn-purple:hover, .btn-purple:focus { filter: brightness(.92); background-color: var(--nutri-purple); border-color: var(--nutri-purple); color: #fff; }
.btn-outline-purple { color: var(--nutri-purple); border-color: var(--nutri-purple); }
.btn-outline-purple:hover { background-color: var(--nutri-purple); border-color: var(--nutri-purple); color: #fff; }
.text-purple { color: var(--nutri-purple) !important; }

/* Ciano — reaproveita o próprio --nutri-info (já é um azul-ciano) em vez de
   criar um token novo; antes .btn-info/.btn-outline-info usavam o cyan fixo
   padrão do Bootstrap (#17a2b8), fora do sistema de tema — corrigido aqui
   para acompanhar Light/Dark como todos os outros. */
.btn-info { background-color: var(--nutri-info); border-color: var(--nutri-info); color: #fff; }
.btn-info:hover, .btn-info:focus { filter: brightness(.92); background-color: var(--nutri-info); border-color: var(--nutri-info); color: #fff; }
.btn-outline-info { color: var(--nutri-info); border-color: var(--nutri-info); }
.btn-outline-info:hover { background-color: var(--nutri-info); border-color: var(--nutri-info); color: #fff; }
.text-info { color: var(--nutri-info) !important; }

/* Teal — navegação/ação secundária (Visualizar, Voltar, Fechar, Cancelar
   formulário/modal). Distinto do cinza neutro .btn-default/.btn-outline-secondary
   (que continua existindo para os casos realmente sem ênfase de cor). */
.btn-teal { background-color: var(--nutri-teal); border-color: var(--nutri-teal); color: #fff; }
.btn-teal:hover, .btn-teal:focus { filter: brightness(.92); background-color: var(--nutri-teal); border-color: var(--nutri-teal); color: #fff; }
.btn-outline-teal { color: var(--nutri-teal); border-color: var(--nutri-teal); }
.btn-outline-teal:hover { background-color: var(--nutri-teal); border-color: var(--nutri-teal); color: #fff; }
.text-teal { color: var(--nutri-teal) !important; }

/* Amarelo — atenção/pendência em AÇÕES (nunca em badges/status, que têm
   semântica própria e não são alterados por este ajuste). */
.btn-yellow { background-color: var(--nutri-yellow); border-color: var(--nutri-yellow); color: #fff; }
.btn-yellow:hover, .btn-yellow:focus { filter: brightness(.92); background-color: var(--nutri-yellow); border-color: var(--nutri-yellow); color: #fff; }
.btn-outline-yellow { color: var(--nutri-yellow); border-color: var(--nutri-yellow); }
.btn-outline-yellow:hover { background-color: var(--nutri-yellow); border-color: var(--nutri-yellow); color: #fff; }
.text-yellow { color: var(--nutri-yellow) !important; }

.btn-default,
.btn-outline-secondary {
    background-color: transparent;
    border-color: var(--nutri-border);
    color: var(--nutri-text);
}

.btn-default:hover, .btn-outline-secondary:hover {
    background-color: var(--nutri-hover);
    color: var(--nutri-text);
}

.btn.btn-sm i, .btn.btn-xs i { opacity: .9; }

/* ------------------------------------------------------------------
   Dropdowns / Menu do usuário / Busca rápida
   ------------------------------------------------------------------ */
.dropdown-menu {
    background-color: var(--nutri-card-bg);
    border: 1px solid var(--nutri-border);
    color: var(--nutri-text);
    border-radius: var(--nutri-radius);
    box-shadow: var(--nutri-shadow);
}

.dropdown-item { color: var(--nutri-text); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--nutri-hover); color: var(--nutri-text); }
.dropdown-item-text { color: var(--nutri-text-secondary); }
.dropdown-divider { border-top-color: var(--nutri-border); }

#buscaRapidaWrapper { position: relative; width: 100%; max-width: 460px; }

#buscaRapidaBox {
    width: 100%;
    border-radius: 999px;
    background-color: var(--nutri-input-bg);
    border: 1px solid var(--nutri-border);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

#buscaRapidaBox:focus-within {
    border-color: var(--nutri-primary);
    box-shadow: 0 0 0 .18rem rgba(var(--nutri-primary-rgb), .18);
    background-color: var(--nutri-card-bg);
}

#buscaRapidaIcone,
#inputBuscaRapida,
#btnLimparBuscaRapida {
    background-color: transparent;
    border: none !important;
}

#buscaRapidaIcone {
    padding-left: 1rem;
    color: var(--nutri-text-secondary);
    transition: color .15s ease;
}

#buscaRapidaBox:focus-within #buscaRapidaIcone { color: var(--nutri-primary); }

#inputBuscaRapida {
    color: var(--nutri-text);
    padding-top: .45rem;
    padding-bottom: .45rem;
    box-shadow: none !important;
}

#inputBuscaRapida::placeholder { color: var(--nutri-text-secondary); opacity: .85; }

#btnLimparBuscaRapida {
    color: var(--nutri-text-secondary);
    padding-right: .9rem;
}

#btnLimparBuscaRapida:hover { color: var(--nutri-danger); background-color: transparent; }

#resultadoBuscaRapida {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 380px;
    overflow-y: auto;
    z-index: 1050;
    padding: .35rem;
    background-color: var(--nutri-card-bg);
    border: 1px solid var(--nutri-border);
    border-radius: var(--nutri-radius);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .08);
}

#resultadoBuscaRapida .item-busca-rapida {
    white-space: normal;
    border-radius: var(--nutri-radius-sm);
    padding: .55rem .75rem;
    margin-bottom: 2px;
    color: var(--nutri-text);
    transition: background-color .12s ease;
}

#resultadoBuscaRapida .item-busca-rapida:last-child { margin-bottom: 0; }

#resultadoBuscaRapida .item-busca-rapida.active,
#resultadoBuscaRapida .item-busca-rapida:hover {
    background-color: var(--nutri-hover);
    color: var(--nutri-text);
}

.linha-paciente.table-active td {
    box-shadow: inset 3px 0 0 var(--nutri-primary);
    background-color: var(--nutri-active-bg) !important;
    color: var(--nutri-active-text);
}

.refeicao-item .card-header { background-color: var(--nutri-hover); }

/* ------------------------------------------------------------------
   Modais
   ------------------------------------------------------------------ */
.modal-content {
    background-color: var(--nutri-card-bg);
    color: var(--nutri-text);
    border: 1px solid var(--nutri-border);
    border-radius: var(--nutri-radius);
}

.modal-header, .modal-footer { border-color: var(--nutri-border); }

/* ------------------------------------------------------------------
   Paginação
   ------------------------------------------------------------------ */
.page-link {
    background-color: var(--nutri-card-bg);
    border-color: var(--nutri-border);
    color: var(--nutri-text);
}

.page-link:hover { background-color: var(--nutri-hover); color: var(--nutri-text); }

.page-item.active .page-link {
    background-color: var(--nutri-primary);
    border-color: var(--nutri-primary);
    color: #fff;
}

.page-item.disabled .page-link {
    background-color: var(--nutri-card-bg);
    color: var(--nutri-text-secondary);
}

/* ------------------------------------------------------------------
   Alertas, badges e indicadores de estado
   ------------------------------------------------------------------ */
.alert { border-radius: var(--nutri-radius-sm); border-width: 1px; }

.alert-success { background-color: rgba(34, 197, 94, .12); border-color: var(--nutri-success); color: var(--nutri-success); }
.alert-warning { background-color: rgba(245, 158, 11, .12); border-color: var(--nutri-warning); color: var(--nutri-warning); }
.alert-danger  { background-color: rgba(239, 68, 68, .12); border-color: var(--nutri-danger); color: var(--nutri-danger); }
.alert-info    { background-color: rgba(56, 189, 248, .12); border-color: var(--nutri-info); color: var(--nutri-info); }
.alert-secondary { background-color: var(--nutri-bg); border-color: var(--nutri-border); color: var(--nutri-text-secondary); }

.badge { font-size: .78rem; font-weight: 600; border-radius: .35rem; padding: .35em .6em; }
.badge-success { background-color: var(--nutri-success); }
.badge-warning { background-color: var(--nutri-warning); color: #fff; }
.badge-danger  { background-color: var(--nutri-danger); }
.badge-info    { background-color: var(--nutri-info); }
.badge-primary { background-color: var(--nutri-primary); }
.badge-secondary { background-color: var(--nutri-text-secondary); }

/* Cards de indicador (dashboard) e demais usos de bg-* contextual */
.small-box.bg-info, .bg-info    { background-color: var(--nutri-info) !important; }
.small-box.bg-success, .bg-success { background-color: var(--nutri-success) !important; }
.small-box.bg-warning, .bg-warning { background-color: var(--nutri-warning) !important; }
.small-box.bg-danger, .bg-danger  { background-color: var(--nutri-danger) !important; }
.small-box.bg-primary, .bg-primary { background-color: var(--nutri-primary) !important; }

.text-success { color: var(--nutri-success) !important; }
.text-warning { color: var(--nutri-warning) !important; }
.text-danger  { color: var(--nutri-danger) !important; }
.text-info    { color: var(--nutri-info) !important; }
.text-primary { color: var(--nutri-primary) !important; }

/* ------------------------------------------------------------------
   Tooltips (Bootstrap) — usados em botões somente-ícone
   ------------------------------------------------------------------ */
.tooltip-inner {
    background-color: var(--nutri-text);
    color: var(--nutri-card-bg);
    border-radius: var(--nutri-radius-sm);
    font-size: .78rem;
    padding: .4rem .6rem;
}

.bs-tooltip-top .arrow::before { border-top-color: var(--nutri-text); }
.bs-tooltip-bottom .arrow::before { border-bottom-color: var(--nutri-text); }
.bs-tooltip-left .arrow::before { border-left-color: var(--nutri-text); }
.bs-tooltip-right .arrow::before { border-right-color: var(--nutri-text); }

/* ------------------------------------------------------------------
   Login — layout de duas colunas (painel institucional com onda/grid
   decorativos em SVG | formulário com campos em estilo underline),
   construído inteiramente com as variáveis de tema já definidas acima.
   Nenhuma cor própria/independente é usada aqui: o painel institucional
   deriva de --nutri-primary (com sobreposições neutras em preto/branco
   translúcido só para dar profundidade — não introduz nenhum matiz novo).
   ------------------------------------------------------------------ */
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: var(--nutri-bg);
    position: relative;
    overflow: hidden;
}

.login-shell::before,
.login-shell::after {
    content: '';
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    background: var(--nutri-primary);
    filter: blur(70px);
    pointer-events: none;
}

.login-shell::before { width: 420px; height: 420px; top: -160px; left: -140px; opacity: .30; }
.login-shell::after { width: 380px; height: 380px; bottom: -180px; right: -120px; opacity: .18; }

.login-theme-toggle {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 10;
    cursor: pointer;
    border: 1px solid var(--nutri-border);
    background-color: var(--nutri-card-bg);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--nutri-shadow);
    transition: background-color .2s ease, transform .2s ease;
}

.login-theme-toggle:hover { background-color: var(--nutri-hover); transform: scale(1.06); }

.login-split {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    max-width: 940px;
    min-height: 560px;
    background-color: var(--nutri-card-bg);
    border-radius: 1.25rem;
    box-shadow: 0 20px 25px -8px rgba(15, 23, 42, .12), 0 8px 10px -6px rgba(15, 23, 42, .08), 0 0 0 1px var(--nutri-border);
    overflow: hidden;
    animation: loginFadeUp .5s ease both;
}

@keyframes loginFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

.login-painel-institucional {
    flex: 1 1 46%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    padding: 3rem 3rem;
    color: #fff;
    background-color: var(--nutri-primary);
}

.login-decoracao {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.login-marca-pill {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 3rem;
    padding: .35rem .9rem .35rem .35rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .15);
    backdrop-filter: blur(6px);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.login-marca-pill-icone {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #fff;
    color: var(--nutri-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    overflow: hidden;
    flex-shrink: 0;
}

.login-marca-pill-icone img { width: 100%; height: 100%; object-fit: contain; }

.login-boas-vindas-bloco { position: relative; z-index: 1; }

.login-boas-vindas-mini {
    font-size: .88rem;
    font-weight: 600;
    opacity: .85;
    margin-bottom: .5rem;
}

.login-heading-grande {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.login-slogan {
    font-size: .92rem;
    line-height: 1.6;
    opacity: .88;
    max-width: 280px;
    margin-bottom: 0;
}

.login-painel-formulario {
    flex: 1 1 54%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.75rem;
    background-color: var(--nutri-card-bg);
}

.login-form-inner { width: 100%; max-width: 360px; }

.login-titulo {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--nutri-text);
    margin-bottom: .3rem;
}

.login-subtitulo {
    color: var(--nutri-text-secondary);
    font-size: .925rem;
    margin-bottom: 2rem;
}

.login-campo { position: relative; margin-bottom: 1.6rem; }

.login-input {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 2px solid var(--nutri-border);
    border-radius: 0;
    background-color: transparent;
    padding: .55rem .25rem;
    font-size: .95rem;
    color: var(--nutri-text);
    transition: border-color .2s ease;
}

.login-input::placeholder { color: var(--nutri-text-secondary); }

.login-input:focus {
    outline: none;
    border-bottom-color: var(--nutri-primary);
    box-shadow: 0 1px 0 0 var(--nutri-primary);
}

/* Autofill do Chrome/Edge — o navegador ignora background-color e aplica seu
   próprio fundo (azul claro) via UA stylesheet. O truque do box-shadow inset
   gigante "pinta por cima" com a cor real do input, e -webkit-text-fill-color
   substitui a cor de texto que o autofill também força. Não depende de um
   seletor de tema à parte: como usamos só variáveis --nutri-*, claro e escuro
   já saem corretos automaticamente (body.dark-mode redefine essas variáveis
   lá em cima), sem duplicar cores nem criar um segundo mecanismo de tema. */
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:active,
.login-input:autofill {
    -webkit-text-fill-color: var(--nutri-text) !important;
    caret-color: var(--nutri-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--nutri-input-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--nutri-input-bg) inset !important;
    border-bottom-color: var(--nutri-border) !important;
    transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

.login-input:-webkit-autofill:focus,
.login-input:autofill:focus {
    -webkit-text-fill-color: var(--nutri-text) !important;
    caret-color: var(--nutri-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--nutri-input-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--nutri-input-bg) inset, 0 1px 0 0 var(--nutri-primary) !important;
    border-bottom-color: var(--nutri-primary) !important;
}

.login-campo-senha .login-input { padding-right: 2rem; }

.login-toggle-senha {
    position: absolute;
    right: .25rem;
    top: .55rem;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--nutri-text-secondary);
}

.login-toggle-senha:hover { color: var(--nutri-text); }

.login-opcoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    font-size: .875rem;
}

.login-opcoes a { color: var(--nutri-primary); font-weight: 600; }
.login-opcoes a:hover { color: var(--nutri-active-text); text-decoration: underline; }

.login-btn-entrar {
    padding: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--nutri-primary), var(--nutri-active-text));
    box-shadow: 0 10px 20px -8px rgba(var(--nutri-primary-rgb), .55);
    transition: transform .15s ease, box-shadow .15s ease;
}

.login-btn-entrar:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -8px rgba(var(--nutri-primary-rgb), .6); }
.login-btn-entrar:active { transform: translateY(0); box-shadow: 0 8px 16px -8px rgba(var(--nutri-primary-rgb), .5); }
.login-btn-entrar:focus { box-shadow: 0 0 0 4px rgba(var(--nutri-primary-rgb), .25); }

/* ------------------------------------------------------------------
   Responsivo
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    #buscaRapidaWrapper { max-width: 100%; margin: .5rem 1rem; order: 10; }
}

@media (max-width: 767.98px) {
    .login-split {
        flex-direction: column;
        min-height: auto;
        max-width: 420px;
        border-radius: 1rem;
    }

    .login-painel-institucional {
        padding: 2rem 1.5rem;
    }

    .login-marca-pill { margin-bottom: 1.5rem; }
    .login-heading-grande { font-size: 2rem; }

    .login-painel-formulario {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 576px) {
    .login-shell { padding: 1rem; }
    .login-theme-toggle { top: .75rem; right: .75rem; }
    .login-shell::before, .login-shell::after { display: none; }
}

/* ------------------------------------------------------------------
   Evolução Fotográfica (aba dentro de Pacientes → Visualizar) — cards,
   grade de fotos, placeholders e lightbox. 100% construído com as
   variáveis --nutri-* já existentes: nenhuma cor nova é introduzida
   aqui, então claro/escuro seguem sincronizados automaticamente.
   ------------------------------------------------------------------ */
.evolucao-foto-card { border: 1px solid var(--nutri-border); }

.evolucao-foto-card-header {
    flex-wrap: wrap;
    gap: .5rem;
}

.evolucao-foto-card-titulo { display: flex; align-items: center; flex-wrap: wrap; color: var(--nutri-text); }

.evolucao-foto-card-observacao {
    display: inline-flex;
    align-items: center;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--nutri-text-secondary);
    font-size: .875rem;
}

.evolucao-foto-card-acoes { border-radius: 50%; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

.evolucao-foto-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 991.98px) {
    .evolucao-foto-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
    .evolucao-foto-grid { grid-template-columns: 1fr; }
}

.evolucao-foto-item-label {
    text-align: center;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--nutri-text-secondary);
    margin-bottom: .4rem;
}

.evolucao-foto-item-imagem-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--nutri-radius-sm);
    overflow: hidden;
    background-color: var(--nutri-input-bg);
    border: 1px solid var(--nutri-border);
    cursor: pointer;
}

.evolucao-foto-item-imagem-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.evolucao-foto-item-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    /* Overlay translúcido puro preto: funciona sobre foto de qualquer tom e
       não depende de --nutri-* (o contraste aqui é contra a FOTO, não contra
       a superfície do app) — só a intensidade muda por tema, ver bloco
       body.dark-mode abaixo (AJUSTE "Evolução Fotográfica compatível com
       tema escuro"). */
    background-color: rgba(0, 0, 0, .55);
    opacity: 0;
    transition: opacity .15s ease, background-color .15s ease;
}

body.dark-mode .evolucao-foto-item-overlay { background-color: rgba(0, 0, 0, .68); }

.evolucao-foto-item-imagem-wrapper:hover .evolucao-foto-item-overlay,
.evolucao-foto-item-imagem-wrapper:focus-within .evolucao-foto-item-overlay {
    opacity: 1;
}

/* Touch (mobile/tablet sem :hover real): overlay sempre visível, nunca
   dependendo de hover simulado — os botões precisam ser tocáveis direto. */
@media (hover: none) {
    .evolucao-foto-item-overlay { opacity: 1; background-color: rgba(0, 0, 0, .38); }
    body.dark-mode .evolucao-foto-item-overlay { background-color: rgba(0, 0, 0, .55); }
}

.evolucao-foto-item-overlay button {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    /* Fundo semitransparente + ícone claro + borda discreta: legível sobre
       qualquer foto e em qualquer tema (claro/escuro), sem precisar de
       override por body.dark-mode — a cor de ação (hover/focus) é que muda
       por botão, ver regras abaixo. */
    border: 1px solid rgba(255, 255, 255, .3);
    background-color: rgba(255, 255, 255, .14);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.evolucao-foto-item-overlay button:hover,
.evolucao-foto-item-overlay button:focus-visible {
    background-color: rgba(255, 255, 255, .28);
    border-color: rgba(255, 255, 255, .55);
}

.evolucao-foto-item-overlay button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(var(--nutri-primary-rgb), .5);
}

/* Diferenciação discreta por ação (ampliar fica neutro) */
.evolucao-foto-item-overlay .btn-evolucao-foto-alterar:hover,
.evolucao-foto-item-overlay .btn-evolucao-foto-alterar:focus-visible {
    background-color: var(--nutri-primary);
    border-color: var(--nutri-primary);
    color: #fff;
}

.evolucao-foto-item-overlay .btn-evolucao-foto-comentar:hover,
.evolucao-foto-item-overlay .btn-evolucao-foto-comentar:focus-visible {
    background-color: var(--nutri-warning);
    border-color: var(--nutri-warning);
    color: #fff;
}

.evolucao-foto-item-overlay .btn-evolucao-foto-remover:hover,
.evolucao-foto-item-overlay .btn-evolucao-foto-remover:focus-visible {
    background-color: var(--nutri-danger);
    border-color: var(--nutri-danger);
    color: #fff;
}

.evolucao-foto-item-comentario-btn {
    display: block;
    width: 100%;
    text-align: center;
    color: var(--nutri-text-secondary);
    font-size: .8rem;
    padding: .35rem 0 0;
}

.evolucao-foto-item-comentario-btn:hover { color: var(--nutri-primary); text-decoration: none; }

.evolucao-foto-item-placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--nutri-radius-sm);
    border: 1.5px dashed var(--nutri-border);
    background-color: var(--nutri-input-bg);
    color: var(--nutri-text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: .8rem;
    gap: .35rem;
    padding: .5rem;
}

.evolucao-foto-item-placeholder i { font-size: 1.4rem; opacity: .6; }

.acao-adicionar-foto-posicao { cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.acao-adicionar-foto-posicao:hover { border-color: var(--nutri-primary); color: var(--nutri-primary); }

.evolucao-foto-item-placeholder-add {
    margin-top: .25rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--nutri-primary);
}

/* ---------------- Modal Nova/Editar Evolução Fotográfica ---------------- */
.evolucao-foto-slot-preview {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--nutri-radius-sm);
    border: 1.5px dashed var(--nutri-border);
    background-color: var(--nutri-input-bg);
    color: var(--nutri-text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: .75rem;
    gap: .35rem;
    overflow: hidden;
}

.evolucao-foto-slot-preview i { font-size: 1.3rem; opacity: .6; }

.evolucao-foto-slot-preview.tem-foto {
    border-style: solid;
    border-color: var(--nutri-primary);
    padding: 0;
}

.evolucao-foto-slot-preview.tem-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.evolucao-foto-slot-video {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--nutri-radius-sm);
    background-color: #000;
}

.evolucao-foto-slot-acoes {
    display: flex;
    justify-content: center;
    gap: .35rem;
    margin-top: .5rem;
}

/* ---------------- Lightbox de ampliação ---------------- */
.evolucao-lightbox-content {
    background-color: var(--nutri-card-bg);
    border: 1px solid var(--nutri-border);
    border-radius: var(--nutri-radius);
    overflow: hidden;
}

.evolucao-lightbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--nutri-border);
    color: var(--nutri-text);
}

.evolucao-lightbox-fechar { color: var(--nutri-text); opacity: .7; text-shadow: none; }
.evolucao-lightbox-fechar:hover { opacity: 1; color: var(--nutri-text); }

.evolucao-lightbox-body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--nutri-bg);
    min-height: 60vh;
    max-height: 70vh;
    overflow: hidden;
}

.evolucao-lightbox-imagem-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.evolucao-lightbox-imagem-wrapper img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    transition: transform .15s ease;
}

.evolucao-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--nutri-border);
    background-color: var(--nutri-card-bg);
    color: var(--nutri-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--nutri-shadow);
}

.evolucao-lightbox-nav:hover { background-color: var(--nutri-hover); }
.evolucao-lightbox-nav-prev { left: 1rem; }
.evolucao-lightbox-nav-next { right: 1rem; }

.evolucao-lightbox-comentario {
    padding: .6rem 1.25rem;
    border-bottom: 1px solid var(--nutri-border);
    color: var(--nutri-text-secondary);
    font-size: .9rem;
}

.evolucao-lightbox-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1.25rem;
}

.evolucao-lightbox-posicoes { display: flex; flex-wrap: wrap; gap: .4rem; }

.evolucao-lightbox-posicao-btn {
    border: 1px solid var(--nutri-border);
    background-color: transparent;
    color: var(--nutri-text-secondary);
    border-radius: 999px;
    padding: .3rem .85rem;
    font-size: .8rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.evolucao-lightbox-posicao-btn:hover { background-color: var(--nutri-hover); color: var(--nutri-text); }

.evolucao-lightbox-posicao-btn.ativo {
    background-color: var(--nutri-active-bg);
    border-color: var(--nutri-primary);
    color: var(--nutri-active-text);
    font-weight: 600;
}

.evolucao-lightbox-posicao-btn.sem-foto { opacity: .5; }

.evolucao-lightbox-zoom { display: flex; gap: .35rem; }

@media (max-width: 575.98px) {
    .evolucao-lightbox-nav { width: 34px; height: 34px; }
    .evolucao-lightbox-nav-prev { left: .35rem; }
    .evolucao-lightbox-nav-next { right: .35rem; }
}

/* =====================================================================
   PRONTUÁRIO DO PACIENTE — cabeçalho, breadcrumb, busca rápida (Ctrl+K),
   abas com destaque e aba "Plano Alimentar" (filtros, empty state).
   Reaproveita exclusivamente as variáveis --nutri-* já existentes.
   ===================================================================== */

/* Breadcrumb */
.breadcrumb { padding: 0; background: transparent; font-size: .85rem; }
.breadcrumb-item a { color: var(--nutri-text-secondary); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--nutri-primary); text-decoration: underline; }
.breadcrumb-item.active { color: var(--nutri-text-secondary); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--nutri-text-secondary); }

/* Breadcrumb do prontuário — espaçamento levemente maior que o padrão global */
.breadcrumb-prontuario { margin-bottom: .75rem !important; }

/* Card de identificação do paciente */
.card-identificacao-paciente .card-body { padding: 1.5rem; }

/* Dois botões lado a lado (Portal do Paciente + Editar Dados) — ver AJUSTE
   "Botões lado a lado". display:flex + justify-content:flex-end mantém os
   dois botões alinhados à direita e um ao lado do outro sempre que houver
   espaço; flex-wrap:wrap só entra em ação (empilha) quando a largura
   disponível realmente não comporta os dois lado a lado (telas muito
   estreitas), nunca forçando quebra em tablet/desktop. Ver também a regra
   mais abaixo, em @media (max-width: 575.98px), que impede especificamente
   o .dropdown de virar width:100% (ele não deve nunca ocupar a largura
   inteira, mesmo empilhado). */
.card-identificacao-paciente-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .5rem;
}

.card-identificacao-paciente-acoes .btn {
    height: 36px;
    display: inline-flex;
    align-items: center;
}

/* Avatar do usuário autenticado na Navbar — mesma foto de Meu Perfil, com
   fallback ao ícone padrão (fa-user-circle) quando não houver foto cadastrada.
   Tamanho alinhado ao mesmo espaço ocupado pelo ícone padrão (~1rem), para não
   destoar do restante dos itens da Navbar. */
.navbar-avatar-foto {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: cover;
    border-radius: 50%;
    vertical-align: text-bottom;
}

/* Foto do paciente no cabeçalho do prontuário — tamanho fixo ~92x92, sem o
   botão "Alterar foto" (a troca é feita por duplo clique na própria foto,
   reaproveitando o modal #modalFotoPaciente já existente). O selo de câmera
   é só um indicativo visual (pointer-events: none) — a área clicável
   continua sendo o avatar inteiro, mesmo comportamento de sempre. */
.avatar-paciente-header { cursor: pointer; display: inline-block; position: relative; }
.avatar-paciente-header .avatar-foto-elemento#fotoPacienteAvatarPreview {
    width: 92px !important;
    height: 92px !important;
    object-fit: cover !important;
}
.avatar-paciente-header .avatar-foto-elemento#fotoPacienteAvatarPadrao {
    font-size: 92px !important;
}
.avatar-paciente-header .avatar-foto-acao { display: none; }

.avatar-paciente-header-camera {
    position: absolute;
    right: 0;
    bottom: 8px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--nutri-primary);
    color: #fff;
    font-size: .7rem;
    border: 2px solid var(--nutri-card-bg);
    pointer-events: none;
}

/* Fallback somente-leitura (sem permissão de editar) — mesmo tamanho do
   avatar editável, para o cabeçalho não "pular" conforme a permissão. */
.avatar-paciente-header-somente-leitura {
    width: 92px;
    height: 92px;
    object-fit: cover;
    border: 1px solid var(--nutri-border);
}
.avatar-paciente-header-somente-leitura-icone {
    font-size: 92px;
    line-height: 1;
}

.paciente-nome-destaque {
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--nutri-text);
    font-size: 1.375rem;
    font-weight: 600;
}
.paciente-meta-resumo {
    font-size: .8125rem;
    color: var(--nutri-text-secondary);
}
.paciente-meta-resumo i { font-size: .75rem; margin-right: .2rem; color: var(--nutri-text-secondary); }
.paciente-meta-separador { color: var(--nutri-border); margin: 0 .35rem; }

/* Resumo do Portal do Paciente (Ativo/Inativo, E-mail, Último acesso) —
   integrado ao card de identificação (ver view/paciente/detalhes.php);
   deixou de existir como card separado. */
.paciente-portal-resumo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: .75rem 1.5rem;
}

.paciente-portal-label {
    color: var(--nutri-text-secondary);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: .15rem;
}

.paciente-portal-item .small { font-size: .8rem; }

/* Busca rápida da navbar — indicação visual do atalho Ctrl+K */
.busca-rapida-atalho {
    background-color: var(--nutri-input-bg);
    border-color: var(--nutri-border);
    color: var(--nutri-text-secondary);
    font-size: .7rem;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .busca-rapida-atalho { display: none; }
}

/* Abas do prontuário — aba ativa com cor primária + linha inferior, sem borda pesada */
.nav-tabs-prontuario {
    border-bottom: 1px solid var(--nutri-border);
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
}

.nav-tabs-prontuario::-webkit-scrollbar { height: 4px; }

.nav-tabs-prontuario .nav-item { flex-shrink: 0; }

.nav-tabs-prontuario .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--nutri-text-secondary);
    font-weight: 500;
    font-size: .875rem;
    white-space: nowrap;
    border-radius: 0;
    padding: .875rem .1rem;
    margin-right: 1.5rem;
}

.nav-tabs-prontuario .nav-item:last-child .nav-link { margin-right: 0; }

.nav-tabs-prontuario .nav-link:hover {
    border-color: transparent;
    color: var(--nutri-text);
    background-color: var(--nutri-hover);
}

.nav-tabs-prontuario .nav-link.active {
    background: transparent;
    color: var(--nutri-primary);
    font-weight: 600;
    border-bottom: 2px solid var(--nutri-primary);
}

/* Abas Plano Alimentar / Prescrições — cabeçalho, filtros e ações.
   Classes genéricas e compartilhadas entre as duas abas (padronização de
   UX — ver view/paciente/detalhes.php) para evitar duplicação de estilo. */
.prontuario-cabecalho h5 { color: var(--nutri-text); }

.prontuario-acoes-topo { gap: .5rem; }

/* Barra de filtros — compacta, uma única linha em telas largas, todos os
   controles com a mesma altura (~38px, igual ao form-control padrão). */
.prontuario-filtros {
    background-color: var(--nutri-card-bg);
    border: 1px solid var(--nutri-border);
    border-radius: var(--nutri-radius-sm);
    padding: .5rem .75rem;
    margin-bottom: 1rem;
}

.prontuario-filtros .form-control,
.prontuario-filtros .input-group-text {
    height: 38px;
    font-size: .875rem;
}

.prontuario-filtros label {
    color: var(--nutri-text-secondary);
    font-size: .75rem;
    margin-bottom: .2rem;
}

/* Botão "Limpar filtros" — somente ícone, com tooltip (sem texto visível),
   desabilitado quando nenhum filtro está ativo. */
.prontuario-filtros .btn-limpar-filtros {
    height: 38px;
    width: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Empty state (DataTables language.emptyTable) — idêntico entre as duas abas */
.prontuario-empty-state i {
    font-size: 2.75rem;
    color: var(--nutri-border);
}

.prontuario-empty-state p { color: var(--nutri-text-secondary); }
.prontuario-empty-state p.font-weight-bold { color: var(--nutri-text); font-size: 1rem; }

/* ==================================================================
   Prontuário — Aba Resumo (Fase 1, Reestruturação do Fluxo Clínico)
   Cards objetivos, sem cor de destaque própria — reaproveita .card
   padrão (já themeado por dark-mode do AdminLTE) e os tokens --nutri-*.
   ================================================================== */
.resumo-card-titulo {
    color: var(--nutri-text-secondary);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: .6rem;
}

.resumo-acoes-rapidas { padding: 1rem 0; }
.resumo-acoes-rapidas .btn { height: 38px; display: inline-flex; align-items: center; }
.resumo-acoes-rapidas .btn i { margin-right: .4rem; }

/* "Imprimir Prontuário" separado à direita das ações de criação/atendimento
   (ver AJUSTE UX "Botão Imprimir Prontuário nas Ações Rápidas") — dois grupos
   flex dentro do mesmo container, o direito empurrado com ml-auto (Bootstrap)
   quando há espaço; ambos ficam livres para quebrar linha em telas menores. */
.resumo-acoes-rapidas-direita { flex-shrink: 0; }

/* Blocos internos (Peso/IMC/%Gordura/Massa Magra) da Última Avaliação —
   fundo levemente diferenciado do card que os contém (--nutri-bg em vez de
   --nutri-card-bg), sem precisar de uma cor nova. */
.resumo-card .resultado-compacto-card { background: var(--nutri-bg); }

.resumo-valor-destaque {
    color: var(--nutri-primary);
    font-size: 1.15rem;
    font-weight: 600;
}

.resumo-dados-paciente li {
    font-size: .8rem;
    color: var(--nutri-text);
    margin-bottom: .5rem;
}
.resumo-dados-paciente li i { width: 1rem; text-align: center; color: var(--nutri-text-secondary); margin-right: .3rem; }
.resumo-dados-paciente li:last-child { margin-bottom: 0; }

.resumo-lista-metas li { padding: .5rem 0; border-bottom: 1px solid var(--nutri-border); }
.resumo-lista-metas li:last-child { border-bottom: none; padding-bottom: 0; }
.resumo-meta-titulo { font-size: .82rem; color: var(--nutri-text); }

/* "Atenção" — mesmo tom âmbar translúcido já usado em .alert-warning
   (ver acima), então acompanha os dois temas sem precisar de regra própria
   por tema: o border/título usam --nutri-warning (que já muda de tom entre
   claro/escuro) e o fundo é só uma tinta muito sutil por cima do card. */
.resumo-card-atencao {
    background-color: rgba(245, 158, 11, .12);
    border-color: var(--nutri-warning);
}
.resumo-card-titulo-atencao { color: var(--nutri-warning); }

.resumo-texto-truncado {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--nutri-text);
}

.resumo-lista-arquivos li { margin-bottom: .35rem; }
.resumo-lista-arquivos li:last-child { margin-bottom: 0; }

@media (max-width: 575.98px) {
    .resumo-acoes-rapidas .btn { flex: 1 1 100%; margin-right: 0 !important; }
    .resumo-acoes-rapidas-esquerda,
    .resumo-acoes-rapidas-direita { width: 100%; margin-left: 0 !important; }
}

/* AJUSTE UX "EVOLUÇÃO DO ATENDIMENTO E PRONTUÁRIO" — Resumo do Atendimento
   (view/consulta/_resumo-atendimento.php), dedicado e distinto do Resumo do
   Prontuário acima: "Registros desta consulta" (Com registro/Sem registro
   nesta consulta, sem percentual/barra) + "Informações anteriores do
   paciente" (sempre rotulado como histórico). Reaproveita os mesmos tokens
   --nutri-* e a classe .resumo-card já usada no Prontuário. */
.resumo-registro-item {
    padding: .55rem 0;
    border-bottom: 1px solid var(--nutri-border);
    font-size: .85rem;
}
.resumo-registro-item:last-child { border-bottom: none; padding-bottom: 0; }
.resumo-registro-item .badge { font-size: .7rem; }

/* "Atendimento em andamento" no Resumo do Prontuário — ver
   view/paciente/_resumo-clinico.php e core/ResumoClinico::montar(). */
.resumo-atendimento-andamento-item { padding: .35rem 0; }
.resumo-atendimento-andamento-item:not(:last-child) { border-bottom: 1px solid var(--nutri-border); margin-bottom: .35rem; }

.resumo-anterior-bloco {
    background: var(--nutri-bg);
    border: 1px solid var(--nutri-border);
    border-radius: .35rem;
    padding: .85rem;
}

@media (max-width: 575.98px) {
    .resumo-registro-item { flex-direction: column; align-items: flex-start !important; }
    .resumo-registro-item a { margin-left: 0 !important; margin-top: .35rem; }
}

/* Fase 2 — Atendimento (view/consulta/atendimento.php): cabeçalho
   persistente, indicadores de progresso discretos e checklist não
   bloqueante de finalização. Reaproveita os tokens --nutri-* já usados no
   card de identificação do prontuário (ver .card-identificacao-paciente). */
.atendimento-cabecalho .paciente-nome-destaque .badge { font-size: .7rem; vertical-align: middle; }

/* Dois indicadores DISTINTOS no cabeçalho do Atendimento — estado clínico
   (#badgeEstadoAtendimento) e status oficial da Agenda (#badgeStatusAtendimento)
   — ver AJUSTE UX "EVOLUÇÃO DO ATENDIMENTO E PRONTUÁRIO", spec seção 5/7.
   Nunca a mesma badge para os dois conceitos. */
.atendimento-status-linha { display: flex; flex-wrap: wrap; align-items: center; }
.atendimento-status-linha .badge { font-size: .7rem; vertical-align: middle; }

.atendimento-progresso-indicador { display: inline-block; font-size: .7rem; margin-left: .25rem; }
.atendimento-progresso-indicador:empty { margin-left: 0; }

.atendimento-checklist-finalizar li { padding: .25rem 0; }
.atendimento-checklist-finalizar .fa-circle { font-size: .55rem; vertical-align: middle; }

/* =====================================================================
   Editor rico Quill — campos clínicos longos da Anamnese (ver AJUSTE
   "EDITOR RICO QUILL NOS CAMPOS DE ANAMNESE" e assets/js/editor-clinico.js).
   .editor-clinico é o wrapper em volta do container do Quill — o próprio
   Quill insere a toolbar (.ql-toolbar) como IRMÃ do container (.ql-container,
   que contém .ql-editor), por isso o wrapper precisa envolver os dois para
   estas regras (e as de dark.css) alcançarem ambos. Usa os mesmos tokens
   --nutri-* de todo o resto do sistema — nunca cores fixas — para já sair
   compatível com claro/escuro sem duplicar regras aqui.
   ===================================================================== */
.editor-clinico { margin-bottom: 0; }

.editor-clinico .ql-toolbar.ql-snow {
    border-color: var(--nutri-border);
    border-radius: .25rem .25rem 0 0;
    background-color: var(--nutri-card-bg);
    /* Tablet/mobile: nunca overflow horizontal — os grupos de botões quebram
       em mais de uma linha em vez de forçar scroll lateral na toolbar. */
    flex-wrap: wrap;
}

.editor-clinico .ql-container.ql-snow {
    border-color: var(--nutri-border);
    border-radius: 0 0 .25rem .25rem;
    background-color: var(--nutri-card-bg);
    font-family: inherit;
    font-size: .95rem;
}

.editor-clinico .ql-editor {
    color: var(--nutri-text);
    min-height: 140px;
}

/* Anamnese e Evolução Clínica — campos naturalmente mais longos, um pouco
   mais de espaço vertical que Queixa Principal/Observações. */
#editorAnamnese.ql-container .ql-editor,
#editorEvolucaoClinica.ql-container .ql-editor {
    min-height: 180px;
}

.editor-clinico .ql-editor.ql-blank::before {
    color: var(--nutri-text-secondary);
    font-style: normal;
}

.editor-clinico .ql-snow .ql-picker { color: var(--nutri-text); }

@media (max-width: 575.98px) {
    /* Mobile: editor sempre 100% da largura do form-group (já é o padrão do
       Quill), controles com área de toque confortável — reaproveita a
       mesma folga usada nos botões do restante do sistema. */
    .editor-clinico .ql-toolbar.ql-snow .ql-formats { margin-right: 6px; }
    .editor-clinico .ql-snow.ql-toolbar button { width: 26px; height: 26px; }
}

@media (max-width: 575.98px) {
    .atendimento-acoes-cabecalho { width: 100%; }
    .atendimento-acoes-cabecalho .btn,
    .atendimento-acoes-cabecalho .dropdown { flex: 1 1 100%; margin-right: 0 !important; }
}

@media (max-width: 991.98px) {
    /* Tablet: busca ocupa a linha inteira, demais controles quebram numa
       segunda linha. */
    .prontuario-filtros .prontuario-filtro-busca { flex: 1 1 100%; margin-bottom: .5rem; }
}

@media (max-width: 575.98px) {
    .card-identificacao-paciente .btn,
    .card-identificacao-paciente .dropdown { width: 100%; }
    .paciente-portal-resumo { margin-left: 0; margin-right: 0; gap: 1.25rem; width: 100%; }
    .prontuario-cabecalho .prontuario-acoes-topo { width: 100%; }
    .prontuario-cabecalho .prontuario-acoes-topo .btn,
    .prontuario-cabecalho .prontuario-acoes-topo .dropdown { flex: 1 1 100%; }

    /* Portal do Paciente + Editar Dados — ver AJUSTE "Botões lado a lado":
       o wrapper .dropdown nunca pode ocupar 100% da largura, nem no mobile
       mais estreito (só empilha, via flex-wrap:wrap do container, sem
       esticar). Mesma especificidade (duas classes) da regra genérica acima
       de .card-identificacao-paciente — como é declarada depois, vence no
       empate por ordem de cascata. */
    .card-identificacao-paciente-acoes .btn,
    .card-identificacao-paciente-acoes .dropdown { width: auto; flex: 0 1 auto; }

    /* Mobile: filtros totalmente empilhados, um por linha */
    .prontuario-filtros .form-row > div { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------
   Cards de resultado compactos — grade de indicadores numéricos pequenos
   (ex: tela Visualizar Avaliação). Evita cards grandes dedicados a um
   único número; cada indicador ocupa o mínimo de espaço necessário e a
   grade se adapta ao número de itens. Reutilizável por qualquer tela que
   precise resumir indicadores calculados.
   --------------------------------------------------------------------- */
.resultado-compacto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.resultado-compacto-card {
    background: var(--nutri-card-bg);
    border: 1px solid var(--nutri-border);
    border-radius: var(--nutri-radius-sm);
    box-shadow: var(--nutri-shadow);
    padding: .75rem .9rem;
    text-align: left;
}

.resultado-compacto-card .resultado-compacto-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--nutri-text-secondary);
    margin-bottom: .2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.resultado-compacto-card .resultado-compacto-valor {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--nutri-text);
    line-height: 1.2;
}

.resultado-compacto-card .resultado-compacto-valor small {
    font-size: .7rem;
    font-weight: 500;
    color: var(--nutri-text-secondary);
    margin-left: .15rem;
}

.resultado-compacto-card .resultado-compacto-sub {
    font-size: .68rem;
    margin-top: .2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 575.98px) {
    .resultado-compacto-grid { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
}

/* ==================================================================
   Prontuário — Aba Evolução (painel visual Chart.js)
   Grid: mobile empilhado (1 col), tablet 2 col, desktop 2 col + linhas
   full-width para Energia/Indicadores (ver assets/js/prontuario-evolucao.js,
   que centraliza toda a config de tema/tooltip/cores dos gráficos).
   ================================================================== */
.evolucao-toolbar .form-group { margin-bottom: 0; }
.evolucao-toolbar select,
.evolucao-toolbar input[type="date"] { min-width: 150px; }

.evolucao-objetivo {
    background: var(--nutri-hover);
    border: 1px solid var(--nutri-border);
    border-radius: var(--nutri-radius-sm);
    padding: .6rem .9rem;
    margin-bottom: 1rem;
    font-size: .85rem;
    color: var(--nutri-text);
}

.evolucao-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .evolucao-grid { grid-template-columns: 1fr 1fr; }
}
.evolucao-card-full { grid-column: 1 / -1; }

.evolucao-card {
    background: var(--nutri-card-bg);
    border: 1px solid var(--nutri-border);
    border-radius: var(--nutri-radius);
    box-shadow: var(--nutri-shadow);
    padding: .9rem 1rem;
}
.evolucao-card-titulo {
    font-size: .78rem;
    font-weight: 700;
    color: var(--nutri-text);
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: .6rem;
}
.evolucao-chart-wrap { position: relative; height: 220px; }
.evolucao-card-full .evolucao-chart-wrap { height: 260px; }
.evolucao-card-vazio {
    color: var(--nutri-text-secondary);
    font-size: .82rem;
    text-align: center;
    padding: 2.2rem .5rem;
}

#cardEvolucaoIndicadores select { max-width: 220px; }

@media (max-width: 575.98px) {
    .evolucao-chart-wrap { height: 190px; }
    .evolucao-card-full .evolucao-chart-wrap { height: 220px; }
    .evolucao-toolbar select,
    .evolucao-toolbar input[type="date"] { min-width: 0; width: 100%; }
    #cardEvolucaoIndicadores select { max-width: 100%; }
}

/* ==================================================================
   Agenda — FullCalendar (padronização global, Dark/Light via --nutri-*)
   As variáveis abaixo são as próprias custom properties do FullCalendar
   v6 (--fc-*); mapeá-las para os tokens --nutri-* já existentes faz o
   calendário inteiro (grid, cabeçalho, botões, eventos, hoje, hover)
   trocar de tema automaticamente junto com o resto do sistema — sem
   nenhuma regra dark/light duplicada aqui.
   ================================================================== */
#calendarioAgenda,
#calendarioAgenda .fc {
    --fc-small-font-size: .8em;
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: var(--nutri-hover);
    --fc-neutral-text-color: var(--nutri-text-secondary);
    --fc-border-color: var(--nutri-border);

    --fc-button-text-color: var(--nutri-text);
    --fc-button-bg-color: var(--nutri-input-bg);
    --fc-button-border-color: var(--nutri-border);
    --fc-button-hover-bg-color: var(--nutri-hover);
    --fc-button-hover-border-color: var(--nutri-border);
    --fc-button-active-bg-color: var(--nutri-primary);
    --fc-button-active-border-color: var(--nutri-primary);

    --fc-event-bg-color: var(--nutri-primary);
    --fc-event-border-color: var(--nutri-primary);
    --fc-event-text-color: #FFFFFF;
    --fc-event-selected-overlay-color: rgba(var(--nutri-primary-rgb), .35);

    --fc-more-link-bg-color: var(--nutri-hover);
    --fc-more-link-text-color: var(--nutri-text);

    --fc-highlight-color: rgba(var(--nutri-primary-rgb), .12);
    --fc-today-bg-color: rgba(var(--nutri-primary-rgb), .08);
    --fc-now-indicator-color: var(--nutri-danger);

    color: var(--nutri-text);
}

/* Botões — reaproveita a tipografia/raio padrão do sistema em vez do
   estilo default do FullCalendar, para ficar visualmente consistente
   com os demais botões (.btn) do restante da tela */
#calendarioAgenda .fc-button {
    box-shadow: none !important;
    text-transform: none;
    font-weight: 500;
    border-radius: var(--nutri-radius-sm) !important;
    padding: .35rem .65rem;
}

#calendarioAgenda .fc-button:focus {
    box-shadow: 0 0 0 .15rem rgba(var(--nutri-primary-rgb), .35) !important;
}

#calendarioAgenda .fc-toolbar-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--nutri-text);
}

#calendarioAgenda .fc-col-header-cell {
    background-color: var(--nutri-card-bg);
}

#calendarioAgenda .fc-daygrid-day-number,
#calendarioAgenda .fc-timegrid-slot-label,
#calendarioAgenda .fc-list-day-text,
#calendarioAgenda .fc-list-day-side-text {
    color: var(--nutri-text-secondary);
}

#calendarioAgenda .fc-list,
#calendarioAgenda .fc-scrollgrid {
    border-color: var(--nutri-border);
}

#calendarioAgenda .fc-list-event:hover td,
#calendarioAgenda .fc-daygrid-day:hover {
    background-color: var(--nutri-hover);
}

/* Eventos — conteúdo compacto (hora + paciente + tipo; endereço só em
   telas maiores, via .d-none .d-lg-block no próprio JS) — nunca poluir
   o calendário com excesso de informação (spec §2) */
#calendarioAgenda .fc-event {
    border-radius: var(--nutri-radius-sm);
    border-width: 1px;
    cursor: pointer;
}

#calendarioAgenda .fc-evento-nutri {
    padding: 1px 3px;
    line-height: 1.25;
    overflow: hidden;
}

#calendarioAgenda .fc-evento-linha1 {
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#calendarioAgenda .fc-evento-linha2,
#calendarioAgenda .fc-evento-linha3 {
    font-size: .7rem;
    opacity: .9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Duração rápida (30/45/60/90) — botões compactos junto ao campo numérico */
.agenda-duracao-rapida .btn {
    padding: .15rem .5rem;
    font-size: .75rem;
}

/* Contexto de paciente pré-selecionado ("Agendando consulta para...") —
   nunca usar .alert-light (cores fixas, não acompanha o tema): usa os
   mesmos tokens --nutri-* de cards/toasts, então segue claro/escuro e a
   troca em tempo real (ver core/ToastConfig e assets/js/app.js
   nutri:tema-alterado) automaticamente, sem lógica própria de tema. */
.agenda-paciente-contexto {
    padding: .75rem 1rem;
    background-color: var(--nutri-card-bg);
    border: 1px solid var(--nutri-border);
    border-radius: var(--nutri-radius-sm);
    box-shadow: var(--nutri-shadow);
    color: var(--nutri-text);
}

/* Painel de resumo (clique no evento) — rótulo/valor alinhados e compactos */
.agenda-resumo-dl dt {
    font-weight: 600;
    color: var(--nutri-text-secondary);
    font-size: .85rem;
}
.agenda-resumo-dl dd {
    font-size: .9rem;
    margin-bottom: .5rem;
}

/* ---- Mobile: calendário simplificado, botões maiores, sem colunas
   apertadas — a view Lista costuma ser a mais confortável no celular ---- */
@media (max-width: 575.98px) {
    #calendarioAgenda .fc-toolbar {
        flex-direction: column;
        gap: .5rem;
        align-items: stretch;
    }
    #calendarioAgenda .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }
    #calendarioAgenda .fc-toolbar-title {
        font-size: .95rem;
        text-align: center;
    }
    #calendarioAgenda .fc-button {
        padding: .5rem .6rem;
        font-size: .8rem;
    }
    #calendarioAgenda .fc-evento-linha1 {
        font-size: .72rem;
    }
    .agenda-filtros .form-group {
        margin-bottom: .5rem !important;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    #calendarioAgenda .fc-toolbar {
        flex-wrap: wrap;
        gap: .5rem;
    }
}

/* ==========================================================================
   Telas completas de Nova/Editar/Visualizar Consulta (view/consulta/nova.php,
   editar.php, visualizar.php) — substituem #modalAgendamento (Agenda) e
   #modalConsulta/#modalVisualizarConsulta (prontuário). O container ocupa
   toda a largura útil já disponibilizada pelo .container-fluid do
   content-wrapper do AdminLTE (ver core/Controller::view()) — nunca uma
   largura própria em px/vw, para não sobrar espaço vazio nem gerar overflow
   quando a sidebar abre/recolhe. O mesmo padrão de tokens --nutri-* de
   .agenda-paciente-contexto é usado nos blocos abaixo para acompanhar
   claro/escuro automaticamente.
   ========================================================================== */
.consulta-form-container {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Paciente/Nutricionista fixos (origem = prontuário) — mesmo padrão visual
   de .agenda-paciente-contexto, só que inline dentro do próprio card em vez
   de um bloco de destaque no topo da página. */
.consulta-paciente-fixo {
    padding: .5rem .75rem;
    background-color: var(--nutri-bg);
    border: 1px solid var(--nutri-border);
    border-radius: var(--nutri-radius-sm);
    color: var(--nutri-text);
    min-height: 38px;
    display: flex;
    align-items: center;
}

/* Resumo compacto do paciente no topo de Nova/Editar/Visualizar — uma linha
   com ícones, nunca um card cheio de campos desabilitados (spec seção 6). */
.consulta-resumo-paciente {
    padding: .65rem 1rem;
    background-color: var(--nutri-card-bg);
    border: 1px solid var(--nutri-border);
    border-radius: var(--nutri-radius-sm);
    box-shadow: var(--nutri-shadow);
    color: var(--nutri-text);
}
.consulta-resumo-paciente i { color: var(--nutri-text-secondary); }

/* Visualizar Consulta — bloco de leitura (rótulo + valor em texto puro,
   nunca <input disabled>), mesmo espírito do antigo #modalVisualizarConsulta
   do prontuário. */
.consulta-visualizar-dl dt {
    font-weight: 600;
    color: var(--nutri-text-secondary);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.consulta-visualizar-dl dd {
    font-size: .95rem;
    color: var(--nutri-text);
    margin-bottom: 1rem;
}

/* ==========================================================================
   Páginas de erro globais (401/403/404/405/419/429/500/503) — view/errors/*
   Um único cartão centralizado, reutilizado por todos os status; contexto
   "portal" usa os mesmos tokens --nutri-* (o Portal já os herda) só que
   dentro do wrapper mobile-first do próprio Portal (ver portal.css).
   ========================================================================== */
.erro-page-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: var(--nutri-bg);
}

.erro-page-card {
    background-color: var(--nutri-card-bg);
    border: 1px solid var(--nutri-border);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    padding: 44px 32px;
    max-width: 460px;
    width: 100%;
    text-align: center;
}

.erro-page-icone {
    width: 84px;
    height: 84px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--nutri-primary-rgb), .12);
    color: var(--nutri-primary);
    font-size: 34px;
}

.erro-page-status-403 .erro-page-icone,
.erro-page-status-401 .erro-page-icone { background-color: rgba(217, 119, 6, .14); color: var(--nutri-warning); }
.erro-page-status-500 .erro-page-icone,
.erro-page-status-503 .erro-page-icone { background-color: rgba(220, 38, 38, .14); color: var(--nutri-danger); }

.erro-page-titulo {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--nutri-text);
    margin-bottom: 10px;
}

.erro-page-mensagem {
    color: var(--nutri-text-secondary);
    margin-bottom: 26px;
    line-height: 1.5;
}

.erro-page-acoes {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.erro-page-request-id {
    margin-top: 18px;
    font-size: .78rem;
    color: var(--nutri-text-secondary);
}

.erro-page-request-id code {
    background-color: var(--nutri-bg);
    border: 1px solid var(--nutri-border);
    border-radius: 4px;
    padding: 1px 6px;
    color: var(--nutri-text);
}

.erro-page-debug {
    margin-top: 22px;
    text-align: left;
    background-color: var(--nutri-bg);
    border: 1px solid var(--nutri-border);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: .72rem;
    max-height: 220px;
    overflow: auto;
    color: var(--nutri-text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 480px) {
    .erro-page-card { padding: 32px 20px; }
    .erro-page-acoes { flex-direction: column; }
    .erro-page-acoes .btn { width: 100%; }
}

/* ==========================================================================
   Clínicas e locais de atendimento (nutricionista_endereco) — cards compactos
   em /usuarios/visualizar/{id} (aba "Clínicas e Locais") e o menu "⋮" de ações.
   Reaproveita .card, .dropdown-menu e .badge padrão — nenhuma cor nova aqui.
   ========================================================================== */
.endereco-profissional-item .btn-acoes-endereco {
    min-width: 32px;
    min-height: 32px;
}

.endereco-profissional-item .dropdown-item i.fa-fw {
    color: var(--nutri-text-secondary);
}

.endereco-profissional-item .dropdown-item:hover i.fa-fw {
    color: inherit;
}

#avisoSemEnderecoAgendamento a {
    font-weight: 600;
}

@media (max-width: 576px) {
    .endereco-profissional-item .card-body {
        padding: .75rem;
    }
    .endereco-profissional-item .d-flex {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   Tela /usuarios — ajuste responsivo (listagem, filtros, ações inline/⋮)
   ========================================================================== */

/* Botão que deve ocupar 100% da largura só no celular (ex.: "+ Novo Usuário",
   "Limpar filtros") — reaproveitável por qualquer tela, não específico daqui. */
@media (max-width: 575.98px) {
    .btn-block-mobile {
        display: block;
        width: 100%;
    }
}

/* Dropdown "⋮" de ações dentro de células de tabela/DataTable — evita que o
   menu fique cortado na borda direita da tela em telas pequenas. */
.dt-acoes .dropdown-menu,
#usuariosMinhaEquipeTabela .dropdown-menu {
    min-width: 180px;
}

/* ==========================================================================
   Módulo Financeiro (Visão Geral, Contas a Receber, Cobranças, Pacotes,
   Recibos, Configurações) — dark/light via os mesmos tokens --nutri-*.
   ========================================================================== */

/* Seletor de paciente reutilizável (ver inicializarBuscaPacienteFinanceiro em app.js) */
.financeiro-paciente-picker {
    position: relative;
}

.financeiro-busca-paciente-resultado {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1060;
    max-height: 260px;
    overflow-y: auto;
    background-color: var(--nutri-card-bg);
    border: 1px solid var(--nutri-border);
    border-radius: .25rem;
    box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .15);
    margin-top: 2px;
}

.financeiro-busca-paciente-resultado .dropdown-item,
.financeiro-busca-paciente-resultado .dropdown-item-text {
    color: var(--nutri-text);
    white-space: normal;
}

.financeiro-busca-paciente-resultado .dropdown-item:hover,
.financeiro-busca-paciente-resultado .dropdown-item:focus {
    background-color: var(--nutri-bg);
}

/* Cartão de atalhos da Visão Geral */
.financeiro-card-atalhos .btn {
    white-space: normal;
}

/* Badges de status financeiro — reaproveitados em Contas a Receber, Cobranças, Pacotes e Recibos */
.badge-financeiro-pendente  { background-color: #94A3B8; color: #fff; }
.badge-financeiro-atrasado  { background-color: #EF4444; color: #fff; }
.badge-financeiro-pago      { background-color: #22C55E; color: #fff; }
.badge-financeiro-parcial   { background-color: #F59E0B; color: #fff; }
.badge-financeiro-cancelado { background-color: #64748B; color: #fff; }

/* Payload PIX "Copia e Cola" — área de texto monoespaçada, quebra em qualquer ponto */
.financeiro-pix-payload {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: .8rem;
    word-break: break-all;
    background-color: var(--nutri-bg);
    border: 1px solid var(--nutri-border);
    border-radius: .25rem;
    padding: .5rem .75rem;
    color: var(--nutri-text);
}

.financeiro-pix-qrcode {
    background-color: #fff;
    padding: .75rem;
    border-radius: .25rem;
    display: inline-block;
}

/* ==========================================================================
   Dashboard — central diária de trabalho (view/dashboard/index.php,
   assets/js/dashboard.js). Cards compactos (padding 16-20px, títulos
   13-14px, valores de indicador 22-28px — nunca "números gigantes" nem
   cards altos com espaço vazio), 100% em tokens --nutri-* para acompanhar
   claro/escuro automaticamente, sem nenhuma cor fixa nova.
   ========================================================================== */
.dash-acoes-rapidas {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.dash-card {
    background-color: var(--nutri-card-bg);
    border: 1px solid var(--nutri-border);
    border-radius: var(--nutri-radius);
    box-shadow: var(--nutri-shadow);
    padding: 16px;
}

/* Cores semânticas — sempre fundo neutro do card + uma borda lateral fina
   (nunca o card inteiro pintado). Usadas com moderação: só nos cards onde a
   cor comunica um significado (Próxima Consulta, Atenção Necessária). */
.dash-card--azul     { border-left: 3px solid var(--dashboard-primary); }
.dash-card--verde    { border-left: 3px solid var(--dashboard-success); }
.dash-card--roxo     { border-left: 3px solid var(--dashboard-purple); }
.dash-card--amarelo  { border-left: 3px solid var(--dashboard-warning); }
.dash-card--vermelho { border-left: 3px solid var(--dashboard-danger); }

/* Ícone circular com fundo suave (nunca saturado) — mesmo padrão de cor do
   elemento que ele identifica. */
.dash-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 12px;
    margin-right: .4rem;
    flex-shrink: 0;
}

.dash-icon--azul    { background-color: rgba(var(--dashboard-primary-rgb), .12); color: var(--dashboard-primary); }
.dash-icon--verde   { background-color: rgba(var(--dashboard-success-rgb), .14); color: var(--dashboard-success); }
.dash-icon--roxo    { background-color: rgba(var(--dashboard-purple-rgb), .14); color: var(--dashboard-purple); }
.dash-icon--amarelo { background-color: rgba(var(--dashboard-warning-rgb), .14); color: var(--dashboard-warning); }
.dash-icon--vermelho{ background-color: rgba(var(--dashboard-danger-rgb), .14); color: var(--dashboard-danger); }

.dash-card-titulo {
    font-size: 13px;
    font-weight: 600;
    color: var(--nutri-text);
    margin-bottom: .75rem;
}

.dash-card-corpo {
    color: var(--nutri-text);
}

.dash-carregando {
    color: var(--nutri-text-secondary);
    font-size: .85rem;
    padding: .5rem 0;
}

.dash-vazio {
    color: var(--nutri-text-secondary);
}

.dash-vazio i {
    font-size: 1.25rem;
    display: block;
}

/* Indicadores compactos do topo — ver AJUSTE "CARDS DO DASHBOARD": as 4
   colunas ficam com a mesma altura mesmo quando só uma delas tem uma linha
   de detalhe extra (Consultas hoje), sem height fixo. */
#dashIndicadores > [class*="col-"] {
    display: flex;
}

.dash-indicador {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    width: 100%;
    flex: 1;
}

.dash-indicador-label {
    font-size: 12px;
    color: var(--nutri-text-secondary);
    display: flex;
    align-items: center;
}

.dash-indicador-label .dash-icon {
    width: 22px;
    height: 22px;
    font-size: 11px;
    margin-right: .35rem;
}

.dash-indicador-valor {
    font-size: 24px;
    font-weight: 700;
    color: var(--nutri-text);
    line-height: 1.2;
}

.dash-indicador-detalhe {
    font-size: 11px;
    color: var(--nutri-text-secondary);
}

/* Fundo suave (nunca saturado) nos 4 indicadores do topo — só um leve tom
   sobre o fundo neutro do card, acompanhando o mesmo significado do ícone. */
.dash-indicador--azul    { background-color: rgba(var(--dashboard-primary-rgb), .06); }
.dash-indicador--verde   { background-color: rgba(var(--dashboard-success-rgb), .07); }
.dash-indicador--roxo    { background-color: rgba(var(--dashboard-purple-rgb), .07); }
.dash-indicador--amarelo { background-color: rgba(var(--dashboard-warning-rgb), .07); }

/* Linhas de lista (Agenda de Hoje, Atendimentos Recentes, Retornos) */
.dash-linha {
    padding: 8px 0;
    border-bottom: 1px solid var(--nutri-border);
    gap: .5rem;
}

.dash-linha:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dash-linha-info {
    font-size: 13.5px;
}

.dash-linha-acoes .btn-xs {
    padding: .15rem .5rem;
    font-size: .75rem;
    line-height: 1.4;
}

/* Próxima Consulta */
.dash-proxima-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem 1rem;
    font-size: 13.5px;
}

@media (min-width: 992px) {
    .dash-proxima-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Atenção Necessária */
.dash-atencao-grupo {
    margin-bottom: .75rem;
    font-size: 13px;
}

.dash-atencao-grupo:last-child {
    margin-bottom: 0;
}

.dash-atencao-item {
    padding: 2px 0 2px 1.2rem;
    color: var(--nutri-text-secondary);
}

/* Atividade Recente */
.dash-atividade-item {
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px solid var(--nutri-border);
}

.dash-atividade-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Acompanhamento */
.dash-acompanhamento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    text-align: center;
}

.dash-indicador-valor-sm {
    font-size: 20px;
    font-weight: 700;
    color: var(--nutri-text);
    display: block;
}

#dashFiltroPeriodo .btn {
    font-size: 11px;
    padding: .2rem .5rem;
}

@media (max-width: 767.98px) {
    .dash-cabecalho .btn {
        width: 100%;
    }

    .dash-proxima-grid,
    .dash-acompanhamento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================================================================
   Confirmações de Consultas (/agenda/confirmacoes) — ver AJUSTE "NOVA TELA
   CONFIRMAÇÕES DE CONSULTAS". Reaproveita os mesmos tokens --nutri-* dos
   demais indicadores/badges do sistema (dashboard, toasts) — nunca cores
   fixas — para funcionar em Light/Dark automaticamente.
   ===================================================================== */

.confirmacoes-card-indicador {
    border-left: 4px solid transparent;
}

.confirmacoes-card-indicador .card-body {
    padding: .75rem 1rem;
}

.confirmacoes-indicador-valor {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--nutri-text);
}

.confirmacoes-indicador-rotulo {
    font-size: 12px;
    color: var(--nutri-text-secondary);
}

.confirmacoes-indicador-warning { border-left-color: var(--nutri-warning); }
.confirmacoes-indicador-info    { border-left-color: var(--nutri-info); }
.confirmacoes-indicador-success { border-left-color: var(--nutri-success); }
.confirmacoes-indicador-danger  { border-left-color: var(--nutri-danger); }

/* Pills de filtro por status — mesmo espírito visual dos badges, mas
   clicáveis/persistentes (um fica "ativo" por vez). */
.confirmacoes-filtros-status {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.confirmacoes-pill {
    border: 1px solid var(--nutri-border);
    background-color: transparent;
    color: var(--nutri-text);
    border-radius: 999px;
    padding: .25rem .85rem;
    font-size: 12.5px;
}

.confirmacoes-pill.active {
    background-color: var(--nutri-primary);
    border-color: var(--nutri-primary);
    color: #fff;
}

.confirmacoes-barra-lote {
    display: none;
    background-color: rgba(56, 189, 248, .12);
    border: 1px solid var(--nutri-info);
    border-radius: 6px;
    padding: .5rem .9rem;
    color: var(--nutri-text);
}

.confirmacoes-barra-lote.d-flex {
    display: flex;
}

.confirmacoes-badge-status {
    display: inline-block;
    padding: .3em .6em;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #fff;
}

.confirmacoes-badge-pendente   { background-color: var(--nutri-warning); color: #fff; }
.confirmacoes-badge-aguardando { background-color: var(--nutri-info); }
.confirmacoes-badge-confirmada { background-color: var(--nutri-success); }
.confirmacoes-badge-falha      { background-color: var(--nutri-danger); }

.confirmacoes-remarcada-aviso {
    font-size: 11px;
    color: var(--nutri-warning);
}

@media (max-width: 575.98px) {
    .confirmacoes-indicador-valor { font-size: 18px; }
    .confirmacoes-filtros-status { justify-content: flex-start; }
}