:root{
  /* ===== Base tokens ===== */
  --bg: #0b1220;
  --panel: #0f1a2b;
  --card: #ffffff;
  --muted: #6b7280;
  --text: #0f172a;
  --border: #e5e7eb;

  --primary: #0b3a44;
  --primary-2: #0f766e;

  --shadow: 0 10px 30px rgba(0,0,0,.10);
  --radius: 14px;
  --radius-sm: 10px;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, #0b1220 0%, #0b1220 35%, #0a0f1b 100%);
  color: var(--text);
}

/* ==========================
   Layout
========================== */
.app{
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
}

/* ==========================
   Sidebar
========================== */
.sidebar{
  background: rgba(15, 26, 43, .92);
  border-right: 1px solid rgba(255,255,255,.08);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.brand{
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

.brand-logo{
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

.brand-title{
  font-weight: 800;
  color: #fff;
  letter-spacing: .4px;
  line-height: 1.1;
}
.brand-subtitle{
  font-size: 12px;
  color: rgba(255,255,255,.72);
  margin-top: 2px;
}

.nav{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item{
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(255,255,255,.80);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.nav-item:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
  transform: translateY(-1px);
}
.nav-item.active{
  background: rgba(15, 118, 110, .22);
  border-color: rgba(15, 118, 110, .45);
  color: #fff;
}

.sidebar-footer{
  margin-top: auto;
  color: rgba(255,255,255,.65);
  padding: 0 6px;
}

/* ==========================
   Content / Header
========================== */
.content{
  padding: 26px 26px 40px;
  min-width: 0;
}

.page-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.page-title{
  margin: 0;
  color: #fff;
  font-size: 28px;
  letter-spacing: .2px;
}
.page-subtitle{
  margin: 6px 0 0;
  color: rgba(255,255,255,.70);
  font-size: 13px;
}

/* ==========================
   Card
========================== */
.card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.35);
  /* IMPORTANTE: precisa ser visible para dropdown não ser cortado */
  overflow: visible;
}

.card-header{
  padding: 16px 16px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}

.card-title{
  font-weight: 800;
  letter-spacing: .3px;
}

.card-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ==========================
   Buttons
========================== */
.btn{
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(2,6,23,.08);
  border-color: #d1d5db;
}
.btn:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-primary{
  background: var(--primary);
  color: #fff;
  border-color: rgba(255,255,255,.10);
}
.btn-primary:hover{
  border-color: rgba(255,255,255,.22);
}

.btn-excel{
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(22, 163, 74, .22);
}
.btn-excel:hover{
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 12px 26px rgba(22, 163, 74, .28);
}
.btn-excel:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-ghost{
  background: #fff;
  border-color: var(--border);
  padding: 8px 10px;
  border-radius: 10px;
}

/* ==========================
   Filters
========================== */
.filters{
  padding: 14px 16px 6px;
  display: grid;
  grid-template-columns: 1.3fr 1fr .6fr .9fr .7fr;
  gap: 12px;
}

.field label{
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 700;
}

/* FIX: label sempre legível dentro do card (tema escuro + card claro) */
.filters .field label{
  color: #374151;
  font-weight: 800;
  letter-spacing: .3px;
}
.filters .field:focus-within label{
  color: #b91c1c;
}

input, select{
  width: 100%;
  padding: 10px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  font-size: 13px;
  background: #fff;
}
input:focus, select:focus{
  border-color: rgba(15,118,110,.55);
  box-shadow: 0 0 0 4px rgba(15,118,110,.12);
}

/* ==========================
   Table / Pager
========================== */
.table-toolbar{
  padding: 10px 16px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-start;
}

.pager{
  display: flex;
  align-items: center;
  gap: 10px;
}
.pager-info{
  font-weight: 800;
  color: #111827;
}

.table-wrap{
  overflow: visible;
  border-top: 1px solid var(--border);
}

.table{
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
  table-layout: fixed;
}

.table th, .table td{
  padding: 10px 10px;
  border-bottom: 1px solid #f1f5f9;
  text-align: left;
  font-size: 12px;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table thead th{
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 2;
  font-size: 11px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #334155;
  border-bottom: 2px solid rgba(15,118,110,.22);
}

.table tbody tr:hover{
  background: #fafafa;
}

.col-check{ width: 48px; }
.col-actions{ width: 120px; overflow: visible; }

.table td:nth-child(2){
  word-break: break-word;
}

/* colunas mais estreitas na saúde (ID, datas e status) */
.table th:nth-child(1), .table td:nth-child(1){ width: 70px; }
.table th:nth-child(3), .table td:nth-child(3){ width: 110px; }
.table th:nth-child(4), .table td:nth-child(4){ width: 110px; }
.table th:nth-child(5), .table td:nth-child(5){ width: 110px; }
.table th:nth-child(6), .table td:nth-child(6){ width: 110px; }
.table th:nth-child(7), .table td:nth-child(7){ width: 110px; }
.table th:nth-child(8), .table td:nth-child(8){ width: 110px; }
.table th:nth-child(9), .table td:nth-child(9){ width: 90px; }

/* ==========================
   Badges / Small buttons
========================== */
.btn-editar{
  padding: 6px 8px;
  border: 1px solid rgba(15,118,110,.25);
  background: rgba(15,118,110,.10);
  color: #0f766e;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 800;
  font-size: 11px;
}
.btn-editar:hover{
  background: rgba(15,118,110,.14);
}

.badge{
  padding: 3px 8px;
  font-size: 11px;
}



/* ==========================
   User bar (topo)
========================== */
.userbar{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
}
.user-label{
  color:#fff;
  font-weight:800;
  font-size:13px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  border-radius: 12px;
}

/* ==========================
   Responsivo
========================== */
@media (max-width: 1100px){
  .app{ grid-template-columns: 1fr; }
  .sidebar{
    position: sticky;
    top: 0;
    z-index: 10;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .nav{
    flex-direction: row;
    flex-wrap: wrap;
  }
  .content{ padding: 18px; }
  .filters{ grid-template-columns: 1fr 1fr; }
  .table{ min-width: 800px; }
}

/* ============================================================
   THEME FUTURISTA (VERMELHO + PRATA) - OVERRIDE
============================================================ */
:root{
  --bg: #070a10;
  --panel: rgba(14, 18, 28, .86);
  --card: rgba(255,255,255,.92);
  --text: #0b1220;
  --border: rgba(255,255,255,.14);

  --primary: #e11d48;
  --primary-2: #ff3b6a;

  --shadow: 0 16px 45px rgba(0,0,0,.35);
  --glow: 0 0 0 4px rgba(225,29,72,.18), 0 18px 60px rgba(225,29,72,.18);

  --radius: 16px;
  --radius-sm: 12px;
}

body{
  background:
    radial-gradient(1200px 600px at 15% 15%, rgba(225,29,72,.20), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(233,238,247,.12), transparent 55%),
    linear-gradient(180deg, #070a10 0%, #050811 55%, #05060c 100%);
}

.sidebar{
  background: linear-gradient(180deg, rgba(12,15,24,.92), rgba(7,10,16,.92));
  border-right: 1px solid rgba(225,29,72,.20);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}

.brand{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(233,238,247,.12);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

.nav-item{
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.nav-item.active{
  background: linear-gradient(180deg, rgba(225,29,72,.22), rgba(225,29,72,.10));
  border-color: rgba(225,29,72,.50);
  box-shadow: 0 0 0 1px rgba(225,29,72,.25) inset;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88));
  border: 1px solid rgba(155,164,183,.35);
  box-shadow: var(--shadow);
}

.page-title{
  color: rgba(233,238,247,.95);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.page-subtitle{
  color: rgba(233,238,247,.65);
}

input, select{
  border: 1px solid rgba(155,164,183,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
}
input:focus, select:focus{
  border-color: rgba(225,29,72,.70);
  box-shadow: 0 0 0 4px rgba(225,29,72,.18);
}

.btn{
  border: 1px solid rgba(155,164,183,.40);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
}
.btn:hover{
  border-color: rgba(225,29,72,.35);
  box-shadow: 0 14px 26px rgba(0,0,0,.10);
}

.btn-primary{
  background: linear-gradient(180deg, rgba(225,29,72,1), rgba(190,18,60,1));
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(225,29,72,.25);
}
.btn-primary:hover{
  box-shadow: var(--glow);
}

.btn.btn-excel{
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(22,163,74,.25);
}
.btn.btn-excel:hover{
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 14px 30px rgba(22,163,74,.30);
}
.btn.btn-excel:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

:is(#btnSair, #btnLogout, #gmLogout, .btn-sair-top, .btn-logout){
  background: linear-gradient(135deg, #ef4444, #dc2626 45%, #991b1b) !important;
  color: #fff !important;
  border: 1px solid rgba(127, 29, 29, .35) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 28px rgba(220, 38, 38, .24) !important;
  text-shadow: 0 1px 0 rgba(127, 29, 29, .22);
}

:is(#btnSair, #btnLogout, #gmLogout, .btn-sair-top, .btn-logout):hover{
  background: linear-gradient(135deg, #f87171, #dc2626 48%, #7f1d1d) !important;
  border-color: rgba(127, 29, 29, .48) !important;
  box-shadow: 0 14px 32px rgba(220, 38, 38, .30) !important;
  transform: translateY(-1px);
}

:is(#btnSair, #btnLogout, #gmLogout, .btn-sair-top, .btn-logout):disabled{
  opacity: .6 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

.user-label{
  border: 1px solid rgba(225,29,72,.35);
  background: linear-gradient(180deg, rgba(225,29,72,.22), rgba(255,255,255,.06));
}

.table thead th{
  background: linear-gradient(180deg, rgba(248,250,252,1), rgba(241,245,249,1));
  border-bottom: 2px solid rgba(225,29,72,.35);
}
.table tbody tr:hover{
  background: rgba(225,29,72,.06);
}

.actions-btn{
  border: 1px solid rgba(155,164,183,.45);
}
.actions-btn:hover{
  border-color: rgba(225,29,72,.45);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}
.actions-menu{
  border: 1px solid rgba(155,164,183,.45);
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
}
.actions-menu a:hover,
.actions-menu button:hover{
  background: rgba(225,29,72,.10);
}

.filters .field label{ color: #374151; }
.filters .field:focus-within label{ color: #b91c1c; }
/* FIX: dropdown de Ações não ser cortado pela célula da tabela */
.table td.col-actions,
.table .col-actions,
.table td:last-child{
  overflow: visible !important;
  position: relative;
}

/* garante que o menu fique acima da tabela */
.table td.col-actions .actions-menu{
  z-index: 9999 !important;
}


/* ============================================================
   UX: Toast, Loading, Badges, Zebra, Contador, Limpar filtros
   (cole no FINAL do style.css)
============================================================ */

/* Toast */
.toast-wrap{
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast{
  pointer-events: auto;
  min-width: 260px;
  max-width: 360px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(155,164,183,.45);
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.toast .t-title{ font-weight: 900; font-size: 13px; color: #0b1220; }
.toast .t-msg{ font-weight: 700; font-size: 12px; color: #334155; margin-top: 2px; }
.toast.ok{ border-color: rgba(34,197,94,.35); }
.toast.err{ border-color: rgba(225,29,72,.45); }
.toast.info{ border-color: rgba(59,130,246,.35); }
.toast .t-dot{
  width: 10px; height: 10px; border-radius: 999px; margin-top: 4px;
  background: rgba(59,130,246,.8);
}
.toast.ok .t-dot{ background: rgba(34,197,94,.85); }
.toast.err .t-dot{ background: rgba(225,29,72,.85); }

/* Loading no botão */
.btn.is-loading,
.actions-btn.is-loading{
  opacity: .75;
  cursor: progress;
  pointer-events: none;
}
.btn.is-loading::after,
.actions-btn.is-loading::after{
  content: " ⏳";
  font-size: 12px;
  opacity: .9;
}

/* Zebra na tabela */
.table tbody tr:nth-child(even){
  background: rgba(2,6,23,.03);
}
.table tbody tr:hover{
  background: rgba(225,29,72,.06);
}

/* Badges de status */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 11px;
  border: 1px solid rgba(155,164,183,.40);
  background: rgba(255,255,255,.75);
  color: #0b1220;
}
.badge::before{
  content:"";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(100,116,139,.85);
}
.badge.ativo{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.10);
}
.badge.ativo::before{ background: rgba(34,197,94,.85); }
.badge.demitido{
  border-color: rgba(225,29,72,.40);
  background: rgba(225,29,72,.10);
}
.badge.demitido::before{ background: rgba(225,29,72,.85); }

/* Toolbar extra (contador + limpar filtros) */
.table-toolbar{
  justify-content: space-between; /* antes era flex-start */
  gap: 12px;
}
.toolbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}
.result-count{
  font-weight: 900;
  font-size: 12px;
  color: #111827;
  opacity: .85;
}
.btn-clear{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(155,164,183,.45);
  background: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
}
.btn-clear:hover{
  border-color: rgba(225,29,72,.45);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}
/* ============================================================
   AÇÕES — PADRÃO FINAL (Opções + menu sobreposto)
============================================================ */

.table td.col-actions,
.table td:last-child{
  overflow: visible !important;
  position: relative !important;
}

/* container */
.actions{
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
  z-index: 50;
}

/* botão */
.actions-btn{
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(155,164,183,.45);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

/* menu */
.actions-menu{
  position: absolute;
  top: calc(100% + 6px);
  right: 0;

  min-width: 160px;
  padding: 6px;
  border-radius: 12px;

  background: #fff;
  border: 1px solid rgba(155,164,183,.45);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);

  display: none;
  z-index: 9999;
}

.actions-menu.open{
  display: block;
}

/* itens */
.actions-menu a,
.actions-menu button{
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
}

.actions-menu a:hover,
.actions-menu button:hover{
  background: rgba(225,29,72,.10);
}

/* ============================================================
   AÇÕES — PADRÃO FINAL (Opções + menu sobreposto)
============================================================ */

.table td.col-actions,
.table td:last-child{
  overflow: visible !important;
  position: relative !important;
}

.actions{
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
  z-index: 50;
}

.actions-btn{
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(155,164,183,.45);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.actions-menu{
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(155,164,183,.45);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  display: none;
  z-index: 9999;
}

.actions-menu.open{
  display: block;
}

.actions-menu a,
.actions-menu button{
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  background: transparent;
  border: none;
  cursor: pointer;
}

.actions-menu a:hover,
.actions-menu button:hover{
  background: rgba(225,29,72,.10);
}

/* ============================================================
   COMPAT: telas antigas (/cadastro e /editar)
   (mantém HTML/JS, só melhora visual)
   Cole no FINAL do style.css
============================================================ */

/* fundo e container */
body{
  color: var(--text);
}

/* a tela antiga usa .page */
.page{
  max-width: 1180px;
  margin: 18px auto;
  padding: 0 18px 24px;
}

/* topbar antigo */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin: 10px 0 14px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}

/* título antigo */
.title{
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .4px;
  color: rgba(233,238,247,.95);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* cards antigos */
.page .card{
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88));
  border: 1px solid rgba(155,164,183,.35);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin: 14px 0;
}

/* título do card antigo (h3 “chip”) */
.page .card h3{
  margin: 0 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-size: 12px;
  font-weight: 950;
  letter-spacing: .4px;

  padding: 7px 12px;
  border-radius: 999px;
  color: rgba(233,238,247,.95);

  background: linear-gradient(180deg, rgba(225,29,72,.35), rgba(255,255,255,.06));
  border: 1px solid rgba(225,29,72,.28);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}

/* grid antigo */
.page .grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.page .span2{ grid-column: span 2; }

/* campos antigos */
.page .field{
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.page .field label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .3px;
  color: #374151;
}
.page .field input,
.page .field select{
  width:100%;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(155,164,183,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  outline: none;
  font-size: 13px;
}
.page .field input:focus,
.page .field select:focus{
  border-color: rgba(225,29,72,.70);
  box-shadow: 0 0 0 4px rgba(225,29,72,.18);
}

/* botões antigos (reaproveita visual do novo tema) */
.page .btn{
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(155,164,183,.40);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  cursor: pointer;
  font-weight: 950;
  font-size: 13px;
  transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease;
}
.page .btn:hover{
  transform: translateY(-1px);
  border-color: rgba(225,29,72,.35);
  box-shadow: 0 14px 26px rgba(0,0,0,.10);
}
.page .btn.primary{
  background: linear-gradient(180deg, rgba(225,29,72,1), rgba(190,18,60,1));
  border-color: rgba(255,255,255,.12);
  color:#fff;
  box-shadow: 0 12px 30px rgba(225,29,72,.25);
}
.page .btn.primary:hover{
  box-shadow: 0 0 0 4px rgba(225,29,72,.18), 0 18px 60px rgba(225,29,72,.18);
}

/* barra de ações antiga */
.page .actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  margin-top: 14px;
}

/* responsivo */
@media (max-width: 980px){
  .page .grid{ grid-template-columns: 1fr 1fr; }
  .page .span2{ grid-column: span 2; }
}
@media (max-width: 640px){
  .page .grid{ grid-template-columns: 1fr; }
  .page .span2{ grid-column: span 1; }
  .topbar{ flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   AJUSTE VISUAL – CADASTRO / EDITAR COLABORADOR
   (cores + contraste + hierarquia)
============================================================ */

/* título da página */
.page h1,
.page-header h1,
.page-title{
  color: #0b1220 !important;
  font-weight: 950;
  letter-spacing: .4px;
}

/* card principal */
.page .card{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.96),
    rgba(245,247,252,.94)
  );
  border: 1px solid rgba(155,164,183,.45);
  box-shadow: 0 25px 70px rgba(0,0,0,.18);
}

/* badge tipo "DADOS PESSOAIS" */
.page .card h3{
  background: linear-gradient(
    180deg,
    rgba(225,29,72,.85),
    rgba(190,18,60,.85)
  );
  color: #fff;
  font-weight: 900;
  letter-spacing: .5px;
  box-shadow: 0 10px 25px rgba(225,29,72,.35);
}

/* labels */
.page .field label{
  color: #1f2937;
  font-weight: 800;
  letter-spacing: .3px;
}

/* inputs */
.page .field input,
.page .field select{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,1),
    rgba(245,247,252,.96)
  );
  border: 1px solid rgba(155,164,183,.45);
  color: #0b1220;
}

/* foco */
.page .field input:focus,
.page .field select:focus{
  border-color: rgba(225,29,72,.75);
  box-shadow: 0 0 0 4px rgba(225,29,72,.18);
}

/* botões superiores (Voltar / Salvar) */
.page .actions .btn{
  min-width: 120px;
}

/* botão Voltar */
.page .btn:not(.primary){
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.95),
    rgba(235,238,244,.95)
  );
  border: 1px solid rgba(155,164,183,.55);
  color: #0b1220;
}

/* botão Salvar (principal) */
.page .btn.primary{
  background: linear-gradient(
    180deg,
    rgba(225,29,72,1),
    rgba(190,18,60,1)
  );
  color: #fff;
  font-weight: 950;
  box-shadow: 0 14px 30px rgba(225,29,72,.35);
}

/* hover salvar */
.page .btn.primary:hover{
  box-shadow:
    0 0 0 4px rgba(225,29,72,.20),
    0 22px 60px rgba(225,29,72,.35);
}

/* espaçamento mais elegante entre seções */
.page .card + .card{
  margin-top: 22px;
}

/* ============================================================
   FIX: TÍTULO "Cadastro de Colaborador" (legível)
============================================================ */

/* pega o H1/H2 que estiver na tela antiga */
.page h1,
.page h2,
.page .titulo,
.page .title{
  color: #0b1220 !important;             /* preto/grafite */
  font-weight: 950 !important;
  letter-spacing: .4px;
  text-shadow:
    0 1px 0 rgba(255,255,255,.65),       /* “borda” clara */
    0 10px 22px rgba(0,0,0,.12);         /* sombra leve */
}

/* se seu título tiver classe específica (muito comum) */
.page .topbar .title{
  color: rgba(233,238,247,.95) !important; /* se estiver dentro do topo escuro */
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* caso o título esteja sobre uma faixa muito clara */
.page .topbar{
  background: rgba(10,12,18,.68) !important;
  border: 1px solid rgba(225,29,72,.18) !important;
}

/* ============================================================
   MODAIS (Saúde) - Futurista vermelho + prata
   Sobrescreve o <style> do saude.html (usa !important)
============================================================ */

/* backdrop */
.modal-backdrop{
  background: rgba(0,0,0,.62) !important;
  backdrop-filter: blur(6px) !important;
}

/* caixa do modal */
.modal-backdrop .modal{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,247,252,.96)) !important;
  border: 1px solid rgba(155,164,183,.55) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.35) !important;
  overflow: hidden !important;
}

/* header com “linha” vermelha elegante */
.modal-backdrop .modal-header{
  position: relative !important;
  background: rgba(255,255,255,.70) !important;
  border-bottom: 1px solid rgba(155,164,183,.35) !important;
}
.modal-backdrop .modal-header::after{
  content:"";
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, rgba(225,29,72,0), rgba(225,29,72,.75), rgba(225,29,72,0));
  opacity: .9;
}

/* título */
.modal-backdrop .modal-title{
  font-weight: 950 !important;
  letter-spacing: .3px !important;
  color: #0b1220 !important;
}

/* botão fechar */
.modal-backdrop .modal-close{
  border: 1px solid rgba(155,164,183,.55) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,247,252,.92)) !important;
  border-radius: 12px !important;
  padding: 6px 10px !important;
  font-weight: 950 !important;
}
.modal-backdrop .modal-close:hover{
  border-color: rgba(225,29,72,.45) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.10) !important;
}

/* corpo */
.modal-backdrop .modal-body{
  gap: 14px !important;
}

/* labels */
.modal-backdrop .modal-body .field label{
  color: #1f2937 !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
}

/* inputs/select */
.modal-backdrop .modal-body input[type="date"],
.modal-backdrop .modal-body select{
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(245,247,252,.96)) !important;
  border: 1px solid rgba(155,164,183,.55) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  font-weight: 800 !important;
  color: #0b1220 !important;
}
.modal-backdrop .modal-body input[type="date"]:focus,
.modal-backdrop .modal-body select:focus{
  border-color: rgba(225,29,72,.75) !important;
  box-shadow: 0 0 0 4px rgba(225,29,72,.18) !important;
  outline: none !important;
}

/* footer */
.modal-backdrop .modal-footer{
  background: rgba(255,255,255,.70) !important;
  border-top: 1px solid rgba(155,164,183,.35) !important;
}

/* botões do modal */
.modal-backdrop .btn-modal{
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-weight: 950 !important;
  border: 1px solid rgba(155,164,183,.60) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,247,252,.92)) !important;
}
.modal-backdrop .btn-modal:hover{
  border-color: rgba(225,29,72,.35) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.10) !important;
}

