:root{
  --s4r-bg:#f5f7fb;
  --s4r-card:#ffffff;
  --s4r-border:#e8edf5;
  --s4r-text:#1f2937;
  --s4r-muted:#6b7280;
  --s4r-primary:#0d6efd;
  --s4r-success:#198754;
  --s4r-danger:#dc3545;
  --s4r-zebra:#fbfcfe;
}

body{
  background: var(--s4r-bg);
  color:var(--s4r-text);
}

.page-wrap{max-width:98%; margin:0 auto; padding:18px;}
.hero{background:#fff; border:1px solid var(--s4r-border); border-radius:24px; padding:22px; box-shadow:0 10px 30px rgba(17,24,39,.05);}
.hero h1{font-size:1.55rem; margin:0; font-weight:700; display:flex; align-items:center; gap:.7rem;}
.hero-icon{
  width:54px;
  height:54px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#eaf3ff 0%,#f7fbff 100%);
  color:#2457c5;
  border:1px solid #d9e8ff;
  box-shadow:0 8px 18px rgba(36,87,197,.10);
}

.filter-card,.table-card,.stats-card{
  background:#fff;
  border:1px solid var(--s4r-border);
  border-radius:22px;
  box-shadow:0 10px 24px rgba(17,24,39,.04);
}

.filter-card{padding:18px;}
.stats-card{padding:18px; height:100%;}
.stats-label{font-size:.82rem; color:var(--s4r-muted); text-transform:uppercase; letter-spacing:.04em;}
.stats-value{font-size:1.45rem; font-weight:700; margin-top:6px;}
.table-card{overflow:hidden;}
.table thead th{
  font-size:.80rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#64748b;
  background:#f8fafc;
  border-bottom:1px solid var(--s4r-border);
  white-space:nowrap;
  padding:.72rem .75rem;
}
.table tbody td{vertical-align:middle; border-color:#edf2f7; padding:.52rem .75rem; line-height:1.15;}
.table tbody tr:nth-child(even){background:var(--s4r-zebra);}
.table-hover tbody tr:hover{background:#f3f8ff;}
.text-overdue{color:var(--s4r-danger); font-weight:600; white-space:nowrap;}
.text-dueok{color:var(--s4r-success); font-weight:600; white-space:nowrap;}
.toolbar-btn{border-radius:14px;}
.btn-icon{width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; padding:0;}
.btn-icon i{font-size:1rem;}
.empty-box{padding:48px 20px; text-align:center; color:var(--s4r-muted);}
.col-edit{width:72px;}
.col-venc{width:148px;}
.col-valor{width:140px;}
.col-doc{width:160px;}
.col-conta{width:190px;}
.cell-obs{min-width:340px;}

@media (max-width: 991px){
  .page-wrap{padding:12px;}
  .hero,.filter-card,.table-card,.stats-card{border-radius:18px;}
  .hero h1{font-size:1.32rem;}
  .hero-icon{width:46px; height:46px; border-radius:14px;}
  .cell-obs{min-width:220px;}
}

/* =========================================================
   CABEÇALHO PADRÃO SYSTEM4R
   ========================================================= */

.s4r-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 18px;
  margin-bottom:16px;
  background:linear-gradient(135deg,#432521 0%,#1f2a52 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 28px rgba(15,23,42,.10);
}

.s4r-topbar-title{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  flex:1 1 auto;
  padding:12px 16px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.08) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.s4r-topbar-icon{
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#f5c54c 0%,#e2a400 100%);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  box-shadow:0 8px 18px rgba(226,164,0,.28);
  font-size:18px;
  flex:0 0 auto;
  position:relative;
  overflow:hidden;
}

.s4r-topbar-title h1{
  margin:0;
  font-size:1.95rem;
  font-weight:800;
  color:#fff;
  letter-spacing:-.3px;
  line-height:1.08;
}

.s4r-topbar-sub{
  color:rgba(255,255,255,.88);
  font-size:.94rem;
  margin-top:4px;
}

.s4r-topbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex:0 0 auto;
}

.s4r-search-form{margin:0; flex:0 0 auto;}
.s4r-search-box{position:relative; width:360px; max-width:360px;}

.s4r-search-box i{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:#6b7280;
  font-size:15px;
  pointer-events:none;
  z-index:2;
}

.s4r-search-box .form-control{
  width:100%;
  height:42px;
  padding-left:38px;
  padding-right:12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:none;
  background:rgba(255,255,255,.96);
}

.s4r-search-box .form-control:focus{
  border-color:#b8d0ff;
  box-shadow:0 0 0 .2rem rgba(13,110,253,.12);
}

.s4r-btn-novo{
  height:42px;
  border-radius:10px;
  padding:0 16px;
  font-weight:600;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

@media (max-width: 768px){
  .s4r-topbar{
    flex-direction:column;
    align-items:stretch;
    padding:12px;
  }

  .s4r-topbar-title{
    align-items:flex-start;
    padding:10px 12px;
  }

  .s4r-topbar-title h1{font-size:1.55rem;}

  .s4r-topbar-actions{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }

  .s4r-search-form,
  .s4r-search-box,
  .s4r-btn-novo{
    width:100%;
    max-width:100%;
  }

  .s4r-btn-novo{justify-content:center;}
}

/* =========================================================
   TABELA PADRÃO SYSTEM4R
   ========================================================= */

.acoes{
  white-space:nowrap;
  text-align:center;
}

.acoes .btn,
.acoes .btn-icon{
  margin:0 2px;
}

.table-wrap-s4r{
  border:0 !important;
  border-radius:0 !important;
  overflow:auto;
}

.tabela-lista-s4r{
  width:100%;
  table-layout:fixed;
  font-size:13px;
}

.tabela-lista-s4r th,
.tabela-lista-s4r td{
  padding:4px 6px !important;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:middle;
}

.tabela-lista-s4r thead th{
  font-size:13px !important;
  font-weight:700 !important;
  color:#1e293b !important;
  text-transform:uppercase;
  letter-spacing:.04em;
  background:#eef2f7 !important;
  border-bottom:2px solid #dbe3ec !important;
  position:sticky;
  top:0;
  z-index:2;
}

.tabela-lista-s4r tbody tr:nth-child(even){background:#f7f9fc;}
.tabela-lista-s4r tbody tr:hover{background:#eef4ff;}

.tabela-lista-s4r td.text-end,
.tabela-lista-s4r th.text-end{ text-align:right; }

.tabela-lista-s4r td.text-center,
.tabela-lista-s4r th.text-center{ text-align:center; }

.tabela-lista-s4r .btn-icon{
  width:28px;
  height:28px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
}

.tabela-lista-s4r .btn-icon i{font-size:14px;}

/* =========================================================
   TABELA PESSOAS SYSTEM4R
   ========================================================= */

#tabelaPessoas{
  table-layout:fixed;
  width:100%;
  font-size:13px;
  --bs-table-hover-bg:#cfe2ff;
}

#tabelaPessoas thead th{
  background:linear-gradient(180deg,#2f537f 0%,#1f3f67 100%) !important;
  color:#fff !important;
  font-weight:700 !important;
  text-transform:uppercase;
  font-size:13px !important;
  letter-spacing:.3px;
  padding:12px 8px !important;
  height:44px;
  vertical-align:middle !important;
  border-right:1px solid rgba(255,255,255,.12) !important;
  border-bottom:1px solid #173554 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  overflow:visible !important;
  text-overflow:clip !important;
}

#tabelaPessoas thead th:first-child{border-top-left-radius:10px;}
#tabelaPessoas thead th:last-child{
  border-top-right-radius:10px;
  border-right:0 !important;
}

#tabelaPessoas tbody td{
  font-size:13px !important;
  padding:6px 8px !important;
  vertical-align:middle;
}

#tabelaPessoas th:nth-child(1),
#tabelaPessoas td:nth-child(1){ width:340px; }

#tabelaPessoas th:nth-child(2),
#tabelaPessoas td:nth-child(2){ width:170px; }

#tabelaPessoas th:nth-child(3),
#tabelaPessoas td:nth-child(3){ width:150px; }

#tabelaPessoas th:nth-child(4),
#tabelaPessoas td:nth-child(4){ width:150px; }

#tabelaPessoas th:nth-child(5),
#tabelaPessoas td:nth-child(5){
  width:auto;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

#tabelaPessoas.table-hover > tbody > tr:hover > *{
  background-color:rgba(13,110,253,.08) !important;
}

#tabelaPessoas tbody tr > *{
  transition:background-color .12s ease-in-out;
}

