@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
/* =====================================================================
   SISTEMA DE ALERTAS — HMAS · Design System
   Segue o padrao do E-NVH (Corporate Medical · Navy + Teal).
   Mapeia tambem as classes legadas das paginas de alertas.
   ===================================================================== */
:root{
  --navy-950:#030f1e;--navy-900:#0a1628;--navy-800:#0d2240;--navy-700:#0f2d55;
  --navy-600:#0a3d7a;--navy-500:#1155a3;--navy-400:#2d74c8;--navy-300:#5a9ee0;
  --navy-200:#a8cef0;--navy-100:#d4e8f8;--navy-50:#eef6fd;
  --teal-600:#0d7377;--teal-500:#14a89e;--teal-400:#1ec6b8;--teal-300:#5eddd5;--teal-100:#c8f5f2;
  --success:#10b981;--warning:#f59e0b;--danger:#ef4444;--info:#3b82f6;--purple:#8b5cf6;
  --bg-main:#f0f4f8;--bg-card:#ffffff;--bg-sidebar:#0a1628;
  --text-main:#1a2332;--text-muted:#64748b;--border:#e2e8f0;
  --radius-sm:6px;--radius-md:12px;--radius-lg:18px;--radius-xl:24px;
  --shadow-sm:0 1px 3px rgba(15,45,85,.08),0 1px 2px rgba(15,45,85,.06);
  --shadow-md:0 6px 18px rgba(15,45,85,.12);--shadow-lg:0 18px 40px rgba(15,45,85,.18);
  --shadow-glow:0 0 0 4px rgba(30,198,184,.18);
  --transition:all .2s cubic-bezier(.4,0,.2,1);--sidebar-w:260px;
  /* aliases legados (usados por paciente360.php / usuarios.php) */
  --azul:var(--navy-500);--azulc:var(--navy-100);--verde:var(--success);--cinza:var(--text-muted);
  --fundo:var(--bg-main);--card:var(--bg-card);--borda:var(--border);--texto:var(--text-main);
  --vermelho:var(--danger);--laranja:var(--warning);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{font-family:'Outfit',system-ui,-apple-system,sans-serif;line-height:1.6;color:var(--text-main);background:var(--bg-main);-webkit-font-smoothing:antialiased}
a{color:var(--navy-500);text-decoration:none}a:hover{color:var(--teal-600)}
.mono,.is-mono{font-family:'JetBrains Mono',monospace}
.cinza,.text-muted{color:var(--text-muted)}.nulo{color:#b8c2d4}

/* ---------------- Shell ---------------- */
.app-layout{display:flex;min-height:100vh}
.sidebar{position:fixed;top:0;left:0;width:var(--sidebar-w);height:100vh;background:var(--bg-sidebar);color:#cbd5e1;display:flex;flex-direction:column;z-index:50;transition:var(--transition);overflow-y:auto}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:22px 20px;border-bottom:1px solid rgba(255,255,255,.07)}
.sidebar-brand .logo{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,var(--teal-500),var(--navy-500));color:#fff;font-size:20px;font-weight:800}
.sidebar-brand b{color:#fff;font-size:16px;font-weight:800;letter-spacing:.3px;line-height:1.1}
.sidebar-brand span{display:block;font-size:11px;color:var(--teal-300);font-weight:500}
.nav-group{padding:14px 12px 4px}
.nav-group-label{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#64748b;padding:6px 12px;font-weight:700}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--radius-md);color:#cbd5e1;font-size:14.5px;font-weight:500;position:relative;transition:var(--transition)}
.nav-item .ico{font-size:18px;width:22px;text-align:center}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:rgba(30,198,184,.12);color:#fff}
.nav-item.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--teal-400)}
.sidebar-footer{margin-top:auto;padding:14px;border-top:1px solid rgba(255,255,255,.07)}
.user-chip{display:flex;align-items:center;gap:11px;padding:9px;border-radius:var(--radius-md);background:rgba(255,255,255,.04)}
.user-chip .avatar{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,var(--teal-500),var(--navy-400));color:#fff;font-weight:700}
.user-chip .meta b{color:#fff;font-size:13.5px;display:block;line-height:1.2}
.user-chip .meta span{font-size:11.5px;color:var(--teal-300);text-transform:capitalize}
.btn-logout{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;padding:9px;border-radius:var(--radius-md);background:rgba(239,68,68,.12);color:#fca5a5;font-size:13px;font-weight:600;border:none;cursor:pointer;transition:var(--transition);text-decoration:none}
.btn-logout:hover{background:rgba(239,68,68,.2);color:#fff}
.sidebar-overlay{position:fixed;inset:0;background:rgba(3,15,30,.5);z-index:40;display:none}

.main-content{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:30;height:64px;display:flex;align-items:center;gap:16px;padding:0 28px;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm)}
.topbar-title{font-size:18px;font-weight:700;color:var(--navy-800)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px;color:var(--text-muted);font-size:13px}
.topbar-clock{font-family:'JetBrains Mono',monospace}
.live{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--teal-600);background:var(--teal-100);padding:5px 11px;border-radius:999px}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--teal-500);box-shadow:0 0 0 0 rgba(20,168,158,.6);animation:ring 1.8s infinite}
.bell{position:relative;border:none;background:var(--navy-50);width:40px;height:40px;border-radius:12px;display:grid;place-items:center;cursor:pointer;color:var(--navy-600);transition:var(--transition);font-size:18px}
.bell:hover{background:var(--navy-100)}
.bell-n{position:absolute;top:-5px;right:-5px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;min-width:18px;height:18px;border-radius:10px;display:grid;place-items:center;padding:0 4px;box-shadow:0 0 0 2px #fff}
.btn-menu-toggle{display:none;background:none;border:none;font-size:24px;color:var(--navy-700);cursor:pointer}
.page-content{padding:28px;max-width:1400px;width:100%;animation:fadeUp .35s ease}
.appfooter{margin-left:var(--sidebar-w);text-align:center;color:var(--text-muted);font-size:12.5px;padding:16px}

/* ---------------- Headings ---------------- */
h1{font-size:24px;font-weight:800;color:var(--navy-900);letter-spacing:-.02em;margin-bottom:3px}
.sub{color:var(--text-muted);font-size:14px;margin-bottom:20px}

/* ---------------- Stat cards (imagens reais: bloco de notas com canto dobrado) ---------------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px}
.stat{position:relative;border:none;box-shadow:none;background:transparent;
  background-repeat:no-repeat;background-position:center;background-size:100% 100%;
  min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:16px 30px 30px 38px;transition:transform .25s}
.stat::before,.stat::after{content:none!important}
.stat:hover{transform:translateY(-4px)}
.stat-danger{background-image:url(../../img/card_laranja.png)}
.stat-warning{background-image:url(../../img/card_azulclaro.png)}
.stat-success{background-image:url(../../img/card_azul.png)}
.stat-teal{background-image:url(../../img/card_cinza.png)}
.stat .stat-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:12px;background:var(--navy-50);color:var(--navy-500)}
.stat .stat-ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stat-danger  .stat-ico{background:#fff0e6;color:#ea6a16}
.stat-warning .stat-ico{background:#e6f6ff;color:#0ea5e9}
.stat-success .stat-ico{background:#e6f0ff;color:var(--navy-500)}
.stat-teal    .stat-ico{background:#eef2f6;color:#64748b}
.stat .num{font-size:32px;font-weight:800;color:var(--navy-900);line-height:1.05}
.stat .num.v{color:#ea6a16}
.stat .rot{font-size:13px;color:var(--text-muted);font-weight:600;margin-top:2px;text-transform:uppercase;letter-spacing:.04em}

/* ---------------- Card / forms (legado) ---------------- */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:22px;margin-bottom:18px;transition:var(--transition)}
.card:hover{box-shadow:var(--shadow-md)}
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.filtros input,.filtros select,input[type=text],input[type=email],input[type=password],input[type=date],select{padding:10px 13px;border:1px solid var(--border);border-radius:var(--radius-md);font-size:14px;font-family:inherit;color:var(--text-main);background:#fff;transition:var(--transition)}
.filtros input:focus,.filtros select:focus,input:focus,select:focus{outline:none;border-color:var(--navy-400);box-shadow:0 0 0 3px rgba(45,116,200,.15)}

/* ---------------- Buttons (legado .btn/.sec/.sm/.danger) ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:var(--radius-md);font-size:14px;font-weight:600;font-family:inherit;border:1px solid transparent;cursor:pointer;transition:var(--transition);white-space:nowrap;line-height:1.2;text-decoration:none;background:linear-gradient(135deg,var(--navy-600),var(--navy-500));color:#fff}
.btn:hover{box-shadow:var(--shadow-glow),0 6px 16px rgba(17,85,163,.3);color:#fff}
.btn.sec{background:#fff;color:var(--navy-700);border-color:var(--border)}
.btn.sec:hover{background:var(--navy-50);border-color:var(--navy-200);box-shadow:none}
.btn.sm{padding:7px 12px;font-size:13px}
.btn.danger{background:var(--danger);color:#fff}
.btn.danger:hover{background:#dc2626;box-shadow:0 6px 16px rgba(239,68,68,.3)}

/* ---------------- Tables (legado) ---------------- */
.card[style*="overflow"],.table-wrap{border-radius:var(--radius-lg)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{background:linear-gradient(135deg,var(--navy-800),var(--navy-700));color:#cfe2f5;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:13px 16px;text-align:left;white-space:nowrap;position:sticky;top:0;z-index:1}
td{padding:13px 16px;border-bottom:1px solid var(--border);vertical-align:middle;transition:var(--transition)}
tbody tr:nth-child(even) td{background:var(--navy-50)}
tbody tr:hover td{background:var(--teal-100)}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--teal-500)}

/* ---------------- Badges (legado .badge/.b-*) ---------------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.4;background:#eef2f6;color:#475569}
.b-novo{background:#fee2e2;color:#b91c1c}.b-visto{background:#fef3c7;color:#b45309}.b-tratado{background:#d1fae5;color:#047857}.b-descartado{background:#eef2f6;color:#475569}

/* ---------------- Risco ---------------- */
.risco{display:inline-block;border-radius:999px;padding:4px 11px;font-weight:700;color:#fff;font-size:12px}
.r-VERMELHO,.r-EMERGENCIA{background:var(--danger)}
.r-LARANJA,.r-MUITO-URGENTE{background:#f97316}
.r-AMARELO,.r-URGENTE{background:#f59e0b;color:#3a2a00}
.r-VERDE,.r-POUCO-URGENTE{background:var(--success)}
.r-AZUL,.r-NAO-URGENTE{background:var(--info)}
.trecho{color:#475569;max-width:460px}
mark{background:#fff3c4;color:#92400e;border-radius:4px;padding:0 3px;font-weight:700;box-shadow:inset 0 -2px 0 #fcd34d}
/* badge da coluna Palavra: branco, vermelho, com elipse */
.badge-palavra{background:#fff;color:var(--danger);border:1px solid #fecaca;font-weight:700;max-width:175px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle}
/* painel de notificacoes */
.notif-wrap{position:relative}
.notif-panel{position:absolute;right:0;top:52px;width:330px;max-height:440px;overflow:auto;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:60;padding:8px}
.notif-panel[hidden]{display:none}
.notif-head{font-size:11.5px;font-weight:700;color:var(--navy-800);padding:8px 10px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.notif-clear{font-size:11px;color:var(--navy-500);cursor:pointer;font-weight:600;text-transform:none;letter-spacing:0}
.notif-item{display:flex;gap:10px;padding:10px;border-radius:var(--radius-md);align-items:flex-start}
.notif-item:hover{background:var(--navy-50)}
.notif-item .ni{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:none;font-size:16px;background:linear-gradient(135deg,var(--teal-500),var(--navy-500))}
.notif-item.r-vermelho .ni{background:var(--danger)}.notif-item.r-laranja .ni{background:#f97316}.notif-item.r-amarelo .ni{background:var(--warning)}.notif-item.r-verde .ni{background:var(--success)}.notif-item.r-azul .ni{background:var(--info)}
.notif-item b{font-size:13.5px;color:var(--navy-800);display:block;line-height:1.25}
.notif-item small{font-size:12px;color:var(--text-muted)}
.notif-empty{text-align:center;color:var(--text-muted);font-size:13px;padding:26px 10px}

/* ---------------- Messages / lgpd / pagination ---------------- */
.msg{display:flex;align-items:flex-start;gap:10px;padding:13px 16px;border-radius:var(--radius-md);font-size:14px;margin-bottom:18px;border:1px solid transparent;font-weight:500}
.msg.ok{background:#d1fae5;color:#065f46;border-color:#a7f3d0}
.msg.erro{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.lgpd{display:flex;gap:10px;background:#fef3c7;color:#92400e;border:1px solid #fde68a;border-radius:var(--radius-md);padding:13px 16px;font-size:13.5px;margin-bottom:18px}
.pag{display:flex;gap:6px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.pag a,.pag span{min-width:38px;height:38px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--radius-md);background:#fff;color:var(--navy-700);font-size:14px;font-weight:600}
.pag a:hover{background:var(--navy-50);border-color:var(--navy-200)}
.pag .at{background:var(--navy-600);color:#fff;border-color:var(--navy-600)}

/* ---------------- Toasts ---------------- */
.toasts{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;flex-direction:column;gap:12px;max-width:350px}
.toast{background:#fff;border-radius:var(--radius-lg);padding:14px 16px 14px 14px;box-shadow:var(--shadow-lg);display:flex;gap:13px;align-items:flex-start;border:1px solid var(--border);border-left:4px solid var(--navy-500);animation:toastin .45s ease both;position:relative;overflow:hidden}
.toast::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--teal-500);transform-origin:left;animation:tprog 7s linear forwards}
.toast.r-vermelho{border-left-color:var(--danger)}.toast.r-laranja{border-left-color:#f97316}.toast.r-amarelo{border-left-color:var(--warning)}.toast.r-verde{border-left-color:var(--success)}.toast.r-azul{border-left-color:var(--info)}
.toast .tico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;color:#fff;font-size:20px;background:linear-gradient(135deg,var(--teal-500),var(--navy-500))}
.toast.r-vermelho .tico{background:var(--danger)}.toast.r-laranja .tico{background:#f97316}.toast.r-amarelo .tico{background:var(--warning)}.toast.r-verde .tico{background:var(--success)}.toast.r-azul .tico{background:var(--info)}
.toast .tbody b{display:block;font-size:14.5px;color:var(--navy-800);line-height:1.2}
.toast .tbody small{color:var(--text-muted);font-size:12.5px}
.toast .tbody .tg{display:inline-block;margin-top:5px;font-size:11.5px;font-weight:700;color:var(--teal-600);background:var(--teal-100);padding:2px 9px;border-radius:999px}
.toast .tx{margin-left:auto;cursor:pointer;color:#b8c2d4;font-weight:800;font-size:18px;line-height:1}

/* ---------------- Loader (ficha do paciente) ---------------- */
.ploader{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;background:rgba(3,15,30,.6);backdrop-filter:blur(5px)}
.ploader.show{display:flex;animation:fadeIn .25s both}
.pl-card{width:min(440px,92vw);background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:32px 32px 28px;text-align:center}
.pl-orb{position:relative;width:96px;height:96px;margin:0 auto 18px}
.pl-ring{position:absolute;inset:0;border-radius:50%;border:4px solid var(--navy-100);border-top-color:var(--teal-500);animation:spin 1s linear infinite}
.pl-ring.r2{inset:14px;border:4px solid var(--teal-100);border-top-color:var(--navy-500);animation:spin 1.5s linear infinite reverse}
.pl-core{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;color:var(--navy-600);animation:beat 1.1s ease-in-out infinite}
.pl-txt{font-size:17px;font-weight:700;color:var(--navy-800)}
.pl-dots b{animation:blink 1.4s infinite}.pl-dots b:nth-child(2){animation-delay:.2s}.pl-dots b:nth-child(3){animation-delay:.4s}
.pl-sub{color:var(--text-muted);font-size:13px;margin-top:5px;margin-bottom:18px}
.pl-skel{display:flex;flex-direction:column;gap:10px;text-align:left}
.skel{height:13px;border-radius:7px;background:linear-gradient(90deg,var(--navy-50),#dbe7f5,var(--navy-50));background-size:200% 100%;animation:shimmer 1.3s linear infinite}
.skel.w70{width:70%}.skel.w50{width:50%}.skel.w90{width:90%}.skel.h28{height:28px;border-radius:9px}

/* ---------------- LOGIN ---------------- */
.login-card{width:100%;max-width:430px;background:#fff;border-radius:24px;box-shadow:var(--shadow-lg);overflow:hidden;animation:fadeUp .45s ease}
.login-top{background:linear-gradient(135deg,var(--navy-800),var(--navy-600) 55%,var(--teal-600));padding:30px 32px 26px;text-align:center;position:relative;overflow:hidden}
.login-top::after{content:"";position:absolute;inset:0;background:radial-gradient(200px 140px at 85% 0,rgba(30,198,184,.45),transparent),radial-gradient(220px 160px at 0 100%,rgba(17,85,163,.4),transparent);pointer-events:none}
.login-logo{position:relative;width:100%;max-width:240px;height:auto;filter:drop-shadow(0 6px 16px rgba(0,0,0,.4))}
.login-body{padding:28px 32px 20px}
.login-body h1{font-size:22px;text-align:center;color:var(--navy-900)}
.login-body .sub{text-align:center;margin-bottom:20px;font-size:13.5px}
.field{position:relative;margin-bottom:14px}
.field .fico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);display:grid;place-items:center;pointer-events:none}
.field .fico svg,.field .eye svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.field input{width:100%;padding:13px 44px 13px 42px;border:1.5px solid var(--border);border-radius:12px;font-size:15px;background:#fbfcfe;font-family:inherit;color:var(--text-main);transition:var(--transition)}
.field input:focus{border-color:var(--navy-400);box-shadow:0 0 0 3px rgba(45,116,200,.15);background:#fff;outline:none}
.field .eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-muted);padding:6px;display:grid;place-items:center;border-radius:8px}
.field .eye:hover{color:var(--navy-600);background:var(--navy-50)}
.btn-block{width:100%;padding:13px;font-size:15px;justify-content:center;margin-top:4px}
.login-foot{text-align:center;padding:13px;font-size:12px;color:var(--text-muted);border-top:1px solid var(--border);background:var(--navy-50);display:flex;align-items:center;justify-content:center;gap:6px}

/* login/lgpd centramento */
.app-off{display:grid;place-items:center;min-height:100vh;padding:24px;background:radial-gradient(1200px 600px at 100% 0,rgba(30,198,184,.12),transparent),radial-gradient(900px 500px at 0 100%,rgba(17,85,163,.12),transparent),var(--bg-main)}
.app-off .content-center{width:100%;display:grid;place-items:center}

/* ---------------- Animations ---------------- */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(20,168,158,.6)}70%{box-shadow:0 0 0 9px rgba(20,168,158,0)}100%{box-shadow:0 0 0 0 rgba(20,168,158,0)}}
@keyframes beat{0%,100%{transform:scale(1)}30%{transform:scale(1.1)}45%{transform:scale(.96)}}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes toastin{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:none}}
@keyframes tprog{to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ---------------- Responsivo ---------------- */
@media (max-width:1280px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-lg)}
  .main-content,.appfooter{margin-left:0}
  .btn-menu-toggle{display:block}
  .topbar{padding:0 16px}
  .page-content{padding:18px 14px}
  .cards{grid-template-columns:1fr}
}