:root {
    /* Cores principais (já existentes) */
    --primary-color: #007bff;
    --success-color: #28a745;
    --info-color: #17a2b8;
    --warning-color: #ffc107;
    --background-color: #f8f9fa;
    --text-color: #000000;
    --text-color-grey: #5F6368;
    --selected-text: #ffffff;
    --tab-background-active: #F8F9FA;
    --cinza-background: #F8F9FA;
    --tab-background-hover: #F0F5FF;
    --tab-text-active: #5078F2;
    --tab-text-default: #bbb;
    --inactive-text: #bbb;
    --tab-text-hover: var(--lumo-primary-text-color, gray);
    --inactive-color: #EDEDED; /* Cinza claro */

    /* Status */
    --agendado-color: #007bff;  /* Azul */
    --concluido-color: var(--success-color);
    --cancelado-color: #dc3545;
    --agendado-color-light: #71C5E8;
    --concluido-color-light: #88C093;
    --cancelado-color-light: #F28B8E;

    /* Tons de pastel/cores suaves */
    --pastel-orange-light: #FCEFE5;       /* Laranja bem claro */
    --pastel-orange-lighter: #FDF2EC;     /* Ainda mais claro */
    --pastel-orange-extra-light: #FFF4E8; /* Quase branco */
    --pastel-yellow-light: #FFF2CC;       /* Amarelo pastel */
    --pastel-yellow-lighter: #FDF8E0;
    --pastel-blue-light: #D6E4FF;         /* Azul pastel */
    --pastel-green-light: #d4edda;        /* Verde pastel */
    --pastel-green-lighter: #E5F4EB;      /* Verde ainda mais claro */
    --pastel-red-lighter: #f8d7da;        /* Vermelho bem claro */
    --pastel-red-pastel-lighter: #FFF4E8;
    --pastel-blue-light-lancamento-lab: #D4EAFB;
    --pastel-green-enferm: #E5F4F5;
    --pastel-green-enferm-light: #E5F4F5; /*#E0ECF1*/

    /* Outras neutras */
    --white: #ffffff;
    --gray-extra-light: #fafafa;
    --gray-light: #f8f9fa;
    --gray-lighter: #fdfdfd; /* Exemplo */

    --custom-icon-size: 24px;
    --custom-icon-color: currentColor;

    --custom-box-shadow:0 1px 3px rgba(0, 1, 1, 0.03);
}

vaadin-grid {
    /* Altura mínima para os títulos das colunas ficarem visíveis (evitar 10px que truncava) */
    --vaadin-grid-header-row-height: 48px;
}

/* dialog-footer.css */
.dialog-footer {
    width: 100%;
    padding: var(--lumo-space-m);
    border-top: 1px solid var(--lumo-contrast-10pct);
    display: flex;
    justify-content: flex-end;
}

/* Formulário Adicionar/Editar Medicamento – distribuição e espaçamento */
.receita-medicamento-form-med-row {
    gap: var(--lumo-space-m);
}
.receita-medicamento-form-med-row vaadin-combo-box {
    flex: 1;
    min-width: 0;
}

/* 🔹 Torna o MenuBar branco como o Drawer */
.custom-navbar {
    background-color: #FFFFFF !important; /* Fundo branco */
    box-shadow: none !important; /* Remove sombras */
}

/* Estiliza o DatePicker quando o tema "error" está aplicado */
.custom-datepicker[theme~="error"]::part(text-field) {
    background-color: #ffcccc;  /* Fundo vermelho claro */
    color: #b30000;             /* Texto vermelho */
    font-weight: bold;
    border: 1px solid #b30000;
}

/* 🔵 Estilo para campos arredondados sem borda */
.rounded-input {
    border: none; /* Remove a borda */
    border-radius: 12px;
    background-color: white; /* Cinza claro para destacar */
    padding: 8px 12px;
    font-size: 14px;
    transition: all 0.3s ease-in-out;
}

/* 🟢 Efeito ao passar o mouse */
.rounded-input:hover {
    background-color: #e9ecef; /* Cor mais clara ao passar o mouse */
}

/* 🔵 Quando o usuário clica no campo */
.rounded-input:focus {
    outline: none;
    box-shadow: 0 0 6px rgba(0, 123, 255, 0.3); /* Brilho azul suave */
}

/* 🎨 Ajustando a borda invisível do Vaadin DatePicker e ComboBox */
.rounded-input::part(input-field) {
    border: none;
    background-color: transparent;
    box-shadow: none;
}

/* 🟢 Estilo para a tabela com bordas arredondadas */
.rounded-grid {
    border-radius: 12px;
    overflow: hidden;
}

/* 🔵 Ajustando cabeçalhos da tabela */
.rounded-grid::part(header) {
    background-color: #f8f9fa;
    font-weight: bold;
    border-radius: 12px 12px 0 0;
}

/* ✅ Ajuste nos status (cores suaves) */
.status-agendado {
    background-color: #d1ecf1 !important;
    color: #007bff !important;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.85em;
}

.status-concluido {
    background-color: #d4edda !important;
    color: #28a745 !important;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.85em;
}

.status-cancelado {
    background-color: #f8d7da !important;
    color: #dc3545 !important;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.85em;
}

.status-em-andamento {
    background-color: #fff3cd !important;
    color: #856404 !important;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.85em;
}

.status-pendente {
    background-color: #e2e3e5 !important;
    color: #6c757d !important;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.85em;
}

.status-default {
    background-color: #f5f5f5 !important;
    color: #555 !important;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.85em;
}

/* === ENTREGA EXAME ==================================== */
.status-disponivel{
    background:#d4eaf7 !important;      /* azul clarinho */
    color:#0d6efd !important;          /* azul bootstrap */
    padding:4px 8px;
    border-radius:12px;
    font-weight:bold;
    font-size: 0.85em;
}

.status-entregue{
    background:#e8f5e9 !important;      /* verde claro */
    color:#2e7d32 !important;           /* verde forte */
    padding:4px 8px;
    border-radius:12px;
    font-weight:bold;
    font-size: 0.85em;
}

.status-nao-entregue{
    background:#fce4ec !important;      /* rosa claro */
    color:#c2185b !important;          /* rosa escuro */
    padding:4px 8px;
    border-radius:12px;
    font-weight:bold;
    font-size: 0.85em;
}

/* === FALTANTES (mesma formatação) =============================== */

/* análises e internações */
.status-em-analise{
    background:#fff3cd !important;  /* amarelo claro */
    color:#856404 !important;       /* amarelo escuro  */
    padding:4px 8px;
    border-radius:12px;
    font-weight:bold;
    font-size: 0.85em;
}

.status-internado{
    background:#dbeafe !important;  /* azul muito claro */
    color:#0d6efd !important;      /* azul bootstrap   */
    padding:4px 8px;
    border-radius:12px;
    font-weight:bold;
    font-size: 0.85em;
}

.status-alta{
    background:#e8f5e9 !important;  /* verde claro      */
    color:#2e7d32;       /* verde forte      */
    padding:4px 8px;
    border-radius:12px;
    font-weight:bold;
    font-size: 0.85em;
}

/* genéricos de ativação */
.status-ativo{
    background:#d4edda !important;  /* verde claro      */
    color:#28a745 !important;      /* verde bootstrap  */
    padding:4px 8px;
    border-radius:12px;
    font-weight:bold;
    font-size: 0.85em;
}

.status-inativo{
    background:#f8d7da !important;  /* vermelho claro   */
    color:#dc3545 !important;       /* vermelho escuro  */
    padding:4px 8px;
    border-radius:12px;
    font-weight:bold;
    font-size: 0.85em;
}

.status-suspenso{
    background:#fff3cd !important;  /* amarelo claro    */
    color:#856404 !important;       /* amarelo escuro   */
    padding:4px 8px;
    border-radius:12px;
    font-weight:bold;
    font-size: 0.85em;
}

.status-bloqueado{
    background:#f8d7da !important;  /* vermelho claro   */
    color:#dc3545 !important;       /* vermelho forte   */
    padding:4px 8px;
    border-radius:12px;
    font-weight:bold;
    font-size: 0.85em;
}

.status-descontinuado{
    background:#f5f5f5 !important;  /* cinza muito claro*/
    color:#555 !important;          /* cinza escuro     */
    padding:4px 8px;
    border-radius:12px;
    font-weight:bold;
    font-size: 0.85em;
}

/* estoque e equipamentos */
.status-em-falta{
    background:#fce4ec !important;  /* rosa claro       */
    color:#c2185b !important;       /* rosa escuro      */
    padding:4px 8px;
    border-radius:12px;
    font-weight:bold;
    font-size: 0.85em;
}

.status-em-manutencao{
    background:#fff3cd !important; /* amarelo claro    */
    color:#856404 !important;      /* amarelo escuro   */
    padding:4px 8px;
    border-radius:12px;
    font-weight:bold;
    font-size: 0.85em;
}

.status-fora-de-servico{
    background:#f8d7da !important;  /* vermelho claro   */
    color:#dc3545 !important;       /* vermelho forte   */
    padding:4px 8px;
    border-radius:12px;
    font-weight:bold;
    font-size: 0.85em;
}

/* entrega de exames */
.status-retirado-paciente{
    background:#e8f5e9 !important;  /* verde claro      */
    color:#2e7d32 !important;      /* verde forte      */
    padding:4px 8px;
    border-radius:12px;
    font-weight:bold;
    font-size: 0.85em;
}

.status-disponivel-online{
    background:#d1ecf1 !important;  /* azul clarinho    */
    color:#007bff !important;       /* azul bootstrap   */
    padding:4px 8px;
    border-radius:12px;
    font-weight:bold;
    font-size: 0.85em;
}

.status-entrega-domiciliar{
    background:#d4eaf7 !important;  /* azul claro       */
    color:#0d6efd !important;      /* azul bootstrap   */
    padding:4px 8px;
    border-radius:12px;
    font-weight:bold;
    font-size: 0.85em;
}

/* PRIORIDADE */
.prioridade-alta {
    background-color: #ffe8e8;
    color: #d60000;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.85em;
}

.prioridade-media {
    background-color: #fff4e5;
    color: #e67e22;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.85em;
}

.prioridade-baixa {
    background-color: #e8f5e9;
    color: #2e7d32;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.85em;
}

.prioridade-normal {
    background-color: #f0f0f0;
    color: #333;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.85em;
}

.status-em-analise {
    background-color: #eaf4ff;
    color: #0d6efd;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.85em;
}

.status-internado {
    background-color: #fde2e2;
    color: #c82333;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.85em;
}

.status-alta {
    background-color: #d4edda;
    color: #155724;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.85em;
}

.status-disponivel {
    background-color: #e2f0d9;
    color: #2e7d32;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.85em;
}

/* 🎨 Botão do menu lateral (padrão) */
.drawer-button {
    border-radius: 12px;  /* Bordas mais arredondadas */
    padding: 10px 16px;
    font-size: 14px;
    width: 100%;
    background-color: #f8f9fa; /* Cinza claro */
    color: #6c757d;  /* Cinza escuro para texto */
    border: none;
    transition: all 0.3s ease-in-out;
    position: relative;
    text-align: center;
    font-weight: 500;
}

/* 🔵 Botão selecionado */
.drawer-button.selected {
    background-color: #D6E4FF; /* Azul claro */
    color: #000000; /* Preto para melhor contraste */
    font-weight: bold;
}

/* 🟢 Hover para botões não selecionados */
.drawer-button:hover {
    background-color: #e9ecef; /* Tom de cinza mais claro */
}

/* 🟣 Efeito de clique */
.drawer-button:active {
    transform: scale(0.98); /* Pequena redução ao clicar */
}

/* 🔵 Indicador lateral do botão ativo */
.drawer-button.selected::before {
    content: "";
    position: absolute;
    left: -6px;  /* Posição na lateral */
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background-color: #5A9BFF; /* Azul indicador */
    border-radius: 12px;
}

/* 🎯 Estilização do Breadcrumb */
.breadcrumb {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    display: flex;
    align-items: center;
    gap: 5px;
}

@media (max-width: 900px) {
    .mainlayout-header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 12px;
    }

    .mainlayout-left,
    .mainlayout-user-info {
        width: 100%;
    }

    .mainlayout-user-info {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
    }

    .breadcrumb {
        display: none;
    }

    .mainlayout-username {
        font-size: var(--lumo-font-size-s);
    }

    .perfil-badge {
        margin-left: 0;
    }

    .clinica-header-block span {
        display: none;
    }
}

@media (max-width: 640px) {
    .mainlayout-user-info {
        justify-content: flex-start;
    }
}

/* 🔹 Container principal da agenda */
.agenda-container {
    background-color: var(--tab-background-active);
}

/* 🔹 Layout principal da agenda */
.agenda-main-layout {
    display: flex;
    /*gap: 20px;*/
}

/* 🔹 Caixa do resumo do dia */
.agenda-resumo {
    background-color: var(--background-color);
    /*padding: 16px;*/
    border-radius: 12px;
    /*font-weight: bold;*/
    color: var(--text-color);
}