/* botão principal (Salvar / Salvar em massa) */
.modal-backdrop .btn-modal.primary{
  background: linear-gradient(180deg, rgba(225,29,72,1), rgba(190,18,60,1)) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(225,29,72,.28) !important;
}
.modal-backdrop .btn-modal.primary:hover{
  box-shadow: 0 0 0 4px rgba(225,29,72,.18), 0 22px 60px rgba(225,29,72,.28) !important;
}

/* ============================================================
   RH • DESLIGAMENTOS (escopo)
   Cole no FINAL do style.css
============================================================ */
body.rh-desligamentos .filters.rhd-form{
  grid-template-columns: 1.4fr 1fr 1fr;
}
body.rh-desligamentos .rhd-actions{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
}
body.rh-desligamentos .rhd-help{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  opacity: .75;
}
body.rh-desligamentos .rhd-hint{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(155,164,183,.35);
  font-size: 12px;
  color: #0b1220;
}
body.rh-desligamentos .rhd-colabs{
  max-height: 360px;
  overflow: auto;
}
body.rh-desligamentos tr.colab-row{
  cursor: pointer;
}
body.rh-desligamentos tr.colab-row:hover{
  background: rgba(225,29,72,.06);
}
body.rh-desligamentos tr.colab-row.row-selected{
  outline: 2px solid rgba(225,29,72,.35);
  background: rgba(225,29,72,.08);
}
@media (max-width: 1100px){
  body.rh-desligamentos .filters.rhd-form{
    grid-template-columns: 1fr;
  }
  body.rh-desligamentos .rhd-actions{
    justify-content: stretch;
  }
}
.page-title{
  color: #f1f5f9 !important;          /* branco suave */
}
/* === RH Desligamentos: autocomplete === */
.rhd-autocomplete { position: relative; }

