:root {
    /* --bg: cor de fundo principal da página (azul muito escuro) */
  --bg:#080f1a; --bg2:#0d1829; --bg3:#111f35;  /* cor de fundo principal — azul escuro profundo */
    /* --panel: cor dos painéis/cartões de conteúdo */
  --panel:#0f1e33; --panel2:#152540; --border:#1e3354;  /* cor dos cartões e painéis */
    /* --primary-dark: variante escura do azul principal (hover de botões) */
  --primary:#0ea5e9; --primary-dark:#0369a1; --primary-light:#38bdf8;  /* azul principal do sistema */
    /* --primary-glow: brilho azul translúcido usado em sombras e focus rings */
  --primary-glow:rgba(14,165,233,.22);  /* brilho azul translúcido */
    /* --green-dim: verde translúcido para fundos de badges e alertas positivos */
  --green:#22c55e; --green-dim:rgba(34,197,94,.12);  /* verde — status positivo */
    /* --red-dim: vermelho translúcido para fundos de alertas e badges de erro */
  --red:#ef4444; --red-dim:rgba(239,68,68,.12);  /* vermelho — urgência e erro */
    /* --amber-dim: âmbar translúcido para fundos de alertas de aviso */
  --amber:#f59e0b; --amber-dim:rgba(245,158,11,.12);  /* âmbar — aviso e pendente */
    /* --purple-dim: roxo translúcido para fundos de badges roxos */
  --purple:#a855f7; --purple-dim:rgba(168,85,247,.12);  /* roxo — cirurgias e especial */
    /* --teal-dim: verde-azulado translúcido para fundos de badges teal */
  --teal:#14b8a6; --teal-dim:rgba(20,184,166,.12);  /* verde-azulado — enfermagem */
    /* --text2: cor do texto secundário (labels, subtítulos) */
  --text:#e2eeff; --text2:#7a9cc0; --text3:#3a5272;  /* cor principal do texto */
    /* --shadow: sombra padrão dos cartões e modais */
  --shadow:0 4px 24px rgba(0,0,0,.5); --shadow-lg:0 16px 48px rgba(0,0,0,.7);  /* sombra padrão dos cartões */
    /* --r: raio de arredondamento padrão dos elementos (12px) */
  --r:12px; --sidebar-w:256px;  /* raio de arredondamento padrão (12px) */
}
html[data-theme="light"] {
    /* --bg: cor de fundo principal da página (azul muito escuro) */
  --bg:#f1f5f9; --bg2:#ffffff; --bg3:#f8fafc;
    /* --panel: cor dos painéis/cartões de conteúdo */
  --panel:#ffffff; --panel2:#f1f5f9; --border:#cbd5e1;
    /* --primary-dark: variante escura do azul principal (hover de botões) */
  --primary:#0369a1; --primary-dark:#075985; --primary-light:#0ea5e9;
    /* --primary-glow: brilho azul translúcido usado em sombras e focus rings */
  --primary-glow:rgba(3,105,161,.12);
    /* --green-dim: verde translúcido para fundos de badges e alertas positivos */
  --green:#16a34a; --green-dim:rgba(22,163,74,.1);
    /* --red-dim: vermelho translúcido para fundos de alertas e badges de erro */
  --red:#dc2626; --red-dim:rgba(220,38,38,.1);
    /* --amber-dim: âmbar translúcido para fundos de alertas de aviso */
  --amber:#d97706; --amber-dim:rgba(217,119,6,.1);
    /* --purple-dim: roxo translúcido para fundos de badges roxos */
  --purple:#7c3aed; --purple-dim:rgba(124,58,237,.1);
    /* --teal-dim: verde-azulado translúcido para fundos de badges teal */
  --teal:#0d9488; --teal-dim:rgba(13,148,136,.1);
    /* --text2: cor do texto secundário (labels, subtítulos) */
  --text:#0f172a; --text2:#475569; --text3:#94a3b8;
    /* --shadow: sombra padrão dos cartões e modais */
  --shadow:0 4px 24px rgba(0,0,0,.1); --shadow-lg:0 16px 48px rgba(0,0,0,.15);
}
*{margin:0;padding:0;box-sizing:border-box;}
/* Estilo base do corpo da página: fonte, fundo, cor do texto, altura mínima e sem scroll horizontal */
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;overflow-x:hidden;}
/* Pseudo-elemento decorativo: cria gradientes radiais subtis no fundo da página */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 40% at 10% 0%,var(--primary-glow),transparent 60%),
             radial-gradient(ellipse 40% 30% at 90% 100%,rgba(168,85,247,.08),transparent 60%),var(--bg);}

/* LOGIN */
/* Ecrã de login: ocupa toda a viewport, centraliza o conteúdo com flexbox */
#login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;}
/* Caixa de login: painel central com bordas arredondadas, sombra e animação de entrada */
.login-box{background:var(--panel);border:1.5px solid var(--border);border-radius:20px;padding:48px 44px;width:100%;max-width:440px;box-shadow:var(--shadow-lg);animation:fadeUp .5s ease;}
.login-logo-wrap{text-align:center;margin-bottom:36px;}
/* Ícone do hospital no topo do login: quadrado com gradiente vermelho */
.login-cross{width:56px;height:56px;background:linear-gradient(135deg,var(--red),#ff6b6b);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px;box-shadow:0 6px 20px rgba(239,68,68,.3);}
/* Nome do hospital no login: texto grande e negrito */
.login-hospital{font-size:1.1rem;font-weight:800;letter-spacing:-.3px;color:var(--text);}
.login-hospital span{color:var(--primary-light);}
/* Subtítulo do login: versão do sistema, texto pequeno e discreto */
.login-sub{font-size:.75rem;color:var(--text2);margin-top:4px;letter-spacing:.3px;}
/* Caixa de erro do login: fundo vermelho translúcido, inicialmente oculta */
.login-err{background:var(--red-dim);border:1px solid rgba(239,68,68,.3);color:var(--red);border-radius:9px;padding:10px 14px;font-size:.84rem;margin-bottom:14px;display:none;}

/* FORMS */
/* Grupo de formulário: margem inferior entre campos */
.form-group{margin-bottom:16px;}
/* Label dos campos: maiúsculas, espaçamento entre letras, cor discreta */
.form-group label{display:block;font-size:.72rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.9px;margin-bottom:7px;}
/* Campos de input, select e textarea: fundo escuro, borda, transição suave */
.form-group input,.form-group select,.form-group textarea{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:9px;padding:11px 14px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:.9rem;outline:none;transition:border-color .2s,box-shadow .2s;}
/* Estado de foco dos campos: borda azul e sombra de brilho ao clicar */
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary-light);box-shadow:0 0 0 3px var(--primary-glow);}
/* Textarea: permite redimensionar verticalmente com altura mínima de 80px */
.form-group textarea{resize:vertical;min-height:80px;}
/* Opções do select: fundo igual ao painel para consistência visual */
.form-group select option{background:var(--panel);}
/* Wrapper do campo de senha: posição relativa para o botão de olho flutuar */
.pw-wrap{position:relative;}.pw-wrap input{padding-right:44px;}
/* Botão olho dentro do campo de senha: posicionado à direita, sem fundo */
.pw-eye{position:absolute;right:13px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text2);cursor:pointer;font-size:.9rem;padding:3px;}
/* Grelha de 2 colunas iguais com gap de 12px */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
/* Grelha de 3 colunas iguais com gap de 12px */
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}