/* =====================================================
   TABELA OTIMIZADA - ESTOQUE
   ===================================================== */

#tabelaEstoque{
  table-layout:fixed;
  width:100%;
  font-size:13px;
  --bs-table-hover-bg:#cfe2ff;
}

#tabelaEstoque th{
  background-color:#1f3b5c;
  color:#fff;
  font-weight:600;
  padding:5px 6px;
  white-space:nowrap;
}

#tabelaEstoque td{
  padding:3px 6px;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:middle;
}

#tabelaEstoque thead th{
  background:linear-gradient(180deg,#2f537f 0%,#1f3f67 100%) !important;
  color:#fff !important;
  font-weight:700 !important;
  text-transform:uppercase;
  font-size:13px !important;
  letter-spacing:.3px;
  padding:12px 8px !important;
  height:44px;
  vertical-align:middle !important;
  border-right:1px solid rgba(255,255,255,.12) !important;
  border-bottom:1px solid #173554 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

#tabelaEstoque thead th:first-child{border-top-left-radius:10px;}
#tabelaEstoque thead th:last-child{
  border-top-right-radius:10px;
  border-right:0 !important;
}

#tabelaEstoque thead th.th-funcoes{
  background:linear-gradient(180deg,#ffb400 0%,#e49a00 100%) !important;
  color:#fff !important;
  border-bottom:1px solid #c88500 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

#tabelaEstoque th.col-acoes,
#tabelaEstoque td.acoes{
  width:220px;
  text-align:center;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

#tabelaEstoque tbody tr{height:30px;}

#tabelaEstoque.table-sm > tbody > tr > td{
  padding-top:2px;
  padding-bottom:2px;
}