.colab-sugestoes{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  padding: 8px;
  z-index: 9999;
  border: 1px solid rgba(0,0,0,.08);
  max-height: 320px;
  overflow: auto;
}

.colab-item{
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}

.colab-item:hover{
  background: rgba(0,0,0,.04);
}

.colab-item-top{
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.colab-item-sub{
  font-size: 12px;
  margin-top: 2px;
}


/* =========================================================
   PATCH RH - DESLIGAMENTOS (não altera funcionalidades)
   Objetivo: corrigir layout "esquisito", alinhar filtros,
   melhorar autocomplete e responsividade.
========================================================= */

/* garante que a página RH desligamentos use layout consistente */
body.rh-desligamentos .container,
body.rh-desligamentos .content,
body.rh-desligamentos main {
  min-height: auto !important;
}

/* FORM: 2 colunas (campo grande + campo normal), quebra no mobile */
body.rh-desligamentos .filters.rhd-form{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: end;
}

/* Inputs ocupam toda a célula do grid */
body.rh-desligamentos .filters.rhd-form input,
body.rh-desligamentos .filters.rhd-form select,
body.rh-desligamentos .filters.rhd-form textarea{
  width: 100%;
}

/* Campos que devem ocupar linha inteira (opcional) */
body.rh-desligamentos .filters.rhd-form .span-2{
  grid-column: 1 / -1;
}

/* Botão salvar: alinha à direita no desktop */
body.rh-desligamentos #btnCriar{
  justify-self: end;
}