/* BUTTONS */
/* Botão base: flex, gap interno, padding, cantos arredondados, transição suave */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.875rem;font-weight:600;transition:all .15s;white-space:nowrap;}
/* Botão primário: gradiente azul com sombra brilhante — acção principal */
.btn-primary{background:linear-gradient(135deg,var(--primary-dark),var(--primary-light));color:#fff;box-shadow:0 3px 12px var(--primary-glow);}
/* Hover do botão primário: sobe 1px e intensifica a sombra */
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px var(--primary-glow);}
/* Botão secundário: fundo de painel com borda — acção secundária */
.btn-secondary{background:var(--panel2);border:1.5px solid var(--border);color:var(--text);}
/* Hover do botão secundário: borda e texto ficam azuis */
.btn-secondary:hover{border-color:var(--primary-light);color:var(--primary-light);}
/* Botão de sucesso/confirmar: gradiente verde */
.btn-success{background:linear-gradient(135deg,#15803d,var(--green));color:#fff;}
.btn-success:hover{transform:translateY(-1px);}
/* Botão de perigo/apagar: gradiente vermelho */
.btn-danger{background:linear-gradient(135deg,#b91c1c,var(--red));color:#fff;}
.btn-danger:hover{transform:translateY(-1px);}
/* Botão de aviso/bloquear: gradiente âmbar/laranja */
.btn-warning{background:linear-gradient(135deg,#b45309,var(--amber));color:#fff;}
.btn-warning:hover{transform:translateY(-1px);}
/* Botão roxo: usado em acções especiais (RH, cirurgias) */
.btn-purple{background:linear-gradient(135deg,#7e22ce,var(--purple));color:#fff;}
/* Botão teal: usado para imprimir e acções de enfermagem */
.btn-teal{background:linear-gradient(135deg,#0f766e,var(--teal));color:#fff;}
/* Modificador de botão pequeno: padding e fonte reduzidos */
.btn-sm{padding:6px 13px;font-size:.8rem;}
/* Modificador de botão muito pequeno: usado nas tabelas (editar, apagar) */
.btn-xs{padding:4px 9px;font-size:.75rem;}
/* Botão de largura total: ocupa 100% do contentor (ex: botão de login) */
.btn-full{width:100%;justify-content:center;padding:13px;}

/* APP LAYOUT */
/* Contentor principal da aplicação: oculto até ao login, ocupa toda a altura */
#app{display:none;height:100vh;overflow:hidden;}
/* Layout da aplicação: sidebar à esquerda + área principal à direita (flexbox) */
.app-layout{display:flex;height:100vh;}

/* SIDEBAR */
/* Sidebar de navegação: largura fixa, fundo escuro, borda direita */
.sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--bg2);border-right:1.5px solid var(--border);display:flex;flex-direction:column;z-index:40;}
/* Cabeçalho da sidebar: área do logo e badge do utilizador */
.sidebar-header{padding:18px 16px 14px;border-bottom:1px solid var(--border);flex-shrink:0;}
/* Linha do logo: ícone do hospital + nome do sistema lado a lado */
.sidebar-brand{display:flex;align-items:center;gap:10px;}
/* Ícone circular do hospital na sidebar: quadrado vermelho arredondado */
.sidebar-brand-icon{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--red),#ff6b6b);display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 3px 12px rgba(239,68,68,.3);}
/* Nome do sistema na sidebar: texto negrito com span colorida */
.sidebar-brand-name{font-size:.88rem;font-weight:800;line-height:1.2;}
.sidebar-brand-name span{color:var(--primary-light);}
.sidebar-brand-sub{font-size:.63rem;color:var(--text3);margin-top:1px;}
/* Badge do utilizador autenticado: avatar + nome + cargo + dropdown */
.user-badge{display:flex;align-items:center;gap:9px;background:var(--panel);border-radius:10px;padding:9px 12px;margin-top:10px;cursor:pointer;transition:all .15s;position:relative;border:1.5px solid transparent;user-select:none;}
/* Hover do badge: mostra borda para indicar que é clicável */
.user-badge:hover{border-color:var(--border);}
/* Estado aberto do badge: borda azul quando o dropdown está visível */
.user-badge.open{border-color:var(--primary-light);}
/* Avatar circular do utilizador: círculo colorido com a inicial do nome */
.user-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;color:#fff;flex-shrink:0;}
.av-adm{background:linear-gradient(135deg,var(--primary-dark),var(--primary-light));}
.av-med{background:linear-gradient(135deg,#15803d,var(--green));}
.av-enf{background:linear-gradient(135deg,#0f766e,var(--teal));}
.av-rec{background:linear-gradient(135deg,#7e22ce,var(--purple));}
.av-farm{background:linear-gradient(135deg,#065f46,#10b981);}
.av-rh{background:linear-gradient(135deg,#92400e,#f59e0b);}
.user-info .user-name{font-size:.84rem;font-weight:600;}
.user-info .user-role{font-size:.68rem;color:var(--text2);letter-spacing:.3px;}
.user-chev{margin-left:auto;font-size:.6rem;color:var(--text3);transition:transform .2s;}
.user-badge.open .user-chev{transform:rotate(180deg);color:var(--primary-light);}
/* Dropdown do utilizador: aparece ao clicar no badge, mostra opções de perfil e logout */
.user-drop{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--panel2);border:1.5px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);z-index:60;overflow:hidden;display:none;animation:fadeUp .15s ease;}
/* Dropdown do utilizador: aparece ao clicar no badge, mostra opções de perfil e logout */
.user-badge.open .user-drop{display:block;}
/* Item do dropdown do utilizador: linha clicável com hover */
.udrop-item{display:flex;align-items:center;gap:9px;padding:10px 13px;font-size:.85rem;color:var(--text2);cursor:pointer;transition:background .1s;}
.udrop-item:hover{background:var(--primary-glow);color:var(--text);}
/* Item de perigo no dropdown (Sair): fundo vermelho no hover */
.udrop-item.danger:hover{background:var(--red-dim);color:var(--red);}
.udrop-div{height:1px;background:var(--border);}

/* Área de navegação da sidebar: scrollável, ocupa o espaço disponível */
.nav-wrap{flex:1;overflow-y:auto;padding:8px;min-height:0;}
.nav-wrap::-webkit-scrollbar{width:3px;}
.nav-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
/* Label de secção do menu: texto em maiúsculas e cor discreta (ex: "Pacientes", "Clínica") */
.nav-sect-label{font-size:.6rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1.4px;padding:10px 8px 4px;}
/* Item de navegação: linha clicável com ícone + texto, transição de cor */
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:9px;cursor:pointer;color:var(--text2);font-size:.875rem;font-weight:500;margin-bottom:1px;transition:all .13s;position:relative;}
/* Hover do item de navegação: fundo painel e texto mais claro */
.nav-item:hover{background:var(--panel);color:var(--text);}
/* Item activo (página actual): fundo azul translúcido e texto azul */
.nav-item.active{background:rgba(14,165,233,.12);color:var(--primary-light);font-weight:600;}
.nav-item .ni{font-size:.95rem;width:20px;text-align:center;flex-shrink:0;}
/* Badge numérico nos itens do menu: círculo vermelho com contagem de alertas */
.nav-badge{margin-left:auto;background:var(--red);color:#fff;border-radius:10px;padding:1px 7px;font-size:.6rem;font-weight:700;}
.nav-badge-green{background:var(--green);}
/* Rodapé da sidebar: copyright e localização do hospital */
.sidebar-foot{padding:10px 16px;border-top:1px solid var(--border);flex-shrink:0;font-size:.62rem;color:var(--text3);text-align:center;}

/* TOPBAR */
/* Área principal: flex coluna — topbar em cima, conteúdo em baixo */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;}
/* Barra superior: altura fixa, fundo escuro, título da página e controlos */
.topbar{height:56px;background:var(--bg2);border-bottom:1.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 22px;flex-shrink:0;}
/* Lado esquerdo do topbar: botão de menu (mobile) + título da página */
.topbar-left{display:flex;align-items:center;gap:12px;}
/* Botão hamburger (móvel): oculto no desktop, visível em ecrãs pequenos */
.menu-btn{display:none;background:none;border:none;color:var(--text2);cursor:pointer;font-size:1.2rem;padding:5px;border-radius:6px;}
.menu-btn:hover{color:var(--primary-light);}
/* Título da página actual na barra superior: negrito e tamanho médio */
.topbar-title{font-size:.95rem;font-weight:700;}
/* Lado direito do topbar: relógio, alertas de emergência, pesquisa, tema */
.topbar-right{display:flex;align-items:center;gap:8px;}
/* Relógio em tempo real: fonte monospace para dígitos alinhados */
.topbar-clock{font-family:'DM Mono',monospace;font-size:.78rem;color:var(--text2);}
/* Badge de urgência no topbar: vermelho pulsante quando há emergências activas */
.tbar-badge{display:flex;align-items:center;gap:5px;background:var(--red-dim);border:1px solid rgba(239,68,68,.2);border-radius:7px;padding:5px 10px;font-size:.75rem;color:var(--red);cursor:pointer;}

/* CONTENT */
/* Área de conteúdo: scrollável, padding interno, reset de scroll ao mudar de página */
.content{flex:1;overflow-y:auto;padding:22px;overflow-anchor:none;scroll-behavior:auto;} /* overflow-anchor:none — impede o browser de manter posição de scroll ao mudar de página | scroll-behavior:auto — garante que o reset de scroll é instantâneo sem animação */
.content::-webkit-scrollbar{width:5px;}
.content::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}

/* PAGES */
/* Página de conteúdo: oculta por defeito, animação de entrada ao activar */
.page{display:none;animation:fadeUp .2s ease;}
/* Página activa: visível (display:block) após navegação */
.page.active{display:block;}

/* STATS GRID */
/* Grelha de cards de estatísticas: responsiva, mínimo 185px por card */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:14px;margin-bottom:20px;}
/* Card de estatística: painel com ícone à esquerda e valor à direita, com hover */
.stat-card{background:var(--panel);border:1.5px solid var(--border);border-radius:var(--r);padding:18px;display:flex;align-items:center;gap:14px;transition:transform .18s,box-shadow .18s;}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
/* Ícone do card de estatística: quadrado arredondado colorido */
.stat-ico{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;}
/* Label do card de estatística: texto muito pequeno em maiúsculas */
.stat-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text2);margin-bottom:3px;}
/* Valor numérico grande do card de estatística: fonte bold de 1.75rem */
.stat-val{font-size:1.75rem;font-weight:800;letter-spacing:-.5px;line-height:1;}
/* Subtexto do card de estatística: texto pequeno e discreto abaixo do valor */
.stat-sub{font-size:.7rem;color:var(--text3);margin-top:3px;}

/* SEC HEADER */
.sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;flex-wrap:wrap;}
.sec-title{font-size:.95rem;font-weight:700;}
.sec-ctrl{display:flex;gap:7px;align-items:center;flex-wrap:wrap;}
.search-box{background:var(--panel) url('icons/16492.png') no-repeat 11px center;background-size:14px 14px;border:1.5px solid var(--border);border-radius:8px;padding:8px 13px 8px 32px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:.84rem;outline:none;width:220px;transition:border-color .2s;}

/* ══ Ícones do projecto (pasta /icons) — substituem os emojis ══ */
.icon-inline{width:clamp(15px,1.15vw,22px);height:clamp(15px,1.15vw,22px);object-fit:contain;vertical-align:-4px;margin-right:4px;display:inline-block;}
.icon-x{width:clamp(13px,0.95vw,18px);height:clamp(13px,0.95vw,18px);object-fit:contain;vertical-align:-2px;display:inline-block;}
.icon-logo{width:62%;height:62%;object-fit:contain;filter:brightness(0) invert(1);}
.ni .icon-inline,.emoji-ico .icon-inline{width:clamp(17px,1.25vw,24px);height:clamp(17px,1.25vw,24px);margin-right:0;vertical-align:-4px;}
.notif-bell-btn .icon-inline{width:clamp(16px,1.2vw,22px);height:clamp(16px,1.2vw,22px);margin-right:0;}
@media (min-width:1600px){
  .icon-inline{width:22px;height:22px;}
  .icon-x{width:17px;height:17px;}
  .ni .icon-inline,.emoji-ico .icon-inline{width:24px;height:24px;}
}
.search-box:focus{border-color:var(--primary-light);}
.filter-sel{background:var(--panel);border:1.5px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:.82rem;outline:none;}

/* TABLE */
/* Contentor de tabela: painel com bordas e scroll horizontal */
.table-card{background:var(--panel);border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden;}
/* Wrapper de scroll horizontal: permite tabelas largas em ecrãs pequenos */
.tbl-scroll{overflow-x:auto;}
/* Tabela: largura total, sem bordas duplas (border-collapse) */
table{width:100%;border-collapse:collapse;}
/* Cabeçalho de tabela: fundo mais escuro, texto pequeno em maiúsculas */
thead th{background:var(--bg3);padding:10px 15px;text-align:left;font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:var(--text2);border-bottom:1.5px solid var(--border);white-space:nowrap;}
/* Linha de dados: borda inferior fina, transição de fundo no hover */
tbody tr{border-bottom:1px solid var(--border);transition:background .1s;}
/* Hover nas linhas da tabela: fundo azul muito translúcido */
tbody tr:hover{background:rgba(14,165,233,.04);}
/* Última linha da tabela: sem borda inferior */
tbody tr:last-child{border-bottom:none;}
/* Célula de dados: padding interno, alinhamento vertical ao centro */
td{padding:10px 15px;font-size:.875rem;vertical-align:middle;}
/* Célula de acções: flex com gap entre os botões de editar/apagar */
.td-act{display:flex;gap:5px;flex-wrap:wrap;}
/* Célula de dados: padding interno, alinhamento vertical ao centro */
.empty-td{text-align:center;padding:32px;color:var(--text3);font-size:.875rem;}

/* BADGES */
/* Badge genérico: pílula de texto pequeno e negrito */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;}
/* Badge azul: status informativo (consultas, agendamentos) */
.b-blue{background:rgba(14,165,233,.14);color:var(--primary-light);border:1px solid rgba(14,165,233,.25);}
/* Badge verde: status positivo (activo, pago, curado) */
.b-green{background:var(--green-dim);color:var(--green);border:1px solid rgba(34,197,94,.25);}
/* Badge âmbar: status de aviso (pendente, em curso) */
.b-amber{background:var(--amber-dim);color:var(--amber);border:1px solid rgba(245,158,11,.25);}
/* Badge vermelho: status crítico (urgência, erro, em falta) */
.b-red{background:var(--red-dim);color:var(--red);border:1px solid rgba(239,68,68,.25);}
/* Badge roxo: status especial (cirurgias, RH) */
.b-purple{background:var(--purple-dim);color:var(--purple);border:1px solid rgba(168,85,247,.25);}
/* Badge teal: status de enfermagem ou em tratamento */
.b-teal{background:var(--teal-dim);color:var(--teal);border:1px solid rgba(20,184,166,.25);}
/* Badge cinzento: status neutro ou desconhecido */
.b-gray{background:rgba(122,156,192,.1);color:var(--text2);border:1px solid rgba(122,156,192,.2);}

/* ALERTS */
/* Alerta genérico: caixa com borda e padding para mensagens do sistema */
.alert{border-radius:9px;padding:11px 15px;margin-bottom:12px;font-size:.85rem;border:1.5px solid;}
/* Alerta de aviso: fundo âmbar translúcido com borda âmbar */
.alert-warn{background:var(--amber-dim);border-color:rgba(245,158,11,.3);color:var(--amber);}
/* Alerta de perigo: fundo vermelho translúcido com borda vermelha */
.alert-danger{background:var(--red-dim);border-color:rgba(239,68,68,.3);color:var(--red);}
/* Alerta de sucesso: fundo verde translúcido com borda verde */
.alert-success{background:var(--green-dim);border-color:rgba(34,197,94,.3);color:var(--green);}
/* Alerta informativo: fundo azul translúcido com borda azul */
.alert-info{background:rgba(14,165,233,.08);border-color:rgba(14,165,233,.25);color:var(--primary-light);}

/* MODAL */
/* Fundo do modal: overlay escuro e desfocado sobre toda a página */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:100;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(5px);}
/* Estado aberto do modal: muda display para flex (visível) */
.modal-overlay.open{display:flex;}
/* Caixa do modal: painel central com borda, raio e altura máxima scrollável */
.modal{background:var(--panel);border:1.5px solid var(--border);border-radius:16px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:fadeUp .2s ease;}
/* Modal grande: largura máxima aumentada para 720px */
.modal-lg{max-width:720px;}
.modal::-webkit-scrollbar{width:4px;}
.modal::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
/* Cabeçalho do modal: título à esquerda + botão X à direita */
.modal-hdr{padding:20px 24px;border-bottom:1.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
/* Título do modal: texto médio e negrito */
.modal-ttl{font-size:.93rem;font-weight:700;}
/* Botão de fechar modal (X): sem fundo, vermelho no hover */
.modal-close{background:none;border:none;color:var(--text2);cursor:pointer;font-size:1.1rem;padding:4px 8px;border-radius:6px;transition:color .14s;}
.modal-close:hover{color:var(--red);}
/* Corpo do modal: padding interno do conteúdo */
.modal-body{padding:24px;}
/* Rodapé do modal: linha com botões alinhados à direita */
.modal-foot{padding:14px 24px;border-top:1.5px solid var(--border);display:flex;gap:8px;justify-content:flex-end;}

/* TOAST */
/* Contentor de toasts (notificações pop-up): canto superior direito fixo */
.toast-box{position:fixed;top:18px;right:18px;z-index:200;display:flex;flex-direction:column;gap:7px;}
/* Toast individual: mini-painel com animação de entrada da direita */
.toast{background:var(--panel);border:1.5px solid var(--border);border-radius:10px;padding:11px 16px;min-width:260px;font-size:.85rem;box-shadow:var(--shadow);display:flex;align-items:center;gap:9px;animation:slideIn .25s ease;}
/* Toast de sucesso: borda esquerda verde */
.toast-success{border-left:4px solid var(--green);}
/* Toast de erro: borda esquerda vermelha */
.toast-error{border-left:4px solid var(--red);}
/* Toast de aviso: borda esquerda âmbar */
.toast-warn{border-left:4px solid var(--amber);}
/* Toast informativo: borda esquerda azul */
.toast-info{border-left:4px solid var(--primary-light);}

/* CONFIRM */
/* Caixa de confirmação: painel centralizado para confirmar acções destrutivas */
.confirm-box{background:var(--panel);border:1.5px solid var(--border);border-radius:16px;padding:28px;max-width:380px;width:100%;box-shadow:var(--shadow-lg);animation:fadeUp .2s ease;text-align:center;}
.confirm-box h3{font-size:1rem;margin-bottom:10px;}
.confirm-box p{font-size:.87rem;color:var(--text2);margin-bottom:22px;}
.confirm-btns{display:flex;gap:10px;justify-content:center;}

/* CHART */
/* Card de gráfico: painel com padding para gráficos de barras */
.chart-card{background:var(--panel);border:1.5px solid var(--border);border-radius:var(--r);padding:18px;margin-bottom:14px;}
.chart-ttl{font-size:.85rem;font-weight:700;color:var(--text2);margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;}
/* Gráfico de barras: flex com colunas alinhadas na base, altura fixa */
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:130px;}
/* Coluna do gráfico de barras: flex coluna com barra + label */
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;}
/* Barra preenchida do gráfico: animação de crescimento suave */
.bar-fill{width:100%;border-radius:4px 4px 0 0;transition:height .8s cubic-bezier(.4,0,.2,1);min-height:2px;cursor:pointer;}
.bar-fill:hover{opacity:.8;}
/* Label abaixo de cada barra do gráfico: texto truncado se longo */
.bar-lbl{font-size:.62rem;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center;}
.bar-val{font-size:.65rem;font-family:'DM Mono',monospace;color:var(--text2);}

/* DONUT */
.donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.donut-legend{display:flex;flex-direction:column;gap:7px;}
.donut-leg-item{display:flex;align-items:center;gap:8px;font-size:.8rem;}
.donut-leg-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0;}

/* INFO CARDS */
/* Grelha de info cards: auto-fill com mínimo de 240px por card */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:20px;}
/* Info card: painel com título e linhas de dados chave-valor */
.info-card{background:var(--panel);border:1.5px solid var(--border);border-radius:var(--r);padding:18px;}
/* Título do info card: texto pequeno em maiúsculas com margem inferior */
.info-card-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text2);margin-bottom:12px;}
/* Linha de dados: label à esquerda, valor à direita, com borda inferior */
.info-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);font-size:.85rem;}
.info-row:last-child{border-bottom:none;}
/* Valor na linha de dados: negrito */
.info-val{font-weight:600;}

/* TIMELINE */
.timeline{padding:4px 0;}
.tl-item{display:flex;gap:12px;margin-bottom:14px;position:relative;}
.tl-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:4px;}
.tl-body{flex:1;}
.tl-title{font-size:.84rem;font-weight:600;margin-bottom:2px;}
.tl-time{font-size:.72rem;color:var(--text3);}

