/* ===== VENCIMENTOS – sua estética (mantida) ===== */
#vencimentos .muted{ color:#6b7280; }
#vencimentos .venc-kpis{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; margin:10px 0 14px; }
#vencimentos .kpi{ display:flex; gap:10px; align-items:center; background:linear-gradient(180deg,#fff, #f9fbff); border:1px solid #e6e9ef; border-radius:14px; padding:14px; box-shadow:0 8px 24px rgba(2,6,23,.06); }
#vencimentos .kpi-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:999px;
  background:rgba(59,130,246,0.06);
  overflow: visible;
  font-size:16px;
}
/* === FIX: ícones dos KPIs do Vencimentos não ficarem cortados === */
#vencimentos .kpi-icon{
  overflow: visible; /* importante p/ não cortar o stroke do svg */
}

/* Feather substitui <i data-feather> por <svg> */
#vencimentos .kpi-icon svg{
  width: 22px;
  height: 22px;
  display: block;
  overflow: visible; /* garante que o traço não "corte" nas bordas */
}

#vencimentos .kpi-info{ line-height:1.05; }
#vencimentos .kpi-label{ font-size:12px; color:#475569; }
#vencimentos .kpi-value{ font-size:22px; font-weight:800; color:#0f172a; letter-spacing:.2px; }
#vencimentos .kpi-red{ border-left:5px solid #ef4444; }
#vencimentos .kpi-orange{ border-left:5px solid #f59e0b; }
#vencimentos .kpi-blue{ border-left:5px solid #3b82f6; }

/* KPIs clicáveis (filtro rápido) */
#vencimentos .kpi-action{
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
#vencimentos .kpi-action:hover{
  transform: translateY(-1px);
  box-shadow:0 14px 34px rgba(2,6,23,.10);
  border-color:#d8dde8;
}
#vencimentos .kpi-action:active{
  transform: translateY(0px);
}
#vencimentos .kpi-action.is-active{
  box-shadow:0 0 0 3px rgba(59,130,246,.18), 0 14px 34px rgba(2,6,23,.10);
  border-color:rgba(59,130,246,.35);
}
#vencimentos .kpi-action:focus{ outline:none; }
#vencimentos .kpi-action:focus-visible{
  box-shadow:0 0 0 3px rgba(59,130,246,.28), 0 14px 34px rgba(2,6,23,.10);
}
/* ===== VENCIMENTOS — Toolbar alinhada ===== */
#vencimentos .venc-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:wrap;
  margin:6px 0 12px;
}

#vencimentos .venc-toolbar .left{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
  flex-wrap:nowrap;
}

#vencimentos .venc-toolbar .right{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  white-space:nowrap;
}

/* Barra de busca com lupa no final (minimalista) */
#vencimentos .venc-searchbar{
  position:relative;
  flex:1 1 420px;
  min-width:260px;
  max-width:520px;
}

#vencimentos .venc-searchbar .ctrl--search{
  width:100%;
  padding-right:40px;
}

#vencimentos .venc-search-ico{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#64748b;
  pointer-events:none;
}

#vencimentos .venc-search-ico svg{
  width:16px;
  height:16px;
}

@media (max-width: 680px){
  #vencimentos .venc-toolbar .left{
    flex-wrap:wrap;
  }
  #vencimentos .venc-searchbar{
    flex:1 1 100%;
    max-width:100%;
  }
}
#vencimentos .btn{ appearance:none; border:1px solid #e3e7ef; background:#fff; color:#0f172a; padding:8px 12px; border-radius:10px; font-size:13px; }
#vencimentos .filters-wrap{ position:relative; }
#vencimentos .filters-menu{ position:absolute; left:0; top:calc(100% + 6px); background:#fff; border:1px solid #e6e9ef; border-radius:12px; box-shadow:0 12px 24px rgba(16,24,40,.12); width:min(420px, 92vw); padding:12px; display:none; z-index:10; }
#vencimentos .filters-menu.show{ display:block; }
#vencimentos .filters-title{ font-weight:700; color:#0f172a; }
#vencimentos .filters-row{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 6px; }
#vencimentos .chip{ border:1px solid #e3e7ef; background:#fff; color:#16243a; padding:6px 10px; border-radius:999px; font-size:12px; cursor:pointer; }
#vencimentos .chip.is-active{ background:#0f172a; color:#fff; border-color:#0f172a; }
#vencimentos .filters-tip{ font-size:12px; }
#vencimentos .ctrl{ background:#fff; border:1px solid #e3e7ef; border-radius:10px; padding:8px 12px; font-size:13px; }
#vencimentos .venc-header{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:8px;
}

#vencimentos .venc-subtitle{
  font-size:13px;
  color:var(--muted);
}

