/* public/css/style.css - Design System único e responsivo */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;600;800&display=swap');

:root {
    --azul: #03A6A6;
    --azul-escuro: #028585;
    --violeta: #432E8C;
    --indigo-900: #432E8C;
    --fuchsia-900: #03635F;
    --emerald-400: #3FE0AE;
    --emerald-500: #04BF8A;
    --slate-50: #F2F2F2;
    --slate-200: #e2e8f0;
    --slate-500: #64748b;
    --slate-800: #1e293b;
    --slate-900: #0D0D0D;
    --white: #ffffff;
    --nav-width: 260px;
    --topbar-height: 72px;
    --bottom-nav-height: 64px;

    /* ---- Design tokens "Clay + Bento" (claymorphism suave + grade bento) ---- */
    --clay-radius-lg: 5px;    /* padrão do produto: 5px em tudo */
    --clay-radius-md: 5px;
    --clay-radius-sm: 5px;
    --clay-radius-pill: 5px;
    --clay-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 16px 32px -14px rgba(76, 29, 149, 0.22);
    --clay-shadow-hover: 0 4px 10px rgba(15, 23, 42, 0.06), 0 22px 40px -14px rgba(76, 29, 149, 0.28);
    --clay-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 16px -8px rgba(76, 29, 149, 0.18);
    --clay-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    --clay-gradient: linear-gradient(135deg, var(--azul) 0%, var(--violeta) 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* O atributo "hidden" precisa vencer qualquer "display" definido por classe abaixo.
   Sem isto, um elemento com hidden (ex: a pré-visualização de imagem) continua
   aparecendo na tela. */
[hidden] { display: none !important; }

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--slate-50);
    color: var(--slate-900);
}

h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', sans-serif; }

a { color: inherit; }

/* =========================================================
   Identidade visual - fundo escuro premium (login, banner)
   ========================================================= */
.bg-premium-dark {
    background: linear-gradient(to bottom right, var(--indigo-900), var(--fuchsia-900));
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
}
.text-emerald { color: var(--emerald-400); }

.bg-login {
    background-image: linear-gradient(to bottom right, rgba(49, 46, 129, 0.85), rgba(112, 26, 117, 0.85)), url('../../assets/IMG/login_background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.glow-fuchsia, .app-banner-glow-1 {
    position: absolute; top: 0; right: 0; width: 15rem; height: 15rem;
    background: #03A6A6; border-radius: 50%; filter: blur(80px); opacity: 0.4; z-index: 0;
}
.glow-blue, .app-banner-glow-2 {
    position: absolute; bottom: 0; left: 0; width: 15rem; height: 15rem;
    background: #04BF8A; border-radius: 50%; filter: blur(80px); opacity: 0.4; z-index: 0;
}

.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Placa clara atrás do logo. O arquivo do logo tem o "Assistência e" em
   violeta escuro e foi feito para fundo branco: sobre card escuro ele some.
   A placa devolve o contraste original sem precisar manter uma segunda versão
   do arquivo, que inevitavelmente sairia de sincronia com a primeira. */
.logo-placa {
    display: inline-block;
    padding: 14px 22px;
    background: #fff;
    border-radius: var(--clay-radius-md, 5px);
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5);
}
.logo-placa img { display: block; width: 100%; height: auto; }