/* PRONTUARIO */
.pronto-section{background:var(--panel);border:1.5px solid var(--border);border-radius:var(--r);padding:18px;margin-bottom:14px;}
.pronto-section-title{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--primary-light);margin-bottom:14px;display:flex;align-items:center;gap:7px;}

/* LEITO */
.leitos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px;margin-bottom:18px;}
/* Card de leito: painel compacto com número, status e informação do doente */
.leito-card{border:1.5px solid var(--border);border-radius:9px;padding:12px 8px;text-align:center;cursor:pointer;transition:all .15s;}
.leito-card:hover{transform:translateY(-1px);}
.leito-num{font-size:1.1rem;font-weight:800;margin-bottom:3px;}
.leito-status{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
/* Leito livre: fundo e texto verdes */
.leito-livre{background:var(--green-dim);border-color:rgba(34,197,94,.3);}
.leito-livre .leito-num{color:var(--green);}
.leito-livre .leito-status{color:var(--green);}
/* Leito ocupado: fundo e texto vermelhos */
.leito-ocupado{background:var(--red-dim);border-color:rgba(239,68,68,.3);}
.leito-ocupado .leito-num{color:var(--red);}
.leito-ocupado .leito-status{color:var(--red);}
/* Leito em manutenção: fundo e texto âmbar */
.leito-manut{background:var(--amber-dim);border-color:rgba(245,158,11,.3);}
.leito-manut .leito-num{color:var(--amber);}
.leito-manut .leito-status{color:var(--amber);}
/* Leito reservado: fundo e texto roxos */
.leito-reservado{background:var(--purple-dim);border-color:rgba(168,85,247,.3);}
.leito-reservado .leito-num{color:var(--purple);}
.leito-reservado .leito-status{color:var(--purple);}

/* MISC */
.mb-14{margin-bottom:14px;}
.mt-14{margin-top:14px;}
.mt-20{margin-top:20px;}
.gap-8{display:flex;gap:8px;}
.sep{height:1px;background:var(--border);margin:16px 0;}
.pill{display:inline-block;background:var(--panel2);border:1px solid var(--border);border-radius:20px;padding:3px 10px;font-size:.72rem;color:var(--text2);}
.urgente-pulse{animation:pulse 1.5s infinite;}
/* Animação pulse: pisca entre opacidade 1 e 0.5 (urgências críticas) */
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}}