/* Card header de "Últimos desligamentos": título à esquerda, controles à direita */
body.rh-desligamentos .card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
body.rh-desligamentos .card-header .card-title{
  margin: 0;
}
body.rh-desligamentos .ult-controls{
  margin-left: auto;
}

/* Autocomplete (lista de sugestões) */
body.rh-desligamentos .colab-suggest{
  position: absolute;
  z-index: 50;
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  width: 100%;
  max-height: 280px;
  overflow: auto;
  margin-top: 6px;
}
body.rh-desligamentos .colab-item{
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
body.rh-desligamentos .colab-item:last-child{
  border-bottom: none;
}
body.rh-desligamentos .colab-item:hover{
  background: rgba(0,0,0,0.04);
}
body.rh-desligamentos .colab-item-top{
  display: flex;
  gap: 8px;
  align-items: baseline;
}
body.rh-desligamentos .colab-item-sub{
  margin-top: 2px;
  font-size: 12px;
  opacity: 0.75;
}

/* wrapper relativo para o dropdown do autocomplete */
body.rh-desligamentos .search-wrap,
body.rh-desligamentos .input-wrap,
body.rh-desligamentos .field.search-wrap{
  position: relative;
}

/* Tabela: evita “estourar” e mantém leitura */
body.rh-desligamentos .table-wrap{
  overflow-x: auto;
}
body.rh-desligamentos table{
  width: 100%;
  border-collapse: collapse;
}

/* Mobile */
@media (max-width: 900px){
  body.rh-desligamentos .filters.rhd-form{
    grid-template-columns: 1fr;
  }
  body.rh-desligamentos #btnCriar{
    justify-self: stretch;
  }
  body.rh-desligamentos .ult-controls{
    width: 100%;
    justify-content: flex-start;
  }
}
/* ============================
   Botão "Opções" + Dropdown
   (Ativos e Demitidos)
============================ */

/* botão */
.acoes .opcoes-btn,
td.acoes .opcoes-btn,
button.opcoes-btn,
.dropdown-toggle.opcoes-btn,
.dropdown-toggle {
  appearance: none;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9);
  color: #111;
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .06s ease, box-shadow .12s ease, background .12s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}

/* caret (setinha) */
.dropdown-toggle::after,
.opcoes-btn::after {
  content: "▾";
  font-size: 12px;
  opacity: .75;
}

/* hover/active */
.dropdown-toggle:hover,
.opcoes-btn:hover {
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
}
.dropdown-toggle:active,
.opcoes-btn:active {
  transform: translateY(1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

/* menu dropdown (abrir) - funciona para muitos padrões */
.dropdown-menu,
.menu-opcoes,
.opcoes-menu {
  min-width: 180px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.98);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  padding: 8px;
  overflow: hidden;
}

/* itens */
.dropdown-menu a,
.dropdown-menu button,
.menu-opcoes a,
.menu-opcoes button,
.opcoes-menu a,
.opcoes-menu button {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border: 0;
  background: transparent;
  border-radius: 10px;

  font-size: 13px;
  font-weight: 700;
  color: #111;
  cursor: pointer;
  transition: background .12s ease;
}

.dropdown-menu a:hover,
.dropdown-menu button:hover,
.menu-opcoes a:hover,
.menu-opcoes button:hover,
.opcoes-menu a:hover,
.opcoes-menu button:hover {
  background: rgba(0,0,0,.05);
}

/* “Editar” e “Gerar PDF” com cor leve */
.dropdown-menu .danger,
.opcoes-menu .danger {
  color: #b00020;
}

/* coluna ações: evita ficar colado na borda direita */
td.acoes, .acoes {
  padding-right: 14px !important;
}


/* ============================================================
   FIX: Menu "Editar / Gerar PDF" aparecer POR CIMA do botão "Opções"
   (mantém JS/HTML, só CSS)
   Cole no FINAL do style.css
============================================================ */

/* garante que o menu fique acima do botão (abre para cima) */
.actions,
.acoes {
  position: relative !important;
}

.actions-menu.open,
.opcoes-menu.open,
.dropdown-menu.show,
.actions-menu,
.opcoes-menu,
.dropdown-menu {
  top: auto !important;
  bottom: calc(100% + 8px) !important; /* abre por cima */
  right: 0 !important;
  left: auto !important;
  z-index: 99999 !important;
}

/* seta/espacinho para o menu não colar no botão */
.actions-menu::before,
.opcoes-menu::before,
.dropdown-menu::before {
  content: "";
  position: absolute;
  bottom: -8px;
  right: 16px;
  width: 14px;
  height: 14px;
  background: rgba(255,255,255,.98);
  border-left: 1px solid rgba(155,164,183,.45);
  border-bottom: 1px solid rgba(155,164,183,.45);
  transform: rotate(45deg);
}

/* evita corte por ancestors */
.table-wrap,
.card,
.table td.col-actions,
.table .col-actions,
.table td:last-child,
td.acoes {
  overflow: visible !important;
}

/* se a tabela estiver com sticky header, garante sobreposição correta */
.table thead th{
  z-index: 2;
}
/* =========================================================
   PATCH AÇÕES (ATIVOS/DEMITIDOS) — estilo ⋮ igual exemplo
   - NÃO muda o nome no HTML
   - Corrige posição do menu (fica colado no botão)
   - Remove “balão”/seta e deixa menu simples
========================================================= */

/* A célula de ações NÃO pode cortar o menu */
.table td:last-child,
.table .col-actions,
td.acoes,
td.col-actions {
  overflow: visible !important;
  position: relative !important;
}

/* O container do dropdown precisa ser o "referencial" */
.actions,
.acoes,
.dropdown,
.dropdown-wrap,
.actions-wrap {
  position: relative !important;
  display: inline-flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

/* BOTÃO: vira quadradinho com ⋮ (mantém texto no HTML, mas esconde visualmente) */
.actions-btn,
.opcoes-btn,
.dropdown-toggle,
.dropdown-btn {
  width: 36px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 8px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid rgba(148,163,184,.55) !important;
  background: rgba(15,23,42,.70) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.12) !important;

  /* esconde "Opções" visualmente SEM mudar HTML */
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;

  cursor: pointer !important;
}

/* remove qualquer setinha ▾ que outro CSS colocou */
.actions-btn::after,
.opcoes-btn::after,
.dropdown-toggle::after,
.dropdown-btn::after {
  content: "" !important;
}

/* desenha os 3 pontinhos */
.actions-btn::before,
.opcoes-btn::before,
.dropdown-toggle::before,
.dropdown-btn::before {
  content: "⋮" !important;
  text-indent: 0 !important;
  color: rgba(255,255,255,.92) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

.actions-btn:hover,
.opcoes-btn:hover,
.dropdown-toggle:hover,
.dropdown-btn:hover {
  background: rgba(15,23,42,.82) !important;
  border-color: rgba(225,29,72,.40) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.18) !important;
}

/* MENU: simples, colado no botão, sem “balão” */
.actions-menu,
.opcoes-menu,
.dropdown-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;      /* alinha no lado do botão */
  left: auto !important;

  min-width: 170px !important;
  padding: 6px !important;

  background: #fff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  border-radius: 10px !important;

  box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
  z-index: 99999 !important;

  /* se algum CSS antigo estiver criando seta/triângulo */
  background-image: none !important;
}

/* remove qualquer seta/triângulo de “balão” */
.actions-menu::before,
.actions-menu::after,
.opcoes-menu::before,
.opcoes-menu::after,
.dropdown-menu::before,
.dropdown-menu::after {
  content: none !important;
}

/* estados de abertura (compatível com seus padrões) */
.actions-menu.open,
.opcoes-menu.open,
.dropdown-menu.show {
  display: block !important;
}

/* itens do menu */
.actions-menu a,
.actions-menu button,
.opcoes-menu a,
.opcoes-menu button,
.dropdown-menu a,
.dropdown-menu button {
  width: 100% !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;

  border: none !important;
  background: transparent !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  color: #111827 !important;

  text-align: left !important;
  cursor: pointer !important;
}

