* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI', Roboto, Arial, sans-serif; }
:root {
  --bg:#14181f; --bg2:#1d242e; --mint:#4effa1; --orange:#ffb347;
  --red:#ff5252; --blue:#5299b4; --card:#00000063; --border:#59ffc62f;
}
html,body { height:100%; background:var(--bg); color:#fff; overflow-x:hidden; }
a { text-decoration:none; color:var(--mint); }
code { background:#00000055; padding:2px 5px; border-radius:6px; color:var(--mint); }

/* ---------- fundo geral ---------- */
.body {
  min-height:100vh;
  background:linear-gradient(160deg,#14181f 0%,#1b2733 55%,#12241c 100%);
}

/* ---------- login ---------- */
.fundo-login { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.tela-login {
  width:340px; padding:28px 24px; border-radius:22px; text-align:center;
  background:#1d242e73; border:1px solid var(--border); backdrop-filter:blur(6px);
  box-shadow:0 18px 50px #0009;
}
.hora { color:var(--mint); font-size:14px; opacity:.9; margin-bottom:8px; }
.hora #clock { font-size:30px; font-weight:700; letter-spacing:2px; }
.input-login {
  width:100%; margin:8px 0; padding:13px 16px; border-radius:25px; border:1px solid var(--border);
  background:#1d242e73; color:#fff; font-size:15px; outline:none;
}
.input-login::placeholder { color:#ffffff88; }
.botao-login {
  width:100%; margin-top:14px; padding:13px; border:none; border-radius:25px; cursor:pointer;
  background:linear-gradient(90deg,#4effa12f,#4effa1); color:#0d1f16; font-weight:800; font-size:15px;
}
.botao-login:hover { filter:brightness(1.1); }
.pt { font-size:13px; color:#ffffffcc; line-height:1.5; }

/* ---------- navbar ---------- */
.navbar {
  display:flex; align-items:center; gap:10px; padding:8px 14px;
  background:#10151cdb; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50;
}
.navbar-logo {
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--mint),#1f8f61); color:#08130d; font-weight:900; font-size:20px;
}
.navbar-body { flex:1; }
.navbar-overflow { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.navbar-icon { height:36px; width:36px; cursor:pointer; padding:6px; border-radius:10px; background:#1d242e99; transition:.15s; }
.navbar-icon:hover { background:#4effa122; transform:translateY(-2px); }

.dropdown {
  position:absolute; right:14px; top:64px; background:#10151c; border:1px solid var(--border);
  border-radius:14px; padding:14px 18px; min-width:220px; z-index:60; display:none;
}
.dropdown:hover { display:block; }
.drop-text,.drop-noty { font-size:13px; margin-top:6px; opacity:.9; }
.sair { color:var(--red); font-weight:700; cursor:pointer; }

/* ---------- cards dashboard ---------- */
.row { padding:22px 14px; max-width:1100px; margin:0 auto; }
.container { display:flex; flex-wrap:wrap; gap:14px; }
.col { flex:1 1 210px; cursor:pointer; }
.card {
  background:var(--card); border:1px solid var(--border); border-radius:20px; padding:18px;
  min-height:130px; position:relative; transition:.15s; overflow:hidden;
}
.card:hover { transform:translateY(-4px); border-color:var(--mint); }
.card-header { display:flex; gap:12px; align-items:flex-start; }
.icon-alert {
  width:34px; height:34px; flex:none; border-radius:50%; background:var(--orange); color:#000;
  display:flex; align-items:center; justify-content:center; font-weight:900;
}
.card-header h3 { font-size:15px; }
.card-header p { font-size:12px; opacity:.75; margin-top:5px; }
.card-text { font-size:13px; opacity:.8; }
.card-item { font-size:38px; font-weight:800; margin-top:8px; }
.card-img,.card-img2 { position:absolute; right:10px; bottom:10px; height:56px; opacity:.85; }
.card-img2 { height:46px; }
.badge-urgente {
  margin-top:12px; border:none; border-radius:14px; padding:9px 16px; cursor:pointer;
  background:var(--orange); color:#000; font-weight:800;
}

/* ---------- modais ---------- */
.modal-container {
  position:fixed; inset:0; background:#000000b8; display:none; align-items:center; justify-content:center;
  z-index:100; padding:16px; overflow-y:auto;
}
.modal-container[style*="block"] { display:flex; }
.modal {
  width:100%; max-width:520px; background:#171d26; border:1px solid var(--border);
  border-radius:20px; max-height:92vh; overflow-y:auto; box-shadow:0 25px 70px #000c;
}
.modal-titulo {
  display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
  background:#10151c; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5;
}
.modal-text { font-weight:800; color:var(--mint); font-size:15px; }
.fechar,.fechar2 {
  width:26px; height:26px; border-radius:50%; background:#ffffff18; cursor:pointer; position:relative;
}
.fechar::before,.fechar::after,.fechar2::before,.fechar2::after {
  content:''; position:absolute; left:6px; top:12px; width:14px; height:2px; background:#fff;
}
.fechar::before,.fechar2::before { transform:rotate(45deg); }
.fechar::after,.fechar2::after { transform:rotate(-45deg); }
.modal-body { padding:22px 20px; text-align:center; }
.modal-body h2,.modal-body h3 { margin:10px 0; }
.modal-body .table { text-align:left; }
.avatar { height:74px; width:74px; border-radius:50%; padding:14px; background:#1d242e; border:1px solid var(--border); }
.avatar.filter { filter:hue-rotate(60deg); }

/* ---------- botões / forms ---------- */
.botao {
  display:inline-block; margin:7px auto; padding:12px 18px; border-radius:14px; cursor:pointer;
  background:#1d242e; border:1px solid var(--border); color:#fff; font-weight:700; font-size:14px; transition:.15s;
}
.botao:hover { background:#4effa122; border-color:var(--mint); }
.modo { display:inline-block; margin:8px; padding:16px 26px; border-radius:16px; background:#1d242e; border:1px solid var(--border); cursor:pointer; text-align:center; }
.modo:hover { border-color:var(--mint); }
.modo-avatar { height:46px; width:46px; border-radius:12px; }
.modo-text { margin-top:8px; font-weight:700; font-size:13px; }
.modal-body input:not([type=checkbox]), .modal-body select, .modal-body textarea {
  width:90%; margin:6px 0; padding:11px 14px; border-radius:25px; border:1px solid var(--border);
  background:#1d242e73; color:#fff; font-size:14px; outline:none;
}
.btn {
  border:none; border-radius:14px; padding:11px 18px; cursor:pointer; font-weight:800; font-size:14px;
}
.btn.orange { background:var(--orange); color:#000; }
.btn.roxo { background:#8e6bff; color:#fff; }
.btn.square { width:42px; padding:11px 0; background:#1d242e; border:1px solid var(--border); color:#fff; display:inline-block; }
.w-50 { width:50% !important; } .w-60 { width:60% !important; }
.center { text-align:center; }

/* ---------- tabelas / listas ---------- */
.table {
  background:#10151c; border:1px solid var(--border); border-radius:12px;
  padding:10px 12px; margin:8px 0; font-size:13px; line-height:1.6; word-break:break-word;
}
.table a { cursor:pointer; }
.pesquisa {
  width:90%; margin:10px 0; padding:11px 14px; border-radius:25px; border:1px solid var(--border);
  background:#1d242e73; color:#fff; outline:none;
}
.alert {
  background:#1d242e; border:1px solid var(--border); border-radius:14px;
  padding:13px 16px; margin:10px 0; font-size:13.5px;
}
.alert.transparent { background:transparent; border-color:#4effa166; color:var(--mint); }
.display-none { display:none !important; }

/* ---------- loader ---------- */
.loader {
  width:44px; height:44px; margin:30px auto; border-radius:50%;
  border:4px solid #ffffff22; border-top-color:var(--mint); animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- onlines ---------- */
.on-div { display:block; }

/* ---------- scrollbars ---------- */
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-thumb { background:#4effa144; border-radius:9px; }
::-webkit-scrollbar-track { background:#10151c; }