/* URGENCIA SEMAFORO */
/* Badge de urgência: pílula colorida com nível Manchester (vermelho a azul) */
.urgencia-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;}
/* Urgência vermelha: emergência imediata — cor vermelho-vivo */
.urg-vermelho{background:rgba(239,68,68,.18);color:#ff6b6b;border:1px solid rgba(239,68,68,.3);}
/* Urgência laranja: muito urgente (10 min) — cor laranja */
.urg-laranja{background:rgba(249,115,22,.15);color:#fb923c;border:1px solid rgba(249,115,22,.3);}
/* Urgência amarela: urgente (30 min) — cor âmbar */
.urg-amarelo{background:var(--amber-dim);color:var(--amber);border:1px solid rgba(245,158,11,.25);}
/* Urgência verde: pouco urgente (60 min) — cor verde */
.urg-verde{background:var(--green-dim);color:var(--green);border:1px solid rgba(34,197,94,.25);}
/* Urgência azul: não urgente (120 min) — cor azul */
.urg-azul{background:rgba(14,165,233,.12);color:var(--primary-light);border:1px solid rgba(14,165,233,.25);}

/* VITAIS */
/* Grelha de sinais vitais: auto-fill com mínimo de 140px por card */
.vitais-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:14px;}
/* Card de sinal vital: ícone + valor + label centrados */
.vital-card{background:var(--bg3);border:1.5px solid var(--border);border-radius:9px;padding:12px;text-align:center;}
.vital-ico{font-size:1.3rem;margin-bottom:4px;}
/* Valor do sinal vital: fonte monospace grande para leitura rápida */
.vital-val{font-size:1.15rem;font-weight:800;font-family:'DM Mono',monospace;color:var(--text);}
.vital-lbl{font-size:.65rem;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-top:2px;}
/* Sinal vital normal: cor verde */
.vital-status-ok{color:var(--green);}
/* Sinal vital em alerta: cor âmbar */
.vital-status-warn{color:var(--amber);}
/* Sinal vital crítico: cor vermelha */
.vital-status-crit{color:var(--red);}

/* ANIMATIONS */
/* Animação fadeUp: elemento aparece suavemente a subir (modais, páginas) */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
/* Animação slideIn: elemento entra da direita (toasts) */
@keyframes slideIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}