.actions-menu a:hover,
.actions-menu button:hover,
.opcoes-menu a:hover,
.opcoes-menu button:hover,
.dropdown-menu a:hover,
.dropdown-menu button:hover {
  background: rgba(0,0,0,.06) !important;
}
/* =====================================================
   AJUSTE FINAL — BOTÃO "Opções" VISÍVEL
   Mantém estilo compacto + menu colado
===================================================== */

/* Botão com texto "Opções" */
.actions-btn,
.opcoes-btn,
.dropdown-toggle,
.dropdown-btn {
  width: auto !important;
  min-width: 92px !important;
  height: 34px !important;

  padding: 0 14px !important;
  border-radius: 8px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  background: rgba(15,23,42,.70) !important;
  border: 1px solid rgba(148,163,184,.55) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.12) !important;

  /* 🔥 texto volta */
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-indent: 0 !important;
  overflow: visible !important;
}

/* remove o ⋮ do patch anterior */
.actions-btn::before,
.opcoes-btn::before,
.dropdown-toggle::before,
.dropdown-btn::before {
  content: none !important;
}

/* adiciona setinha discreta */
.actions-btn::after,
.opcoes-btn::after,
.dropdown-toggle::after,
.dropdown-btn::after {
  content: "▾" !important;
  font-size: 11px !important;
  opacity: .7 !important;
}

/* hover elegante */
.actions-btn:hover,
.opcoes-btn:hover,
.dropdown-toggle:hover,
.dropdown-btn:hover {
  background: rgba(15,23,42,.85) !important;
  border-color: rgba(225,29,72,.45) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.18) !important;
}
.actions-menu button{
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}


/* === RH Desligamentos: documentos (botões na tabela) === */
body.rh-desligamentos .doc-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
body.rh-desligamentos button.docbtn{
  appearance: none;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9);
  color: #0b1220;
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
  transition: transform .06s ease, opacity .12s ease, border-color .12s ease;
}
body.rh-desligamentos button.docbtn:hover{
  opacity: .92;
  border-color: rgba(0,0,0,.22);
}
body.rh-desligamentos button.docbtn:active{
  transform: translateY(1px);
}

body.rh-desligamentos table td{
  vertical-align: top;
}

/* ===== GM TECH Header ===== */
.gm-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.gm-brand{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.gm-logo{
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.gm-title{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* dá um espaço pro conteúdo não grudar no header */
.page-wrap, main, .container{
  padding-top: 16px;
}

/* ============================================================
   PATCH: CADASTRO (HTML LEGADO) — usa body.legacy-form
   - Evita conflito com <style> inline do cadastro antigo
   - Mantém IDs e JS intactos
============================================================ */

body.legacy-form{
  background:
    radial-gradient(1200px 600px at 15% 15%, rgba(225,29,72,.20), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(233,238,247,.12), transparent 55%),
    linear-gradient(180deg, #070a10 0%, #050811 55%, #05060c 100%) !important;
  color: rgba(233,238,247,.92) !important;
  margin: 0 !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

body.legacy-form .page{
  max-width: 1180px !important;
  margin: 18px auto !important;
  padding: 0 18px 28px !important;
}

body.legacy-form .topbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap: 12px !important;
  margin: 12px 0 16px !important;
  padding: 14px 16px !important;
  border-radius: var(--radius) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important;
  border: 1px solid rgba(233,238,247,.14) !important;
  box-shadow: 0 16px 45px rgba(0,0,0,.25) !important;
  backdrop-filter: blur(10px);
}

body.legacy-form .title{
  font-size: 18px !important;
  font-weight: 950 !important;
  letter-spacing: .4px !important;
  color: rgba(233,238,247,.95) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35) !important;
}

body.legacy-form .card{
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88)) !important;
  border: 1px solid rgba(155,164,183,.35) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 16px 45px rgba(0,0,0,.35) !important;
  padding: 16px !important;
  margin: 14px 0 !important;
}

body.legacy-form .card h3{
  margin: 0 0 12px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(180deg, rgba(225,29,72,1), rgba(190,18,60,1)) !important;
  color: #fff !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 30px rgba(225,29,72,.22) !important;
}

body.legacy-form .grid{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}

body.legacy-form .field{
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

body.legacy-form .field label{
  font-size: 12px !important;
  font-weight: 900 !important;
  color: #334155 !important;
  letter-spacing: .2px !important;
}

body.legacy-form .field input,
body.legacy-form .field select{
  width: 100% !important;
  padding: 10px 10px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(155,164,183,.35) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92)) !important;
  font-size: 13px !important;
  outline: none !important;
  color: #0b1220 !important;
}

body.legacy-form .field input:focus,
body.legacy-form .field select:focus{
  border-color: rgba(225,29,72,.70) !important;
  box-shadow: 0 0 0 4px rgba(225,29,72,.18) !important;
}

body.legacy-form .span2{ grid-column: span 2 !important; }

body.legacy-form .btn{
  padding: 10px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(155,164,183,.45) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92)) !important;
  cursor: pointer !important;
  font-weight: 900 !important;
}

body.legacy-form .btn.primary{
  background: linear-gradient(180deg, rgba(225,29,72,1), rgba(190,18,60,1)) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(225,29,72,.25) !important;
}

body.legacy-form .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0,0,0,.10) !important;
}

@media (max-width: 980px){
  body.legacy-form .grid{ grid-template-columns: 1fr 1fr !important; }
  body.legacy-form .span2{ grid-column: span 2 !important; }
}

@media (max-width: 620px){
  body.legacy-form .grid{ grid-template-columns: 1fr !important; }
  body.legacy-form .span2{ grid-column: span 1 !important; }
  body.legacy-form .topbar{ flex-direction: column; align-items: flex-start; }
}

/* ===== Organização Docs RH (2 colunas fixas) ===== */
.doc-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  align-items: start;
}