/* 🔹 Caixa da agenda */
.agenda-view {
    background-color: var(--background-color);
    /*padding: 16px;*/
    /*border-radius: 8px;*/
}

/* 🔹 Layout inferior com calendário */
.agenda-bottom-layout {
    display: flex;
    gap: 20px;
}

/* 🔹 Caixa do calendário */
.agenda-calendario {
    background-color: var(--background-color);
    /*padding: 16px;*/
    border-radius: 12px;
    font-weight: bold;
}

/* 🔹 Caixa extra */
.agenda-notifications {
    background-color: var(--background-color);
    /*padding: 16px;*/
    border-radius: 12px;
}

/* Se quiser ocultar a linha inferior da aba selecionada */
.custom-tabs::part(selection-bar) {
    display: none !important;
}

/* 🎨 Efeito hover */
.custom-tab:hover {
    color: var(--tab-text-active);
    background-color: var(--tab-background-hover);
}

/* 📌 Remove qualquer espaçamento da primeira aba */
.custom-tab:first-child {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Aba ativa (selecionada) */
.custom-tab.selected-tab {
    color: var(--tab-text-active);
    background-color: var(--tab-background-active);
    font-weight: bold;
}

.custom-tab {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20% !important;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: var(--tab-text-default);
    transition: all 0.3s ease-in-out;

    background-color: transparent;
    cursor: pointer;
    position: relative;
    /* garante que nada seja "cortado" dentro do tab */
    overflow: visible !important;
}

/* 📌 Garante que o conteúdo da aba seja visível */
.custom-tab::part(label) {
    white-space: nowrap !important; /* Evita que o texto quebre */
    overflow: visible !important; /* Garante que o texto não seja cortado */
    text-overflow: ellipsis; /* Adiciona reticências caso necessário */
}

/* Aplica estilo à aba ativa corretamente dentro do Shadow DOM */
.custom-tabs::part(tab[selected]) {
    color: var(--tab-text-active);
    background-color: var(--tab-background-active);
}

/* Remove a linha inferior da aba selecionada */
.custom-tabs::part(selection-bar) {
    display: none !important;
}

/* 📌 Remove qualquer espaçamento lateral do primeiro tab selector */
.custom-tabs {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none;
}

/* 📌 Garante que a primeira aba fique colada na lateral */
.custom-tabs::part(tabs) {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.resumo-background {
    background-color: transparent; /* Cinza claro */
    border-radius: 12px;
    padding: 10px;
}

.calendario-background {
    background-color: #d9f7be; /* Verde suave */
    border-radius: 12px;
    padding: 10px;
}

.agenda-background {
    background-color: #e6f7ff; /* Azul suave */
    border-radius: 12px;
    padding: 10px;
}

.notificacoes-background {
    background-color: #fff1f0; /* Vermelho suave */
    border-radius: 12px;
    padding: 10px;
}

.no-padding {
    padding: 0 !important;
    margin: 0 !important;
}

.div-default-background {
    background-color: white;
}

.rounded-div {
    border-radius: 12px !important;
}

.resumo-label {
    font-size: 14px;
    padding-bottom: 10px;
    /*font-weight: bold;*/
    color: #333;
}

/* Estilo "pill" genérico */
.status-pill {
    padding: 4px 8px;
    border-radius: 12px;
    display: inline-block;  /* garante que o pill seja "bloquinho" */
}

/* Cores específicas para cada tipo */
.status-normal {
    background-color: #d4edda; /* verde claro */
    color: #28a745;           /* verde */
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    width: 100%;
}

.status-urgente {
    color: #dc3545;
    background-color: #f8d7da;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    width: 100%;
}

.historico-chart-component {
    display: block;
    width: 100%;
    min-height: 300px;
}

#chartContainer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 150px; /* Evita que o gráfico diminua muito */
}

canvas {
    /* Estilos para canvas */
}

.urgent {
    background-color: #ffcccc;
}

.search-bar-container {
    border: none;
    border-radius: 20px;
    height: auto;
    background-color: white;
    color: white;
    transition: all 0.3s ease-in-out;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    /*padding: 5px 10px;*/
    /*box-sizing: border-box;*/
}

.search-bar-container .arrow-button {
    margin: 0 5px;
}

/* Destaque azul para linhas com part name "agendado-row" */
:host ::part(row)[part~="agendado-row"] {
    background-color: #DCEEFF !important;
}

/*contêiner de ícones na barra superior */
.top-bar-icons {
    display: flex;          /* Exibe os ícones lado a lado */
    align-items: center;    /* Alinha verticalmente no centro */
    gap: 8px;               /* Espaço horizontal entre ícones */
    margin-left: auto;      /* Empurra o grupo de ícones para a direita, se desejar */
}

.rounded-container {
    background-color: white;  /* Fundo branco */
    border: none;  /* Remove contorno */
    border-radius: 10px;  /* Bordas arredondadas */
    padding: 10px;  /* Espaçamento interno */
    box-shadow: none;  /* Remove sombras */
}

.rounded-grid {
    border: none;  /* Remove bordas */
    border-radius: 10px;  /* Bordas arredondadas */
    overflow: hidden;  /* Garante que o conteúdo respeite as bordas arredondadas */
    box-shadow: none;  /* Remove sombras */
    background-color: white; /* Fundo branco */
}

.borderless-rounded-textarea {
    border: none !important;        /* Remove bordas */
    background-color: #ffffff !important; /* Fundo branco */
    border-radius: 12px !important;  /* Cantos arredondados */
    box-shadow: none !important;    /* Remove qualquer sombra */
    outline: none !important;       /* Remove o outline de foco (opcional) */
    resize: none !important;        /* Se não quiser o 'handle' de redimensionar no canto (opcional) */
}

.dotted-text-field >>> .vaadin-text-field-container {
    border: 1px dashed #ccc;
    border-radius: 6px;
    background-color: #fff; /* Fundo branco */
}

.dotted-text-field >>> .vaadin-text-field-container:hover {
    border-color: #999; /* Efeito hover */
}

/* usando ::part */
:host(.dotted-text-field) ::part(input-field),
:host(.dotted-text-area) ::part(input-field) {
    border: 1px dashed #ccc;
    background-color: #fff;
    border-radius: 6px;
}

.grid-title {
    font-weight: bold;  /* negrito */
    font-size: 14px;    /* tamanho da fonte */
    padding: 2px;       /* padding mínimo (ajuste se quiser ainda menor) */
    margin: 0;          /* remove margens, se houver */
}

.status-agendado-grid-nao-concluido {
    color: #007bff;
    background-color: #d1ecf1;
    /*padding: 4px 8px;*/
    border-radius: 12px;
    font-weight: bold;
}

.rounded-search-field {
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 14px;
    width: auto;
    background-color: white;
    color: white;
    border: none;
    transition: all 0.3s ease-in-out;
    position: relative;
}

.top-bar-container {
    background-color: transparent;
    border: none;
    width: auto;
    height: 45px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    /*padding: 0 10px;*/
}

/* 🎨 Botão do menu lateral (padrão) */
.rounded-button {
    border-radius: 20px;  /* Bordas mais arredondadas */
    padding: 10px 16px;
    font-size: 14px;
    width: auto;
    background-color: #D6E4FF; /* azul claro */
    color: #6c757d;  /* Cinza escuro para texto */
    border: none;
    transition: all 0.3s ease-in-out;
    position: relative;
    text-align: center;
    font-weight: 500;
    margin: 4px;
}

.rounded-button:hover {
    /*background-color: #e9ecef; !* Tom de cinza mais claro *!*/
    box-shadow: var(--custom-box-shadow);
}

.info-div {
    justify-content: end;
    background-color: transparent;
    border: none;
    width: auto;
    height: auto;
    padding: 2px;
}

.icon-button {
    background-color: transparent;
    border: none;
    padding: 4px;
    margin: 4px;
    cursor: pointer;
}


/* Remove qualquer fundo ao passar o mouse */
.icon-button:hover {
    background-color: transparent;
}

/* Se o ícone for um SVG dentro do botão */
.icon-button:hover svg path {
    /* Muda somente o traço (stroke) */
    stroke: #007bff;
    fill: none; /* Se quiser só linha sem preenchimento */
}

.salvar-button {
    border-radius: 16px;
    border: none;
    background-color: #f5f5f5; /* Cor de fundo leve */
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.3s ease;
    color: blue;
}

.salvar-button:hover {
    /* Escurece levemente no hover */
    filter: brightness(0.95);
}

.cancelar-button {
    border-radius: 16px;
    border: none;
    background-color: #f5f5f5; /* Cor de fundo leve */
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.3s ease;
    color: red;
}

.cancelar-button:hover {
    filter: brightness(0.95);
}

.excluir-button {
    border-radius: 16px;
    border: none;
    background-color: #f5f5f5; /* Cor de fundo leve */
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.3s ease;
    color: red;
}

.excluir-button:hover {
    filter: brightness(0.95);
}

.editar-button {
    border-radius: 16px;
    border: none;
    background-color: #f5f5f5; /* Cor de fundo leve */
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.3s ease;
    color: blue;
}

.editar-button:hover {
    filter: brightness(0.95);
}

.fechar-button {
    background-color: var(--agendado-color-light);  /* Ex: #71C5E8 (azul claro) */
    color: #ffffff;  /* texto branco para melhor contraste */
    border: none;
    border-radius: 16px;
    padding: 8px 16px;
    cursor: pointer;
    /*font-weight: bold;*/
    transition: filter 0.2s ease-in-out;
}

.fechar-button:hover {
    filter: brightness(0.95);
}

.normal-button {
    background-color: var(--agendado-color-light);  /* Ex: #71C5E8 (azul claro) */
    color: #ffffff;  /* texto branco para melhor contraste */
    border: none;
    border-radius: 16px;
    padding: 8px 16px;
    cursor: pointer;
    /*font-weight: bold;*/
    transition: filter 0.2s ease-in-out;
}

.normal-button:hover {
    filter: brightness(0.95);
}

.item-button {
    background-color: white;  /* Ex: #71C5E8 (azul claro) */
    color: var(--primary-color);  /* texto branco para melhor contraste */
    border: 1px var(--primary-color) solid;
    border-radius: 16px;
    padding: 8px 16px;
    cursor: pointer;
    /*font-weight: bold;*/
    transition: filter 0.2s ease-in-out;
}

.item-button:hover {
    filter: brightness(0.93);
}

.success-notification {
    background-color: #d4edda; /* verde claro */
    color: #155724;           /* texto verde escuro */
    /*border: 1px solid #c3e6cb;*/
    /*padding: 16px;*/
    /*border-radius: 8px;*/
    /*font-weight: bold;*/
    /* Ajuste conforme o design desejado */
}

.error-notification {
    background-color: #f8d7da; /* vermelho claro */
    color: #721c24;           /* texto vermelho escuro */
    /*border: 1px solid #f5c6cb;*/
    /*padding: 16px;*/
    border-radius: 12px;
    /*font-weight: bold;*/
    /*margin: 8px;*/
}

/* Estilos gerais para todos os cards */
.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Mantém os ícones no final */
    position: relative;            /* Permite posicionar ícones absolutos */
    border-radius: 12px;           /* Cantos arredondados */
    padding: 8px;
    margin: 4px -3px;                /* Espaçamento vertical entre cards */
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    width: 100%;                   /* Ajuste conforme layout */
    transition: box-shadow 0.2s ease-in-out;
    text-align: center; /* Centraliza o texto horizontalmente */
    max-height: 100vh;
    overflow-y: auto;
}

/* Detalhes da Consulta: bloco Paciente alinhado à esquerda (evita texto empurrado para a direita) */
.card .detalhes-consulta-paciente-info,
.card .detalhes-consulta-paciente-info * {
    text-align: left !important;
}

.card-title-with-content {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
    text-align: left; /* Centraliza o texto horizontalmente */
    display: block; /* Garante que o Span ocupe toda a largura */
    width: 100%; /* Faz com que o span use toda a largura do container */
}

.card-title-without-content {
    color: #666;
    font-size: 14px;
    margin-bottom: 8px;
    text-align: left; /* Centraliza o texto horizontalmente */
    display: block; /* Garante que o Span ocupe toda a largura */
    width: 100%; /* Faz com que o span use toda a largura do container */
}

/* Conteúdo do card */
.card-content p {
    margin: 0 0 6px 0;  /* Ajuste de espaçamento entre linhas */
}

/* Cabeçalho do card (título) */
.card-header {
    flex: 0 0 auto; /* não cresce nem encolhe */
    font-weight: bold;
    padding: 4px 8px; /* espaço interno */
    /* Se quiser borda inferior, cor de fundo, etc. */
    /* border-bottom: 1px solid #ccc; */
}

/* Conteúdo do card (onde fica o TextArea) */
.card-content {
    flex: 1 1 auto;  /* cresce/encolhe para ocupar o espaço restante */
    overflow-y: auto; /* ativa rolagem vertical */
    /*padding: 4px 8px; !* espaço interno *!*/
}

/* Layout para os ícones */
.card-icon-container {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: relative;
    bottom: 0;
    right: 0;
}