#vencimentos .venc-title{ margin:10px 0 8px; }
#vencimentos .venc-title h4{ margin:0; font-size:16px; letter-spacing:.2px; }
#vencimentos .venc-title .sub{ color:#6b7280; font-size:12px; }

#vencimentos .venc-section-title{
  margin:18px 0 6px;
  font-size:14px;
  font-weight:600;
  color:#0f172a;
}
#vencimentos .venc-divider{ margin:18px 0; border:0; height:1px; background:#eef2f7; }
#vencimentos .table-wrap{
  overflow-x: auto;
  overflow-y: hidden;
  max-height: none;
}
#vencimentos .venc-table{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid #e6e9ef; border-radius:12px; box-shadow:0 10px 28px rgba(2,6,23,.05); overflow:hidden; }
#vencimentos .venc-table thead th{ position:sticky; top:0; z-index:1; background:#f7f9fc; color:#1f2937; font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:11px; border-bottom:1px solid #e6e9ef; padding:12px; }
#vencimentos .venc-table tbody td{ padding:12px; border-bottom:1px solid #f1f5f9; vertical-align:top; font-size:13px; }
#vencimentos .venc-table tbody tr:hover{ background:#fbfdff; }
#vencimentos .avatar{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; margin-right:6px; background:#eef2ff; color:#1e40af; font-weight:700; font-size:12px; border:1px solid #e0e7ff; }
#vencimentos .status-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 10px; border-radius:999px; border:1px solid transparent; font-weight:600; }
#vencimentos .status--bad{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
#vencimentos .status--warn{ background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
#vencimentos tr.is-vencido{ box-shadow: inset 3px 0 0 0 #ef4444; }
#vencimentos .empty{ display:flex; align-items:center; gap:10px; padding:12px; background:#fff; border:1px dashed #e3e7ef; border-radius:12px; }
#vencimentos .empty-ico{ font-size:18px; }
#vencimentos .skeleton{ height:44px; background:linear-gradient(90deg,#f4f6fb,#eef1f7,#f4f6fb); background-size:200% 100%; animation:ske 1.1s infinite linear; border-radius:8px; margin:6px 0; }
@keyframes ske { 0%{background-position: 200% 0;} 100%{background-position: -200% 0;} }
#vencimentos .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
#vencimentos .venc-table td { word-break: break-word; }
#vencimentos mark.hl{ background:#fff3a3; color:inherit; padding:0 2px; border-radius:3px; }
#vencimentos .ctrl--search{ min-width:260px; }
@media (max-width: 860px){
  #vencimentos .venc-kpis{ grid-template-columns: 1fr; }
  #vencimentos .ctrl--search{ min-width: 0; width:100%; }
}

/* ===== VENCIMENTOS — Paginação (substitui scroll interno) ===== */
#vencimentos .venc-pager{
  display:flex;
  gap:6px;
  justify-content:flex-end;
  align-items:center;
  margin-top:10px;
  user-select:none;
}

#vencimentos .venc-page-btn{
  appearance:none;
  border:1px solid #e6e9ef;
  background:#fff;
  color:#0f172a;
  font-size:12px;
  font-weight:700;
  min-width:32px;
  height:30px;
  padding:0 10px;
  border-radius:999px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

#vencimentos .venc-page-btn:hover{
  transform: translateY(-1px);
  box-shadow:0 10px 18px rgba(2,6,23,.08);
  border-color:#cbd5e1;
}

#vencimentos .venc-page-btn.is-active{
  background:#0f172a;
  border-color:#0f172a;
  color:#fff;
  box-shadow:0 10px 18px rgba(2,6,23,.12);
}

#vencimentos .venc-page-ellipsis{
  color:#94a3b8;
  font-weight:700;
  padding:0 4px;
}

/* ===== Pequenos upgrades visuais (bem discretos) ===== */
#vencimentos .kpi-action{ cursor:pointer; transition: transform .12s ease, box-shadow .12s ease; }
#vencimentos .kpi-action:hover{ transform: translateY(-1px); box-shadow:0 10px 26px rgba(2,6,23,.10); }

#vencimentos .kpi-action[aria-pressed="true"]{
  box-shadow:0 0 0 3px rgba(59,130,246,.12), 0 10px 26px rgba(2,6,23,.10);
  border-color:#c7d2fe;
}

#vencimentos #vencInfo{ display:none; }

/* ===== VENCIMENTOS – refinamento premium (UI) ===== */
#vencimentos .venc-hero{
  background:#fff;
  border:1px solid #e6e9ef;
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 28px rgba(2,6,23,.05);
  margin-bottom:12px;
}

#vencimentos .venc-block{ margin-top:14px; }