.glass-card-light {
    background: #ffffff; border: 1px solid rgba(226, 232, 240, 0.7);
    box-shadow: var(--clay-shadow), var(--clay-inset); border-radius: var(--clay-radius-lg);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* =========================================================
   Botões e formulários (base clara - usado no conteúdo do app)
   ========================================================= */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.75rem 1.5rem; border-radius: var(--clay-radius-pill); font-weight: 600; text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.9rem;
}
.btn-primary { background: var(--clay-gradient); color: var(--white); box-shadow: var(--clay-shadow-sm); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--clay-shadow-hover); }
.btn-secondary { background: var(--slate-900); color: var(--white); box-shadow: var(--clay-shadow-sm); }
.btn-secondary:hover { background: #1e293b; transform: translateY(-2px); }
.btn-outline { background: #fff; border: 1.5px solid var(--slate-200); color: var(--slate-800); }
.btn-outline:hover { border-color: var(--azul); color: var(--azul); transform: translateY(-1px); }
.btn-danger { background: #fef2f2; color: #dc2626; }
.btn-danger:hover { background: #fee2e2; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.8rem; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }

.form-group { margin-bottom: 1.1rem; }
.form-label { display: block; margin-bottom: 0.4rem; font-weight: 600; font-size: 0.85rem; color: var(--slate-800); }
.form-input, .form-select, .form-textarea {
    width: 100%; padding: 0.7rem 1rem; border-radius: var(--clay-radius-sm);
    border: 1.5px solid var(--slate-200); background: #fff; color: var(--slate-900);
    font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1); }
.form-textarea { resize: vertical; min-height: 90px; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--emerald-500); }

/* Formulário sobre fundo escuro (login) */
.bg-premium-dark .form-label { color: #fff; }
.bg-premium-dark .form-input {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); color: #fff;
}
.bg-premium-dark .form-input:focus { border-color: var(--emerald-400); }
.bg-premium-dark .form-input::placeholder { color: rgba(255,255,255,0.5); }

.alert { padding: 0.85rem 1rem; border-radius: 5px; font-size: 0.88rem; margin-bottom: 1rem; }
.alert-error { background: rgba(239, 68, 68, 0.12); border: 1px solid #ef4444; color: #b91c1c; }
.alert-success { background: rgba(16, 185, 129, 0.12); border: 1px solid #04BF8A; color: #047857; }
.bg-premium-dark .alert-error { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.bg-premium-dark .alert-success { background: rgba(16, 185, 129, 0.2); border-color: #04BF8A; color: #6ee7b7; }

/* =========================================================
   Login
   ========================================================= */
.login-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.login-box { width: 100%; max-width: 400px; padding: 2.5rem; border-radius: 5px; position: relative; z-index: 10; }
.cadastro-box { max-width: 600px !important; }
.logo-text { text-align: center; font-size: 1.75rem; font-weight: 800; color: #fff; margin-bottom: 2rem; font-family: 'Outfit', sans-serif; }

/* =========================================================
   APP SHELL - layout responsivo compartilhado
   ========================================================= */
.app-shell { min-height: 100vh; }

.app-main {
    min-height: 100vh;
    padding-bottom: calc(var(--bottom-nav-height) + 2rem);
}

.app-content {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 1rem 1rem;
}

/* ---- Topbar (avatar, saudação, notificações) ---- */
.app-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.25rem; padding: 1rem;
    max-width: 640px; margin-left: auto; margin-right: auto;
}
.app-header-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.avatar {
    width: 48px; height: 48px; border-radius: 50%; background: #dbeafe;
    border: 2px solid var(--azul); display: flex; align-items: center; justify-content: center; overflow: hidden;
    box-shadow: var(--clay-shadow-sm);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 38px; height: 38px; border-width: 2px; flex-shrink: 0; }
.app-header-conta {
    display: flex; align-items: center; gap: 0.55rem; text-decoration: none;
    padding: 0.3rem 0.5rem 0.3rem 0.7rem; border-radius: 5px;
    transition: background 0.15s ease;
}
.app-header-conta:hover { background: #f1f5f9; }
.app-header-conta-texto { display: flex; flex-direction: column; text-align: right; line-height: 1.25; }
.app-header-conta-texto strong { font-size: 0.85rem; color: #1e293b; }
.app-header-conta-texto span { font-size: 0.7rem; color: #94a3b8; }
@media (max-width: 640px) { .app-header-conta-texto { display: none; } }
/* Nome+CRM some especificamente DENTRO da barra de navegação (não no
   .app-header-actions do tablet, que tem a barra só para si) entre 1024 e
   1599px — cobre 1280/1366/1440/1536, as larguras mais comuns de notebook,
   com Início + 7 grupos (conta admin, o pior caso) mais "Admin Fulano /
   CRM 00000" por extenso.
   Medido com o corte em 1600 (contido na própria barra, nunca a página):
   1280 -> ~160px sobrando · 1366 -> 106px · 1440 -> 32px · 1536 -> 0px.
   O corte não é em 1400 de propósito: testado, o texto reaparecia bem no
   meio da faixa mais usada e o 1440 piorava (114px) em vez de melhorar.
   A partir de 1600 sobra espaço de sobra e o nome volta por extenso. */
@media (min-width: 1024px) and (max-width: 1599.98px) {
    .app-nav-conta .app-header-conta-texto { display: none; }
}
.avatar-edit-btn {
    position: absolute; bottom: -2px; right: -2px; width: 28px; height: 28px; border-radius: 50%;
    background: var(--emerald-500); color: #fff; display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff; cursor: pointer; font-size: 0.85rem; box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: background 0.2s;
}
.avatar-edit-btn:hover { background: var(--emerald-400); }

.crm-loading {
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
    padding: 1.5rem 1rem; text-align: center;
}
.crm-spinner {
    width: 36px; height: 36px; border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.15); border-top-color: var(--emerald-500, #04BF8A);
    animation: crm-spin 0.8s linear infinite;
}
@keyframes crm-spin { to { transform: rotate(360deg); } }
.crm-progress {
    width: 100%; max-width: 280px; height: 6px; border-radius: 5px;
    background: rgba(255,255,255,0.12); overflow: hidden;
}
.crm-progress-bar {
    width: 40%; height: 100%; border-radius: 5px;
    background: var(--emerald-500, #04BF8A);
    animation: crm-progress-slide 1.4s ease-in-out infinite;
}
@keyframes crm-progress-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}
#crmCarregandoMsg { color: #cbd5e1; font-size: 0.85rem; margin: 0; min-height: 1.2em; }
.crm-overlay {
    position: absolute; inset: 0; background: rgba(15, 23, 42, 0.92);
    display: flex; align-items: center; justify-content: center;
    border-radius: 5px; z-index: 30;
}
.crm-status-fundo {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.85rem;
    border-radius: 5px; font-size: 0.8rem; margin-bottom: 1rem; line-height: 1.4;
}
.crm-status-pendente { background: rgba(255,255,255,0.08); color: #cbd5e1; border: 1px solid rgba(255,255,255,0.15); }
.crm-status-ok { background: rgba(16,185,129,0.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.35); }
.crm-status-erro { background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.35); }
.crm-spinner-sm {
    width: 14px; height: 14px; min-width: 14px; border-radius: 50%; display: inline-block;
    border: 2px solid rgba(255,255,255,0.25); border-top-color: currentColor;
    animation: crm-spin 0.8s linear infinite;
}
.notification-btn {
    position: relative; width: 40px; height: 40px; border-radius: 50%;
    background: #F2F2F2; border: none; display: flex; align-items: center; justify-content: center; color: #475569;
    text-decoration: none; box-shadow: var(--clay-shadow-sm), var(--clay-inset); transition: transform 0.2s ease;
}
.notification-btn:hover { transform: translateY(-1px); }
/* .nav-backdrop: elemento ainda existe no DOM (includes/sidebar.php), sem uso
   visual hoje — display:none o mantém inerte. O botão .nav-hamburger que ele
   apoiava foi removido de header.php (era sempre display:none, morto desde
   que o menu desktop virou barra horizontal — nada renderizava com ele). */
.nav-backdrop { display: none; }
.notification-dot {
    position: absolute; top: 8px; right: 8px; width: 10px; height: 10px;
    background: #ef4444; border-radius: 50%; border: 2px solid #fff;
}
.page-title { font-size: 1.5rem; font-weight: 700; color: #1e293b; line-height: 1.2; }
.page-subtitle { font-size: 0.875rem; font-weight: 500; color: #64748b; margin: 0; }

/* ---- Navegação: barra inferior no mobile / sidebar no desktop ---- */
/* Barra inferior no mesmo desenho da BarraAbas do app (mobile/src/componentes):
   pílula flutuante, descolada das bordas, com sombra roxa da marca. */
.app-nav {
    position: fixed; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 50;
    display: flex; justify-content: space-around; align-items: center;
    height: var(--bottom-nav-height);
    background: #fff; border: none;
    border-radius: var(--clay-radius-pill);
    box-shadow: 0 -4px 16px rgba(45, 30, 99, 0.10), 0 8px 24px -12px rgba(45, 30, 99, 0.22);
}
.app-nav-brand { display: none; }
.app-nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.15rem; text-decoration: none; color: #94a3b8; font-size: 0.65rem; font-weight: 600;
    flex: 1; padding: 0.4rem 0;
    transition: color 0.18s ease;
}
.app-nav-item i { font-size: 1.3rem; }
/* Ativo em roxo (primária do app), não verde: a bola da BarraAbas é roxa. */
.app-nav-item.active { color: var(--violeta); }
.app-nav-item.active i {
    background: #ECE8F6; border-radius: var(--clay-radius-pill);
    padding: 0.15rem 0.7rem;
}
.app-nav-toggle-more {
    background: none; border: none; cursor: pointer; font-family: inherit;
}

/* Painel "Mais" no mobile: escondido por padrão, some por cima da barra quando aberto */
.app-nav-more {
    display: none;
    position: fixed; left: 0.75rem; right: 0.75rem; bottom: calc(var(--bottom-nav-height) + 1.5rem);
    z-index: 49; background: #fff; border-radius: var(--clay-radius-lg); border: 1px solid var(--slate-200);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); padding: 0.5rem; flex-direction: column;
    max-height: 60vh; overflow-y: auto;
}
.app-nav-more.open { display: flex; }
.app-nav-more .app-nav-item {
    flex-direction: row; justify-content: flex-start; gap: 0.75rem;
    padding: 0.75rem 1rem; font-size: 0.85rem; color: #475569;
}
.app-nav-more .app-nav-item i { font-size: 1.15rem; }
.app-nav-spacer { display: none; }
/* Cluster de conta (notificação+avatar+sair) dentro da barra: só existe no
   DESKTOP. No celular a barra é a pílula de baixo — notificação/avatar/sair
   moram em .app-header (a única barra de cima lá), não aqui. */
.app-nav-conta { display: none; }

/* Banner / destaques / grids / cards (reaproveitados em várias páginas) */
.app-banner {
    background: var(--clay-gradient);
    border-radius: var(--clay-radius-lg); padding: 1.25rem; color: #fff; margin-bottom: 1.25rem;
    position: relative; overflow: hidden; box-shadow: var(--clay-shadow-hover); text-align: center;
}
.app-banner--marketing {
    padding: 0;
    background: #0D0D0D;
    aspect-ratio: 1200 / 280;
    max-height: 280px;
}
.app-banner--marketing img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.app-banner--fallback { min-height: 140px; display: flex; align-items: center; justify-content: center; }

/* Slider de marketing */
.mkt-slider {
    position: relative;
    border-radius: var(--clay-radius-lg);
    overflow: hidden;
    box-shadow: var(--clay-shadow-hover);
    background: #0D0D0D;
    aspect-ratio: 1200 / 280;
    max-height: 280px;
    margin-bottom: 1.25rem;
}
.mkt-slider-track { position: relative; width: 100%; height: 100%; }
.mkt-slider-slide {
    position: absolute; inset: 0;
    opacity: 0; transition: opacity 0.55s ease; pointer-events: none;
}
.mkt-slider-slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.mkt-slider-slide img,
.mkt-slider-slide a {
    display: block; width: 100%; height: 100%;
}
.mkt-slider-slide img { object-fit: cover; }
.mkt-slider-dots {
    position: absolute; left: 0; right: 0; bottom: 0.55rem;
    display: flex; justify-content: center; gap: 0.35rem; z-index: 2;
}
.mkt-slider-dot {
    width: 8px; height: 8px; border-radius: 5px; border: none;
    background: rgba(255,255,255,0.45); cursor: pointer; padding: 0;
    transition: background 0.2s, transform 0.2s;
}
.mkt-slider-dot.is-active { background: #fff; transform: scale(1.15); }

.mkt-size-box {
    display: flex; gap: 0.85rem; align-items: flex-start;
    background: #F2F2F2; border: 1px solid #e2e8f0; border-radius: var(--clay-radius-md);
    padding: 0.9rem 1rem; margin-bottom: 0.25rem;
}
.mkt-size-box strong { display: block; font-size: 0.88rem; color: #0D0D0D; margin-bottom: 0.25rem; }
.mkt-size-box p { margin: 0; font-size: 0.82rem; color: #475569; line-height: 1.45; }
.mkt-size-icon {
    width: 42px; height: 42px; border-radius: 5px; flex-shrink: 0;
    background: #ECE8F6; color: #4f46e5; display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
}
.mkt-preview .mkt-slider { margin-bottom: 0; }

.section-title { font-size: 0.875rem; font-weight: 700; color: #1e293b; margin-bottom: 0.75rem; padding: 0 0.25rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 1rem; }

.card-lg {
    background: #fff; padding: 1rem; border-radius: var(--clay-radius-md); border: none;
    box-shadow: var(--clay-shadow-sm), var(--clay-inset); text-decoration: none; display: flex; flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-lg:hover { box-shadow: var(--clay-shadow-hover), var(--clay-inset); transform: translateY(-2px); }
.card-lg:active { transform: scale(0.97); transition: 0.15s; }
.card-sm {
    background: #fff; padding: 0.65rem; border-radius: var(--clay-radius-sm); border: none;
    box-shadow: var(--clay-shadow-sm), var(--clay-inset); text-decoration: none; display: flex; flex-direction: column; align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-sm:hover { box-shadow: var(--clay-shadow-hover), var(--clay-inset); transform: translateY(-2px); }
.card-sm:active { transform: scale(0.95); transition: 0.15s; }

.icon-box-lg {
    width: 48px; height: 48px; border-radius: 5px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 0.75rem; font-size: 1.5rem; box-shadow: var(--clay-inset), 0 4px 10px -4px rgba(15,23,42,0.15);
}
.icon-box-sm {
    width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin-bottom: 0.375rem; font-size: 1rem; box-shadow: var(--clay-inset), 0 3px 8px -3px rgba(15,23,42,0.15);
}

.c-indigo { background: #ECE8F6; color: #4f46e5; }
.c-fuchsia { background: #fdf4ff; color: #c026d3; }
.c-blue { background: #eff6ff; color: #03A6A6; }
.c-red { background: #fef2f2; color: #dc2626; }
.c-amber { background: #fffbeb; color: #d97706; }
.c-orange { background: #fff7ed; color: #ea580c; }
.c-slate { background: #f1f5f9; color: #475569; }
.c-emerald { background: #ecfdf5; color: #04BF8A; }
.c-purple { background: #faf5ff; color: #9333ea; }
.c-rose { background: #fff1f2; color: #e11d48; }
.c-neutral { background: #f5f5f5; color: #525252; }
.c-cyan { background: #ecfeff; color: #0891b2; }

.text-card-title { font-size: 0.875rem; font-weight: 700; color: #1e293b; line-height: 1.2; }
.text-card-sub { font-size: 0.625rem; color: #64748b; font-weight: 500; margin-top: 0.25rem; }
.text-card-sm-title { font-size: 0.6875rem; font-weight: 700; color: #1e293b; text-align: center; line-height: 1.2; }

.shift-card { background: var(--clay-gradient); border-radius: var(--clay-radius-md); padding: 1rem; color: #fff; text-decoration: none; display: block; box-shadow: var(--clay-shadow-sm); }
.shift-card-empty {
    background: #F2F2F2; border: 1.5px dashed var(--slate-200); border-radius: var(--clay-radius-md); padding: 1rem;
    display: flex; align-items: center; gap: 0.75rem; text-decoration: none;
}

/* Cartões de estatística (usados em plantões, perfil, admin) */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; }
.stat-card {
    background: #fff; border: none; border-radius: var(--clay-radius-md); padding: 1.1rem 1rem;
    box-shadow: var(--clay-shadow-sm), var(--clay-inset); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--clay-shadow-hover), var(--clay-inset); }
.stat-card .stat-value {
    font-size: 1.5rem; font-weight: 800; font-family: 'Outfit', sans-serif;
    background: var(--clay-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-card .stat-label { font-size: 0.72rem; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }

/* ---- Bento grid: mosaico de blocos de tamanhos variados (dashboards) ---- */
.bento-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(110px, auto);
    gap: 0.85rem; margin-bottom: 1.25rem;
}
.bento-tile {
    background: #fff; border-radius: var(--clay-radius-md); padding: 1.1rem;
    box-shadow: var(--clay-shadow-sm), var(--clay-inset); display: flex; flex-direction: column; justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease; overflow: hidden; position: relative;
}
.bento-tile:hover { transform: translateY(-2px); box-shadow: var(--clay-shadow-hover), var(--clay-inset); }
.bento-tile.tile-accent { background: var(--clay-gradient); color: #fff; }
.bento-tile.tile-accent .stat-value { background: none; -webkit-background-clip: unset; color: #fff; }
.bento-tile.tile-wide { grid-column: span 2; }
.bento-tile.tile-tall { grid-row: span 2; }
.bento-tile.tile-lg { grid-column: span 2; grid-row: span 2; }
@media (max-width: 640px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .bento-tile.tile-lg, .bento-tile.tile-wide { grid-column: span 2; }
}

/* Tabelas responsivas */
.table-wrap { width: 100%; overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; min-width: 480px; }
table.data-table th { padding: 0.85rem 0.5rem; color: #64748b; text-align: left; font-size: 0.78rem; text-transform: uppercase; border-bottom: 2px solid var(--slate-200); }
table.data-table td { padding: 0.85rem 0.5rem; border-bottom: 1px solid var(--slate-200); font-size: 0.9rem; }
/* Nome em caixa alta só na exibição — o banco preserva a grafia original. */
table.data-table td.cell-nome { text-transform: uppercase; }

.badge { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 5px; font-size: 0.72rem; font-weight: 700; }
.badge-blue { background: #eff6ff; color: #03A6A6; }
.badge-green { background: #ecfdf5; color: #04BF8A; }
.badge-red { background: #fef2f2; color: #dc2626; }
.badge-amber { background: #fffbeb; color: #d97706; }
.badge-slate { background: #f1f5f9; color: #475569; }

.modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5);
    z-index: 100; align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.open { display: flex; }
.modal-box {
    background: #fff; border-radius: var(--clay-radius-lg); padding: 1.5rem 1.1rem 1.5rem 1.5rem; width: 100%; max-width: 480px;
    max-height: 90vh; overflow-y: auto; box-shadow: var(--clay-shadow-hover), var(--clay-inset);
    scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;
}
.modal-box h3 { margin-bottom: 1rem; }
.modal-box::-webkit-scrollbar { width: 7px; }
.modal-box::-webkit-scrollbar-track { background: transparent; }
.modal-box::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; }
.modal-box::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Estado vazio no padrão do app (mobile/src/componentes/Estados.js): ícone
   dentro de um círculo lavanda, título e descrição — em vez de ícone solto. */
.empty-state { padding: 2.5rem 1.5rem; text-align: center; }
.empty-state i {
    font-size: 1.9rem; display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; margin: 0 auto 0.9rem;
    background: #ECE8F6; color: var(--violeta);
    border-radius: var(--clay-radius-pill);
}
.empty-state strong {
    display: block; font-family: 'Outfit', sans-serif; font-size: 0.98rem;
    font-weight: 600; color: var(--slate-900); margin-bottom: 0.3rem;
}
.empty-state p { font-size: 0.88rem; color: var(--slate-500); line-height: 1.5; margin: 0; }

/* Chat de IA */
.chat-window { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.25rem 0 1rem; }
.chat-bubble { max-width: 85%; padding: 0.75rem 1rem; border-radius: var(--clay-radius-md); font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; }
.chat-bubble.user { align-self: flex-end; background: var(--clay-gradient); color: #fff; border-bottom-right-radius: 6px; box-shadow: var(--clay-shadow-sm); }
.chat-bubble.assistant { align-self: flex-start; background: #fff; border: none; box-shadow: var(--clay-shadow-sm), var(--clay-inset); border-bottom-left-radius: 6px; }
.chat-disclaimer { font-size: 0.72rem; color: #94a3b8; text-align: center; padding: 0.5rem 1rem; }

/* Markdown renderizado (respostas da IA) */
.markdown-body { line-height: 1.55; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { font-size: 1em; font-weight: 700; margin: 0.75em 0 0.35em; font-family: inherit; }
.markdown-body h1:first-child, .markdown-body h2:first-child, .markdown-body h3:first-child { margin-top: 0; }
.markdown-body p { margin: 0 0 0.6em; }
.markdown-body p:last-child { margin-bottom: 0; }
.markdown-body ul, .markdown-body ol { margin: 0 0 0.6em 1.25em; }
.markdown-body li { margin-bottom: 0.25em; }
.markdown-body strong { font-weight: 700; }
.markdown-body code { background: rgba(0,0,0,0.06); padding: 0.1em 0.3em; border-radius: 5px; font-size: 0.9em; }
.markdown-body hr { border: none; border-top: 1px solid var(--slate-200); margin: 0.75em 0; }
.chat-input-bar { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; background: #fff; border: 1px solid var(--slate-200); border-radius: 5px; position: sticky; bottom: calc(var(--bottom-nav-height) + 0.75rem); }
.chat-input-row { display: flex; gap: 0.5rem; align-items: flex-end; width: 100%; }
.chat-input-bar textarea { flex: 1; border: none; outline: none; resize: none; font-family: inherit; font-size: 0.9rem; max-height: 100px; }
.chat-bubble .chat-msg-image { max-width: 200px; max-height: 160px; border-radius: 5px; margin-bottom: 0.5rem; display: block; object-fit: cover; }
.chat-bubble.user .chat-msg-image { border: 2px solid rgba(255,255,255,0.4); }

/* Upload de imagem clínica */
.img-upload-widget { display: flex; flex-direction: column; gap: 0.65rem; }
.img-upload-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.img-upload-btn { cursor: pointer; margin: 0; }
.img-upload-btn input { display: none; }
.img-upload-preview { position: relative; display: inline-block; max-width: 220px; }
.img-upload-preview img { width: 100%; max-height: 160px; object-fit: contain; border-radius: 5px; border: 1px solid var(--slate-200); background: #F2F2F2; }
.img-upload-remove {
    position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%;
    background: #ef4444; color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.75rem;
}
.img-upload-context {
    width: 100%; border: 1px solid var(--slate-200); border-radius: 5px; padding: 0.6rem 0.75rem;
    font-family: inherit; font-size: 0.85rem; resize: vertical; min-height: 52px;
}
.img-upload-hint { font-size: 0.72rem; color: #94a3b8; margin: 0; }
.ia-analise-card { padding: 1.4rem; margin-bottom: 1.25rem; }
.ia-analise-loading { padding: 1.5rem 0; text-align: center; color: #64748b; font-size: 0.9rem; }
.ia-analise-loading i { font-size: 1.5rem; color: #03A6A6; display: block; margin-bottom: 0.4rem; }
.ia-analise-result { margin-top: 1rem; padding: 1rem; background: #F2F2F2; border-radius: 5px; border: 1px solid var(--slate-200); }

/* =========================================================
   DESKTOP (>= 1024px): sidebar fixa + área de conteúdo larga
   ========================================================= */
@media (min-width: 1024px) {
    .app-shell { display: block; }

    /* No DESKTOP o menu é uma BARRA HORIZONTAL no topo (era sidebar vertical
       em drawer). Cola no topo ao rolar (sticky) e cada grupo abre um dropdown
       flutuante — uma caixa branca única, não os itens soltos na coluna. */
    /* Barra CLARA e institucional (antes era var(--slate-900), o "bloco preto").
       Fundo branco, borda inferior discreta, sombra suave — cara de dashboard
       SaaS de saúde, não de painel antigo. Altura ~66px. */
    .app-nav {
        position: sticky; top: 0; left: 0; right: 0; bottom: auto;
        width: 100%; height: auto; min-height: 66px;
        flex-direction: row; justify-content: flex-start; align-items: center;
        gap: 0.15rem; padding: 0 1.25rem;
        background: #fff; border-radius: 0; margin: 0;
        border-bottom: 1px solid var(--slate-200);
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 6px 20px -12px rgba(67, 46, 140, 0.18);
        transform: none; overflow: visible; z-index: 100;
    }
    /* No desktop não há mais gaveta nem hambúrguer. */
    .nav-backdrop { display: none !important; }

    .app-nav-brand {
        display: flex; align-items: center; padding: 0 1rem 0 0.2rem; border-bottom: none;
    }
    .app-nav-brand img { height: 50px; width: auto; max-width: 190px; }

    /* Cada item é uma "pílula" flutuante de 40px, centrada na barra de 66px —
       não encosta no topo nem na base, jeito moderno de nav de dashboard.
       Padding enxuto (0.6rem, não 0.85rem) de propósito: com Início + 7
       grupos + o cluster de conta, a soma dos itens passava de 1570px — mais
       largo que o próprio notebook em 1280-1366px, obrigando a PÁGINA
       INTEIRA a rolar na horizontal. Cada rem cortado aqui multiplica por 8
       itens. */
    .app-nav-item {
        flex: none; flex-direction: row; align-items: center; gap: 0.35rem;
        height: 40px; padding: 0 0.55rem; margin: 0 1px;
        color: var(--slate-500); font-size: 0.84rem; font-weight: 600;
        border-radius: 9px; white-space: nowrap;
        transition: background-color 0.18s ease, color 0.18s ease;
    }
    .app-nav-item i {
        font-size: 1.02rem; background: none; padding: 0; border-radius: 0;
        color: #94a3b8; transition: color 0.18s ease;
    }
    /* Hover: leve véu roxo, ícone e texto acompanham. Nada de fundo escuro. */
    .app-nav-item:hover { background: #F4F1FB; color: var(--violeta); }
    .app-nav-item:hover i { color: var(--violeta); }
    /* Ativo: pílula roxo-clara + texto/ícone roxos (era o bloco verde de altura
       cheia). Componente de navegação moderno, não faixa. */
    .app-nav-item.active { background: #ECE8F6; color: var(--violeta); font-weight: 700; }
    .app-nav-item.active i { color: var(--violeta); }

    /* "Sair" continua discreto, mas o hover avisa que é ação de saída —
       vermelho suave, nunca chamativo em repouso. */
    .app-nav > a[href="logout.php"]:hover { background: #FDECEC; color: #DC2626; }
    .app-nav > a[href="logout.php"]:hover i { color: #DC2626; }

    /* Grupo (Plantões, Clínico…) — dropdown flutuante em caixa única.
       align-self:stretch mantém o grupo com a ALTURA CHEIA da barra (alvo de
       hover alto, e o dropdown abre encostado na base), mas o botão dentro é
       a mesma pílula de 40px dos itens simples — tudo alinhado.
       Prefixo `.app-nav` de propósito: o <style> inline do sidebar.php tem
       `.nav-grupo{display:block}` e é parseado DEPOIS deste arquivo, então
       venceria por ordem numa especificidade igual. Com `.app-nav .nav-grupo`
       (0,2,0) este flex ganha e os itens ficam alinhados na vertical. */
    .app-nav .nav-grupo { position: relative; display: flex; align-items: center; align-self: stretch; }
    .nav-grupo-botao { height: 40px; }
    .nav-grupo-seta { font-size: 0.7rem; transition: transform 0.18s ease; }
    .nav-grupo:hover .nav-grupo-seta,
    .nav-grupo.aberto .nav-grupo-seta { transform: rotate(180deg); }

    /* position:fixed, não absolute — de propósito, e não é enfeite.
       .app-nav ganhou overflow-x:auto (a rede de segurança contra a barra
       ficar mais larga que a tela). Regra do CSS: overflow-x diferente de
       "visible" faz o eixo Y ser tratado como auto também, MESMO sem
       overflow-y ter sido tocado — então um dropdown position:absolute,
       filho de .nav-grupo dentro dessa barra, era cortado por baixo assim
       que abria. É o "dropdown não funciona" que apareceu depois daquele
       fix. position:fixed escapa do corte (só ancestral com transform
       afetaria, e .app-nav não tem). Em troca, top/left não são mais
       relativos ao botão — o JS no fim do arquivo calcula e escreve as duas
       coordenadas a cada abertura (clique OU hover), tanto aqui quanto no
       cluster de conta. Sem JS, os itens do grupo continuam clicáveis por
       baixo do botão fechado — não ideal, mas não trava nada. */
    .nav-grupo-itens {
        display: none;
        position: fixed; top: 0; left: 0; min-width: 220px;
        background: #fff; border: 1px solid var(--slate-200); border-radius: 5px;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
        padding: 0.3rem; z-index: 110;
    }
    /* Abre no hover (natural num menu horizontal) e também quando o clique marca aberto. */
    .nav-grupo:hover .nav-grupo-itens,
    .nav-grupo.aberto .nav-grupo-itens { display: block; }
    .nav-grupo-itens .nav-subitem {
        display: block; padding: 0.55rem 0.75rem; border-radius: 5px;
        color: #334155; font-size: 0.88rem; opacity: 1; white-space: nowrap;
    }
    .nav-grupo-itens .nav-subitem:hover,
    .nav-grupo-itens .nav-subitem.active { background: #f1f5f9; color: #2D1E63; }

    .app-nav-toggle-more { display: none; }
    .app-nav-more {
        display: flex; position: static; flex-direction: row; flex: none;
        background: transparent; border: none; box-shadow: none; padding: 0; margin: 0;
        max-height: none; overflow: visible;
    }
    .app-nav-more .app-nav-item { padding: 0 0.8rem; font-size: 0.88rem; color: var(--slate-500); }
    .app-nav-spacer { display: block; flex: 1; }  /* empurra o cluster de conta para a direita */

    /* Cluster de conta entra na barra; a pílula solta de "Sair" (versão
       mobile, ao lado dos outros itens) sai — o ícone de sair já está no
       cluster. */
    .app-nav-conta { display: flex; align-items: center; gap: 0.5rem; flex: none; }
    .app-nav-item-sair-mobile { display: none; }

    /* Rede de segurança: se a soma dos itens ainda assim não couber (menu
       maior no futuro, nome de hospital longo em "Minha Empresa"...), É A
       BARRA que ganha rolagem própria — nunca a página inteira. Sem isto, um
       excesso de 1px já bastava para o body inteiro rolar na horizontal. */
    .app-nav { overflow-x: auto; scrollbar-width: none; }
    .app-nav::-webkit-scrollbar { display: none; }

    .app-main { padding-bottom: 0; }
    /* Antes esta barra tinha fundo/borda/sombra próprios — era a segunda
       caixa branca empilhada sob .app-nav ("dois headers"). Agora é só o
       título fluindo com a página: sem caixa, sem sombra, sem fundo. O
       cluster de conta (notificação/avatar/sair) já saiu daqui — mora em
       .app-nav-conta — então esconde a cópia mobile (.app-header-actions). */
    /* max-width/margin IGUAIS a .app-content, de propósito: são duas caixas
       empilhadas (título em cima, conteúdo embaixo) que precisam começar na
       mesma borda esquerda. Com .app-header em max-width:none (largura
       cheia) e .app-content centralizado em 1100px, o título ficava colado
       na quina esquerda da tela enquanto o card do conteúdo, mais estreito
       e centralizado, sobrava deslocado pra direita — o "título não bate
       com o conteúdo" em qualquer monitor mais largo que ~1100px+padding. */
    .app-header {
        max-width: 1100px; margin: 0 auto; padding: 1.75rem 2rem 0; border-bottom: none;
        background: transparent; box-shadow: none; margin-bottom: 0;
        display: flex; align-items: center; gap: 1rem;
    }
    .app-header-actions { display: none; }
    .app-content { max-width: 1100px; padding: 2rem; }

    /* .grid-4 NÃO é redefinido aqui — a regra base (repeat(4,1fr), acima)
       já vale. Antes tinha um repeat(6,1fr) nestas duas media queries: com
       6 colunas fixas, uma seção de 4 itens (Ações Rápidas, Medicações)
       deixava 2 colunas vazias na mesma linha, e a de 7 (Prática Médica)
       sobrava com 1 item sozinho numa segunda linha inteira — o "vazio,
       cada coisa no seu canto". Com 4 colunas as seções de 4 preenchem a
       linha inteira, a de 8 (Apoio a Diagnóstico) vira duas linhas parelhas
       (4+4), e só a de 7 sobra com 3/4 — bem menos torto que 1/6. */
    .grid-2 { grid-template-columns: repeat(4, 1fr); }
    .stat-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
    /* Mesmo motivo do breakpoint de 1024px: título e conteúdo precisam da
       mesma largura/margem pra começarem na mesma borda esquerda. */
    .app-header { max-width: 100%; margin: 0; padding: 1rem 1.5rem 0; }
    .app-content { max-width: 100%; padding: 0 1.5rem 1.5rem; }
    .stat-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Lista de conteúdo (bulário etc.): intro ≠ item + índice A–Z ---- */
.conteudo-intro {
    margin-bottom: 1rem;
    padding: 0 0.15rem 0.85rem;
    border-bottom: 1px solid #e2e8f0;
}
.conteudo-intro-label {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: #64748b;
}
.conteudo-intro-label i { font-size: 0.9rem; color: #4f46e5; }
.conteudo-intro-text {
    margin: 0.35rem 0 0; font-size: 0.88rem; color: #475569; line-height: 1.45;
    font-weight: 500;
}

.conteudo-busca-wrap {
    position: relative; margin-bottom: 1rem;
}
.conteudo-busca-wrap > i {
    position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%);
    color: #94a3b8; font-size: 1.05rem; pointer-events: none;
}
.conteudo-busca {
    width: 100%; padding: 0.75rem 1rem 0.75rem 2.4rem;
    border: 1.5px solid #e2e8f0; border-radius: 5px; background: #fff;
    font-size: 0.9rem; color: #0D0D0D; outline: none;
    box-shadow: var(--clay-shadow-sm);
}
.conteudo-busca:focus { border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,0.12); }

.conteudo-lista-layout {
    display: grid;
    grid-template-columns: 1fr 28px;
    gap: 0.5rem;
    align-items: start;
}
.conteudo-lista-main { min-width: 0; }

.conteudo-letra-grupo { margin-bottom: 1.15rem; scroll-margin-top: 1rem; }
.conteudo-letra-titulo {
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase; color: #6366f1;
    margin: 0 0 0.45rem 0.15rem;
}
.conteudo-letra-itens { display: flex; flex-direction: column; gap: 0.45rem; }

.conteudo-item {
    display: block; text-decoration: none;
    background: #fff; border-radius: var(--clay-radius-md);
    padding: 0.95rem 1.1rem;
    box-shadow: var(--clay-shadow-sm), var(--clay-inset);
    border-left: 3px solid #c7d2fe;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.conteudo-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--clay-shadow-hover), var(--clay-inset);
    border-left-color: #4f46e5;
}
.conteudo-item-titulo {
    display: block; font-size: 0.92rem; font-weight: 700; color: #0D0D0D; line-height: 1.3;
}
.conteudo-item-resumo {
    display: block; margin-top: 0.2rem; font-size: 0.8rem; color: #64748b; font-weight: 500;
}

.conteudo-busca-vazio {
    text-align: center; color: #94a3b8; font-size: 0.88rem; padding: 1.5rem 0.5rem;
}

.conteudo-az {
    position: sticky; top: 0.75rem;
    display: flex; flex-direction: column; align-items: center;
    gap: 1px; padding: 0.25rem 0;
    max-height: calc(100vh - 6rem); overflow-y: auto;
    scrollbar-width: none;
}
.conteudo-az::-webkit-scrollbar { display: none; }
.conteudo-az-letra {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 18px;
    font-size: 0.62rem; font-weight: 800; color: #4f46e5;
    text-decoration: none; border-radius: 5px; line-height: 1;
}
.conteudo-az-letra:hover { background: #ECE8F6; }
.conteudo-az-letra.is-disabled {
    color: #cbd5e1; font-weight: 600; cursor: default;
}

@media (max-width: 640px) {
    .conteudo-lista-layout { grid-template-columns: 1fr 22px; gap: 0.35rem; }
    .conteudo-az-letra { width: 18px; height: 16px; font-size: 0.58rem; }
}

/* ---- Receitas: tipos/cores + hub ---- */
.rx-hub {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 0.85rem; flex-wrap: wrap;
}
.rx-hub-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; }

.rx-tipo-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.65rem;
}
.rx-tipo-card {
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.85rem; border-radius: 5px; border: 2px solid #e2e8f0;
    background: #fff; cursor: pointer; position: relative;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.rx-tipo-card input { position: absolute; opacity: 0; pointer-events: none; }
.rx-tipo-card:has(input:checked) { box-shadow: 0 0 0 3px rgba(79,70,229,0.15); }
.rx-tipo-card--branca:has(input:checked) { border-color: #64748b; }
.rx-tipo-card--azul { border-color: #93c5fd; background: #eff6ff; }
.rx-tipo-card--azul:has(input:checked) { border-color: #028585; }
.rx-tipo-card--amarela { border-color: #fde047; background: #fefce8; }
.rx-tipo-card--amarela:has(input:checked) { border-color: #ca8a04; }
.rx-tipo-badge {
    display: inline-flex; align-self: flex-start;
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em;
    text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 5px;
    background: #f1f5f9; color: #334155;
}
.rx-tipo-card--azul .rx-tipo-badge { background: #dbeafe; color: #1e40af; }
.rx-tipo-card--amarela .rx-tipo-badge { background: #fef08a; color: #854d0e; }
.rx-tipo-label { font-size: 0.8rem; font-weight: 600; color: #0D0D0D; line-height: 1.35; }
.rx-tipo-nota { margin: 0.75rem 0 0; font-size: 0.8rem; color: #64748b; }

.rx-form.rx-tipo-azul .glass-card-light { border-left: 4px solid #03A6A6; }
.rx-form.rx-tipo-amarela .glass-card-light { border-left: 4px solid #ca8a04; }
.rx-form.rx-tipo-antimicrobiano .glass-card-light { border-left: 4px solid #0D0D0D; }
.rx-form.rx-tipo-simples .glass-card-light { border-left: 4px solid #94a3b8; }

.rx-modelo-card.rx-tipo-azul { border-left: 4px solid #03A6A6; }
.rx-modelo-card.rx-tipo-amarela { border-left: 4px solid #ca8a04; }
.rx-modelo-card.rx-tipo-antimicrobiano { border-left: 4px solid #0D0D0D; }
.rx-modelo-card.rx-tipo-simples { border-left: 4px solid #94a3b8; }

.rx-badge-branca { background: #f1f5f9; color: #334155; }
.rx-badge-azul { background: #dbeafe; color: #1e40af; }
.rx-badge-amarela { background: #fef08a; color: #854d0e; }

/* ---- Combobox com busca — componente único (public/js/combobox.js) ----
   Usado na especialidade (cadastro, perfil, admin, admin_usuarios) e no
   medicamento da receita. Sem JavaScript o campo nativo (<select> ou <input
   list>) aparece normalmente: quem esconde é o próprio script, adicionando
   .combobox-nativo depois de montar a busca no lugar. */
.combobox { position: relative; }
.combobox-nativo { display: none; }
.combobox-trigger {
    display: flex; align-items: center; gap: 0.35rem;
    position: relative;
}
.combobox-lupa {
    position: absolute; left: 0.85rem; z-index: 1; color: #94a3b8; pointer-events: none;
}
.combobox-busca {
    width: 100%;
    /* Espaço à esquerda pra lupa e à direita pro chevron (34px + 0.35rem de
       folga), senão o nome comprido passa por baixo do botão. */
    padding-left: 2.25rem; padding-right: 2.6rem;
}
.combobox-chevron {
    position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border: none; background: transparent;
    color: #64748b; cursor: pointer; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
}
.combobox-chevron:hover { background: #f1f5f9; color: #0D0D0D; }
.combobox-lista {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50;
    max-height: 240px; overflow-y: auto;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 5px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
    padding: 0.35rem;
}
.combobox-lista.aberta { display: block; }
.combobox-opcao {
    display: block; width: 100%; text-align: left; border: none; background: transparent;
    padding: 0.65rem 0.85rem; border-radius: 5px;
    font-family: inherit; font-size: 0.88rem; font-weight: 500;
    color: #0D0D0D; cursor: pointer;
}
.combobox-opcao:hover,
.combobox-opcao.destaque { background: #ECE8F6; color: #3730a3; }
.combobox-opcao.selecionada { background: #e0e7ff; color: #432E8C; font-weight: 700; }
.combobox-opcao--livre { font-style: italic; color: #047857; }
.combobox-vazio { padding: 0.75rem 0.85rem; color: #94a3b8; font-size: 0.82rem; }

/* Sobre fundo escuro (cadastro) — mesma convenção que .form-input já usa. */
.bg-premium-dark .combobox-chevron { color: #94a3b8; }
.bg-premium-dark .combobox-chevron:hover { background: rgba(255, 255, 255, 0.08); color: #e2e8f0; }
.bg-premium-dark .combobox-lista {
    background: #1e293b; border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.bg-premium-dark .combobox-opcao { color: #e2e8f0; }
.bg-premium-dark .combobox-opcao:hover,
.bg-premium-dark .combobox-opcao.destaque { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
.bg-premium-dark .combobox-opcao.selecionada { background: rgba(16, 185, 129, 0.25); color: #6ee7b7; }

/* ---- Montar medicamento (combo com busca) ---- */
.med-builder {
    background: #F2F2F2;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    padding: 1rem;
    margin-bottom: 1rem;
    overflow: visible;
}
.med-builder-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0.55rem;
    align-items: stretch;
}
.med-builder-nome {
    grid-column: 1 / -1;
    min-width: 0;
    position: relative;
    z-index: 20;
}
.med-builder-campo { min-width: 0; }
.med-builder-campo .form-input,
.med-builder-campo .form-select {
    width: 100%;
    min-width: 0;
}
.med-combo .combobox-lista { max-height: 260px; }
.med-builder-hint {
    margin: 0.55rem 0 0;
    font-size: 0.75rem;
    color: #94a3b8;
}
.med-builder-acao {
    display: flex;
    align-items: stretch;
}
.med-builder-acao .btn {
    white-space: nowrap;
    height: 100%;
    min-height: 42px;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (max-width: 720px) {
    .med-builder-grid {
        grid-template-columns: 1fr 1fr;
    }
    .med-builder-acao {
        grid-column: 1 / -1;
    }
    .med-builder-acao .btn { width: 100%; }
}
@media (max-width: 420px) {
    .med-builder-grid { grid-template-columns: 1fr; }
}

/* ---- Endereço em campos separados ---- */
.endereco-bloco { margin-bottom: 0.85rem; }
.endereco-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.65rem 0.75rem;
}
.endereco-grid .form-group { margin-bottom: 0; }
.endereco-cep { grid-column: span 4; order: 1; }
.endereco-rua { grid-column: span 8; order: 2; }
.endereco-numero { grid-column: span 4; order: 3; }
.endereco-bairro { grid-column: span 8; order: 4; }
.endereco-comp { grid-column: span 12; order: 5; }
.endereco-cidade { grid-column: span 8; order: 6; }
.endereco-uf { grid-column: span 4; order: 7; }
@media (max-width: 720px) {
    .endereco-cep, .endereco-rua, .endereco-numero, .endereco-comp,
    .endereco-bairro, .endereco-cidade, .endereco-uf { grid-column: span 12; }
    .endereco-numero, .endereco-uf { grid-column: span 6; }
}

/* ---- Receita: folha A4 (210 × 297 mm) ---- */
.receita-doc {
    --rx-ink: #0D0D0D;
    --rx-muted: #64748b;
    --rx-line: #e2e8f0;
    --rx-accent: #04BF8A;
    --rx-accent-soft: #d1fae5;
    --rx-navy: #1e3a5f;
    --rx-a4-w: 210mm;
    --rx-a4-h: 297mm;
    box-sizing: border-box;
    width: var(--rx-a4-w);
    max-width: var(--rx-a4-w);
    min-height: var(--rx-a4-h);
    margin: 0 auto;
    padding: 18mm 16mm 14mm;
    background: #fff;
    border-radius: 5px;
    border: 1px solid var(--rx-line);
    color: var(--rx-ink);
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
    font-family: 'Inter', system-ui, sans-serif;
    display: flex;
    flex-direction: column;
}
.receita-doc.rx-tipo-azul {
    border: 2px solid #028585;
    box-shadow: inset 0 0 0 3px #bfdbfe, 0 18px 48px rgba(29, 78, 216, 0.1);
}
.receita-doc.rx-tipo-amarela {
    border: 2px solid #ca8a04;
    box-shadow: inset 0 0 0 3px #fde68a, 0 18px 48px rgba(202, 138, 4, 0.1);
}
.receita-doc.rx-tipo-antimicrobiano { border: 2px solid #0D0D0D; }
.receita-doc.rx-tipo-simples { border: 1px solid #cbd5e1; }

.rx-deco {
    position: absolute; pointer-events: none; z-index: 0;
}
.rx-deco--tl {
    top: -28px; left: -28px; width: 140px; height: 140px;
    background:
        radial-gradient(circle at 30% 30%, rgba(5, 150, 105, 0.18), transparent 55%),
        linear-gradient(135deg, rgba(37, 99, 235, 0.12), transparent 60%);
    border-radius: 0 0 80% 0;
}
.rx-deco--tl::after {
    content: '+';
    position: absolute; top: 48px; left: 42px;
    font-size: 1.6rem; font-weight: 300; color: rgba(5, 150, 105, 0.45);
}
.rx-deco--br {
    bottom: -40px; right: -40px; width: 180px; height: 180px;
    background:
        radial-gradient(circle at 70% 70%, rgba(5, 150, 105, 0.16), transparent 55%),
        linear-gradient(315deg, rgba(37, 99, 235, 0.1), transparent 60%);
    border-radius: 80% 0 0 0;
}
.rx-deco--br::after {
    content: '+';
    position: absolute; bottom: 58px; right: 52px;
    font-size: 1.35rem; font-weight: 300; color: rgba(37, 99, 235, 0.35);
}

.rx-letterhead,
.rx-destinatario,
.rx-corpo,
.rx-rodape-folha,
.receita-assinatura,
.receita-validacao,
.receita-tipo-faixa,
.receita-tipo-nota {
    position: relative; z-index: 1;
}

.rx-letterhead {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1rem; flex-wrap: wrap;
    padding-bottom: 1.15rem; margin-bottom: 1.35rem;
    border-bottom: 1px solid var(--rx-line);
}
.rx-letterhead-brand {
    display: flex; align-items: center; gap: 0.75rem;
}
.receita-logo {
    max-height: 52px; max-width: 160px; display: block; object-fit: contain;
}
.rx-letterhead-txt {
    display: flex; flex-direction: column; gap: 0.1rem;
}
.rx-letterhead-txt strong {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem; color: var(--rx-navy); letter-spacing: -0.02em;
}
.rx-letterhead-txt span {
    font-size: 0.72rem; color: var(--rx-muted); text-transform: uppercase; letter-spacing: 0.06em;
}
.rx-letterhead-meta {
    text-align: right; display: flex; flex-direction: column; gap: 0.15rem;
    font-size: 0.8rem; color: var(--rx-muted); max-width: 260px;
}
.rx-letterhead-meta strong {
    font-size: 0.95rem; color: var(--rx-navy); font-family: 'Outfit', sans-serif;
}

.receita-tipo-faixa {
    display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; padding: 0.28rem 0.65rem; border-radius: 5px; margin-bottom: 0.55rem;
}
.rx-tipo-azul .receita-tipo-faixa { background: #dbeafe; color: #1e40af; }
.rx-tipo-amarela .receita-tipo-faixa { background: #fef08a; color: #854d0e; }
.rx-tipo-antimicrobiano .receita-tipo-faixa { background: #f1f5f9; color: #0D0D0D; }
.rx-tipo-simples .receita-tipo-faixa { background: #F2F2F2; color: #475569; }
.receita-tipo-nota { font-size: 0.78rem; color: var(--rx-muted); margin: 0 0 1rem; }

.rx-label {
    display: block; font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--rx-muted);
    margin-bottom: 0.35rem;
}

.rx-destinatario {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1.5rem; margin-bottom: 1.75rem; flex-wrap: wrap;
}
.rx-destinatario-esq { flex: 1; min-width: 200px; }
.rx-destinatario-dir { text-align: right; min-width: 110px; }
.receita-paciente { display: flex; flex-direction: column; gap: 0.2rem; }
.rx-nome {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem; font-weight: 700; color: var(--rx-navy); line-height: 1.3;
}
.rx-linha-meta { font-size: 0.82rem; color: var(--rx-muted); line-height: 1.45; }
.receita-data {
    margin: 0; font-size: 0.9rem; color: var(--rx-muted); font-weight: 500;
    text-align: right;
}

.rx-corpo {
    margin-bottom: 1rem;
    transition: background-color 0.35s ease;
    border-radius: 5px;
    flex: 1 1 auto;
}
.rx-destinatario { transition: background-color 0.35s ease; border-radius: 5px; }
.receita-conteudo {
    white-space: pre-wrap;
    font-size: 0.98rem;
    line-height: 1.85;
    color: #334155;
    min-height: 140px;
    padding-top: 0.15rem;
}

/* Assinatura + QR juntos no rodapé da folha A4 */
.rx-rodape-folha {
    margin-top: auto;
    padding-top: 1.5rem;
    flex-shrink: 0;
}
.receita-assinatura {
    text-align: left;
    margin-top: 0;
    margin-bottom: 1rem;
    max-width: 280px;
}
.receita-assinatura img {
    max-width: 200px; max-height: 72px; display: block; margin-bottom: 0.35rem;
}
.rx-ass-nome {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem; font-weight: 700; color: var(--rx-navy);
    border-top: 1px solid var(--rx-ink);
    padding-top: 0.45rem; margin-top: 0.25rem;
}
.rx-ass-cargo { font-size: 0.78rem; color: var(--rx-muted); margin-top: 0.15rem; }

.receita-validacao {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem 1rem;
    align-items: center;
    margin-top: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--rx-line);
}
.receita-validacao .qr { width: 96px; height: 96px; flex-shrink: 0; }
.receita-validacao .qr svg { width: 100%; height: 100%; }
.receita-validacao .txt {
    font-size: 0.7rem; color: var(--rx-muted); line-height: 1.5; word-break: break-all;
}
.receita-validacao .txt strong { color: var(--rx-ink); }
.rx-rodape-marca {
    grid-column: 1 / -1;
    display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
    padding-top: 0.65rem; border-top: 1px solid #f1f5f9;
    font-size: 0.68rem; color: #94a3b8;
}

.rx-preview-placeholder { color: #94a3b8; font-style: italic; }
.rx-preview-assinatura-vazia {
    display: inline-block; min-width: 160px; padding: 1rem;
    border: 1px dashed #cbd5e1; border-radius: 5px; color: #94a3b8; font-size: 0.8rem; margin-bottom: 0.35rem;
}
.rx-preview-qr {
    display: flex; align-items: center; justify-content: center;
    background: #F2F2F2; border: 1px dashed #cbd5e1; border-radius: 5px; color: #94a3b8; font-size: 2.2rem;
}

/* compat: flash nas seções novas */
.rx-destinatario.rx-flash,
.rx-corpo.rx-flash,
.receita-secao.rx-flash {
    animation: rxFlash 0.85s ease-out;
}

@keyframes rxDocEnter {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rxTipoPulse {
    0% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.35); }
    70% { box-shadow: 0 0 0 12px rgba(5, 150, 105, 0); }
    100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}
@keyframes rxFlash {
    0% { background-color: rgba(16, 185, 129, 0.14); }
    100% { background-color: transparent; }
}
.rx-doc-enter,
.rx-preview-enter {
    animation: rxDocEnter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.receita-doc.rx-tipo-pulse {
    animation: rxTipoPulse 0.7s ease-out;
}

.rx-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}
.rx-layout-form { min-width: 0; }
.rx-layout-preview {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding-bottom: 1rem;
}
.rx-preview-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; margin-bottom: 0.65rem;
}
.rx-preview-head h3 {
    margin: 0; font-size: 0.95rem; color: #0D0D0D;
    display: flex; align-items: center; gap: 0.4rem;
}
.rx-preview-scale {
    width: 100%;
    overflow: hidden;
    /* Miniatura pequena (drawer mobile). No desktop, a regra abaixo aumenta a escala. */
    height: calc(297mm * 0.42);
}
.rx-preview-scale .receita-doc {
    transform: scale(0.42);
    transform-origin: top left;
    font-size: 1em;
    padding: 18mm 16mm 14mm;
    margin: 0;
}
/* A animação de entrada (rxDocEnter) termina em transform:scale(1), o que
   sobrescreveria o scale acima toda vez que ela dispara de novo (a cada
   atualizarPreview()). Redireciona a animação, dentro do preview escalado,
   para uma variante que preserva o scale correto no estado final. */
@keyframes rxDocEnterScaled {
    from { opacity: 0; transform: translateY(18px) scale(0.4137); }
    to   { opacity: 1; transform: translateY(0) scale(0.42); }
}
.rx-preview-scale .rx-doc-enter,
.rx-preview-scale .rx-preview-enter {
    animation-name: rxDocEnterScaled;
}

/* No desktop a coluna do preview é maior (até 640px) - usa uma escala bem
   mais legível em vez da miniatura pequena do drawer mobile. */
.rx-layout-preview--desktop .rx-preview-scale {
    height: calc(297mm * 0.78);
}
.rx-layout-preview--desktop .rx-preview-scale .receita-doc {
    transform: scale(0.78);
}
@keyframes rxDocEnterScaledDesktop {
    from { opacity: 0; transform: translateY(18px) scale(0.7687); }
    to   { opacity: 1; transform: translateY(0) scale(0.78); }
}
.rx-layout-preview--desktop .rx-preview-scale .rx-doc-enter,
.rx-layout-preview--desktop .rx-preview-scale .rx-preview-enter {
    animation-name: rxDocEnterScaledDesktop;
}
.rx-preview-scale .receita-conteudo { min-height: 80px; }
.rx-preview-scale .receita-logo { max-height: 48px; }
.rx-preview-fab {
    display: none;
    position: fixed; right: 1rem; bottom: 1.25rem; z-index: 60;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.25);
}
.rx-preview-drawer-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45);
    z-index: 70; opacity: 0; transition: opacity 0.25s ease;
}
.rx-preview-drawer-backdrop.open { display: block; opacity: 1; }
.rx-preview-drawer {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 71;
    max-height: 88vh; overflow: auto;
    background: #f1f5f9; border-radius: 5px 18px 0 0;
    padding: 0.85rem 1rem 1.5rem;
    transform: translateY(110%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.18);
}
.rx-preview-drawer.open { transform: translateY(0); }
.rx-preview-drawer-handle {
    width: 42px; height: 4px; border-radius: 5px; background: #cbd5e1;
    margin: 0.15rem auto 0.75rem;
}
.rx-preview-drawer-close {
    position: absolute; top: 0.65rem; right: 0.75rem;
}

@media (max-width: 900px) {
    .rx-layout { grid-template-columns: 1fr; }
    .rx-layout-preview--desktop { display: none; }
    .rx-preview-fab { display: inline-flex; }
    /* Em telas estreitas a folha A4 fica escalada horizontalmente via overflow scroll */
    .app-content:has(.receita-doc) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .receita-conteudo { min-height: 100px; }
}
@media (min-width: 901px) {
    .rx-preview-drawer,
    .rx-preview-drawer-backdrop { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .rx-doc-enter, .rx-preview-enter, .receita-doc.rx-tipo-pulse,
    .rx-destinatario.rx-flash, .rx-corpo.rx-flash, .receita-secao.rx-flash {
        animation: none !important;
    }
    .rx-preview-drawer, .rx-preview-drawer-backdrop { transition: none !important; }
}

@page {
    size: A4 portrait;
    margin: 0;
}
@media print {
    .no-print, .rx-preview-fab, .rx-preview-drawer, .rx-preview-drawer-backdrop { display: none !important; }
    .rx-doc-enter, .rx-preview-enter { animation: none !important; }

    html, body {
        width: 210mm;
        height: 297mm;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .app-shell, .app-main, .app-content {
        all: unset !important;
        display: block !important;
        width: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        background: transparent !important;
    }
    .receita-doc {
        box-sizing: border-box !important;
        width: 210mm !important;
        max-width: 210mm !important;
        min-height: 297mm !important;
        height: 297mm !important;
        margin: 0 !important;
        padding: 14mm 16mm 12mm !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        page-break-after: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .rx-letterhead { flex-direction: row !important; }
    .rx-letterhead-meta { text-align: right !important; max-width: 260px !important; }
    .rx-destinatario-dir { text-align: right !important; }
    .receita-data { text-align: right !important; }
    .receita-validacao { grid-template-columns: auto 1fr !important; margin-top: 0 !important; }
    .rx-rodape-folha { margin-top: auto !important; }
    .rx-deco { opacity: 0.45; }
}

/* ---- Painel de Suporte ---- */
.suporte-nav {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    margin-bottom: 1.15rem; padding: 0.45rem;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 5px;
}
.suporte-nav-item {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.5rem 0.85rem; border-radius: 5px;
    font-size: 0.82rem; font-weight: 600; color: #475569; text-decoration: none;
}
.suporte-nav-item:hover { background: #f1f5f9; color: #0D0D0D; }
.suporte-nav-item.ativo { background: #ECE8F6; color: #3730a3; }
.suporte-stats { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) {
    .suporte-stats { grid-template-columns: repeat(4, 1fr); }
}
.suporte-grid {
    display: grid; grid-template-columns: 1fr; gap: 1.15rem;
}
@media (min-width: 900px) {
    .suporte-grid { grid-template-columns: 1fr 1fr; }
}
.suporte-lista { list-style: none; margin: 0; padding: 0; }
.suporte-lista li {
    display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
    padding: 0.65rem 0; border-bottom: 1px solid #f1f5f9;
}
.suporte-lista li:last-child { border-bottom: none; }
.suporte-lista--compact li { padding: 0.45rem 0; }
.table-wrap { overflow-x: auto; }

/* ---- Painel principal (dashboard operacional) ---- */
.pnl-stats-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; margin-bottom: 1.25rem;
}
.pnl-stat-card {
    background: #fff; border-radius: var(--clay-radius-md); padding: 1rem 1.1rem;
    display: flex; align-items: center; gap: 0.75rem;
    box-shadow: var(--clay-shadow-sm), var(--clay-inset);
}
.pnl-stat-icone {
    width: 42px; height: 42px; min-width: 42px; border-radius: 5px;
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.pnl-stat-valor { font-size: 1.25rem; font-weight: 800; color: #0D0D0D; line-height: 1.2; }
.pnl-stat-label { font-size: 0.72rem; color: #64748b; margin-top: 0.1rem; }

.pnl-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
.pnl-grid-2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.pnl-panel { padding: 1.15rem 1.25rem; }
.pnl-panel-titulo {
    font-size: 0.88rem; font-weight: 700; color: #1e293b; margin: 0 0 0.85rem;
    display: flex; align-items: center; gap: 0.4rem;
}
.pnl-ver-todos { font-size: 0.75rem; color: var(--azul); text-decoration: none; font-weight: 600; }
.pnl-ver-todos:hover { text-decoration: underline; }

.pnl-proximo-local { font-size: 1.05rem; font-weight: 700; color: #0D0D0D; margin: 0; }
.pnl-proximo-setor { font-size: 0.8rem; color: #64748b; margin: 0.1rem 0 0; }
.pnl-proximo-data { font-size: 0.8rem; color: #475569; margin: 0.5rem 0 0; display: flex; align-items: center; gap: 0.3rem; }

.pnl-lista, .pnl-agenda, .pnl-semana-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.pnl-lista li, .pnl-agenda li { display: flex; align-items: center; gap: 0.65rem; }
.pnl-avatar-letra {
    width: 34px; height: 34px; min-width: 34px; border-radius: 50%; background: #e0f2fe; color: #0369a1;
    display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700;
}
.pnl-avatar-letra.is-lida { background: #f1f5f9; color: #94a3b8; }
.pnl-lista-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pnl-lista-texto strong { font-size: 0.85rem; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnl-lista-texto span { font-size: 0.75rem; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnl-agenda-hora { font-size: 0.78rem; font-weight: 700; color: var(--azul); min-width: 42px; }

.pnl-chart { display: flex; align-items: flex-end; gap: 0.35rem; height: 130px; padding-top: 0.5rem; }
.pnl-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 0.3rem; }
.pnl-chart-bar { width: 100%; max-width: 16px; background: linear-gradient(180deg, #818cf8, #6366f1); border-radius: 5px 4px 0 0; min-height: 4px; transition: opacity 0.15s; }
.pnl-chart-col:hover .pnl-chart-bar { opacity: 0.75; }
.pnl-chart-label { font-size: 0.6rem; color: #94a3b8; writing-mode: vertical-rl; text-orientation: mixed; }

/* auto-fit, não auto-fill: com poucos plantões (1-2), auto-fill reservava
   colunas vazias extras do mesmo jeito, e o(s) card(s) existente(s) ficavam
   espremidos em ~150px com o resto do painel em branco do lado — o "card mal
   feito, texto vazando" (Hospital Central quebrando linha, hora quebrando
   linha). auto-fit colapsa as colunas vazias e deixa quem existe esticar. */
/* minmax(190px, 220px), não 1fr: 1fr fazia o único card da semana esticar
   pela coluna inteira (uma faixa gigante e vazia) quando havia só 1-2
   plantões. Com teto de 220px o card fica do tamanho de um cartão de
   verdade, e auto-fit ainda deixa vários lado a lado quando cabem. */
.pnl-semana-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 220px)); gap: 0.65rem; }
.pnl-semana-item {
    background: #F2F2F2; border-radius: 5px; padding: 0.7rem 0.85rem;
    display: flex; flex-direction: column; gap: 0.3rem;
}
/* Badge de status ao lado do "Próximo", não solto embaixo de tudo —
   as duas etiquetas de status (quando é / o que aconteceu) juntas no topo. */
.pnl-semana-topo { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; min-height: 1.1rem; }
.pnl-semana-topo .badge { flex-shrink: 0; }
.pnl-semana-badge-proximo { margin-bottom: 0; }
.pnl-semana-dia { font-size: 0.68rem; font-weight: 700; color: #64748b; text-transform: uppercase; margin: 0; }
.pnl-semana-local { font-size: 0.82rem; font-weight: 700; color: #1e293b; margin: 0.1rem 0 0; }
.pnl-semana-hora { font-size: 0.75rem; color: #94a3b8; margin: 0.15rem 0 0; }
.pnl-semana-item--proximo { background: #ECE8F6; border: 1px solid #c7d2fe; }
.pnl-semana-badge-proximo {
    display: inline-block; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    color: #4338ca; background: #e0e7ff; border-radius: 5px; padding: 0.1rem 0.45rem; margin-bottom: 0.3rem;
}

@media (max-width: 1024px) {
    .pnl-stats-row { grid-template-columns: repeat(2, 1fr); }
    .pnl-grid-3 { grid-template-columns: 1fr; }
    .pnl-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .pnl-stats-row { grid-template-columns: 1fr; }
}

/* ---- Protocolos clínicos (Prescrição por especialidade) ---- */
/* Cada seção é uma caixa expansível (accordion), pra não jogar tudo aberto de uma vez. */
.protocolo-secao {
    margin-bottom: 0.75rem; border: 1px solid #e2e8f0; border-radius: var(--clay-radius-sm);
    overflow: hidden; background: #fff;
}
.protocolo-secao-titulo {
    background: #e0f2fe; color: #075985; list-style: none; cursor: pointer;
    font-size: 0.95rem; font-weight: 700; padding: 0.75rem 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    user-select: none;
}
.protocolo-secao-titulo::-webkit-details-marker { display: none; }
.protocolo-secao-titulo::after {
    content: ''; flex-shrink: 0; width: 8px; height: 8px;
    border-right: 2px solid #075985; border-bottom: 2px solid #075985;
    transform: rotate(45deg); transition: transform 0.2s ease; margin-top: -3px;
}
.protocolo-secao[open] > .protocolo-secao-titulo::after { transform: rotate(-135deg); margin-top: 3px; }
.protocolo-secao-corpo { padding: 1rem 1.1rem 1.15rem; }

/* Dentro de "Tratamento Farmacológico" etc., cada Esquema A/B/C vira sua própria caixa aninhada. */
.protocolo-esquema {
    margin-bottom: 0.65rem; border: 1px solid #e2e8f0; border-radius: 5px;
    overflow: hidden; background: #F2F2F2;
}
.protocolo-esquema:last-child { margin-bottom: 0; }
.protocolo-esquema-titulo {
    background: #ECE8F6; color: #3730a3; list-style: none; cursor: pointer;
    font-size: 0.85rem; font-weight: 700; padding: 0.55rem 0.85rem;
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    user-select: none;
}
.protocolo-esquema-titulo::-webkit-details-marker { display: none; }
.protocolo-esquema-titulo::after {
    content: ''; flex-shrink: 0; width: 7px; height: 7px;
    border-right: 2px solid #3730a3; border-bottom: 2px solid #3730a3;
    transform: rotate(45deg); transition: transform 0.2s ease; margin-top: -2px;
}
.protocolo-esquema[open] > .protocolo-esquema-titulo::after { transform: rotate(-135deg); margin-top: 2px; }
.protocolo-esquema .protocolo-corpo { padding: 0.85rem 0.95rem; }

.protocolo-corpo { font-size: 0.95rem; line-height: 1.65; color: var(--slate-800); }
.protocolo-corpo ol, .protocolo-corpo ul { padding-left: 1.35rem; }
.protocolo-corpo li { margin-bottom: 0.5rem; }
.protocolo-corpo li:last-child { margin-bottom: 0; }
.protocolo-corpo hr { border: none; border-top: 1px dashed #e2e8f0; margin: 0.85rem 0; }

/* Tag "BULA" que aparece ao lado do medicamento citado na conduta. */
.protocolo-bula {
    display: inline-block; margin-left: 0.3rem; vertical-align: middle;
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em;
    color: #dc2626; background: #fef2f2; border: 1px solid #fecaca;
    border-radius: 5px; padding: 0.05rem 0.3rem; text-decoration: none;
    line-height: 1.5; white-space: nowrap;
}
.protocolo-bula:hover { background: #fee2e2; border-color: #fca5a5; }

/* ---- Lista de setores por local no modal "Setores" (admin_usuarios.php) — recolhível ---- */
.ms-local { border-bottom: 1px solid #f1f5f9; }
.ms-local:last-of-type { border-bottom: none; }
.ms-summary {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.5rem 0.4rem; cursor: pointer; font-size: 0.85rem;
    font-weight: 600; color: #1e293b; list-style: none; border-radius: 5px;
}
.ms-summary:hover { background: #F2F2F2; }
.ms-summary::-webkit-details-marker { display: none; }
.ms-summary::before {
    content: '▸'; color: #94a3b8; font-size: 0.7rem; flex-shrink: 0; transition: transform 0.15s;
}
.ms-local[open] > .ms-summary::before { transform: rotate(90deg); }
.ms-summary > span:first-of-type { flex: 1; }
.ms-contador {
    font-size: 0.7rem; font-weight: 600; color: #94a3b8;
    background: #f1f5f9; border-radius: 5px; padding: 0.1rem 0.45rem; flex-shrink: 0;
}
.ms-contador.tem-selecao { background: #d1fae5; color: #047857; }
.ms-setores { display: flex; flex-direction: column; gap: 0.15rem; padding: 0 0.4rem 0.5rem 1.4rem; }
.ms-item {
    font-size: 0.82rem; display: flex; align-items: center; gap: 0.45rem;
    padding: 0.25rem 0.35rem; border-radius: 5px; cursor: pointer;
}
.ms-item:hover { background: #f1f5f9; }
.ms-item input { width: 15px; height: 15px; cursor: pointer; accent-color: #04BF8A; }


/* ══════════════════════════════════════════════════════════════════════════
   Filtro de profissional com busca (plantoes.php)

   O <select> nativo continua no HTML e é o que funciona sem JavaScript.
   Ele só some quando o script realmente rodou e criou o combobox — por isso
   a regra de esconder mora em .combo-nativo, classe adicionada pelo JS, e
   não no select direto.
   ══════════════════════════════════════════════════════════════════════════ */
.filtro-prof {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.filtro-prof-label {
    margin: 0;
    font-size: 0.8rem;
    color: var(--slate-500, #64748b);
    white-space: nowrap;
}
.filtro-prof .form-select { max-width: 320px; }

.combo-nativo { display: none; }

.combo {
    position: relative;
    flex: 1 1 260px;
    max-width: 340px;
}
.combo-botao {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem;
    background: #fff;
    border: 1.5px solid var(--slate-200);
    border-radius: var(--clay-radius-sm);
    color: var(--slate-900, #0f172a);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, box-shadow .15s;
}
.combo-botao:hover { border-color: #c7bde8; }
.combo.aberto .combo-botao {
    border-color: var(--violeta);
    box-shadow: 0 0 0 3px rgba(67, 46, 140, 0.12);
}
.combo-valor {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.combo-botao i { color: #94a3b8; transition: transform .15s; }
.combo.aberto .combo-botao i { transform: rotate(180deg); }

.combo-painel {
    position: absolute;
    z-index: 60;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--clay-radius-sm);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}
.combo-busca {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--slate-200);
}
.combo-busca i { color: #94a3b8; }
.combo-busca input {
    flex: 1;
    border: 0;
    outline: 0;
    font-size: 0.9rem;
    color: var(--slate-900, #0f172a);
    background: transparent;
}
.combo-lista {
    list-style: none;
    margin: 0;
    padding: 0.3rem;
    max-height: 260px;
    overflow-y: auto;
}
.combo-lista li {
    padding: 0.55rem 0.7rem;
    border-radius: 5px;
    font-size: 0.9rem;
    color: var(--slate-800, #1e293b);
    cursor: pointer;
}
.combo-lista li:hover { background: #F4F1FB; }
.combo-lista li.ativo {
    background: #ECE8F6;
    color: var(--violeta);
    font-weight: 600;
}
.combo-vazio {
    margin: 0;
    padding: 0.9rem;
    font-size: 0.85rem;
    color: #94a3b8;
    text-align: center;
}

/* No celular o painel vira uma folha ancorada embaixo: a lista precisa de
   largura inteira, senão o nome do profissional é cortado. */
@media (max-width: 640px) {
    .filtro-prof { align-items: stretch; }
    .filtro-prof-label { flex-basis: 100%; }
    .combo { max-width: none; flex-basis: 100%; }
    .combo-lista { max-height: 45vh; }
}


/* ---- Anel da cota de IA (includes/ia_cota_anel.php) ---- */
.cota-anel { position: relative; display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; }
.cota-anel-svg { transform: rotate(-90deg); display: block; }
.cota-anel-trilho { fill: none; stroke: #e5e7eb; stroke-width: 4; }
.cota-anel-arco {
    fill: none; stroke: var(--cota-cor, #04BF8A); stroke-width: 4; stroke-linecap: round;
    animation: cotaAnelEnche 1.1s cubic-bezier(.22,.8,.3,1) forwards;
}
@keyframes cotaAnelEnche { to { stroke-dashoffset: var(--cota-offset, 0); } }
@media (prefers-reduced-motion: reduce) { .cota-anel-arco { animation-duration: 0s; } }
.cota-anel-num {
    position: absolute; font-weight: 800; color: var(--cota-cor, #04BF8A); line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
/* mini: no trio do header, mesmo diâmetro do sino (40px) */
.cota-anel--mini { width: 40px; height: 40px; justify-content: center;
    background: #F2F2F2; border-radius: 50%; box-shadow: var(--clay-shadow-sm), var(--clay-inset); transition: transform .2s ease; }
.cota-anel--mini:hover { transform: translateY(-1px); }
.cota-anel--mini .cota-anel-svg { width: 32px; height: 32px; }
.cota-anel--mini .cota-anel-num { inset: 0; font-size: 0.62rem; }
/* card: no painel, ao lado dos outros stat-cards */
.cota-anel--card .cota-anel-svg { width: 46px; height: 46px; min-width: 46px; }
.cota-anel--card .cota-anel-num { left: 0; width: 46px; height: 46px; font-size: 0.78rem; }
/* grande: na página da IA, acima da conversa */
.cota-anel--grande { background: #fff; border-radius: var(--clay-radius-md); padding: 0.85rem 1.1rem; margin-bottom: 1rem;
    box-shadow: var(--clay-shadow-sm), var(--clay-inset); }
.cota-anel--grande .cota-anel-svg { width: 64px; height: 64px; min-width: 64px; }
.cota-anel--grande .cota-anel-num { left: 0; width: 64px; height: 64px; font-size: 1.05rem; }
.cota-anel-texto { display: flex; flex-direction: column; line-height: 1.25; }
.cota-anel-texto strong { font-size: 0.92rem; color: #1e293b; }
.cota-anel-texto small { font-size: 0.78rem; color: #64748b; }