#tabelaEstoque.table-hover > tbody > tr:hover > *{
  background-color:rgba(13,110,253,.08) !important;
}

#tabelaEstoque tbody tr > *{
  transition:background-color .12s ease-in-out;
}

.status-icon{
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:50%;
  margin-right:6px;
  vertical-align:middle;
}

.status-loja{ background:#28a745; }
.status-vendido{ background:#ff4d6d; }
.status-estornado{ background:#fd7e14; }
.status-locado{ background:#0d6efd; }
.status-oficina{ background:#ffc107; }

.status-text-vendido,
.status-text-excluido{ color:#dc3545; }

.status-excluido{
  width:14px;
  height:14px;
  border-radius:0;
  position:relative;
}

.status-excluido::before,
.status-excluido::after{
  content:"";
  position:absolute;
  top:6px;
  left:0;
  width:10px;
  height:2px;
  background:#dc3545;
}

.status-excluido::before{transform:rotate(45deg);}
.status-excluido::after{transform:rotate(-45deg);}

.data-vendida{
  color:#d90429;
  font-weight:600;
}

.obs-container{
  width:100%;
  max-width:none;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.obs-text{
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:left;
}

.obs-text.expanded{
  white-space:normal;
  overflow:visible;
}

.obs-toggle{
  flex:0 0 auto;
  white-space:nowrap;
  color:#0d6efd;
  cursor:pointer;
  font-size:12px;
  text-align:right;
  align-self:flex-start;
}

#tabelaEstoque td.acoes{
  white-space:nowrap !important;
  overflow:visible !important;
}

#tabelaEstoque .acoes a{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  border:1px solid #e1e5ea;
  background:#fff;
  margin:0 2px;
  text-decoration:none !important;
  transition:all .15s ease;
}

#tabelaEstoque .acoes a i{
  font-size:14px;
  line-height:1;
}

#tabelaEstoque .acoes a.text-success:hover{ background:#198754; border-color:#198754; color:#fff; }
#tabelaEstoque .acoes a.text-primary:hover{ background:#0d6efd; border-color:#0d6efd; color:#fff; }
#tabelaEstoque .acoes a.text-warning:hover{ background:#f59f00; border-color:#f59f00; color:#fff; }
#tabelaEstoque .acoes a.text-danger:hover{ background:#dc3545; border-color:#dc3545; color:#fff; }
#tabelaEstoque .acoes a.text-secondary:hover{ background:#6c757d; border-color:#6c757d; color:#fff; }
#tabelaEstoque .acoes a.text-info:hover{ background:#0dcaf0; border-color:#0dcaf0; color:#fff; }

#tabelaEstoque .acoes a:hover i{ color:#fff !important; }

#tabelaEstoque thead th:nth-child(2),
#tabelaEstoque thead th:nth-child(3){
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
}

#tabelaEstoque th:nth-child(2),
#tabelaEstoque td:nth-child(2){ width:92px !important; }

#tabelaEstoque th:nth-child(3),
#tabelaEstoque td:nth-child(3){ width:96px !important; }

.btn-topo{
  position:fixed;
  bottom:22px;
  right:22px;
  width:32px;
  height:32px;
  border-radius:50%;
  background:linear-gradient(135deg,#1f6feb 0%,#0d6efd 100%);
  color:#fff;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:15px;
  box-shadow:0 4px 12px rgba(13,110,253,.35);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .22s ease, visibility .22s ease, transform .22s ease, box-shadow .18s ease;
  z-index:1050;
  padding:0;
}

.btn-topo:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 8px 18px rgba(13,110,253,.45);
}

@media (min-width:576px){
  .w-sm-auto{ width:auto !important; }
}

td.valor{ text-align:right !important; font-weight:500; }
.table thead th.valor{ text-align:right !important; }

.kpi-link{
  text-decoration:none;
  color:inherit;
  display:block;
}

.kpi-link .kpi-card{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor:pointer;
}

.kpi-link:hover .kpi-card{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(16,24,40,.12);
  border-color:rgba(13,110,253,.22);
}

.kpi-link:active .kpi-card{ transform:translateY(-1px); }
.kpi-link:focus-visible{ outline:none; }

.kpi-link:focus-visible .kpi-card{
  box-shadow:0 0 0 3px rgba(13,110,253,.18);
  border-color:rgba(13,110,253,.30);
}

.icones-rapidos a{
  color:#6c757d;
  font-size:22px;
  transition:all .2s ease;
  display:flex;
  align-items:center;
}

.dropdown-menu-dark .dropdown-divider{
  border-top:1px solid rgba(255,255,255,.25);
  margin:8px 0;
}

/* =========================================================
   ANIMAÇÕES GLOBAIS SYSTEM4R
   Versão sem script - funciona melhor no iframe
   ========================================================= */

.s4r-topbar-icon{
  position:relative;
  overflow:hidden;
  animation:s4rIconIntro 1.05s cubic-bezier(.22,.61,.36,1) .35s both;
  will-change:transform, opacity, filter;
}

.s4r-topbar-title h1{
  animation:s4rTitleIntro 1.10s cubic-bezier(.22,.61,.36,1) .55s both;
  will-change:transform, opacity, filter;
}

.s4r-topbar-icon::after{
  content:"";
  position:absolute;
  inset:-45%;
  background:linear-gradient(
    120deg,
    transparent 38%,
    rgba(255,255,255,.72) 50%,
    transparent 62%
  );
  transform:translateX(-150%) rotate(18deg);
  animation:s4rIconGlow .95s ease 1.00s both;
  pointer-events:none;
}

@keyframes s4rIconIntro{
  0%{
    opacity:0;
    transform:translateY(22px) scale(.55) rotate(-12deg);
    filter:blur(4px);
  }
  55%{
    opacity:1;
    transform:translateY(-4px) scale(1.10) rotate(3deg);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1) rotate(0);
    filter:blur(0);
  }
}

@keyframes s4rTitleIntro{
  0%{
    opacity:0;
    transform:translateX(-56px);
    letter-spacing:-.06em;
    filter:blur(4px);
  }
  60%{
    opacity:1;
    transform:translateX(6px);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:translateX(0);
    letter-spacing:normal;
    filter:blur(0);
  }
}

@keyframes s4rIconGlow{
  to{
    transform:translateX(150%) rotate(18deg);
  }
}

.btn.btn-primary,
.s4r-btn-novo{
  position:relative;
  overflow:hidden;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.btn.btn-primary:hover,
.s4r-btn-novo:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(13,110,253,.28);
  filter:brightness(1.04);
}

.btn.btn-primary:active,
.s4r-btn-novo:active{
  transform:translateY(0);
}

.btn.btn-primary::after,
.s4r-btn-novo::after{
  content:"";
  position:absolute;
  top:-30%;
  bottom:-30%;
  left:-60%;
  width:38%;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 100%
  );
  transform:translateX(-220%) skewX(-20deg);
  opacity:0;
  pointer-events:none;
}

.btn.btn-primary:hover::after,
.s4r-btn-novo:hover::after{
  opacity:1;
  animation:s4rBtnGlow .75s ease forwards;
}

@keyframes s4rBtnGlow{
  from{ transform:translateX(-220%) skewX(-20deg); }
  to{ transform:translateX(520%) skewX(-20deg); }
}

@media (prefers-reduced-motion: reduce){
  .s4r-topbar-icon,
  .s4r-topbar-title h1{
    animation:none !important;
  }

  .btn.btn-primary,
  .btn.btn-primary::after,
  .s4r-btn-novo,
  .s4r-btn-novo::after{
    animation:none !important;
    transition:none !important;
  }
}

/* =========================================================
   AJUSTE GLOBAL SYSTEM4R - QUINAS MAIS SUAVES
   ========================================================= */

:root{
  --s4r-radius-field:8px;
  --s4r-radius-box:12px;
  --s4r-radius-icon:10px;
  --s4r-radius-mini:6px;
}

.hero,
.filter-card,
.table-card,
.stats-card,
.s4r-topbar,
.card,
.modal-content,
.dropdown-menu{
  border-radius:var(--s4r-radius-box) !important;
}

.hero-icon,
.s4r-topbar-icon{
  border-radius:var(--s4r-radius-icon) !important;
}

.form-control,
.form-select,
.input-group-text,
.btn,
.s4r-search-box .form-control,
.s4r-btn-novo,
.toolbar-btn{
  border-radius:var(--s4r-radius-field) !important;
}

.btn-icon,
.tabela-lista-s4r .btn-icon,
#tabelaEstoque .acoes a{
  border-radius:var(--s4r-radius-mini) !important;
}

#tabelaPessoas thead th:first-child,
#tabelaEstoque thead th:first-child{
  border-top-left-radius:var(--s4r-radius-field) !important;
}

#tabelaPessoas thead th:last-child,
#tabelaEstoque thead th:last-child{
  border-top-right-radius:var(--s4r-radius-field) !important;
}

@media (max-width: 991px){
  .hero,
  .filter-card,
  .table-card,
  .stats-card,
  .s4r-topbar,
  .card,
  .modal-content,
  .dropdown-menu{
    border-radius:10px !important;
  }

  .hero-icon,
  .s4r-topbar-icon{
    border-radius:8px !important;
  }
}