/* WELCOME TOAST — canto inferior direito, exibido ao entrar no sistema */
.welcome-box{position:fixed;bottom:18px;right:18px;z-index:300;pointer-events:none;}
.welcome-toast{pointer-events:auto;display:flex;align-items:center;gap:12px;background:var(--panel);border:1.5px solid var(--border);border-left:4px solid var(--primary-light);border-radius:12px;padding:14px 18px;min-width:260px;max-width:340px;box-shadow:var(--shadow-lg);animation:welcomeIn .35s ease, welcomeOut .4s ease 4.1s forwards;}
.welcome-toast .wt-av{width:38px;height:38px;border-radius:50%;background:var(--primary-glow);color:var(--primary-light);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex-shrink:0;}
.welcome-toast .wt-txt{font-size:.85rem;line-height:1.35;color:var(--text2);}
.welcome-toast .wt-txt b{color:var(--text);}
@keyframes welcomeIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes welcomeOut{to{opacity:0;transform:translateY(16px);}}

/* SINO DE NOTIFICAÇÕES DE SEGURANÇA (admin) */
.notif-bell-wrap{position:relative;}
.notif-bell-btn{position:relative;}
.notif-badge{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;border-radius:999px;font-size:.65rem;font-weight:700;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.notif-drop{position:absolute;top:calc(100% + 8px);right:0;width:320px;max-height:380px;background:var(--panel);border:1.5px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);display:none;flex-direction:column;z-index:250;overflow:hidden;}
.notif-drop.open{display:flex;}
.notif-drop-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);font-size:.8rem;font-weight:700;color:var(--text2);}
.notif-drop-body{overflow-y:auto;max-height:320px;}
.notif-item{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);font-size:.8rem;}
.notif-item:last-child{border-bottom:none;}
.notif-item.unread{background:var(--primary-glow);}
.notif-item .ni-ico{font-size:1.1rem;flex-shrink:0;}
.notif-item .ni-txt{color:var(--text2);line-height:1.4;}
.notif-item .ni-txt b{color:var(--text);}
.notif-item .ni-time{font-size:.68rem;color:var(--text3);margin-top:2px;}
.notif-empty{padding:24px 14px;text-align:center;color:var(--text3);font-size:.8rem;}

/* PHOTO UPLOAD */
.foto-wrap{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.foto-preview{width:80px;height:80px;border-radius:12px;object-fit:cover;border:2px solid var(--border);background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:2rem;overflow:hidden;flex-shrink:0;}
.foto-preview img{width:100%;height:100%;object-fit:cover;}
.foto-actions{display:flex;flex-direction:column;gap:6px;}

/* QR Code */
.qr-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;}
.qr-canvas{border-radius:6px;}
.qr-lbl{font-size:.68rem;color:var(--text3);text-align:center;}

/* PRINT DOCUMENT */
/* Documento de impressão: oculto no ecrã, visível apenas ao imprimir */
.print-doc{display:none;}

/* RECIBO — impressão em formato de talão térmico (58/80mm) */
.print-recibo{display:none;}
/* ═══════════════════════════════════════
   RESPONSIVE — TABLET & MOBILE
═══════════════════════════════════════ */