.doc-actions .doc-col{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.docbtn{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s ease;
}

.docbtn:hover{
  background: #f3f4f6;
  border-color: #d1d5db;
}

/* =========================
   SIDEBAR FIXA GLOBAL
========================= */
.sidebar{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}


/* =========================
   AJUSTES PARA CELULAR
========================= */
@media (max-width: 768px) {

  /* Menu principal */
  .menu,
  .top-menu,
  .nav,
  .tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 10px;
  }

  .menu button,
  .tabs button {
    font-size: 12px;
    padding: 6px 10px;
  }

  /* Cabeçalho do sistema */
  header,
  .top-bar {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  /* Área principal */
  .container,
  .card,
  .panel {
    width: 100% !important;
    padding: 12px;
    border-radius: 12px;
  }

  /* Filtros */
  .filtros,
  .filters,
  .form-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .filtros input,
  .filtros select,
  .filters input,
  .filters select {
    width: 100%;
  }

  /* Botões */
  .actions,
  .botoes {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .actions button,
  .botoes button {
    width: 100%;
  }

  /* Tabela com rolagem lateral */
  .table,
  table {
    font-size: 12px;
    min-width: 700px;
  }

  .table-wrapper,
  .table-responsive {
    width: 100%;
    overflow-x: auto;
  }
}

/* =========================
   Tema dos botoes do topo
   Apenas header/userbar, exceto Excel
========================= */
:is(.card-header .card-actions, .page-header .userbar, .userbar, .user-actions)
  :is(button.btn, a.btn, .btn-primary, .btn-ghost, .btn-voltar-top):not(.btn-excel):not(#btnSair):not(#btnLogout):not(#gmLogout):not(.btn-sair-top):not(.btn-logout) {
  background: linear-gradient(180deg, rgba(225,29,72,1), rgba(190,18,60,1)) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 6px 14px rgba(225,29,72,.16) !important;
  text-shadow: 0 1px 0 rgba(136, 19, 55, .18);
  text-decoration: none !important;
  text-decoration-line: none !important;
}

:is(.card-header .card-actions, .page-header .userbar, .userbar, .user-actions)
  :is(button.btn, a.btn, .btn-primary, .btn-ghost, .btn-voltar-top):not(.btn-excel):not(#btnSair):not(#btnLogout):not(#gmLogout):not(.btn-sair-top):not(.btn-logout):hover {
  background: linear-gradient(180deg, rgba(225,29,72,1), rgba(190,18,60,1)) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 8px 18px rgba(225,29,72,.20) !important;
  filter: brightness(1.03);
  text-decoration: none !important;
  text-decoration-line: none !important;
}

:is(.card-header .card-actions, .page-header .userbar, .userbar, .user-actions)
  :is(button.btn, a.btn, .btn-primary, .btn-ghost, .btn-voltar-top):not(.btn-excel):not(#btnSair):not(#btnLogout):not(#gmLogout):not(.btn-sair-top):not(.btn-logout):disabled {
  opacity: .6 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

:is(.card-header .card-actions, .page-header .userbar, .userbar, .user-actions) .btn.btn-excel,
:is(.card-header .card-actions, .page-header .userbar, .userbar, .user-actions) .btn-excel {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 12px 30px rgba(22,163,74,.25) !important;
}

:is(.card-header .card-actions, .page-header .userbar, .userbar, .user-actions) .btn.btn-excel:hover,
:is(.card-header .card-actions, .page-header .userbar, .userbar, .user-actions) .btn-excel:hover {
  background: linear-gradient(135deg, #22c55e, #15803d) !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 14px 32px rgba(22,163,74,.30) !important;
}

/* ============================================================
   PROFESSIONAL REFINEMENT LAYER
   Tipografia, hierarquia visual e acabamento global
============================================================ */

:root{
  --font-body: "Aptos", "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --font-heading: "Bahnschrift SemiBold", "Aptos Display", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --font-mono: "Cascadia Code", Consolas, monospace;

  --surface-app: #060910;
  --surface-panel: rgba(10, 13, 20, .88);
  --surface-panel-strong: rgba(255,255,255,.08);
  --surface-card-pro: linear-gradient(180deg, rgba(255,255,255,.985), rgba(245,247,251,.94));
  --surface-field-pro: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
  --surface-soft-pro: rgba(15,23,42,.04);

  --ink-strong: #0f172a;
  --ink-soft: #475569;
  --ink-muted: #64748b;

  --line-soft-pro: rgba(148,163,184,.26);
  --line-strong-pro: rgba(100,116,139,.22);

  --accent-red: #d91d4e;
  --accent-red-2: #b6133d;
  --accent-red-soft: rgba(217,29,78,.12);
  --accent-green: #15803d;

  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 26px;

  --shadow-card-pro: 0 24px 60px rgba(2,6,23,.18);
  --shadow-soft-pro: 0 14px 34px rgba(15,23,42,.08);
}

html{
  scroll-behavior: smooth;
}

body{
  font-family: var(--font-body);
  color: var(--ink-strong);
  background:
    radial-gradient(900px 520px at 12% 10%, rgba(217,29,78,.14), transparent 58%),
    radial-gradient(820px 480px at 88% 12%, rgba(226,232,240,.10), transparent 52%),
    linear-gradient(180deg, #070a10 0%, #060910 58%, #05070d 100%) !important;
}

.app{
  grid-template-columns: 264px minmax(0, 1fr);
}

.sidebar{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 16px 14px 18px;
  gap: 12px;
  background: linear-gradient(180deg, rgba(11,14,22,.96), rgba(7,10,16,.94)) !important;
  border-right: 1px solid rgba(217,29,78,.18);
  backdrop-filter: blur(16px);
}

.brand{
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 16px 32px rgba(0,0,0,.24);
}

.brand-logo{
  width: 46px;
  height: 46px;
  border-radius: 14px;
}

.brand-title{
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.brand-subtitle{
  font-size: 11.5px;
  letter-spacing: .02em;
}

.nav{
  gap: 10px;
}

.nav-section{
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.nav-section + .nav-section{
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.07);
}

.nav-section-title{
  padding: 0 8px 2px;
  color: rgba(226,232,240,.48);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
  line-height: 1.2;
  text-transform: uppercase;
}

.nav-item{
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .01em;
  color: rgba(255,255,255,.84);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)) !important;
  border-color: rgba(255,255,255,.10) !important;
}

.nav-item-icon{
  width: 24px;
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: rgba(255,255,255,.74);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .02em;
}

.nav-item-text{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
  border-color: rgba(255,255,255,.18) !important;
  transform: translateX(1px);
}

.nav-item.active{
  background: linear-gradient(180deg, rgba(217,29,78,.24), rgba(217,29,78,.10)) !important;
  border-color: rgba(217,29,78,.46) !important;
  box-shadow: 0 0 0 1px rgba(217,29,78,.20) inset, 0 12px 30px rgba(217,29,78,.16);
}

.nav-item.active .nav-item-icon{
  color: #fff;
  background: linear-gradient(135deg, rgba(217,29,78,.95), rgba(255,95,134,.74));
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 8px 18px rgba(217,29,78,.20);
}

.content{
  padding: clamp(14px, 1.9vw, 26px) clamp(14px, 1.9vw, 24px) 32px;
}

.content > .card + .card{
  margin-top: 14px;
}

.page-title,
.card-title,
.modal-title{
  font-family: var(--font-heading);
}

.page-title{
  font-size: clamp(23px, 2.3vw, 30px);
  letter-spacing: -.02em;
}

.page-subtitle,
.card-subtitle{
  color: var(--ink-muted);
  line-height: 1.6;
}

.card{
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--line-soft-pro);
  background: var(--surface-card-pro) !important;
  box-shadow: var(--shadow-card-pro);
}

.card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, rgba(217,29,78,.88), rgba(241,78,122,.42), transparent 72%);
  pointer-events: none;
  opacity: .82;
}

.card-header{
  padding: 16px 18px 12px;
  gap: 12px;
  border-bottom: 1px solid rgba(148,163,184,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,0));
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-clip: padding-box;
}

.card-title{
  font-size: 15px;
  letter-spacing: .01em;
  color: var(--ink-strong);
}

.card > .card-title{
  padding: 14px 18px 0;
  margin: 0;
}

.card > .card-title.small{
  padding-top: 0;
}

.card > :not(.card-header):not(.card-title):not(.card-subtitle) + .card-title{
  padding-top: 10px;
}

.card-actions{
  gap: 8px;
}

.btn,
.actions-btn{
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.30);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,246,250,.92));
  color: var(--ink-strong);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .01em;
  box-shadow: 0 9px 18px rgba(15,23,42,.06);
}

.btn:hover,
.actions-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(217,29,78,.30);
  box-shadow: 0 12px 22px rgba(15,23,42,.09);
}

.btn:focus-visible,
.actions-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(217,29,78,.14),
    0 16px 28px rgba(15,23,42,.10);
}

.btn-primary{
  background: linear-gradient(180deg, var(--accent-red), var(--accent-red-2));
  color: #fff;
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 12px 26px rgba(217,29,78,.22);
}

.btn-primary:hover{
  box-shadow: 0 14px 28px rgba(217,29,78,.24);
}

.btn-ghost{
  background: rgba(255,255,255,.72);
  border-color: rgba(148,163,184,.28);
  color: var(--ink-strong);
}

.btn-danger,
.btn-danger:hover{
  background: linear-gradient(180deg, #ef4444, #b91c1c);
  color: #fff;
  border-color: rgba(127,29,29,.22);
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.28);
  background: var(--surface-field-pro);
  color: var(--ink-strong);
  font: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

textarea{
  min-height: 90px;
  resize: vertical;
}

input:not([type="checkbox"]):not([type="radio"])::placeholder,
textarea::placeholder{
  color: #94a3b8;
}

input[type="checkbox"],
input[type="radio"]{
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  padding: 0;
  margin: 0;
  border-radius: 4px;
  border: 1px solid rgba(100,116,139,.62);
  background: #fff;
  box-shadow: none;
  accent-color: var(--accent-red);
  vertical-align: middle;
}

input[type="radio"]{
  border-radius: 999px;
}

.table th.col-check,
.table td.col-check,
.table th:first-child,
.table td:first-child{
  width: 48px;
  text-align: center;
}

.field{
  min-width: 0;
}

.field label{
  display: block;
  margin-bottom: 6px;
  color: var(--ink-muted) !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.filters{
  padding: 14px 18px 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}

.table-toolbar{
  padding: 10px 18px;
  border-top: 1px solid rgba(148,163,184,.18);
  background: linear-gradient(180deg, rgba(248,250,252,.78), rgba(255,255,255,0));
}

.pager-info,
.result-count{
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #334155;
}

.table-wrap,
.table-responsive{
  margin: 0 14px 14px;
  overflow: auto;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 14px;
  background: rgba(255,255,255,.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.table{
  width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(248,250,252,1), rgba(241,245,249,.96));
  color: #475569;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(148,163,184,.26);
}

.table td{
  padding: 10px 12px;
  font-size: 12px;
  color: var(--ink-strong);
  vertical-align: middle;
  border-bottom: 1px solid rgba(226,232,240,.85);
}

.table tbody tr:nth-child(even){
  background: rgba(15,23,42,.025);
}

.table tbody tr:hover{
  background: linear-gradient(90deg, rgba(217,29,78,.06), rgba(255,255,255,0));
}

.toast{
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,252,.95));
}

.userbar{
  margin-bottom: 10px;
  gap: 8px;
}

.user-label{
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(217,29,78,.24), rgba(217,29,78,.10));
  border: 1px solid rgba(217,29,78,.46);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .01em;
  box-shadow:
    0 0 0 1px rgba(217,29,78,.20) inset,
    0 12px 30px rgba(217,29,78,.16);
  text-shadow: 0 1px 0 rgba(15,23,42,.22);
}