.card-icon {
    width: 24px;   /* Tamanho do ícone */
    height: 24px;
    cursor: pointer;
    /* Ajustes extras, se quiser */
}

/* Cores específicas para cada tipo de card */
.card-laranja-pastel {
    background-color: #fff2cc; /* pastel laranja */
}

.card-verde-pastel {
    background-color: #d4edda;
}
.card-white {
    background-color: white;
}

.card-laranja-pastel-light {
    background-color: var(--pastel-orange-light);;
}

.card-yellow-pastel {
    background-color: #FDF8E0;
}

.card-blue-pastel {
    background-color: #D6E4FF;
}

.card-verde-menta {
    background-color: #e6f4ea; /* Verde menta suave */
}

.card-verde-salvia {
    background-color: #dff5e1; /* Verde medicinal */
}

.card-azul-claro {
    background-color: #e3f2fd; /* Azul claro pastel */
}

.card-azul-acqua {
    background-color: #e0f7fa; /* Acqua leve */
}

.card-rosa-pastel {
    background-color: #fce4ec; /* Rosa claro, associado a cuidado */
}

.card-amarelo-suave {
    background-color: #fff9c4; /* Amarelo pastel menos saturado */
}

.card-cinza-claro {
    background-color: #f5f5f5; /* Neutro, bom para destacar alertas sem chamar atenção */
}

.card-pessego-pastel {
    background-color: #ffebd6; /* Pêssego leve */
}

.card-without-content {
    background-color: var(--inactive-color);
}

/* Ícone de edição no canto inferior direito */
.edit-icon {
    bottom: 8px;
    right: 8px;
    cursor: pointer;
}

.add-icon {
    top: 8px;
    right: 8px;
    cursor: pointer;
}

/* Ícone no canto inferior esquerdo */
.bottom-left-icon {
    bottom: 8px;
    left: 8px;
    cursor: pointer;
}

.inline-icon {
    position: static !important;  /* ou relative */
    display: inline-block;        /* se quiser forçar inline-block */
    /* qualquer outro ajuste */
    cursor: pointer;
}

.limited-grid {
    max-height: 150px; /* Ou o valor que desejar */
    overflow: auto;
    /*height: 20px;       !* altura total *!*/
    /*line-height: 50px;  !* alinha verticalmente o texto *!*/
    vertical-align: middle;
}

.small-grid-header::part(header-cell) {
    height: 10px;       /* altura total */
    line-height: 10px;  /* alinha verticalmente o texto */
    vertical-align: middle;
}

.three-lines-grid {
    max-height: 180px; /* Ajuste para ~3 linhas + cabeçalho */
    overflow-y: auto;
}

.label-clickable {
    cursor: pointer;
    padding: 4px 8px;
    background-color: #eaeaea;
    border-radius: 4px;
}

.registro-atendimento-grid {
    /* Se quiser bordas arredondadas no grid */
    border-radius: 12px;
    overflow: hidden;
}

.registro-atendimento-grid .col-data {
    width: 10% !important; /* forçando via !important */
    min-width: 80px;      /* se quiser um mínimo */
}

.registro-atendimento-grid .col-servico {
    width: 15% !important;
    min-width: 100px;
}

.registro-atendimento-grid .col-descricao {
    width: 25% !important;
    min-width: 150px;
}

.registro-atendimento-grid .col-resumo {
    width: 50% !important;
}

.expand-icon-container {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
}

.registro-atendimentos-component {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    /*box-sizing: border-box; !* Garante que width/height incluam padding/border *!*/
}

/* Estilos gerais para todos os cards */
.card-registro-atendimento {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Mantém os ícones no final */
    position: relative;            /* Permite posicionar ícones absolutos */
    border-radius: 12px;           /* Cantos arredondados */
    padding: 8px;
    margin: 0 -3px;                /* Espaçamento vertical entre cards */
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    width: 100%;                   /* Ajuste conforme layout */
    transition: box-shadow 0.2s ease-in-out;
    text-align: center; /* Centraliza o texto horizontalmente */
}

.edit-icon-container {
    position: absolute;
    bottom: 10px;
    right: 10px;
    cursor: pointer; /* se quiser indicar clique */
}

.consulta-tab-layout {
    width: 100%;
    height: 100%;
}

.consulta-left-container {
    background-color: #fafafa;
}

.consulta-right-container {
    background-color: #fafafa;
}

.consulta-left-block {
    background-color: #ffffff;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 12px;
    box-shadow: var(--custom-box-shadow);
}

.nova-consulta-button {
    background-color: #2196f3; /* Azul */
    color: white;
    border-radius: 4px;
}

.finalizar-button {
    background-color: #f44336; /* Vermelho */
    color: white;
    border-radius: 4px;
}

.consulta-card {
    background-color: #fdfdfd;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: var(--custom-box-shadow);
    display: flex;
    flex-direction: column;
    /* se quiser rolagem:
       overflow: auto;
     */
}

.consulta-card-title {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.consulta-card-content {
    flex: 1; /* para ocupar o espaço disponível */
    /* margin-top: auto; se quiser algo no rodapé etc. */
}

.notas-privadas-card {
    background-color: #E5F4EB;
}

/* Exemplo de estilo "fantasma" */
.ghost-textarea {
    width: 100%;
    color: var(--text-color-grey);
}

/* Para estilizar a "caixa" do TextArea */
.ghost-textarea::part(input-field) {
    background-color: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    /* etc. */
}

/* Para mostrar "sombra" ou "borda" quando focado */
.ghost-textarea::part(input-field):focus {
    box-shadow: var(--custom-box-shadow);
    /* ou border: 1px solid #...; */
}

.dialog-title {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 8px;
}

.dialog-subtitle {
    font-weight: 600;
    margin-top: 10px;
    color: #333;
}

.no-changes {
    font-style: italic;
    color: #666;
}

/* Itens adicionados em verde (ou azul) */
.added-item {
    color: green;
    /* ou color: #0a7dfa (azul) */
    font-weight: 500; /* se quiser destaque */
}

/* Itens removidos em vermelho */
.removed-item {
    color: red;
    font-weight: 500; /* se quiser destaque */
}

/* Itens alterados em outra cor, por exemplo, laranja */
.altered-item {
    color: #ff9800;
    font-weight: 500;
}

.transparent-grid {
    background-color: transparent !important; /* ou algo que você prefira */
    border: none !important;
}

.transparent-grid::part(header),
.transparent-grid::part(header-cell) {
    background-color: transparent;
    border: none;
    display: none;
}

.transparent-grid::part(cell) {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--lumo-contrast-20pct);
}

/* Remove bordas horizontais de cada célula, se desejar */
.transparent-grid .vaadin-grid-cell {
    border-bottom: none;
}

.sinal-vital-add-button {
    background-color: var(--lumo-primary-color);
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    font-size: 24px; /* Ajuste para ficar proporcional */
    display: flex;
    align-items: center;
    justify-content: center;
}

.urgencia-button {
    background-color: #c0392b; /* A deep red background */
    color: #fff;              /* White text color */
    font-weight: 600;         /* Slightly bolder text */
    padding: 8px 16px;        /* Some horizontal/vertical padding */
    border: none;             /* No default browser border */
    border-radius: 4px;       /* Slightly rounded corners */
    cursor: pointer;          /* Cursor shows pointer on hover */
    box-shadow: var(--custom-box-shadow);
    transition: background-color 0.2s ease;  /* Smooth hover transition */
}

.urgencia-button:hover {
    background-color: #e74c3c; /* Brighter red on hover */
}

.container-title-with-icon {
    position: relative;
    text-align: center;
    padding: 4px;
}

.container-title-with-icon .top-right-icon {
    position: absolute;
    right: 4px;
    top: 0;
    cursor: pointer;
    padding: 0;
}