/* Sidebar overlay backdrop */
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:39;backdrop-filter:blur(2px);}
.sidebar-backdrop.show{display:block;}

/* ── TABLET (≤ 1024px) ── */
/* Media query para tablet (≤1024px): ajusta sidebar e grelhas */
@media(max-width:1024px){
    /* --sidebar-w: largura da sidebar de navegação lateral */
  :root{--sidebar-w:230px;}
  /* Grelha de cards de estatísticas: responsiva, mínimo 185px por card */
  .stats-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
  /* Grelha de 3 colunas iguais com gap de 12px */
  .grid-3{grid-template-columns:1fr 1fr;}
  /* Área de conteúdo: scrollável, padding interno, reset de scroll ao mudar de página */
  .content{padding:16px;}
}

/* ── MOBILE (≤ 768px) ── */
/* Media query para mobile (≤768px): sidebar off-canvas, tabelas com scroll */
@media(max-width:768px){
  /* Sidebar: off-canvas */
    /* --sidebar-w: largura da sidebar de navegação lateral */
  :root{--sidebar-w:270px;}
  /* Sidebar de navegação: largura fixa, fundo escuro, borda direita */
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:40;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:none;
  }
  .sidebar.open{
    transform:translateX(0);
    box-shadow:8px 0 32px rgba(0,0,0,.5);
  }

  /* Show hamburger */
  /* Botão hamburger (móvel): oculto no desktop, visível em ecrãs pequenos */
  .menu-btn{display:flex;align-items:center;justify-content:center;}

  /* Main fills full width */
  /* Área principal: flex coluna — topbar em cima, conteúdo em baixo */
  .main{width:100%;}

  /* Topbar */
  /* Barra superior: altura fixa, fundo escuro, título da página e controlos */
  .topbar{padding:0 14px;}
  /* Relógio em tempo real: fonte monospace para dígitos alinhados */
  .topbar-clock{display:none;}
  .ano-badge{font-size:.65rem;padding:4px 8px;}
  /* Título da página actual na barra superior: negrito e tamanho médio */
  .topbar-title{font-size:.85rem;}

  /* Content */
  /* Área de conteúdo: scrollável, padding interno, reset de scroll ao mudar de página */
  .content{padding:12px;}

  /* Stats grid: 2 columns */
  /* Grelha de cards de estatísticas: responsiva, mínimo 185px por card */
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  /* Card de estatística: painel com ícone à esquerda e valor à direita, com hover */
  .stat-card{padding:12px 10px;gap:10px;}
  /* Ícone do card de estatística: quadrado arredondado colorido */
  .stat-ico{width:38px;height:38px;font-size:1rem;}
  /* Valor numérico grande do card de estatística: fonte bold de 1.75rem */
  .stat-val{font-size:1.4rem;}

  /* Grids collapse */
  /* Grelha de 3 colunas iguais com gap de 12px */
  .grid-2,.grid-3{grid-template-columns:1fr;}
  /* Grelha de info cards: auto-fill com mínimo de 240px por card */
  .info-grid{grid-template-columns:1fr;}

  /* Tables: scroll horizontal */
  /* Wrapper de scroll horizontal: permite tabelas largas em ecrãs pequenos */
  .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  /* Tabela: largura total, sem bordas duplas (border-collapse) */
  table{min-width:520px;}
  td,th{padding:8px 10px;white-space:nowrap;}

  /* sec-hdr stacks */
  .sec-hdr{flex-direction:column;align-items:flex-start;gap:8px;}
  .sec-ctrl{width:100%;flex-wrap:wrap;}
  .search-box{width:100%;min-width:0;}

  /* Modais: full screen no mobile */
  /* Fundo do modal: overlay escuro e desfocado sobre toda a página */
  .modal-overlay{padding:0;align-items:flex-end;}
  /* Caixa do modal: painel central com borda, raio e altura máxima scrollável */
  .modal{
    max-width:100%;width:100%;
    border-radius:20px 20px 0 0;
    max-height:92vh;
  }
  /* Modal grande: largura máxima aumentada para 720px */
  .modal-lg{max-width:100%;}
  /* Corpo do modal: padding interno do conteúdo */
  .modal-body{padding:16px;}
  /* Cabeçalho do modal: título à esquerda + botão X à direita */
  .modal-hdr{padding:16px 18px;}
  /* Rodapé do modal: linha com botões alinhados à direita */
  .modal-foot{padding:12px 18px;flex-wrap:wrap;}
  /* Botão base: flex, gap interno, padding, cantos arredondados, transição suave */
  .modal-foot .btn{flex:1;justify-content:center;}

  /* Confirm modal fica centrado */
  #modal-confirm{align-items:center;padding:20px;}
  /* Caixa de confirmação: painel centralizado para confirmar acções destrutivas */
  .confirm-box{width:100%;}

  /* Topbar right: simplificar */
  /* Botão base: flex, gap interno, padding, cantos arredondados, transição suave */
  .topbar-right .btn{padding:6px 10px;font-size:.75rem;}

  /* Ocultar colunas menos importantes nas tabelas */
  .hide-mobile{display:none!important;}

  /* Vitais grid no prontuário */
  /* Grelha de sinais vitais: auto-fill com mínimo de 140px por card */
  .vitais-grid{grid-template-columns:repeat(2,1fr)!important;}

  /* Horário grid */
  .horario-grid{overflow-x:auto;display:block;}

  /* Emergência cards */
  .emerg-stats{grid-template-columns:repeat(2,1fr)!important;}

  /* Login box */
  /* Caixa de login: painel central com bordas arredondadas, sombra e animação de entrada */
  .login-box{padding:28px 20px;}

  /* Sidebar footer */
  /* Rodapé da sidebar: copyright e localização do hospital */
  .sidebar-foot{font-size:.6rem;}

  /* Botões xs ficam um pouco maiores no touch */
  /* Modificador de botão muito pequeno: usado nas tabelas (editar, apagar) */
  .btn-xs{padding:6px 10px;font-size:.78rem;}
  /* Célula de acções: flex com gap entre os botões de editar/apagar */
  .td-act{gap:4px;}

  /* Charts */
  /* Gráfico de barras: flex com colunas alinhadas na base, altura fixa */
  .bar-chart{height:100px;}
  /* Label abaixo de cada barra do gráfico: texto truncado se longo */
  .bar-lbl{font-size:.58rem;}

  /* Dashboard grid-2 */
  /* Grelha de 2 colunas iguais com gap de 12px */
  #page-dashboard .grid-2{grid-template-columns:1fr;}
}

/* ── SMALL MOBILE (≤ 420px) ── */
/* Media query para mobile pequeno (≤420px): grelhas de 1-2 colunas */
@media(max-width:420px){
  /* Grelha de cards de estatísticas: responsiva, mínimo 185px por card */
  .stats-grid{grid-template-columns:1fr 1fr;}
  /* Valor numérico grande do card de estatística: fonte bold de 1.75rem */
  .stat-val{font-size:1.2rem;}
  /* Card de estatística: painel com ícone à esquerda e valor à direita, com hover */
  .stat-card{padding:10px 8px;}
  .topbar-right .ano-badge{display:none;}
  /* Modificador de botão pequeno: padding e fonte reduzidos */
  .btn-sm{padding:7px 11px;font-size:.78rem;}
  /* Botão base: flex, gap interno, padding, cantos arredondados, transição suave */
  .modal-foot .btn{padding:10px 8px;font-size:.8rem;}
}