/* badge de contagem no título */
#vencimentos .count-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:22px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(59,130,246,.08);
  border:1px solid rgba(59,130,246,.20);
  color:#1e40af;
  font-size:12px;
  font-weight:800;
  vertical-align:middle;
}

/* tabela com “card” de verdade (borda/sombra no wrap) */
#vencimentos .table-wrap{
  border:1px solid #e6e9ef;
  border-radius:12px;
  box-shadow:0 10px 28px rgba(2,6,23,.05);
  background:#fff;
  overflow-x: auto;
  overflow-y: hidden;
  max-height:none;
}
#vencimentos .table-wrap .venc-table{
  border:0;
  box-shadow:none;
  border-radius:0;
}

/* zebra sutil */
#vencimentos .venc-table tbody tr:nth-child(even){ background:#f9fbff; }

/* status pill com “dot” (fica mais elegante) */
#vencimentos .status-pill::before{
  content:'';
  width:6px;
  height:6px;
  border-radius:999px;
  background:currentColor;
  opacity:.55;
}

/* botão filtros com ícone alinhado */
#vencimentos #btnVencFiltros{
  display:flex;
  align-items:center;
  gap:8px;
}
#vencimentos #btnVencFiltros i{
  width:16px;
  height:16px;
}



















/* ===================== VENCIMENTOS – alinhamento das colunas ===================== */

/* Deixa as duas tabelas com largura estável */
#vencimentos .venc-table {
  width: 100%;
  table-layout: fixed;
}

/* ---------- Tabela 1: Vida útil vencida (tblVidaUtil) ---------- */

/* 1ª coluna: Colaborador (avatar + nome) */
#tblVidaUtil thead th:nth-child(1),
#tblVidaUtil tbody td:nth-child(1) {
  text-align: left;
}

/* Cria um "avatar fantasma" no cabeçalho para alinhar com o círculo das linhas */
#tblVidaUtil thead th:nth-child(1) {
  position: relative;
  padding-left: 46px;            /* 12 (padding) + 26 (avatar) + 8 (espaço) */
}

#tblVidaUtil thead th:nth-child(1)::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  /* sem borda/cor: é só um espaço reservado invisível */
}

/* 2ª coluna: EPI – texto normal à esquerda */
#tblVidaUtil thead th:nth-child(2),
#tblVidaUtil tbody td:nth-child(2) {
  text-align: left;
}

/* 3, 4 e 5: datas + vida útil (deixei centralizadas e com números “firmes”) */
#tblVidaUtil thead th:nth-child(3),
#tblVidaUtil tbody td:nth-child(3),
#tblVidaUtil thead th:nth-child(4),
#tblVidaUtil tbody td:nth-child(4),
#tblVidaUtil thead th:nth-child(5),
#tblVidaUtil tbody td:nth-child(5) {
  text-align: center;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* 6ª coluna: status – alinhado à direita, fica visualmente mais limpo */
#tblVidaUtil thead th:nth-child(6),
#tblVidaUtil tbody td:nth-child(6) {
  text-align: right;
}

/* ---------- Tabela 2: CAs vencidos no estoque (tblCAs) ---------- */

/* 1ª coluna: EPI */
#tblCAs thead th:nth-child(1),
#tblCAs tbody td:nth-child(1) {
  text-align: left;
}

/* 2ª coluna: CA (números) */
#tblCAs thead th:nth-child(2),
#tblCAs tbody td:nth-child(2) {
  text-align: center;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* 3ª coluna: Validade do CA (data) */
#tblCAs thead th:nth-child(3),
#tblCAs tbody td:nth-child(3) {
  text-align: center;
  white-space: nowrap;
}

/* 4ª coluna: Status (pill) alinhado à direita */
#tblCAs thead th:nth-child(4),
#tblCAs tbody td:nth-child(4) {
  text-align: right;
}


/* =========================
   PATCH PREMIUM — Vencimentos (KPIs)
   Cole no FINAL do style.css
   ========================= */
#vencimentos .venc-kpis{
  gap: 14px;
  margin: 14px 0 10px;
}

#vencimentos .kpi{
  padding: 16px 16px;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,0.95);
  box-shadow: 0 10px 22px rgba(15,23,42,0.06);
  gap: 12px;
}

#vencimentos .kpi:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15,23,42,0.10);
}

#vencimentos .kpi-icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

#vencimentos .kpi-label{
  font-size: 12px;
  letter-spacing: .2px;
  color: #475569;
  margin-bottom: 2px;
}

#vencimentos .kpi-value{
  font-size: 28px;
  letter-spacing: -0.02em;
}

/* Estoque: ícones de traço (feather) alinhados */
#estoque .search-ico svg{ width:16px; height:16px; }
#estoque .icon-btn-blue svg{ width:18px; height:18px; display:block; }