.log{
  font-family: var(--font-mono);
}

/* Restaura hierarquia sem deixar todo botão do topo vermelho */
:is(.card-header .card-actions, .page-header .userbar, .userbar, .user-actions)
  :is(button.btn, a.btn, .btn):not(.btn-primary):not(.btn-excel):not(.btn-danger):not(#btnSair):not(#btnLogout):not(#gmLogout):not(.btn-sair-top):not(.btn-logout) {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,246,250,.92)) !important;
  color: var(--ink-strong) !important;
  border: 1px solid rgba(148,163,184,.30) !important;
  box-shadow: 0 9px 18px rgba(15,23,42,.06) !important;
  text-shadow: none !important;
}

:is(.card-header .card-actions, .page-header .userbar, .userbar, .user-actions)
  :is(button.btn, a.btn, .btn):not(.btn-primary):not(.btn-excel):not(.btn-danger):not(#btnSair):not(#btnLogout):not(#gmLogout):not(.btn-sair-top):not(.btn-logout):hover {
  background: linear-gradient(180deg, rgba(255,255,255,.995), rgba(241,245,249,.94)) !important;
  color: var(--ink-strong) !important;
  border-color: rgba(217,29,78,.26) !important;
  box-shadow: 0 12px 22px rgba(15,23,42,.09) !important;
}

:is(.card-header .card-actions, .page-header .userbar, .userbar, .user-actions)
  :is(.btn-primary) {
  background: linear-gradient(180deg, var(--accent-red), var(--accent-red-2)) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 12px 26px rgba(217,29,78,.22) !important;
}

:is(.card-header .card-actions, .page-header .userbar, .userbar, .user-actions)
  :is(.btn-primary):hover {
  background: linear-gradient(180deg, #df2a58, #b4143d) !important;
  box-shadow: 0 14px 28px rgba(217,29,78,.24) !important;
}

:is(.card-header .card-actions, .page-header .userbar, .userbar, .user-actions)
  :is(#btnSair, #btnLogout, #gmLogout, .btn-sair-top, .btn-logout) {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(217,29,78,.24), rgba(217,29,78,.10)) !important;
  color: #fff !important;
  border: 1px solid rgba(217,29,78,.46) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: .01em !important;
  box-shadow:
    0 0 0 1px rgba(217,29,78,.20) inset,
    0 12px 30px rgba(217,29,78,.16) !important;
  text-shadow: 0 1px 0 rgba(15,23,42,.22);
}

:is(.card-header .card-actions, .page-header .userbar, .userbar, .user-actions)
  :is(#btnSair, #btnLogout, #gmLogout, .btn-sair-top, .btn-logout):hover {
  background: linear-gradient(180deg, rgba(217,29,78,.24), rgba(217,29,78,.10)) !important;
  border-color: rgba(217,29,78,.46) !important;
  box-shadow:
    0 0 0 1px rgba(217,29,78,.24) inset,
    0 14px 32px rgba(217,29,78,.20) !important;
  filter: brightness(1.03);
}

body.admin-users-page .user-label,
body.pdf-tool-page .user-label{
  color: #fff;
  background: linear-gradient(180deg, rgba(217,29,78,.24), rgba(217,29,78,.10));
  border-color: rgba(217,29,78,.46);
}

/* Botao de acoes da tabela: menor e mais elegante */
.table .actions-btn,
.table .opcoes-btn,
.table .dropdown-toggle,
.table .dropdown-btn{
  width: auto !important;
  min-width: 74px !important;
  height: 27px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  gap: 5px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,245,249,.94)) !important;
  border: 1px solid rgba(148,163,184,.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.84),
    0 6px 14px rgba(15,23,42,.06) !important;
  color: #334155 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  text-shadow: none !important;
}

.table .actions-btn::after,
.table .opcoes-btn::after,
.table .dropdown-toggle::after,
.table .dropdown-btn::after{
  content: "▾" !important;
  font-size: 9px !important;
  opacity: .55 !important;
}

.table .actions-btn:hover,
.table .opcoes-btn:hover,
.table .dropdown-toggle:hover,
.table .dropdown-btn:hover{
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,.96)) !important;
  border-color: rgba(100,116,139,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 16px rgba(15,23,42,.10) !important;
}

.table th.col-actions,
.table td.col-actions{
  width: 94px;
}

.actions-menu{
  max-height: min(240px, calc(100vh - 24px)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

.actions-menu.open.actions-menu-down,
.opcoes-menu.open.actions-menu-down,
.dropdown-menu.show.actions-menu-down{
  top: calc(100% + 6px) !important;
  bottom: auto !important;
}

.actions-menu.open.actions-menu-up,
.opcoes-menu.open.actions-menu-up,
.dropdown-menu.show.actions-menu-up{
  top: auto !important;
  bottom: calc(100% + 6px) !important;
}

.actions.actions-open,
.acoes.actions-open,
.dropdown.actions-open,
.actions-wrap.actions-open{
  z-index: 10020 !important;
}

.table td.actions-open-cell,
.table .col-actions.actions-open-cell,
td.acoes.actions-open-cell{
  position: relative !important;
  z-index: 10015 !important;
}

.table tr.actions-open-row{
  position: relative;
  z-index: 10010;
}

@media (max-width: 1100px){
  .app{
    grid-template-columns: 1fr;
  }

  .sidebar{
    position: static;
    height: auto;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid rgba(217,29,78,.18);
  }

  .filters{
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .table-wrap,
  .table-responsive{
    margin-left: 12px;
    margin-right: 12px;
  }
}

/* ============================================================
   SLIM CORNERS
   Reduz arredondamento geral de cards, paginas e botoes
============================================================ */

:root{
  --radius: 11px;
  --radius-sm: 8px;
  --radius-lg: 14px;
}

.brand{
  border-radius: 12px;
}

.brand-logo{
  border-radius: 10px;
}

.nav-item{
  border-radius: 10px;
}

.card{
  border-radius: 12px;
  background-clip: padding-box;
}

.card::before{
  inset: 1px 1px auto !important;
  height: 3px !important;
  border-radius: 11px 11px 0 0;
  clip-path: inset(0 round 11px 11px 0 0);
}

.btn,
.actions-btn,
.btn-clear,
.actions-menu,
.actions-menu a,
.actions-menu button{
  border-radius: 8px;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.user-label,
.table-wrap,
.table-responsive,
.toast{
  border-radius: 8px;
}

.admin-users-page .admin-users-hero{
  border-radius: 12px !important;
}

.admin-users-page .admin-users-stat,
.admin-users-page .rule-block,
.admin-users-page .feedback-message,
.admin-users-page .admin-users-empty{
  border-radius: 10px !important;
}

.admin-users-page .admin-users-card,
.admin-users-page .admin-users-table-wrap{
  border-radius: 12px !important;
}

body.pdf-tool-page .hero-actions-shell{
  border-radius: 12px !important;
}

body.pdf-tool-page .step-card{
  border-radius: 12px !important;
}

body.pdf-tool-page .step-card::before{
  inset: 1px 1px auto 1px !important;
  height: 3px !important;
  border-radius: 11px 11px 0 0 !important;
  clip-path: inset(0 round 11px 11px 0 0);
}

body.pdf-tool-page .step-number,
body.pdf-tool-page .hero-step,
body.pdf-tool-page .compact-note,
body.pdf-tool-page .pill{
  border-radius: 8px !important;
}

body.pdf-tool-page .field input,
body.pdf-tool-page .field select,
body.pdf-tool-page .help-box,
body.pdf-tool-page .btn,
body.pdf-tool-page .progress-shell{
  border-radius: 8px !important;
}

body.pdf-tool-page .step-meta,
.admin-users-page .admin-users-badge,
.admin-users-page .btn.btn-small{
  border-radius: 8px !important;
}

/* ============================================================
   GM DIALOG
   Modal global para alert, confirm e prompt
============================================================ */

body.gm-dialog-open{
  overflow: hidden;
}

.gm-dialog-root{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 30000;
}

.gm-dialog-root.is-open{
  display: flex;
}

.gm-dialog-backdrop{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(244, 114, 182, .18), transparent 42%),
    linear-gradient(180deg, rgba(8, 12, 22, .56), rgba(3, 7, 18, .82));
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .18s ease;
}

.gm-dialog-root.is-open .gm-dialog-backdrop{
  opacity: 1;
}

.gm-dialog-panel{
  position: relative;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 22px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(34, 18, 28, .98), rgba(15, 10, 18, .98));
  color: #fff;
  box-shadow:
    0 30px 80px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.10);
  transform: translateY(18px) scale(.98);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}

.gm-dialog-root.is-open .gm-dialog-panel{
  transform: translateY(0) scale(1);
  opacity: 1;
}

.gm-dialog-glow{
  position: absolute;
  inset: 0 0 auto auto;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(251, 113, 133, .22), transparent 70%);
  pointer-events: none;
  filter: blur(10px);
}