/* Media query de impressão: oculta tudo excepto o div#print-doc */
@media print{
  body *{visibility:hidden!important;}
  .print-doc,
  .print-doc *{visibility:visible!important;}
  /* Documento de impressão: oculto no ecrã, visível apenas ao imprimir */
  .print-doc{display:block!important;position:fixed;inset:0;background:#fff;color:#000;padding:20mm 15mm;font-family:'Times New Roman',serif;font-size:12pt;z-index:99999;}
  /* Cabeçalho do documento impresso: nome e endereço do hospital centrados */
  .print-header{text-align:center;border-bottom:2px solid #000;padding-bottom:10px;margin-bottom:14px;}
  /* Nome do hospital no impresso: texto grande e negrito */
  .print-hospital-name{font-size:16pt;font-weight:bold;margin-bottom:2px;}
  .print-hospital-addr{font-size:9pt;color:#444;}
  /* Título do documento impresso: em maiúsculas, centrado */
  .print-title{font-size:15pt;font-weight:bold;text-align:center;margin:10px 0;text-transform:uppercase;letter-spacing:1px;}
  .print-divider{border:none;border-top:1px solid #000;margin:10px 0;}
  .print-row{display:flex;justify-content:space-between;margin-bottom:6px;font-size:11pt;}
  .print-label{font-weight:bold;}
  .print-body{margin:12px 0;}
  .print-meds{border:1px solid #000;border-radius:4px;padding:10px;margin:10px 0;}
  .print-med-item{margin-bottom:6px;padding-bottom:6px;border-bottom:1px dashed #ccc;}
  .print-med-item:last-child{border-bottom:none;margin-bottom:0;}
  .print-footer{position:fixed;bottom:20mm;left:15mm;right:15mm;}
  /* Área de assinatura no impresso: alinhada à direita com linha e carimbo */
  .print-sign-area{display:flex;justify-content:flex-end;margin-top:30px;}
  .print-sign-box{text-align:center;min-width:200px;}
  .print-sign-line{border-top:1px solid #000;margin-bottom:4px;margin-top:40px;}
  .print-stamp-hint{font-size:8pt;color:#666;font-style:italic;}
  .print-number{font-size:9pt;color:#888;margin-top:4px;}
  .no-print{display:none!important;}

  /* RECIBO térmico — largura estreita, fonte monoespaçada, estilo talão */
  .print-recibo,.print-recibo *{visibility:visible!important;}
  .print-recibo{display:block!important;position:fixed;top:0;left:0;width:76mm;background:#fff;color:#000;padding:4mm 3mm;font-family:'Courier New',monospace;font-size:9.5pt;line-height:1.5;z-index:99999;}
  .print-recibo.pr-58mm{width:48mm;padding:3mm 2mm;font-size:8pt;line-height:1.4;}
  .pr-center{text-align:center;}
  .pr-bold{font-weight:bold;}
  .pr-sm{font-size:8pt;color:#333;}
  .print-recibo.pr-58mm .pr-sm{font-size:6.8pt;}
  .pr-line{border-top:1px dashed #000;margin:5px 0;}
  .pr-row{display:flex;justify-content:space-between;gap:6px;}
  .pr-item{margin-bottom:2px;}
  .pr-total{font-weight:bold;font-size:11.5pt;border-top:1px solid #000;padding-top:5px;margin-top:5px;}
  .print-recibo.pr-58mm .pr-total{font-size:9.5pt;}
}

/* EMERGENCY QUICK REG */
.emergency-card{background:var(--red-dim);border:2px solid rgba(239,68,68,.4);border-radius:var(--r);padding:16px;margin-bottom:16px;}
.emergency-card-title{color:var(--red);font-weight:800;font-size:.9rem;display:flex;align-items:center;gap:7px;margin-bottom:12px;}

/* TRIAGE TIMER */
.tri-timer{font-family:'DM Mono',monospace;font-size:.8rem;padding:3px 8px;background:var(--amber-dim);border:1px solid rgba(245,158,11,.3);border-radius:6px;color:var(--amber);}
.tri-timer.over{background:var(--red-dim);border-color:rgba(239,68,68,.3);color:var(--red);}

/* SCALE / DOCTOR SCHEDULE */
.scale-grid{display:grid;grid-template-columns:120px repeat(7,1fr);border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden;}
.scale-cell{padding:8px 6px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);font-size:.75rem;}
.scale-cell:last-child{border-right:none;}
.scale-header{background:var(--bg3);font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);}
.scale-shift-m{background:rgba(14,165,233,.1);color:var(--primary-light);}
.scale-shift-t{background:rgba(20,184,166,.1);color:var(--teal);}
.scale-shift-n{background:rgba(168,85,247,.1);color:var(--purple);}
.scale-shift-f{background:rgba(34,197,94,.1);color:var(--green);}

/* NOTIFICATION BADGE */
.notif-dot{width:8px;height:8px;background:var(--red);border-radius:50%;position:absolute;top:4px;right:4px;animation:pulse 1.5s infinite;}

/* SMS / NOTIF LOG */
.notif-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.notif-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;}
.notif-sms{background:var(--green-dim);}
.notif-warn{background:var(--amber-dim);}
.notif-err{background:var(--red-dim);}
.notif-body .notif-msg{font-size:.84rem;}
.notif-body .notif-time{font-size:.7rem;color:var(--text3);}

/* PRESENCE */
.presence-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);}
.presence-dot{width:10px;height:10px;border-radius:50%;}
.presence-present{background:var(--green);}
.presence-absent{background:var(--red);}
.presence-late{background:var(--amber);}

/* PAYMENT METHODS */
/* Grelha de métodos de pagamento: cards seleccionáveis (dinheiro, Multicaixa, etc.) */
.pay-method-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.pay-method-card{border:2px solid var(--border);border-radius:10px;padding:14px;text-align:center;cursor:pointer;transition:all .15s;}
.pay-method-card:hover,.pay-method-card.selected{border-color:var(--primary-light);background:rgba(14,165,233,.08);}
.pay-method-icon{font-size:1.8rem;margin-bottom:6px;}
.pay-method-name{font-size:.82rem;font-weight:700;}

/* DOCUMENT CARDS */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:20px;}
.doc-card{background:var(--panel);border:1.5px solid var(--border);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:10px;transition:transform .18s,box-shadow .18s;}
.doc-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.doc-card-ico{font-size:2.2rem;margin-bottom:4px;}
.doc-card-title{font-size:.93rem;font-weight:700;}
.doc-card-desc{font-size:.8rem;color:var(--text2);flex:1;}
.doc-card-cargo{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px;}
.doc-cargo-tag{font-size:.62rem;font-weight:700;padding:2px 7px;border-radius:10px;text-transform:uppercase;letter-spacing:.4px;}
.doc-btns{display:flex;gap:7px;margin-top:4px;}
/* CARGO RESTRICTION BANNER */
.nav-item.nav-locked{opacity:.35;pointer-events:none;}
.access-denied{text-align:center;padding:60px 20px;color:var(--text3);}
.access-denied .ad-ico{font-size:3rem;margin-bottom:12px;}
.access-denied .ad-title{font-size:1.1rem;font-weight:700;color:var(--text2);margin-bottom:8px;}

/* ═══ SISTEMA DE PAGAMENTO ═══ */
/* Grelha de métodos de pagamento: cards seleccionáveis (dinheiro, Multicaixa, etc.) */
.pay-method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
/* Grelha de métodos de pagamento: cards seleccionáveis (dinheiro, Multicaixa, etc.) */
.pay-card{border:2px solid var(--border);border-radius:11px;padding:14px 10px;text-align:center;cursor:pointer;transition:all .15s;background:var(--panel);}
.pay-card:hover{border-color:var(--primary-light);background:rgba(14,165,233,.06);}
.pay-card.selected{border-color:var(--primary-light);background:rgba(14,165,233,.12);box-shadow:0 0 0 3px var(--primary-glow);}
.pay-card-ico{font-size:1.6rem;margin-bottom:5px;}
.pay-card-lbl{font-size:.75rem;font-weight:700;color:var(--text2);}
.pay-card.selected .pay-card-lbl{color:var(--primary-light);}
/* Pré-visualização do recibo: fundo com borda tracejada, estilo de recibo */
.recibo-preview{background:var(--bg3);border:1.5px dashed var(--border);border-radius:10px;padding:16px;font-size:.82rem;line-height:1.8;}
.recibo-linha{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dashed var(--border);}
.recibo-linha:last-child{border-bottom:none;}
.recibo-total{font-size:1rem;font-weight:800;color:var(--green);margin-top:8px;padding-top:8px;border-top:2px solid var(--border);display:flex;justify-content:space-between;}
/* Badge de status de pagamento: pago, pendente, isento ou cancelado */
.pag-status-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;}
/* Badge de pagamento pago: cor verde */
.pag-pago{background:var(--green-dim);color:var(--green);border:1px solid rgba(34,197,94,.3);}
/* Badge de pagamento pendente: cor âmbar */
.pag-pendente{background:var(--amber-dim);color:var(--amber);border:1px solid rgba(245,158,11,.3);}
/* Badge de isenção de pagamento: cor roxa */
.pag-isento{background:var(--purple-dim);color:var(--purple);border:1px solid rgba(168,85,247,.3);}
/* Badge de pagamento cancelado: cor vermelha */
.pag-cancelado{background:var(--red-dim);color:var(--red);border:1px solid rgba(239,68,68,.3);}
/* Valor monetário em destaque: fonte grande, negrito, monospace */
.valor-destaque{font-size:1.4rem;font-weight:800;font-family:'DM Mono',monospace;}
/* Barra de resumo dos pagamentos do dia: total, pendentes, nº transacções */
.pag-resumo-bar{display:flex;gap:14px;flex-wrap:wrap;background:var(--panel);border:1.5px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:16px;align-items:center;}
.pag-resumo-item{text-align:center;min-width:90px;}
.pag-resumo-label{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);margin-bottom:3px;}
.pag-resumo-val{font-size:1.15rem;font-weight:800;font-family:'DM Mono',monospace;}
.pag-divider{width:1px;background:var(--border);height:36px;align-self:center;}
/* Linha de chips de serviços pré-definidos para selecção rápida */
.servico-preset{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
/* Chip de serviço: pílula clicável para seleccionar tipo de serviço */
.serv-chip{padding:5px 12px;border-radius:20px;border:1.5px solid var(--border);font-size:.78rem;font-weight:600;cursor:pointer;background:var(--panel2);color:var(--text2);transition:all .12s;}
.serv-chip:hover{border-color:var(--primary-light);color:var(--primary-light);}
.serv-chip.selected{background:rgba(14,165,233,.12);border-color:var(--primary-light);color:var(--primary-light);}
/* Media query para mobile (≤768px): sidebar off-canvas, tabelas com scroll */
@media(max-width:768px){.pay-method-grid{grid-template-columns:repeat(2,1fr);}}
<!-- FIM DO BLOCO DE ESTILOS CSS -->

/* ═══ EXTRA — ÁREA DO VENDEDOR (HABC) ═══ */
.emoji-ico{font-size:1.05em;display:inline-block;width:20px;text-align:center;margin-right:2px;}
.login-cross-emoji{width:56px;height:56px;background:linear-gradient(135deg,var(--green,#22c55e),#10b981);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px;box-shadow:0 6px 20px rgba(16,185,129,.3);}
.sidebar-brand-icon-emoji{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#065f46,#10b981);display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:0 3px 12px rgba(16,185,129,.3);}
.cart-table td{vertical-align:middle;}
.qty-stepper{display:inline-flex;align-items:center;gap:6px;background:var(--bg3);border:1.5px solid var(--border);border-radius:8px;padding:2px 4px;}
.qty-stepper button{background:none;border:none;color:var(--primary-light);font-size:.95rem;font-weight:800;cursor:pointer;padding:2px 7px;}
.qty-stepper input{width:40px;text-align:center;background:none;border:none;color:var(--text);font-size:.85rem;font-family:'DM Mono',monospace;}
.cart-remove{background:none;border:none;color:var(--red);cursor:pointer;font-size:.95rem;padding:3px 6px;}
.cart-empty{text-align:center;padding:40px 20px;color:var(--text3);}
.cart-empty .ce-ico{font-size:2.4rem;margin-bottom:8px;}
.barcode-scan-box{display:flex;gap:8px;margin-bottom:14px;}
.barcode-scan-box .search-box{flex:1;width:auto;}
.sale-summary{background:var(--panel);border:1.5px solid var(--border);border-radius:var(--r);padding:18px;position:sticky;top:0;}
.sale-summary-row{display:flex;justify-content:space-between;padding:6px 0;font-size:.85rem;color:var(--text2);}
.sale-summary-total{display:flex;justify-content:space-between;padding-top:12px;margin-top:8px;border-top:2px solid var(--border);font-size:1.3rem;font-weight:800;font-family:'DM Mono',monospace;color:var(--green);}
.validade-ok{color:var(--green);}
.validade-perto{color:var(--amber);font-weight:700;}
.validade-vencido{color:var(--red);font-weight:700;}
.caixa-status-bar{display:flex;align-items:center;gap:12px;background:var(--panel);border:1.5px solid var(--border);border-radius:var(--r);padding:16px 18px;margin-bottom:18px;}
.caixa-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;}
.caixa-dot.aberto{background:var(--green);box-shadow:0 0 8px var(--green);}
.caixa-dot.fechado{background:var(--red);}
.perfil-card{background:var(--panel);border:1.5px solid var(--border);border-radius:var(--r);padding:24px;display:flex;align-items:center;gap:18px;margin-bottom:20px;}
.perfil-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#065f46,#10b981);display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:800;color:#fff;flex-shrink:0;}
.activity-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);font-size:.83rem;}
.activity-item:last-child{border-bottom:none;}
.activity-time{color:var(--text3);font-size:.72rem;white-space:nowrap;}
.alert-card{display:flex;align-items:flex-start;gap:12px;background:var(--panel);border:1.5px solid var(--border);border-left:4px solid var(--amber);border-radius:10px;padding:14px 16px;margin-bottom:10px;}
.alert-card.crit{border-left-color:var(--red);}
.alert-card.ok{border-left-color:var(--green);}
.alert-card .ac-ico{font-size:1.3rem;}
.alert-card .ac-title{font-weight:700;font-size:.85rem;margin-bottom:2px;}
.alert-card .ac-desc{font-size:.78rem;color:var(--text2);}