/*monthly-calendar*/
.monthly-calendar-container {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 6px;
    margin: 4px 0;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Navigation buttons styling - optimized for square container */
.monthly-calendar-container .navigation-button {
    background-color: var(--lumo-primary-color, #1976d2);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

.monthly-calendar-container .navigation-button:hover {
    background-color: var(--lumo-primary-color-80pct, rgba(25, 118, 210, 0.8));
    transform: scale(1.1);
}

.monthly-calendar-container .navigation-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    transform: none;
}

/* Month/Year display - optimized for square container */
.month-year-display {
    font-size: 16px;
    font-weight: 600;
    color: var(--lumo-primary-text-color, #333);
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    text-align: center;
    min-width: 120px;
}

.month-year-display:hover {
    background-color: var(--lumo-primary-color-10pct, rgba(25, 118, 210, 0.1));
}

/* Enhanced calendar circles and spacing - optimized for square container */
.calendar-table {
    border-spacing: 8px 10px;
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
}
.calendar-table-cell {
    width: 40px;
    height: 40px;
    padding: 2px;
}
.day-content {
    width: 36px;
    height: 36px;
    font-weight: 600;
    font-size: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

/* Hover effect for all day content */
.day-content:hover:not(.disabled-day):not(.past-day) {
    background-color: var(--lumo-primary-color-10pct, rgba(25, 118, 210, 0.1));
    transform: scale(1.05);
}

/* Selected day with green circle border - higher specificity */
.day-content.selected-day {
    background-color: white !important;
    color: var(--success-color, #28a745) !important;
    border: 3px solid var(--success-color, #28a745) !important;
    box-shadow: 0 3px 12px rgba(40, 167, 69, 0.5);
    font-weight: 700;
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
    transform: scale(1.1);
}

/* Today styling - blue color - higher priority than available */
.day-content.today {
    background-color: var(--lumo-primary-color, #1976d2) !important;
    color: white !important;
    font-weight: 700;
    border: 2px solid var(--lumo-primary-color, #1976d2) !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
}

/* Today + Available combination - prioritize today styling */
.day-content.today.available-day {
    background-color: var(--lumo-primary-color, #1976d2) !important;
    color: white !important;
    font-weight: 700;
    border: 2px solid var(--lumo-primary-color, #1976d2) !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
}

/* Available day (from Java highlight) */
.day-content.available-day {
    border: 2px solid var(--success-color, #28a745) !important;
    color: var(--success-color, #28a745) !important;
    background-color: rgba(40, 167, 69, 0.15);
    font-weight: 600;
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
}

.available-day:hover {
    background-color: var(--success-color, #28a745);
    color: white;
    transform: scale(1.05);
}

/* Unavailable day (from Java highlight) - not selectable */
.day-content.unavailable-day {
    border: 2px solid #dc3545 !important;
    color: #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.1);
    opacity: 0.7;
    cursor: not-allowed !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
}

.unavailable-day:hover {
    transform: none !important;
    background-color: rgba(220, 53, 69, 0.1) !important;
    border: 2px solid #dc3545 !important;
}

/* Past days - gray styling */
.day-content.past-day {
    color: #999 !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #ddd !important;
    opacity: 0.7;
    cursor: not-allowed;
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
}

.past-day:hover {
    transform: none;
    background-color: #f5f5f5 !important;
    border: 1px solid #ddd !important;
}

/* Month/year dialog grids */
.month-grid button,
.year-list-container button {
    width: 90px;
    height: 36px;
    border-radius: 8px;
}

/* Past months/years visually faded (also disabled in Java) */
.year-list-container button[disabled],
.month-grid button[disabled] {
    opacity: 0.4;
    background-color: #f5f5f5 !important;
    color: #999 !important;
    border: 1px solid #ddd !important;
    cursor: not-allowed !important;
    text-decoration: line-through;
}

.year-list-container button[disabled]:hover,
.month-grid button[disabled]:hover {
    background-color: #f5f5f5 !important;
    color: #999 !important;
    border: 1px solid #ddd !important;
    transform: none !important;
}



.calendar-navigation-bar {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

/* Spans do mês e ano (clicáveis) */
.month-span, .year-span {
    font-weight: bold;
    /*font-size: 1.2rem;*/
    cursor: pointer;
}

.today-span {
    cursor: pointer;
    color: var(--primary-color);
}

/* Calendário mensal (corrige alinhamento dos dias da semana) */
/* Usa grid de 7 colunas no header e nas semanas para manter tudo alinhado */
.calendar-table {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.calendar-table-header-row,
.calendar-table-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    column-gap: 12px;
    align-items: center;
    justify-items: center;
}

.calendar-table-header-cell {
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    color: var(--lumo-secondary-text-color);
}

.calendar-table-cell {
    width: 100%;
    min-height: 44px; /* dá espaço para os círculos */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dias passados => cinza */
.past-day {
    color: #bbb;
}

/* Dia de hoje => fundo azul */
.today {
    background-color: #1976d2;
    color: #fff !important;
}

/* Dia selecionado => círculo com borda azul */
.selected-day {
    border: 1px solid #1976d2;
    color: #1976d2;
    width: 20px;   /* circulo menor */
    height: 20px;
}

/* Destaques fixos de exemplo */
.highlight-blue {
    border: 1px solid blue;
    color: blue;
}
.highlight-red {
    border: 1px solid red;
    color: red;
}

/* Container para a lista de anos */
.year-list-container {
    max-height: 250px; /* ex.: rolagem vertical menor */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem;
}

.month-grid {
    display: grid;
    /* 3 colunas, 4 linhas = 12 células */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, auto);
    gap: 0.5rem;        /* espaço entre botões */
    padding: 1rem;      /* espaçamento interno */
    justify-items: center; /* centraliza os botões em cada célula, se desejar */
}

.lab-compromissos-cards-container {
    display: flex;
    background-color: var(--pastel-blue-light);
    border-radius: 12px;
    padding: 16px;
}

.header-lab-agenda {
    display: flex;
    align-items: start;
    justify-content: start;
    padding: 16px;
}

.graph-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
}

.resumo-dia-stats {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* espaçamento vertical entre os filhos */
    align-items: center;
    justify-content: center;
}

.filter {
    display: flex;
}

.filter::part(input-field) {
    background-color: #ffffff;  /* fundo branco */
    border-radius: 12px;        /* borda arredondada */
    border: 1px solid #ddd;     /* borda sutil */
    box-shadow: none;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.slide-out {
    animation: slideOut 0.3s ease-in forwards;
}

.lancamento-content-tab {
    display: flex;
    /*background-color: var(--pastel-blue-light);*/
}

.lancamento-bottom-layout {
    width: 100%;
    height: 100%;
    min-height: 120px; /* opcional, só pra garantir */
    align-items: start; /* para não centralizar verticalmente */
}

/* Abas não selecionadas (caso queira um fundo neutro) */
.lancamento-tab {
    padding: 0 0 !important; /* Padding vertical aumentado, horizontal zerado */
    margin: 0 !important;
    align-items: center;
    width: 100%; /* Garante largura completa */
}

/* Aba selecionada: fundo azul */
.lancamento-tab.lancamento-selected-tab {
    background-color: var(--pastel-blue-light-lancamento-lab);
}

.lancamento-content-layout {
    padding: 0;
    margin: 0;
    border: 2px solid var(--pastel-blue-light-lancamento-lab);
    border-radius: 12px;
    box-sizing: border-box;
    max-width: 100%; /* Pode ajudar a evitar estouro */
    max-height: 100%;
    overflow: hidden; /* ou auto, se quiser rolagem */
}

.lancamento-top-layout {
    background-color: transparent;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    gap: 0; /* confirma que gap é zero */
}

.lancamento-tabs-group {
    padding: 0 !important;
    margin: 0 !important;
    height: 100%;
    display: flex; /* Para garantir que ocupe 100% da altura do container */
}

/* Abas horizontais de tipo de amostra (Lançamento Resultado) — sem padding para ganhar espaço */
.tipo-amostra-tabs-horizontal {
    padding: 0 !important;
    margin: 0 !important;
}
.tipo-amostra-tabs-horizontal::part(tabs) {
    padding: 0 !important;
}
.tipo-amostra-tabs-horizontal::part(tab) {
    padding: 0.35rem 0.6rem !important;
    margin: 0 !important;
}

/* O part(scroller) é a porção interna que controla a rolagem */
.lancamento-tabs-group ::part(scroller) {
    display: flex;
    flex-direction: column;
    height: 100%;   /* Para preencher a altura */
}

/* Cada tab deve "crescer" igualmente */
.lancamento-tabs-group ::part(tab) {
    flex: 1 1 auto;  /* Faz cada <tab> ocupar parte igual da altura total */
    margin: 0 !important;
    padding: 0 !important;
}

.lancamento-tab-item {
    margin-left: 8px !important;
    padding: 8px !important;
    /*height: 32px !important;*/
}

.lancamento-resultado-exame-view {
    display: flex;
    margin: 0;
    padding: 0 !important;
}

.lancamento-tab-base {
    color: var(--text-color-grey); /* cor padrão do texto */
    transition: filter 0.2s ease;  /* transições partilhadas */
    padding: 8px 12px;             /* espaçamento padrão */
    cursor: pointer;               /* cursor partilhado */
}

/* Aba não selecionada */
.lancamento-unselected-tab {
    background-color: #fff;      /* ou outra cor neutra */
    color: var(--text-color-grey);                 /* cor do texto */
    border-radius: 0;
}

.lancamento-unselected-tab:hover {
    filter: brightness(0.95);
}

/* Aba selecionada */
.lancamento-selected-tab {
    background-color: var(--pastel-blue-light-lancamento-lab);   /* azul claro, por exemplo */
    color: #333;
}

.lancamento-selected-tab:hover {
    filter: brightness(1.03);
}

/* Área de Observações com fundo branco, borda arredondada e sombra */
.lancamento-observacoes-text-area {
    background-color: #ffffff;
    border-radius: 12px;
    /*padding: 4px;*/
    box-sizing: border-box; /* IMPORTANTE: inclui padding e borda nas dimensões */
    /*height: 100%;*/
    min-height: 100px;
}

/* Centraliza o título do TextArea */
.lancamento-observacoes-text-area::part(label) {
    width: 100%;
    text-align: center;
}

/* Div Resultados Críticos com borda vermelha destacada */
.lancamento-resultados-criticos-div {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--cancelado-color-light);
    padding: 8px 12px;
    margin-top: 16px;
    color: #888;
    box-sizing: border-box; /* IMPORTANTE: inclui padding e borda nas dimensões */
    display: flex;
    flex-direction: column; /* itens um abaixo do outro */
    align-items: center;    /* centraliza horizontalmente */
    min-height: 100px;
    align-self: stretch !important; /* Garante que ocupa altura da linha */
}

/* Título Resultados Críticos */
.lancamento-resultados-criticos-titulo {
    font-weight: bold;
    font-size: 14px;
    color: #888;
    margin-bottom: 4px;
    padding: 2px;
    display: inline-block;
}

.adicionar-parametro-exame-laboratorial {
    display: flex;
    width: 50%;
    height: 80%;
}

.lancamento-addParametro-button {
    cursor: pointer;
    border-radius: 22px;
    border: 1px solid #5A9BFF;
}

.lancamento-addParametro-button:hover {
    filter: brightness(1.3);
}

/* Grid de resultados: títulos das colunas visíveis (sem truncar), botão + inteiro */
.lancamento-resultados-grid::part(header-cell) {
    white-space: nowrap;
    overflow: visible;
    min-height: 2.5em;
}
/* Coluna Parâmetro (2.ª com seleção): espaço para "Parâmetro" + botão + */
.lancamento-resultados-grid::part(header-cell):nth-child(2) {
    min-width: 220px;
}
/* Coluna Unidade (4.ª): título "Unidade" completo */
.lancamento-resultados-grid::part(header-cell):nth-child(4) {
    min-width: 105px;
}

.lancamento-limpar-highlights {
    background-color: var(--pastel-blue-light-lancamento-lab);
    border-radius: 22px;
}

.lancamento-limpar-highlight:hover {
    filter: brightness(1.3);
}

.highlight-tab {
    background-color: #fffbe6;
    border-left: 4px solid #f39c12;
    font-weight: bold;
}

.highlighted-row {
    background-color: #ffe082 !important;
    animation: flash-highlight 1.5s ease-in-out;
}

@keyframes flash-highlight {
    0%   { background-color: #fff8e1; }
    50%  { background-color: #ffe082; }
    100% { background-color: #fff8e1; }
}

.resultado-alto {
    color: var(--lumo-warning-text-color);
    font-weight: bold;
}

.resultado-baixo {
    color: var(--lumo-error-text-color);
    font-weight: bold;
}

.resultado-normal {
    color: var(--lumo-success-text-color);
}

.resultado-desconhecido {
    color: #666;
    font-style: italic;
}

.lancamento-voltar-div {
    padding: 0.5rem 0;
    height: 100%;
    width: 100%;
}

.lancamento-voltar-layout {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.lancamento-voltar-botao {
    height: 100%;
    width: 100%;
    font-size: 1.1rem;
    background: transparent;
    border: none;
    color: var(--lumo-primary-color);
    cursor: pointer;
    padding-left: 0.5rem;
    text-align: left;
}

.lancamento-voltar-botao:hover {
    text-decoration: underline;
}

.lancamento-observacoes-layout span,
.lancamento-resultados-criticos-titulo {
    font-weight: 600;
    color: #555;
    font-size: 0.95rem;
}

.lancamento-observacoes-layout,
.lancamento-criticos-layout {
    height: auto !important;
    overflow-y: auto; /* evita estouro */
}

.lancamento-exame-info-div {
    max-width: 100%;
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--cancelado-color-light);
    padding: 16px;
    margin-top: 16px;
    color: #333;
    font-size: 0.9rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;         /* Alinha conteúdo no início horizontal */
    min-height: 100px;
    height: 100%;                    /* ← Faz o div expandir no container pai */
}

.lancamento-exame-info-div > .v-vertical-layout {
    height: 100%;
    justify-content: center;
}

.lancamento-exame-info-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Estilo base da dashboard ===== */
.recepcao-dash-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    padding: 16px;
}

/* ===== Cards Resumo ===== */
.recepcao-dash-card {
    border-radius: 8px;
    padding: 12px;
    width: 100%;
    box-shadow: var(--custom-box-shadow);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.recepcao-dash-card-clinica {
    background-color: #D4E8F4;
}

.recepcao-dash-card-enfermagem {
    background-color: #D9F2E5;
}

.recepcao-dash-card-laboratorio {
    background-color: #FFF3D6;
}

.recepcao-dash-card-title {
    font-weight: bold;
    margin-bottom: 4px;
    font-size: 15px;
}

.recepcao-dash-card-item {
    font-size: 14px;
    margin-bottom: 2px;
}

/* ===== Títulos das seções ===== */
.recepcao-dash-section-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
}

/* ===== Em Andamento ===== */
.recepcao-dash-em-andamento {
    background-color: #F5F5F5;
    border-radius: 12px;
    padding: 12px;
}

/* ===== Pendentes ===== */
.recepcao-dash-pendentes {
    background-color: #FFF4E2;
    border-radius: 12px;
    padding: 12px;
}

/* ===== Alertas ===== */
.recepcao-dash-alertas {
    border: 2px solid red;
    border-radius: 12px;
    padding: 12px;
}

.recepcao-dash-right-column {
    background-color: var(--pastel-green-enferm);
    border-radius: 12px;
    margin-left: 8px;
}

.recepcao-dash-left-column {
    padding: 0;
    margin-right: 8px;
}

/* recepcao-dashboard.css */

.floating-add-button-top {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 3500;
    background-color: var(--lumo-primary-color);
    color: white;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    box-shadow: var(--custom-box-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============ RECEPCAO ============= */
.recepcao-dash-section-title {
    padding: 0;
    margin: 0;
}

.recepcao-dash-add-button {
    border: none;
    box-shadow: var(--custom-box-shadow);
    /*border-radius: 50%;*/
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    display: flex;
    z-index: 3500;
}

.card-clickable {
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

.card-clickable:hover {
    box-shadow: var(--custom-box-shadow);
}

/* Estilo base para o span de atualização */
.recepcao-dash-atualizacao-span {
    font-size: 0.85rem;
    font-weight: 500;
    color: gray;
    transition: color 0.5s ease;
}

/* Quando atualizado */
.recepcao-dash-atualizacao-span.updated {
    color: green;
}

.aba-selector-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.aba-selector-icon {
    width: 18px;
    height: 18px;
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out;
}

.aba-selector-icon:hover {
    opacity: 1;
}

/* ===== Barra Caixa Hoje (Dashboard + aba Caixa) ===== */
.recepcao-dash-caixa-bar {
    display: flex;
    width: 100%;
    gap: 6px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.recepcao-dash-caixa-bar:hover {
    opacity: 0.95;
}

.recepcao-caixa-bar-cell {
    flex: 1;
    padding: 8px 12px;
    border-radius: var(--lumo-border-radius-m);
    text-align: center;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.recepcao-caixa-bar-cell .recepcao-caixa-bar-label {
    display: block;
    font-size: var(--lumo-font-size-s);
    opacity: 0.95;
}

.recepcao-caixa-bar-cell .recepcao-caixa-bar-value {
    display: block;
    font-size: var(--lumo-font-size-l);
}

.recepcao-caixa-bar-recebido {
    background: linear-gradient(135deg, #2e7d32 0%, #388e3c 100%);
}

.recepcao-caixa-bar-pendentes {
    background: linear-gradient(135deg, #546e7a 0%, #607d8b 100%);
}

.recepcao-caixa-bar-em-caixa {
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 100%);
}

.recepcao-caixa-bar-saida {
    background: linear-gradient(135deg, #c62828 0%, #d32f2f 100%);
}

/* ===== Cards da aba Caixa ===== */
.recepcao-caixa-cards-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}

.recepcao-caixa-card {
    border-radius: 12px;
    padding: 16px;
    min-width: 140px;
    flex: 1;
    min-height: 90px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.recepcao-caixa-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.recepcao-caixa-card [class*="card-title"] {
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--lumo-secondary-text-color);
}

.recepcao-caixa-card .recepcao-caixa-card-value {
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 2px;
}

.recepcao-caixa-card-recebido .recepcao-caixa-card-value {
    color: #2e7d32;
}

.recepcao-caixa-card-pendente .recepcao-caixa-card-value {
    color: #546e7a;
}

.recepcao-caixa-card-estornado .recepcao-caixa-card-value {
    color: #c62828;
}

.recepcao-caixa-card-em-caixa .recepcao-caixa-card-value {
    color: #1565c0;
}

.recepcao-caixa-card-saidas .recepcao-caixa-card-value {
    color: #c62828;
}

.recepcao-caixa-card-formas {
    min-width: 280px;
}

.recepcao-caixa-card-formas .recepcao-caixa-card-value {
    color: #424242;
}

.recepcao-caixa-card-formas .recepcao-caixa-card-formas-content {
    color: #616161;
}

.recepcao-caixa-card-formas-content {
    font-size: var(--lumo-font-size-s);
}

.recepcao-caixa-card-formas-content span {
    display: block;
    padding: 2px 0;
}

/* Card de cada saída no modal "Saídas de dinheiro" */
.recepcao-caixa-saida-card {
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--lumo-contrast-10pct);
    background: var(--lumo-base-color);
}

.recepcao-caixa-saida-card + .recepcao-caixa-saida-card {
    margin-top: 0;
}

.recepcao-caixa-titulo {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 8px;
}

/* Indicador de data ao lado do date picker: alinhado verticalmente com o campo */
.recepcao-caixa-header-esquerda {
    /* Alinhar pelo "fundo" do DatePicker para o indicador ficar na altura do input */
    align-items: flex-end;
}
.recepcao-caixa-header-esquerda .recepcao-caixa-header-indicador {
    margin: 0;
    line-height: 1;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
}

/* Barra superior: data + filtros + botões numa fila */
.recepcao-caixa-top-bar {
    flex-shrink: 0;
    margin-bottom: 8px;
}

/* Área conteúdo: painel esquerdo (cards) + grid à direita */
.recepcao-caixa-content {
    min-height: 0;
    overflow: hidden;
    /* Não permite wrap por padrão - só em ecrãs pequenos */
}

.recepcao-caixa-left-panel {
    flex-shrink: 1;
    flex-basis: 280px;
    overflow-y: auto;
    min-width: 260px;
    max-width: 320px;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
}

/* Grid precisa de espaço mínimo para não desaparecer */
.recepcao-caixa-content > vaadin-grid {
    flex: 1 1 auto;
    min-width: 400px;
    min-height: 0;
}

/* Cards em coluna no painel esquerdo (um em cima do outro) */
.recepcao-caixa-cards-panel {
    box-sizing: border-box;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.recepcao-caixa-cards-panel .recepcao-caixa-card {
    flex: 1 1 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Garantir que o card de formas também respeita os limites */
.recepcao-caixa-cards-panel .recepcao-caixa-card-formas {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Alinhamento dos textos no card "Outros" */
.recepcao-caixa-outros-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.recepcao-caixa-outros-linha {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.recepcao-caixa-outros-label {
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: normal;
}

.recepcao-caixa-outros-valor {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    word-wrap: break-word;
    word-break: break-word;
}

@media (max-width: 1000px) {
    /* Em ecrãs pequenos, empilha (cards em cima, grid em baixo) */
    .recepcao-caixa-content {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .recepcao-caixa-left-panel {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: auto;
        min-width: 0 !important;
    }

    .recepcao-caixa-content > vaadin-grid {
        min-width: 0;
        width: 100%;
    }
}

/* Barra do topo quando a data selecionada não é hoje (indicação visual) */
.recepcao-caixa-view .recepcao-caixa-header-outro-dia {
    background: var(--pastel-orange-light, #FCEFE5);
    border-left: 4px solid var(--warning-color, #ffc107);
    border-radius: 8px;
    padding: 6px 12px 6px 14px;
}

.recepcao-tag-clinica,
.recepcao-tag-laboratorio,
.recepcao-tag-enfermagem {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
    box-shadow: var(--custom-box-shadow);
    width: 70px;
}

.recepcao-button-adicionar {
    /*display: flex;*/
    /*align-items: center;*/
    /*gap: 6px;*/
    /*padding: 6px 14px;*/
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
    box-shadow: var(--custom-box-shadow);

    background-color: #fde9a0;
    color: #5a4400;
    width: 80%;
}

.recepcao-button-adicionar:hover{
    cursor: pointer;
}

.recepcao-tag-clinica {
    background-color: #cce4f6;
    color: #0d3b66;
}

.recepcao-tag-laboratorio {
    background-color: #fde9a0;
    color: #5a4400;
}

.recepcao-tag-enfermagem {
    background-color: #c6f3e7;
    color: #004d40;
}

.recepcao-tag-clinica,
.recepcao-tag-laboratorio,
.recepcao-tag-enfermagem:hover{
    cursor: pointer;
}

.recepcao-agenda-div-middle {
    /*background-color: #f9f9f9;*/
    border-radius: 12px;
    box-shadow: var(--custom-box-shadow);
    overflow: hidden;
    padding: 0;
    margin: 0;
}

/* Container geral do conteúdo do meio da recepção */
.recepcao-agenda-middle-content {
    margin: 0;
    padding: 8px;
}

/* Coluna do Grid (esquerda) */
.recepcao-agenda-grid-container {
    width: 70%;
    height: 100%;
    border-radius: 10px;
    background-color: white;
    /*box-shadow: 1px 1px 6px #ddd;*/
    padding: 8px;
    margin: 0;
}

/* Coluna lateral (detalhes) */
.recepcao-agenda-detalhes-lateral {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #d4ecff;
    border-radius: 10px;
    padding: 8px;
    margin: 0;
    gap: 12px;
}

/* TextAreas */
.recepcao-agenda-detalhes-lateral vaadin-text-area {
    background-color: white;
    border-radius: 8px;
    box-shadow: var(--custom-box-shadow);
}

/* Estilo para o label dos text areas */
.recepcao-agenda-detalhes-lateral label {
    font-weight: 600;
    color: #003d66;
}

.recepcao-agenda-top-bar {
    /* Estilos para a barra superior da agenda */
}

.recepcao-agenda-bottom-bar {
    /* Estilos para a barra inferior da agenda */
}

.aba-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.recepcao-view {
    /*padding-top: 0 !important;*/
    margin-top: 0 !important;
    /*border: 1px solid blue;*/
    padding: 0;
}

.recepcao-agenda-view {
    margin-top: 0 !important;
    padding-top: 0 !important;
    width: 100%;
    height: 100%;
    background-color: var(--tab-background-active);
    /*border: 1px solid var(--cancelado-color-light);*/
}

.recepcao-agenda-top-layout {
    margin: 0;
    padding: 8px;
}

.recepcao-tabs-content {
    background-color: var(--tab-background-active);
    margin: 0 !important;
    padding: 8px !important;
    width: 100%;
    height: 100%;
    /*border: 1px solid red;*/
}

.info-text {
    display: flex;
    align-items: center;
    justify-content: center;
}

.recepcao-button-bar {
    display: flex;
    justify-content: space-between;
}

/* Painel lateral principal */
.recepcao-resumo-do-dia-panel {
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: var(--tab-background-active);
}

/* Botões de ação */
.recepcao-button-bar {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

/* Container do gráfico */
.recepcao-chart-view {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    box-sizing: border-box;
    overflow: hidden; /* evitar que o gráfico ultrapasse */
}

.recepcao-chart-container canvas {
    max-width: 100% !important;
    max-height: 100% !important;
    height: auto;
    width: auto;
    box-sizing: border-box;
}

/* Título e data no centro do gráfico */
.recepcao-chart-container h4,
.recepcao-chart-container h5 {
    margin: 4px 0;
    font-weight: 600;
    color: #1d2b3a;
}

/* Estatísticas do resumo */
.recepcao-stats-container {
    border-radius: 14px;
    padding: 0;
    box-shadow: var(--custom-box-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 14px;
}

/* Cada linha com ícone + texto */
.recepcao-stats-container .icon-text-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.resumo-do-dia-chart {
    width: 100%;
    height: 100%;
    padding: 16px;
}

/* Ícone de sininho com badge */
.alerta-button {
    position: relative;
}

.alerta-button:hover {
    cursor: pointer;
}

.bell-icon {
    font-size: 22px;
    color: var(--lumo-primary-text-color);
}

.alerta-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: red;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
    display: inline-block;
    box-shadow: var(--custom-box-shadow);
}

.recepcao-dash-content-wrapper {
    height: 100%;
}

/* Container que divide info e histórico */
.recepcao-paciente-split {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
}

/* Container do lado esquerdo */
.recepcao-paciente-left-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 20px;
    box-sizing: border-box; /* Garanta que este também tenha */
}

/* Wrapper para o scroll do formulário */
.recepcao-paciente-scroll-wrapper {
    flex-grow: 1; /* Faz ocupar o espaço vertical restante em 'left' */
    overflow: auto; /* Permite scroll interno */
    min-height: 0; /* Essencial para flex item com scroll */
    padding: 8px 0; /* Padding vertical */
    background-color: white;
    box-shadow: var(--custom-box-shadow);
    border-radius: 12px;
    box-sizing: border-box; /* <<<--- ADICIONE ESTA LINHA */
}

/* Formulário em si */
.recepcao-paciente-form {
    padding: 20px; /* Keep padding if you like the spacing */
    border-radius: 12px; /* Keep style */
    box-shadow: var(--custom-box-shadow);
    background-color: white; /* Keep style */
    /* Add box-sizing if keeping padding */
    box-sizing: border-box;
}

/* Ensure the card title doesn't prevent shrinking */
/* You might need to target the specific Card component generated by AppUtils */
/* For example, if it creates a div with a specific class: */
.your-card-class { /* Replace with actual class if needed */
    flex-shrink: 0; /* Prevent title card from shrinking */
}

/* Style for the read-only fields (looks fine) */
.dotted-read-only-text-field {
    /* border: 1px dotted #ccc; */
    border-radius: 4px;
    padding: 4px;
    font-size: 14px;
    color: #555;
    font-weight: bold;
}

/* Other styles seem okay... */
.recepcao-paciente-view {
    display: flex;
    flex-direction: column;
    /*background-color: #fefefe; !* Changed from #f0f2f5 in snippet? Use yours *!*/
    height: 100%;
}

.recepcao-paciente-topbar {
    background-color: var(--tab-background-active); /* Use your variable */
    height: 80px; /* Keep this */
    display: flex; /* Keep this */
    align-items: center; /* Keep this */
    justify-content: center; /* Keep this */
    font-weight: bold; /* Keep this */
    font-size: 18px; /* Keep this */
    flex-shrink: 0; /* Prevent topbar from shrinking */
}

.recepcao-paciente-main-layout {
    display: flex; /* Keep this */
    background-color: var(--tab-background-active); /* Use your variable */
    flex-grow: 1; /* Make the main layout fill remaining space below topbar */
    min-height: 0; /* Allow shrinking */
}

.recepcao-paciente-right-container {
    display: flex;
    flex-direction: column;
    height: 100%; /* Keep this */
    padding: 0 20px; /* Keep this */
    box-sizing: border-box; /* Add for consistency */
}

.recepcao-paciente-grid {
    position: relative; /* Necessário para posicionar o ::after */
    transition: opacity 0.2s ease-in-out; /* Opcional: transição suave */
    border-radius: 12px;
    border: none;
    box-shadow: var(--custom-box-shadow);
}

/* Estilo para a linha indicadora azul da aba selecionada */
/* Normalmente o Vaadin cuida disso, mas podemos garantir que não seja afetada pela opacidade da aba */
.custom-tabs > [selected] {
    color: var(--lumo-primary-text-color); /* Cor do texto da aba selecionada */
}

/* Estilo aplicado ao grid quando está vazio */
.grid-is-empty {
    opacity: 0.7; /* Deixa a estrutura do grid (linhas, etc.) um pouco mais clara */
    border-radius: 12px;
    border: none;
    box-shadow: var(--custom-box-shadow);
}

/* Mensagem sobreposta ao grid vazio */
.grid-is-empty::after {
    content: 'Sem dados para exibir'; /* Texto da mensagem */
    position: absolute;
    inset: 0; /* Ocupa todo o espaço do grid */
    display: flex; /* Para centralizar o texto */
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--lumo-secondary-text-color); /* Cor de texto secundária */
    font-size: var(--lumo-font-size-m);
    font-style: italic;
    background-color: rgba(255, 255, 255, 0.6); /* Fundo levemente branco para legibilidade */
    border-radius: 12px; /* Para acompanhar o border-radius do grid */
    z-index: 1; /* Garante que fique sobre o conteúdo interno do grid */
    pointer-events: none; /* Permite cliques através da mensagem (se necessário) */
}

.tab-is-empty {
    opacity: 0.4;
}

.tab-is-not-empty {
    opacity: 1;
    font-weight: bold;
}

.tab-is-empty[selected]::part(indicator) {
    color: var(--cinza-background);
}

.tab-is-not-empty[selected]::part(indicator) {
    color: var(--lumo-primary-color-50pct);
}

/*!* RECEPCAO EXAMES *!*/
.recepcao-exames-main-layout {
    display: flex;
    flex-grow: 1;
    height: 100%;
}

.recepcao-exames-topbar {
    /* Estilos para a barra superior dos exames */
}

.js-graph-view {
    display: flex;             /* <<< ADD THIS LINE */
    align-items: center;       /* <- Now this will work vertically */
    justify-content: center;   /* <- Now this will work horizontally */
    padding: 0; /* Ensure no padding pushes content */
    margin: 0;  /* Ensure no margin pushes content */
    box-sizing: border-box; /* Good practice */
}

.recepcao-exames-left-panel {
    /* Mantenha outras estilizações como background, borda (para debug), etc. */
    width: 100%; /* Isso pode ser definido em Java também */
    height: 100%; /* Definido em Java com setHeightFull */
    /*background-color: var(--tab-background-active);*/
    padding: 16px 8px;   /* Padding para espaçamento interno */
    margin: 0;
    box-sizing: border-box;
}

.grafico-exames {
    width: 100%;
    height: 100%;
    display: flex;
}

.resumo-entrega-stats {
    padding: 8px 12px;
    background-color: var(--lumo-base-color);
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0,0,0,0.05);
    font-size: var(--lumo-font-size-s);
}

.resumo-entrega-stats .linha-entrega {
    align-items: center;
    gap: 16px;
    margin-bottom: 6px;
    padding: 12px;
}

.resumo-entrega-stats .linha-entrega:last-child {
    margin-bottom: 0;
}

.recepcao-exames-left-panel .rodape-atualizacao {
    width: 100%; /* Ocupa largura para centralizar texto */
    text-align: center;
    margin-top: auto; /* Tenta empurrar para baixo */
    padding: 8px 0; /* Adiciona um respiro */
}

.recepcao-exames-left-panel .rodape-atualizacao.updated {
    transition: color 0.5s ease-out;
    color: var(--lumo-primary-text-color); /* Cor de destaque rápido */
}

.ultima-utilizacao-span {
    color: var(--inactive-text);
    font-size: var(--lumo-font-size-s);
    text-align: center;
    margin-bottom: 8px;
    display: block;
    font-style: italic;
}

/*Cuidados Enfermagem*/
.cuidados-enfermagem-main-layout {
    display: flex;
    flex-grow: 1;
    height: 100%;
    background-color: var(--tab-background-active);
}
/* full-screen container */
.cuidados-enf-agenda-container {
    width: 100%;
    height: 100%;
    background-color: var(--tab-background-active);
    padding: 8px;
}

/* the main split */
.cuidados-enf-agenda-main-layout {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: var(--tab-background-active);
}

/* left side: center contents */
.cuidados-enf-left-container {
    box-sizing: border-box;
    padding: var(--lumo-space-l);
    background-color: var(--tab-background-active);
}

/* right side: stack calendar + notifications */
.cuidados-enf-right-container {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: var(--tab-background-active);
}

/* calendar takes 70% of right panel */
.cuidados-enf-calendar-view {
    flex: 0 0 70%;
    background-color: white;
    border-radius: 12px;
    margin: 0;
}

/* notifications take 30% */
.cuidados-enf-notifications-view {
    flex: 0 0 30%;
    overflow: auto;
    background-color: var(--tab-background-active);
}

.cuidados-enf-historico-container {
    width: 100%;
    height: 100%;
    background-color: var(--tab-background-active);
    padding: 12px;
}

.cuidados-enf-paciente-view {
    width: 100%;
    height: 100%;
    background-color: var(--tab-background-active);
}

.cuidados-enf-paciente-painel-esquerdo {
    width: 100%;
    height: 100%;
    background-color: var(--tab-background-active);
    padding: 0 0 8px 12px;
}

.cuidados-enf-paciente-painel-direito {
    width: 100%;
    height: 100%;
    background-color: var(--tab-background-active);
    padding: 0 8px 8px 0;
}

.cuidados-enf-paciente-top-bar {
    width: 100%;
    height: 100%;
    background-color: var(--tab-background-active);
    padding: 12px;
}

.cuidados-enf-paciente-main-layout {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: var(--tab-background-active);
}

.cuidados-enf-paciente-content-layout {
    flex-grow: 1;
    background-color: var(--pastel-green-enferm-light);
    padding: 12px;
    box-sizing: border-box;
    border-radius: 12px;
}

/* Centraliza todo conteúdo da célula */
.cuidados-enf-paciente-view .chevron-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--cancelado-color);
}

/* pinta o fundo da linha selecionada com um tom leve */
.paciente-selecionado {
    background-color: var(--lumo-primary-color-10pct) !important;
}

.cuidados-enf-paciente-card {
    width: 100%;
    height: 100%;
    background-color: white;
    box-sizing: border-box;
    /*border-radius: 12px;*/
    box-shadow: var(--custom-box-shadow);
}

.round-button-empty {
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.servicos-medicos-paciente-view {
    width: 100%;
    height: 100%;
    background-color: var(--tab-background-active);
}

.servicos-medicos-consulta-view {
    width: 100%;
    height: 100%;
    background-color: var(--tab-background-active);
}

.paciente-info-view {
    width: 100%;
    height: 100%;
    align-content: center;
}

.paciente-info-view:hover {
    cursor: pointer;
}

/* cartão de informações do PacienteInfoView */
.paciente-info-view-div {
    width: 100%;
    height: 100%;

    /* layout em grade: 2 colunas   [rótulo | valor]  */
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: 4px;

    /* se quiser manter o visual antigo: */
    background: var(--lumo-base-color);
    border-radius: 12px;
    padding: 8px 12px;
    font-size: var(--lumo-font-size-s);
}

.consultas-nao-concluidas-view {
    width: 100%;
    height: 100%;
}

.consultas-nao-concluidas-grid {
    width: 100%;
    height: 100%;
}

.status-badge {
    display: inline-block;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-weight: bold;
    transition: transform 0.1s ease, filter 0.2s ease;
    cursor: default;
}
/* efeito hover */
.status-badge:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    cursor: pointer;
}


/* TextArea fantasma – ocupa todo o content, mas não força o card */
.read-only-ghost-textarea {
    background: transparent;
    width: 100%;
    outline: none;
    color: var(--lumo-secondary-text-color);
}

/* Para estilizar a "caixa" do TextArea */
.read-only-ghost-textarea::part(input-field) {
    background-color: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    /* etc. */
}

/* Para mostrar "sombra" ou "borda" quando focado */
.read-only-ghost-textarea::part(input-field):focus {
    box-shadow: var(--custom-box-shadow);
    /* ou border: 1px solid #...; */
}

.dialog-with-footer {
    padding: 0;
}

/* Badge redondo de fechar modal – padrão em todos os diálogos */
.modal-close-badge {
    --lumo-primary-color: #c62828;
    --lumo-primary-text-color: #fff;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    border-radius: 50%;
    background-color: #c62828;
    color: #fff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.15s ease, transform 0.1s ease;
}
.modal-close-badge:hover {
    background-color: #b71c1c;
}
.modal-close-badge:active {
    transform: scale(0.96);
}
.modal-close-badge vaadin-icon {
    width: 1.1rem;
    height: 1.1rem;
    color: #fff;
}

.cuidados-card-wrapper {
    max-height: 300px;
    height: auto; /* deixa crescer até o limite */
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative; /* necessário para ações flutuantes (lápis/editar) */
    overflow: hidden; /* impede que partes saiam do card */
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.cuidados-card-header {
    min-height: 40px;
    flex-shrink: 0;
    font-weight: bold;
    display: flex;
    align-items: center;
    z-index: 1;
    margin: 0;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    box-sizing: border-box;
}

.cuidados-card-scroller {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem 0.9rem;
    box-sizing: border-box;
}

/* quando o card tem um ícone flutuante (editar/adicionar), evita sobreposição no conteúdo */
.cuidados-card-wrapper.has-floating-action .cuidados-card-scroller {
    padding-bottom: 3rem;
}

.cuidados-card-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}

/* Estilo dos itens clicáveis */
.cuidados-label-clickable {
    background-color: #e9ecef;
    color: #0d6efd;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.9rem;
    text-align: center;
    padding: 0.2rem 0.2rem;
    /*margin: 0.8rem;*/
    margin-left: 0.8rem;
    margin-right: 0.8rem;
    transition: background-color 0.2s ease-in-out;
}

.cuidados-label-clickable:hover {
    background-color: #ced4da;
}

/* Ícones menores no footer */
.cuidados-card-footer .icon-button {
    padding: 0.25rem;
}

.cuidados-card-footer .custom-icon svg {
    max-height: 1.5em;
    max-width: 1.5em;
}

/* =========================
   Evoluções do Paciente
   ========================= */
.evolucao-item {
    position: relative;
    padding: 0.65rem 0.8rem 0.65rem 1.2rem;
    border-radius: 10px;
    border: 1px solid var(--lumo-contrast-10pct);
    background: rgba(255, 255, 255, 0.75);
    color: var(--lumo-body-text-color);
    text-align: left;
    box-sizing: border-box;
}

/* marcador tipo "timeline" */
.evolucao-item::before {
    content: "";
    position: absolute;
    left: 0.55rem;
    top: 0.85rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lumo-primary-color);
}

.evolucao-item__meta {
    display: block;
    font-size: var(--lumo-font-size-xs);
    font-weight: 600;
    color: var(--lumo-secondary-text-color);
    margin-bottom: 0.25rem;
}

.evolucao-item__texto {
    display: block;
    font-size: var(--lumo-font-size-s);
    line-height: 1.35;
    white-space: pre-wrap;
}

.evolucao-item--editable {
    cursor: pointer;
}

.evolucao-item--editable:hover {
    background: #ffffff;
    border-color: var(--lumo-primary-color-50pct);
}

/* =========================
   Itens padrão (cards Enfermagem)
   ========================= */
.cuidados-item {
    position: relative;
    padding: 0.65rem 0.8rem;
    border-radius: 10px;
    border: 1px solid var(--lumo-contrast-10pct);
    background: rgba(255, 255, 255, 0.75);
    color: var(--lumo-body-text-color);
    text-align: left;
    box-sizing: border-box;
}

.cuidados-item__meta {
    display: block;
    font-size: var(--lumo-font-size-xs);
    font-weight: 600;
    color: var(--lumo-secondary-text-color);
    margin-bottom: 0.25rem;
}

.cuidados-item__texto {
    display: block;
    font-size: var(--lumo-font-size-s);
    line-height: 1.35;
    white-space: pre-wrap;
}

.cuidados-item--clickable {
    cursor: pointer;
}

.cuidados-item--clickable:hover {
    background: #ffffff;
    border-color: var(--lumo-primary-color-50pct);
}

/* No ecrã de Procedimentos/Consulta (aba Consulta), os cards devem preencher o espaço
   como na consulta médica - sobrepõe max-height da regra base .cuidados-card-wrapper */
.cuidados-enf-proc-content-area .cuidados-card-wrapper {
    max-height: none;  /* anula max-height: 300px da regra base */
    width: 100%;
    min-width: 0;   /* permite shrink correto em flex */
    height: 100%;
    min-height: 0;
    flex: 1 1 0;   /* cresce para ocupar espaço disponível igualmente */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.cuidados-enf-proc-content-area .cuidados-card-scroller {
    min-height: 0; /* necessário para scroll correto dentro de flex */
    flex: 1;      /* conteúdo preenche o card */
}

/* span */
.no-content-placeholder {
    font-style: italic;
    color: var(--lumo-secondary-text-color);
    text-align: center;
    font-size: 0.7rem;
}

/* contêiner (ex.: VerticalLayout convertido em <div>) */
.no-content-placeholder-parent {
    display: flex;
    align-items: center;   /* centraliza verticalmente */
    justify-content: center; /* centraliza horizontalmente */
}

.condicoes-alergias-tabs{
    /*background-color: var(--tab-background-active);*/
    padding:0 !important;
    margin: 0;
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

/* não deixar sombra mesmo depois que o tema acrescenta outras cores */
.cuidados-card-wrapper.sem-sombra      { box-shadow:none !important; }
.cuidados-card-wrapper.sem-sombra::after,
.cuidados-card-wrapper.sem-sombra::before { box-shadow:none !important; }

/* quando usado como "página" queremos que tudo cresça */
.condicoes-alergias-card .cuidados-card-scroller{
    flex: 1 1 auto;
}

.condicoes-alergias-card {
    width: 100%;
    height: 100%;
    background-color: white;
    padding:0 !important;
    margin: 0;
    box-sizing: border-box;
}

.nota-mini-card {
    /*padding: var(--lumo-space-s);*/
    padding: 12px;
    border-radius: var(--lumo-border-radius-s);
    background: var(--lumo-base-color);
    box-shadow: var(--custom-box-shadow);
}

.nota-mini-header {
    font-weight: 600;
    color: var(--lumo-primary-text-color);
}

.nota-mini-body {
    border: 0;
    background:transparent;
    resize: none;
    padding: 0;
}

.cuidados-notas-card-scroller {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--lumo-space-m);   /* → espaço ENTRE os mini-cards            */
    box-sizing: border-box;

    /*  NOVO  – espaço ENTRE os mini-cards e as bordas do card-pai         */
    padding: var(--lumo-space-m);           /* top  right/left  bottom    */
}

.cuidados-enf-paciente-cards-layout {
    padding: 0 !important;
}

.cuidados-enf-proc-view {
    width: 100%;
    height: 100%;
    background-color: var(--tab-background-active);
}


/* --------------------------- painéis --------------------------- */
.cuidados-enf-proc-left-panel{
    background:var(--tab-background-active);
}

.cuidados-enf-proc-right-panel {
    background:var(--tab-background-active);
}

/* --------------------- cartão do paciente ---------------------- */
.cuidados-enf-proc-card-paciente{
    background:white;
    border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,.08);
    padding:20px;
    margin:12px auto;
    min-height:100px;            /* só para ocupar espaço por ora */
}

/* --------------------- textarea verde pálido ------------------- */
.cuidados-enf-proc-notas-privadas{
    --_lumo-text-field-background-color:#e9f7e9;
    border:1px dashed #9ab79a;
    border-radius:4px;
}

/* cadeado */
.cuidados-enf-proc-lock-icon{
    position:absolute;
    bottom:6px;
    right:8px;
    color:#4d4d4d;
    pointer-events:none;
}

/* -------------------- botão "Finalizar" ------------------------ */
.cuidados-enf-proc-btn-finalizar{
    background:#efbdbd;
    color:#702828;
    border:none;
    border-radius:24px;
    margin:40px 0 0 0;
    box-shadow:0 3px 8px rgba(0,0,0,.10);
}
.cuidados-enf-proc-btn-finalizar:hover{
    filter:brightness(1.05);
}

.card-shadow {
    box-shadow: var(--custom-box-shadow);
}

/* Grid da aba Consulta (Cuidados Enf): 2 linhas × 3 colunas iguais.
   Tamanho dos cards definido aqui para não mudar com outros estilos globais. */
.cuidados-enf-consulta-cards .cuidados-enf-proc-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    align-items: stretch;
    min-height: 0;
    width: 100%;
    padding: 4px;
    gap: 8px;
    box-sizing: border-box;
}

/* Cada card (slot) preenche a célula do grid e evita overflow */
.cuidados-enf-consulta-cards .cuidados-enf-proc-row > * {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.cuidados-enf-proc-row {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: stretch;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    padding: 4px;
    gap: 8px;
    box-sizing: border-box;
}

/* Slots dos cards na linha (Vaadin coloca cada filho num slot) */
.cuidados-enf-proc-row > * {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
}

.cuidados-enf-proc-content-area {
    background: var(--tab-background-active);
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0; /* permite que as linhas reduzam dentro do flex */
    flex: 1 1 0;
}

.cuidados-enf-proc-content-area > * {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
}

.component-disabled {
    pointer-events: none;
    opacity: 0.6;
    cursor: default;
    filter: grayscale(50%);
}

/* --- CuidadosEnfProcTabs --------------------------------- */
.proc-tabs {
    padding: 0;
    margin-bottom: 12px;
}

.proc-tabs::part(tabs) {
    display: flex;
    gap: 80px;
    padding: 0;
    margin: 0;
    min-height: 32px;
}

.proc-tabs::part(tab) {
    padding: 4px 12px;
    margin: 0;
}

.proc-tabs::part(indicator) {
    height: 2px;
    border-radius: 0;
}
/* --------------------------------------------------------- */

.fab-cuidados {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 50%; /* For the host element */
    background-color: var(--lumo-primary-color, #007bff); /* Use Lumo variable or your fallback */
    color: var(--lumo-primary-contrast-color, white); /* Use Lumo variable or your fallback */
    font-size: 1.8em; /* Increased slightly for visibility within the circle */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    z-index: 1000;
    padding: 0; /* Ensure host has no extra padding */
    border: none; /* Remove any host border if present */
    box-sizing: border-box; /* Good practice for the host */
    line-height: 1; /* Helps ensure consistent vertical alignment of the text */
    overflow: hidden; /* Prevents content from spilling out if font size is too large */
}

/* Target the internal parts of the vaadin-button to remove default padding/min-width */
.fab-cuidados::part(label) {
    padding: 0;
    margin: 0; /* Remove any default margins on the label part */
    line-height: 1; /* Ensure the label itself doesn't add extra height */
}

/* Vaadin buttons might have a min-width, try to override it */
.fab-cuidados {
    min-width: auto; /* Override default min-width */
}

/* Optional: Add a hover effect */
.fab-cuidados:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

.fab-cuidados:active {
    transform: scale(0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* styles.css ou themes/solifymed/styles.css */
.icon-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fade-out {
    opacity: 0 !important;
    transition: opacity 0.2s ease-out;
}

/* Forçar ícones customizados dentro de botões primários a usar currentColor (branco) */
vaadin-button[theme~="primary"] custom-icon.print-icon-primary,
vaadin-button[theme~="primary"] .print-icon-primary {
    color: var(--lumo-primary-contrast-color, #ffffff) !important;
}

vaadin-button[theme~="primary"] custom-icon.print-icon-primary svg,
vaadin-button[theme~="primary"] .print-icon-primary svg {
    fill: currentColor !important;
}

vaadin-button[theme~="primary"] custom-icon.print-icon-primary svg path,
vaadin-button[theme~="primary"] .print-icon-primary svg path {
    fill: currentColor !important;
}

.card-cuidados-descricao-textarea {
    min-height: 90px;
    border-radius: 8px;
    font-size: var(--lumo-font-size-m);
    box-sizing: border-box;
    backdrop-filter: blur(2px); /* opcional para dar leve efeito fosco */
    margin: 0;
}

.card-cuidados-observacoes-textarea {
    min-height: 90px;
    border-radius: 8px;
    font-size: var(--lumo-font-size-m);
    box-sizing: border-box;
    backdrop-filter: blur(2px);
    font-style: italic;
    margin: 0;
}

.card-cuidados-descricao-textarea::part(input-field),
.card-cuidados-observacoes-textarea::part(input-field) {
    padding: 0.5em 0.75em; /* ou ajuste como preferir */
}

.card-cuidados-descricao-textarea,
.card-cuidados-observacoes-textarea {
    margin-top: 0;
    margin-bottom: 0;
}

.card-cuidados {
    display: flex;
    flex-direction: column;
    gap: var(--lumo-space-s);
}

.card-cuidados-header {
    margin-bottom: var(--lumo-space-s);
}

.card-cuidados-box {
    border-radius: 12px;
    padding: 8px;
    box-shadow: var(--lumo-box-shadow-s);
    width: calc(50% - 8px);
    box-sizing: border-box;
    min-width: 360px;
    min-height: 240px; /* novo */
    display: flex;
    flex-direction: column;
    gap: var(--lumo-space-s);
}

.cuidados-scroll-area {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    overflow-y: auto;
    max-height: calc(100vh - 150px); /* ajuste conforme o espaço disponível abaixo dos tabs */
    padding-right: 8px; /* para espaço do scrollbar */
}

.btn-salvar-tudo-top {
    background-color: #cce5ff; /* Azul pastel claro */
    color: #004085;            /* Azul escuro para contraste */
    font-weight: 600;
    border-radius: 6px;
    padding: 6px 16px;
    transition: background-color 0.2s ease;
    margin-right: 24px;
}

.btn-salvar-tudo-top:hover {
    filter: brightness(0.95);
    cursor: pointer;
}

.cuidado-card-footer {
    padding: 0;
}

.card-cuidados-titulo {
    font-weight: 600;
    font-size: 1.15em;
    color:#2c3e50;
}

.badge-status {
    font-size: var(--lumo-font-size-s);
    background: rgba(0,0,0,.08);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Badge para tipo de amostra (único) */
.badge-amostra {
    background-color: #E3F2FD; /* azul claro */
    color: #0D47A1; /* azul escuro */
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
}

/* Badge para múltiplos tipos de amostras */
.badge-amostra-multiplos {
    background-color: #E1F5FE; /* azul claro */
    color: #0277BD; /* azul escuro */
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
}

.card-cuidados-fechar {
    background: transparent;
    border: none;
    font-size: 1.1em;
    cursor: pointer;
    color: #555;
    margin-left: var(--lumo-space-s);   /* pequeno respiro */
}

.btn-fechar-x {
    cursor: pointer;
    font-weight: bold;
    margin-left: auto;
    font-size: 18px;
    padding: 0 12px;
}

.btn-fechar-x:hover {
    filter: brightness(0.95);
    color: #d0021b;
}

.vertical-checkbox-group::part(group-field) {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Prioridades - cores e estilos */
.prioridade-normal {
    background-color: #e0e0e0;
    color: #333;
    font-size: 0.85em;
}

.prioridade-alta {
    background-color: #ffcc00;
    color: #000;
    font-size: 0.85em;
}

.prioridade-urgente {
    background-color: #ff5722;
    color: #fff;
    font-size: 0.85em;
}

.prioridade-muito-urgente {
    background-color: #d32f2f;
    color: #fff;
    font-size: 0.85em;
}

.prioridade-baixa {
    background-color: #c8e6c9;
    color: #2e7d32;
    font-size: 0.85em;
}

/* Segurança para nomes compostos com espaço (via replace no Java) */
.prioridade-muito-alta {
    background-color: #f57c00;
    color: #fff;
    font-size: 0.85em;
}

.prioridade-muito-baixa {
    background-color: #b2dfdb;
    color: #004d40;
    font-size: 0.85em;
}

/* Cards ativos com hover */
.cuidados-card-wrapper:hover:not(.card-desativado) {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-0.3px);
    transition: all 0.2s ease-in-out;
}

/* Estilo para cards desativados */
.card-desativado {
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(0.4);
    transition: opacity 0.3s ease;
}

.detalhes-consulta-enfermagem-dialog {
    width: 80vw;
    height: 90vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.consulta-page {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow-y: auto;     /* ✅ permite scroll vertical */
    overflow-x: hidden;   /* ✅ evita scroll horizontal */
    min-height: 0;        /* ✅ evita que as linhas cresçam indefinidamente */
}

.cuidados-page {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    box-sizing: border-box;
    overflow: auto;
}

.row {
    display: flex;
    flex: 1 1 0;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    padding-inline: .5rem;   /* mantém 0.5 rem só nos lados (opcional) */
}

.row + .row {
    margin-top: 0;           /* se quiser 4px → use 0.25rem            */
}

.row > * {
    flex: 1 1 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.cuidados-scroll-area {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.triagem-vermelho {
    background-color: #FFB3B3;
    color: #660000;
}

.triagem-laranja {
    background-color: #FFCC99;
    color: #994C00;
}

.triagem-amarelo {
    background-color: #FFFF99;
    color: #999900;
}

.triagem-verde {
    background-color: #99FF99;
    color: #006600;
}

.triagem-azul {
    background-color: #99BBFF;
    color: #003366;
}

.triagem-label {
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
    display: inline-block;
}

/* ====================
   Histórico (Recepção)
   ==================== */
.historico-dialog-layout {
    gap: 8px;
}

.historico-grid {
    --lumo-grid-border-color: var(--lumo-contrast-10pct);
}

.total-badge {
    display: inline-block;
    background: var(--lumo-primary-color-10pct);
    color: var(--lumo-primary-text-color);
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
}

.categoria-badge {
    display: inline-block;
    background: var(--lumo-contrast-10pct);
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 2px;
}

/* Badge base para status */
.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.6;
}

/* Mapeamento genérico: gera classes como .status-agendado, .status-concluido, etc */
.status-agendado {
    background-color: #d1ecf1 !important;
    color: #007bff !important;
}
.status-concluido {
    background-color: #d4edda !important;
    color: #28a745 !important;
}
.status-cancelado {
    background-color: #f8d7da !important;
    color: #dc3545 !important;
}
.status-em-andamento {
    background-color: #fff3cd !important;
    color: #856404 !important;
}
.status-pendente {
    background-color: #e2e3e5 !important;
    color: #6c757d !important;
}
.status-default {
    background-color: #e9ecef !important;
    color: #495057 !important;
}

/* Extras comuns encontrados no arquivo */
.status-em-analise { background-color: #fff3cd !important; color: #856404 !important; }
.status-internado { background-color: #dbeafe !important; color: #0d6efd !important; }
.status-alta { background-color: #e8f5e9 !important; color: #2e7d32 !important; }
.status-disponivel { background-color: #d4eaf7 !important; color: #0d6efd !important; }
.status-entregue { background-color: #e8f5e9 !important; color: #2e7d32 !important; }
.status-nao-entregue { background-color: #fce4ec !important; color: #c2185b !important; }

/* Status para parâmetros de exame laboratorial */
.status-ativo { background-color: #d4edda !important; color: #28a745 !important; }
.status-inativo { background-color: #e2e3e5 !important; color: #6c757d !important; }
.status-suspenso { background-color: #fff3cd !important; color: #856404 !important; }
.status-descontinuado { background-color: #f5f5f5 !important; color: #6c757d !important; }
.status-bloqueado { background-color: #f8d7da !important; color: #dc3545 !important; }
.status-em-falta { background-color: #fce4ec !important; color: #c2185b !important; }
.status-em-manutencao { background-color: #fff3cd !important; color: #856404 !important; }
.status-fora-de-servico { background-color: #f8d7da !important; color: #dc3545 !important; }
.status-retirado-paciente { background-color: #e8f5e9 !important; color: #2e7d32 !important; }
.status-disponivel-online { background-color: #d1ecf1 !important; color: #007bff !important; }
.status-entrega-domiciliar { background-color: #d4eaf7 !important; color: #0d6efd !important; }

/* 🧪 Estilos para a View de Configurações do Laboratório */
.lab-config-view {
    height: 100% !important;
    padding: 1rem !important;
    background: #fafafa !important;
}

.lab-config-view .secao {
    box-sizing: border-box !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 1rem !important;
}

.lab-config-view .parametros-section {
    background: #e8f5e8 !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.1) !important;
}

.lab-config-view .valores-referencia-section {
    background: #fff8e1 !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    box-shadow: 0 4px 8px rgba(255, 152, 0, 0.1) !important;
}

.lab-config-view .secao vaadin-grid {
    border-radius: 8px !important;
    overflow: hidden !important;
    background: white !important;
}

.lab-config-view .secao vaadin-form-layout {
    background: white !important;
    border-radius: 8px !important;
    padding: 1.5rem !important;
    margin-top: 1rem !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* Títulos das seções com layout inline para search e botão */
.lab-config-view .parametros-section .section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 0.5rem !important;
    padding: 0.25rem 0.5rem !important;
    background: rgba(76, 175, 80, 0.1) !important;
    border-radius: 6px !important;
}

.lab-config-view .parametros-section .section-title {
    font-weight: 700 !important;
    color: #2e7d32 !important;
    font-size: 1.1em !important;
    margin: 0 !important;
}

.lab-config-view .parametros-section .section-controls {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.lab-config-view .parametros-section .section-controls vaadin-text-field {
    background: white !important;
    border-radius: 8px !important;
    min-width: 250px !important;
    color: #333 !important;
}

.lab-config-view .parametros-section .section-controls vaadin-text-field::part(input-field) {
    background: white !important;
    color: #333 !important;
}

.lab-config-view .parametros-section .section-controls vaadin-text-field::part(input) {
    color: #333 !important;
}

.lab-config-view .parametros-section .section-controls vaadin-text-field::part(label) {
    color: #333 !important;
}

.lab-config-view .parametros-section .section-controls vaadin-button {
    background: #4caf50 !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3) !important;
}

.lab-config-view .parametros-section .section-controls vaadin-button:hover {
    background: #388e3c !important;
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.4) !important;
}

.lab-config-view .valores-referencia-section::before {
    content: "📊 Valores de Referência" !important;
    display: block !important;
    font-weight: 700 !important;
    color: #f57c00 !important;
    margin-bottom: 0.5rem !important;
    font-size: 1.1em !important;
    text-align: center !important;
    padding: 0.25rem 0.5rem !important;
    background: rgba(255, 152, 0, 0.1) !important;
    border-radius: 6px !important;
}

/* Melhorar espaçamento geral */
.lab-config-view vaadin-vertical-layout {
    gap: 1rem !important;
}

.lab-config-view vaadin-horizontal-layout {
    gap: 1rem !important;
}

/* Agendamento Slide View - Layout de slide lateral */
.agendamento-slide-view {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 90% !important;
    height: 100vh !important;
    z-index: 1000 !important;
    background: white !important;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15) !important;
    transition: transform 0.3s ease-in-out !important;
    overflow-y: auto !important;
    border-left: 1px solid #e0e0e0 !important;
}

/* 
  SOLUÇÃO DEFINITIVA PARA DROPDOWNS - Z-INDEX GLOBAL
  Força todos os overlays do Vaadin a aparecerem acima de qualquer conteúdo
*/
vaadin-combo-box-overlay,
vaadin-select-overlay,
vaadin-context-menu-overlay,
vaadin-date-picker-overlay,
vaadin-multi-select-combo-box-overlay,
vaadin-list-box-overlay {
    z-index: 9999 !important;
}

/* 
  Aumenta o z-index do overlay do Dialog para que ele apareça sobre o AgendamentoFormView
*/
vaadin-dialog-overlay {
    z-index: 8000 !important;
}

/* 
  Garante que dropdowns abertos a partir de dialogs continuem acima do overlay do dialog
*/
vaadin-dialog-overlay vaadin-combo-box-overlay,
vaadin-dialog-overlay vaadin-select-overlay,
vaadin-dialog-overlay vaadin-date-picker-overlay,
vaadin-dialog-overlay vaadin-multi-select-combo-box-overlay,
vaadin-dialog-overlay vaadin-list-box-overlay {
    z-index: 9999 !important;
}

/* Ajusta o backdrop dos overlays para não ficar acima dos dropdowns */
vaadin-overlay-backdrop {
    z-index: 7500 !important;
}

/* Força todos os elementos de overlay do Vaadin */
[part="overlay"],
vaadin-overlay,
vaadin-overlay-content {
    z-index: 9999 !important;
}

/* FORÇA ATUALIZAÇÃO - Regra adicional para garantir que funcione */
vaadin-combo-box[opened] {
    z-index: 9999 !important;
}

vaadin-select[opened] {
    z-index: 9999 !important;
}

vaadin-date-picker[opened] {
    z-index: 9999 !important;
}

/* Força z-index em qualquer contexto */
*[part="overlay"] {
    z-index: 9999 !important;
}

/* Regra específica para MultiSelectComboBox */
vaadin-multi-select-combo-box[opened] {
    z-index: 9999 !important;
}

/* Overlay de fundo escuro quando o slide está aberto */
.agendamento-slide-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.3) !important;
    z-index: 999 !important;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.agendamento-slide-overlay.show {
    opacity: 1;
}

/* Animação de entrada */
.agendamento-slide-view.slide-in {
    transform: translateX(0) !important;
}

/* Animação de saída */
.agendamento-slide-view.slide-out {
    transform: translateX(100%) !important;
}

/* Ajustes para o conteúdo dentro do slide */
.agendamento-slide-view .main-layout {
    height: 100% !important;
    overflow-y: auto !important;
}

/* Garantir que dropdowns apareçam sobre o overlay do AgendamentoFormView */
.agendamento-slide-view vaadin-combo-box[opened] {
    z-index: 9999 !important;
}

.agendamento-slide-view vaadin-combo-box-overlay {
    z-index: 9999 !important;
}

/* Garantir que todos os overlays de dropdown apareçam sobre o slide */
.agendamento-slide-view .vaadin-combo-box-overlay,
.agendamento-slide-view .vaadin-select-overlay,
.agendamento-slide-view .vaadin-context-menu-overlay,
.agendamento-slide-view .vaadin-multi-select-combo-box-overlay,
.agendamento-slide-view .vaadin-date-picker-overlay {
    z-index: 9999 !important;
}

/* Responsividade - em telas menores, ocupar mais espaço */
@media (max-width: 768px) {
    .agendamento-slide-view {
        width: 95% !important;
    }
}

@media (max-width: 480px) {
    .agendamento-slide-view {
        width: 100% !important;
    }
}

/* ========================================
   ESTILOS PARA LANÇAMENTOS LAB - FILTROS
   ======================================== */

/* Busca rápida */
.quick-search-field {
    font-size: 16px;
    flex: 2 1 300px; /* Mais espaço para o campo de busca */
}

/* Remover bordas verdes do campo de busca */
.quick-search-field::part(input-field) {
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
}

.quick-search-field::part(input-field):focus {
    border-color: #007bff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

.quick-search-field::part(input-field):hover {
    border-color: #007bff !important;
}

/* Garantir que não há bordas verdes em nenhum estado */
.quick-search-field::part(input-field),
.quick-search-field::part(input-field):focus,
.quick-search-field::part(input-field):hover,
.quick-search-field::part(input-field):active {
    border-color: #ced4da !important;
    outline: none !important;
    box-shadow: none !important;
}

.quick-search-field::part(input-field):focus {
    border-color: #007bff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

.quick-search-field::part(input-field):hover {
    border-color: #007bff !important;
}

/* Remover bordas verdes de todos os ComboBox */
vaadin-combo-box::part(input-field) {
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
}

vaadin-combo-box::part(input-field):focus {
    border-color: #007bff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

vaadin-combo-box::part(input-field):hover {
    border-color: #007bff !important;
}

/* Layout horizontal dos filtros principais */
vaadin-horizontal-layout .filter {
    flex: 1 1 200px; /* Campos de filtro com tamanho flexível */
    min-width: 180px;
    max-width: 250px;
}


/* Checkbox filtrar por período */
.filtrar-periodo-checkbox {
    font-weight: 500;
    color: #333;
}

.filtrar-periodo-checkbox vaadin-checkbox::part(checkbox) {
    border-color: #007bff;
}

.filtrar-periodo-checkbox vaadin-checkbox[checked]::part(checkbox) {
    background-color: #007bff;
}

/* Label informativo */
.info-sem-data-label {
    font-size: 13px;
    color: #856404;
    font-weight: 500;
    padding: 10px 12px;
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: 6px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}


/* Layout das datas */
.dates-layout {
    gap: 12px;
}

/* Status de entrega - contador parcial */
.status-parcial {
    background-color: #fff3cd;
    color: #856404;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 13px;
    border: 1px solid #ffc107;
}

.status-nao-entregue {
    background-color: #f8d7da;
    color: #721c24;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 13px;
}

.status-entregue {
    background-color: #d4edda;
    color: #155724;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 13px;
}

.status-retirado,
.status-online,
.status-domiciliar {
    background-color: #d1ecf1;
    color: #0c5460;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 13px;
}

/* Responsivo */
@media (max-width: 992px) {
    vaadin-horizontal-layout .filter {
        flex: 1 1 180px;
        max-width: 200px;
    }
}

@media (max-width: 768px) {
    .dates-layout {
        flex-direction: column;
    }
    
    .quick-search-field {
        font-size: 14px;
        flex: 1 1 100%;
    }
    
    vaadin-horizontal-layout {
        flex-direction: column;
    }
    
    vaadin-horizontal-layout .filter {
        flex: 1 1 100%;
        min-width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .quick-search-field {
        font-size: 13px;
    }
}

/* Estados de foco e hover */
.filter:focus-within {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

vaadin-combo-box.filter:hover::part(input-field),
vaadin-text-field.filter:hover::part(input-field),
vaadin-date-picker.filter:hover::part(input-field) {
    border-color: #007bff;
}


/* Animações */
.filtrar-periodo-checkbox vaadin-checkbox {
    transition: all 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark Mode Support (futuro) */
@media (prefers-color-scheme: dark) {
    .filtros-avancados-layout {
        background-color: #2d3748;
        border-color: #4a5568;
    }
    
    .info-sem-data-label {
        background-color: #4a5568;
        border-left-color: #ecc94b;
        color: #e2e8f0;
    }
    
}

/* ===========================================
   CUSTOM LOADING INDICATOR - SOLIFYMED LOGO
   =========================================== */

.v-loading-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: auto;
    z-index: 2147483647;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadein 0.3s ease-out;
}

.v-loading-indicator::before {
    content: '';
    width: 80px;
    height: 80px;
    background: url('../../assets/SVG/logo.svg') no-repeat center;
    background-size: 60px 60px;
    border: none;
    animation: solifymed-spin 2s linear infinite;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

/* Animação de rotação suave para o logo */
@keyframes solifymed-spin {
    0% { 
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
    50% { 
        transform: rotate(180deg) scale(1.05);
        opacity: 0.9;
    }
    100% { 
        transform: rotate(360deg) scale(1);
        opacity: 1;
    }
}

/* Animação de entrada suave */
@keyframes fadein {
    0% { 
        opacity: 0;
        background: rgba(255, 255, 255, 0);
    }
    100% { 
        opacity: 1;
        background: rgba(255, 255, 255, 0.95);
    }
}

/* Versão alternativa com fundo escuro (descomente se preferir) */
/*
.v-loading-indicator {
    background: rgba(0, 0, 0, 0.8);
}

.v-loading-indicator::before {
    filter: brightness(0) invert(1) drop-shadow(0 4px 8px rgba(255, 255, 255, 0.1));
}
*/


/* ==========================
   Gestor de Documentos (cards)
   ========================== */
.solify-doc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--lumo-space-m);
    width: 100%;
    padding-left: var(--lumo-space-m);
}

@media (max-width: 768px) {
    .solify-doc-grid {
        grid-template-columns: 1fr;
    }
}

.solify-doc-card {
    background-color: var(--lumo-base-color);
    border: 1px solid var(--lumo-contrast-10pct);
    border-radius: var(--lumo-border-radius-l);
    padding: var(--lumo-space-l);
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.solify-doc-card__title {
    margin: 0;
}

.solify-doc-card__desc {
    margin: var(--lumo-space-xs) 0 0 0;
    color: var(--lumo-secondary-text-color);
}