.gm-dialog-head{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.gm-dialog-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gm-dialog-close{
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}

.gm-dialog-close:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

.gm-dialog-body{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.gm-dialog-icon{
  width: 68px;
  height: 68px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .08em;
  color: #fff;
  background: linear-gradient(135deg, rgba(244, 114, 182, .86), rgba(225, 29, 72, .92));
  box-shadow:
    0 20px 32px rgba(225, 29, 72, .22),
    inset 0 1px 0 rgba(255,255,255,.24);
}

.gm-dialog-copy{
  min-width: 0;
}

.gm-dialog-title{
  margin: 2px 0 10px;
  color: #fff;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.gm-dialog-message{
  color: rgba(255,255,255,.78);
  font-size: 15px;
  line-height: 1.65;
  white-space: pre-line;
}

.gm-dialog-field-wrap{
  position: relative;
  z-index: 1;
  margin-top: 18px;
}

.gm-dialog-label{
  display: block;
  margin-bottom: 8px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.gm-dialog-input{
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.gm-dialog-input::placeholder{
  color: rgba(255,255,255,.40);
}

.gm-dialog-input:focus{
  border-color: rgba(251, 113, 133, .55);
  box-shadow:
    0 0 0 4px rgba(251, 113, 133, .12),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.gm-dialog-footer{
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.gm-dialog-btn{
  min-width: 120px;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .18s ease, filter .18s ease;
}

.gm-dialog-btn:hover{
  transform: translateY(-1px);
}

.gm-dialog-btn-secondary{
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.gm-dialog-btn-primary{
  color: #fff;
  background: linear-gradient(135deg, #fb7185, #e11d48);
  box-shadow: 0 16px 26px rgba(225, 29, 72, .24);
}

.gm-dialog-btn-info{
  background: linear-gradient(135deg, #fb7185, #e11d48);
}

.gm-dialog-btn-success{
  background: linear-gradient(135deg, #34d399, #059669);
  box-shadow: 0 16px 26px rgba(5, 150, 105, .24);
}

.gm-dialog-btn-warning{
  background: linear-gradient(135deg, #fbbf24, #f97316);
  box-shadow: 0 16px 26px rgba(249, 115, 22, .24);
}

.gm-dialog-btn-error,
.gm-dialog-btn-danger{
  background: linear-gradient(135deg, #fb7185, #e11d48);
  box-shadow: 0 16px 26px rgba(225, 29, 72, .24);
}

.gm-dialog-root[data-tone="success"] .gm-dialog-icon{
  background: linear-gradient(135deg, rgba(52, 211, 153, .92), rgba(5, 150, 105, .95));
  box-shadow:
    0 20px 32px rgba(5, 150, 105, .24),
    inset 0 1px 0 rgba(255,255,255,.24);
}

.gm-dialog-root[data-tone="warning"] .gm-dialog-icon{
  background: linear-gradient(135deg, rgba(251, 191, 36, .92), rgba(249, 115, 22, .96));
  box-shadow:
    0 20px 32px rgba(249, 115, 22, .24),
    inset 0 1px 0 rgba(255,255,255,.24);
}

.gm-dialog-root[data-tone="danger"] .gm-dialog-icon,
.gm-dialog-root[data-tone="error"] .gm-dialog-icon{
  background: linear-gradient(135deg, rgba(251, 113, 133, .92), rgba(190, 24, 93, .96));
}

.gm-dialog-root[data-tone="success"] .gm-dialog-badge{
  background: rgba(16, 185, 129, .16);
  border-color: rgba(16, 185, 129, .28);
}

.gm-dialog-root[data-tone="warning"] .gm-dialog-badge{
  background: rgba(251, 191, 36, .16);
  border-color: rgba(251, 191, 36, .28);
}

.gm-dialog-root[data-tone="danger"] .gm-dialog-badge,
.gm-dialog-root[data-tone="error"] .gm-dialog-badge{
  background: rgba(244, 63, 94, .16);
  border-color: rgba(244, 63, 94, .28);
}

@media (max-width: 640px){
  .gm-dialog-root{
    padding: 16px;
  }

  .gm-dialog-panel{
    width: min(100%, 100vw - 20px);
    padding: 18px;
    border-radius: 24px;
  }

  .gm-dialog-body{
    grid-template-columns: 1fr;
  }

  .gm-dialog-icon{
    width: 56px;
    height: 56px;
    border-radius: 18px;
  }

  .gm-dialog-title{
    font-size: 24px;
  }

  .gm-dialog-footer{
    justify-content: stretch;
  }

  .gm-dialog-btn{
    width: 100%;
  }
}

/* Sidebar recolhível no desktop */
.gm-sidebar-toggle{
  position: fixed;
  top: 18px;
  left: 244px;
  z-index: 9998;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  color: #fff;
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
  cursor: pointer;
  will-change: left, transform;
  transition: left .22s ease, transform .16s ease, background .16s ease;
}

.gm-sidebar-toggle:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
}

.gm-sidebar-toggle span,
.gm-sidebar-toggle::before,
.gm-sidebar-toggle::after{
  content: "";
  width: 18px;
  height: 2px;
  display: block;
  border-radius: 999px;
  background: currentColor;
  position: absolute;
}

.gm-sidebar-toggle::before{
  transform: translateY(-6px);
}

.gm-sidebar-toggle::after{
  transform: translateY(6px);
}

body.gm-sidebar-collapsed .app{
  grid-template-columns: 0 minmax(0, 1fr) !important;
}

body.gm-sidebar-collapsed .sidebar{
  transform: translateX(-110%);
  opacity: 0;
  pointer-events: none;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-right-color: transparent !important;
}

body.gm-sidebar-collapsed .content{
  padding-left: clamp(56px, 5.4vw, 72px) !important;
}

body.gm-sidebar-collapsed .gm-sidebar-toggle{
  left: 14px;
  background: linear-gradient(135deg, #d91d4e, #b6133d);
  border-color: rgba(255,255,255,.20);
}

.app,
.sidebar,
.content{
  will-change: transform, opacity, padding;
  transition: grid-template-columns .22s ease, transform .22s ease, opacity .18s ease, padding .22s ease;
}

@media (min-width: 861px){
  html,
  body{
    overflow-x: hidden;
  }

  body:not(.gm-sidebar-collapsed) .app{
    align-items: stretch;
  }

  body:not(.gm-sidebar-collapsed) .sidebar{
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 100vh;
    max-height: none !important;
    align-self: stretch;
    overflow: visible !important;
  }

  .app{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .content,
  .card,
  .table-wrap,
  .table-responsive{
    min-width: 0;
    max-width: 100%;
  }

  body.gm-sidebar-collapsed .content,
  body.gm-sidebar-collapsed .card{
    width: 100%;
  }

  .table-wrap,
  .table-responsive{
    width: auto;
    max-width: calc(100% - 28px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
  }

  body.gm-sidebar-collapsed .sidebar{
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .app,
  .sidebar,
  .content,
  .gm-sidebar-toggle{
    transition: none !important;
  }
}

@media (max-width: 860px){
  .gm-sidebar-toggle{
    display: none !important;
  }
}

/* Menu de acoes flutuante: usado pela tela de Ativos para nao ser cortado pela tabela */
body > .actions-menu.open{
  position: fixed !important;
  display: block !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 100050 !important;
  min-width: 170px !important;
  padding: 6px !important;
  border-radius: 12px !important;
  background: #fff !important;
  border: 1px solid rgba(148,163,184,.38) !important;
  box-shadow: 0 20px 50px rgba(15,23,42,.24) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

body > .actions-menu.open::before,
body > .actions-menu.open::after{
  content: none !important;
}