*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* CORES PRIMÁRIAS - Azul Corporativo (Restrained) */
  --clr-primary:#2563eb;
  --clr-primary-hover:#1d4ed8;
  --clr-primary-active:#1e40af;
  --clr-primary-light:#dbeafe;
  --clr-primary-subtle:#eff6ff;
  --clr-primary-ring:rgba(37,99,235,.15);

  /* CORES SEMÂNTICAS */
  --clr-success:#059669;
  --clr-success-light:#d1fae5;
  --clr-success-subtle:#ecfdf5;
  --clr-warning:#d97706;
  --clr-warning-light:#fef3c7;
  --clr-warning-subtle:#fffbeb;
  --clr-danger:#dc2626;
  --clr-danger-light:#fee2e2;
  --clr-danger-subtle:#fef2f2;

  /* SUPERFÍCIES */
  --clr-bg:#f8fafc;
  --clr-surface:#ffffff;
  --clr-surface-hover:#f8fafc;
  --clr-surface-active:#f1f5f9;
  --clr-surface-dim:#f1f5f9;

  /* BORDAS */
  --clr-border:#e2e8f0;
  --clr-border-hover:#cbd5e1;
  --clr-border-focus:#2563eb;
  --clr-divider:#f1f5f9;

  /* TEXTOS */
  --clr-text:#0f172a;
  --clr-text-secondary:#475569;
  --clr-text-muted:#94a3b8;
  --clr-text-inverse:#ffffff;

  /* SIDEBAR */
  --clr-sidebar:#0f172a;
  --clr-sidebar-hover:rgba(255,255,255,.08);
  --clr-sidebar-active:rgba(37,99,235,.2);
  --clr-sidebar-text:#94a3b8;
  --clr-sidebar-text-active:#f1f5f9;
  --clr-sidebar-border:rgba(255,255,255,.06);

  /* COMPATIBILIDADE */
  --clr-ink:#0f172a;
  --clr-ink-faint:#94a3b8;
  --clr-sidebar-bg:#0f172a;
  --clr-surface-muted:#e2e8f0;

  /* TIPOGRAFIA - Outfit (conforme DESIGN.md) */
  --font-sans:'Outfit',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* ESCALA DE FONTES (1.125 ratio) */
  --text-xs:0.75rem;
  --text-sm:0.875rem;
  --text-base:1rem;
  --text-lg:1.125rem;
  --text-xl:1.25rem;
  --text-2xl:1.5rem;
  --text-3xl:1.75rem;

  /* PESOS */
  --font-normal:400;
  --font-medium:500;
  --font-semibold:600;
  --font-bold:700;

  /* RADIUS */
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;

  /* COMPATIBILIDADE */
  --r-xs:4px;
  --r-sm:6px;
  --r-md:8px;
  --radius-md:8px;
  --radius-xl:16px;
  --radius-full:9999px;

  /* SOMBRAS */
  --shadow-xs:0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.04);

  /* COMPATIBILIDADE */
  --sh-xs:0 1px 2px rgba(0,0,0,.04);
  --sh-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);

  /* TRANSIÇÕES */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:150ms;
  --dur-normal:200ms;
  --dur:200ms;
  --duration-fast:150ms;

  /* Z-INDEX SCALE */
  --z-dropdown:1000;
  --z-sticky:1020;
  --z-sidebar:1030;
  --z-modal-backdrop:1040;
  --z-modal:1050;
}

/* ============================================================
   BASE
   ============================================================ */
html{
  font-family:var(--font-sans);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body{color:var(--clr-text);background:var(--clr-bg);line-height:1.6;font-size:var(--text-base)}

/* ============================================================
   LAYOUT
   ============================================================ */
.sp-app{display:flex;height:100vh;overflow:hidden;background:var(--clr-bg)}

.sp-sidebar{
  width:260px;
  flex-shrink:0;
  background:var(--clr-sidebar);
  display:flex;
  flex-direction:column;
  z-index:var(--z-sidebar);
  border-right:1px solid var(--clr-sidebar-border);
}

.sp-main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  background:var(--clr-bg);
}

.sp-header{
  height:56px;
  flex-shrink:0;
  background:var(--clr-surface);
  border-bottom:1px solid var(--clr-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  z-index:var(--z-sticky);
}

.sp-content{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:24px;
  scroll-behavior:smooth;
}

/* SIDEBAR */
.sp-sidebar-brand{
  padding:20px;
  border-bottom:1px solid var(--clr-sidebar-border);
}

.sp-sidebar-brand h1{
  font-size:var(--text-lg);
  font-weight:var(--font-bold);
  color:var(--clr-text-inverse);
  letter-spacing:-.02em;
}

.sp-sidebar-brand span{
  font-size:var(--text-xs);
  font-weight:var(--font-semibold);
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.sp-sidebar-nav{
  flex:1;
  overflow-y:auto;
  padding:12px 10px;
}

.sp-sidebar-section{
  margin-bottom:8px;
}

.sp-sidebar-section-label{
  font-size:0.625rem;
  font-weight:var(--font-semibold);
  color:#475569;
  text-transform:uppercase;
  letter-spacing:.12em;
  padding:8px 12px 6px;
  margin-bottom:4px;
}

.sp-nav-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:var(--radius-md);
  color:var(--clr-sidebar-text);
  font-size:var(--text-sm);
  font-weight:var(--font-medium);
  text-decoration:none;
  cursor:pointer;
  transition:all var(--dur-fast) var(--ease);
  user-select:none;
  margin-bottom:2px;
}

.sp-nav-item:hover{
  background:var(--clr-sidebar-hover);
  color:var(--clr-sidebar-text-active);
}

.sp-nav-item.active-tab{
  background:var(--clr-sidebar-active);
  color:var(--clr-sidebar-text-active);
  font-weight:var(--font-semibold);
}

.sp-nav-item svg{
  width:18px;
  height:18px;
  opacity:.6;
  flex-shrink:0;
}

.sp-nav-item.active-tab svg,
.sp-nav-item:hover svg{
  opacity:1;
}

.sp-sidebar-footer{
  padding:12px 10px;
  border-top:1px solid var(--clr-sidebar-border);
}

/* ============================================================
   CARDS
   ============================================================ */
.sp-card{
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:all var(--dur-normal) var(--ease);
}

.sp-card:hover{
  box-shadow:var(--shadow-md);
  border-color:var(--clr-border-hover);
}

.sp-stat{
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--shadow-sm);
}

.sp-stat-label{
  font-size:var(--text-xs);
  font-weight:var(--font-semibold);
  color:var(--clr-text-secondary);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:12px;
}

.sp-stat-value{
  font-size:var(--text-3xl);
  font-weight:var(--font-bold);
  color:var(--clr-text);
  letter-spacing:-.02em;
  line-height:1;
}

.sp-stat-sub{
  font-size:var(--text-sm);
  font-weight:var(--font-medium);
  color:var(--clr-text-muted);
  margin-top:8px;
}

/* ============================================================
   BOTÕES
   ============================================================ */
.sp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 20px;
  border-radius:var(--radius-md);
  font-size:var(--text-sm);
  font-weight:var(--font-semibold);
  letter-spacing:.01em;
  cursor:pointer;
  border:none;
  outline:none;
  transition:all var(--dur-fast) var(--ease);
  text-decoration:none;
  white-space:nowrap;
  line-height:1;
}

.sp-btn:active{
  transform:scale(.97);
}

.sp-btn svg{
  width:16px;
  height:16px;
}

.sp-btn-primary{
  background:var(--clr-primary);
  color:var(--clr-text-inverse);
}

.sp-btn-primary:hover{
  background:var(--clr-primary-hover);
}

.sp-btn-secondary{
  background:var(--clr-surface);
  color:var(--clr-text-secondary);
  border:1px solid var(--clr-border);
}

.sp-btn-secondary:hover{
  background:var(--clr-surface-hover);
  color:var(--clr-text);
  border-color:var(--clr-border-hover);
}

.sp-btn-ghost{
  background:transparent;
  color:var(--clr-text-secondary);
}

.sp-btn-ghost:hover{
  background:var(--clr-surface-dim);
  color:var(--clr-text);
}

.sp-btn-danger{
  background:var(--clr-danger);
  color:var(--clr-text-inverse);
}

.sp-btn-danger:hover{
  background:#b91c1c;
}

.sp-btn-success{
  background:var(--clr-success);
  color:var(--clr-text-inverse);
}

.sp-btn-success:hover{
  background:#047857;
}

.sp-btn-sm{
  padding:6px 12px;
  font-size:var(--text-xs);
  border-radius:var(--radius-sm);
}

/* ============================================================
   BADGES
   ============================================================ */
.sp-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:var(--radius-full);
  font-size:0.625rem;
  font-weight:var(--font-semibold);
  letter-spacing:.03em;
  line-height:1;
}

.sp-badge-primary{
  background:var(--clr-primary-light);
  color:var(--clr-primary);
}

.sp-badge-success{
  background:var(--clr-success-light);
  color:var(--clr-success);
}

.sp-badge-warning{
  background:var(--clr-warning-light);
  color:var(--clr-warning);
}

.sp-badge-danger{
  background:var(--clr-danger-light);
  color:var(--clr-danger);
}

/* ============================================================
   FORMULÁRIOS
   ============================================================ */
.sp-label{
  display:block;
  font-size:var(--text-xs);
  font-weight:var(--font-semibold);
  color:var(--clr-text-secondary);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:6px;
}

.sp-input{
  width:100%;
  padding:10px 14px;
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-md);
  font-size:var(--text-sm);
  font-weight:var(--font-medium);
  color:var(--clr-text);
  outline:none;
  transition:all var(--dur-fast) var(--ease);
  font-family:var(--font-sans);
}

.sp-input:focus{
  border-color:var(--clr-border-focus);
  box-shadow:0 0 0 3px var(--clr-primary-ring);
}

.sp-input::placeholder{
  color:var(--clr-text-muted);
  font-weight:var(--font-normal);
}

.sp-input:hover:not(:focus){
  border-color:var(--clr-border-hover);
}

.sp-select{
  width:100%;
  padding:10px 14px;
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-md);
  font-size:var(--text-sm);
  font-weight:var(--font-medium);
  color:var(--clr-text);
  outline:none;
  cursor:pointer;
  transition:all var(--dur-fast) var(--ease);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 0 1 .708 0L8 8.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:36px;
}

.sp-select:focus{
  border-color:var(--clr-border-focus);
  box-shadow:0 0 0 3px var(--clr-primary-ring);
}

.sp-textarea{
  width:100%;
  padding:10px 14px;
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-md);
  font-size:var(--text-sm);
  font-weight:var(--font-medium);
  color:var(--clr-text);
  outline:none;
  transition:all var(--dur-fast) var(--ease);
  font-family:var(--font-sans);
  resize:vertical;
  min-height:80px;
}

.sp-textarea:focus{
  border-color:var(--clr-border-focus);
  box-shadow:0 0 0 3px var(--clr-primary-ring);
}

/* ============================================================
   MODAIS - PADRÃO CONSISTENTE
   ============================================================ */
.wp-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.5);
  backdrop-filter:blur(4px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:var(--z-modal-backdrop);
  padding:20px;
}

.wp-modal-overlay.active{
  display:flex;
}

.wp-modal-overlay[style*="display: none"]{
  display:none!important;
}

.wp-modal-container{
  background:var(--clr-surface);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
  width:100%;
  max-width:40rem;
  max-height:85vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--clr-border);
  animation:modal-in .2s var(--ease);
}

@keyframes modal-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

.wp-modal-header{
  padding:16px 24px;
  border-bottom:1px solid var(--clr-divider);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-shrink:0;
}

.wp-modal-header h3{
  font-size:var(--text-lg);
  font-weight:var(--font-bold);
  color:var(--clr-text);
  letter-spacing:-.02em;
}

.wp-modal-body{
  padding:24px;
  overflow-y:auto;
  flex:1;
  min-height:0;
}

.wp-modal-footer{
  padding:16px 24px;
  border-top:1px solid var(--clr-divider);
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-shrink:0;
}

/* MODAL DE CADASTRO - PADRÃO */
.modal-cadastro{
  max-width:56rem;
  border-radius:var(--radius-xl);
}

.modal-cadastro-header{
  padding:20px 24px;
  border-bottom:1px solid var(--clr-divider);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-shrink:0;
}

.modal-cadastro-header h3{
  font-size:var(--text-xl);
  font-weight:var(--font-bold);
  color:var(--clr-text);
  letter-spacing:-.02em;
}

.modal-cadastro-header p{
  font-size:var(--text-xs);
  font-weight:var(--font-medium);
  color:var(--clr-text-muted);
  margin-top:2px;
}

.modal-cadastro-body{
  padding:24px;
  overflow-y:auto;
  flex:1;
  min-height:0;
}

.modal-cadastro-footer{
  padding:16px 24px;
  border-top:1px solid var(--clr-divider);
  display:flex;
  justify-content:flex-end;
  gap:12px;
  flex-shrink:0;
  background:var(--clr-bg);
}

/* SEÇÕES DO FORMULÁRIO */
.form-section{
  margin-bottom:24px;
}

.form-section-title{
  font-size:var(--text-sm);
  font-weight:var(--font-bold);
  color:var(--clr-primary);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:16px;
  padding-bottom:8px;
  border-bottom:1px solid var(--clr-divider);
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.form-grid-3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
}

.form-group{
  display:flex;
  flex-direction:column;
}

.form-group-full{
  grid-column:1/-1;
}

.form-group label{
  font-size:var(--text-xs);
  font-weight:var(--font-semibold);
  color:var(--clr-text-secondary);
  margin-bottom:6px;
}

.form-group label .required{
  color:var(--clr-danger);
  margin-left:2px;
}

/* ============================================================
   TABELAS
   ============================================================ */
.sp-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:var(--text-sm);
}

.sp-table th{
  padding:12px 16px;
  text-align:left;
  font-size:var(--text-xs);
  font-weight:var(--font-semibold);
  color:var(--clr-text-secondary);
  text-transform:uppercase;
  letter-spacing:.06em;
  border-bottom:2px solid var(--clr-border);
  background:var(--clr-bg);
  position:sticky;
  top:0;
  z-index:1;
}

.sp-table td{
  padding:12px 16px;
  border-bottom:1px solid var(--clr-divider);
  color:var(--clr-text);
  vertical-align:middle;
}

.sp-table tbody tr{
  transition:background var(--dur-fast) var(--ease);
}

.sp-table tbody tr:hover{
  background:var(--clr-surface-hover);
}

/* ============================================================
   PROGRESS
   ============================================================ */
.sp-progress{
  width:100%;
  height:6px;
  background:var(--clr-divider);
  border-radius:var(--radius-full);
  overflow:hidden;
  margin-top:12px;
}

.sp-progress-fill{
  height:100%;
  border-radius:var(--radius-full);
  transition:width .4s var(--ease);
  background:var(--clr-primary);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.sp-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:48px 24px;
  text-align:center;
  color:var(--clr-text-muted);
}

.sp-empty svg{
  width:48px;
  height:48px;
  margin-bottom:16px;
  opacity:.3;
}

/* ============================================================
   GRIDS
   ============================================================ */
.sp-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sp-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sp-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}

@media(max-width:1024px){.sp-grid-4,.sp-grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.sp-grid-4,.sp-grid-3,.sp-grid-2{grid-template-columns:1fr}}

/* ============================================================
   ANIMAÇÕES
   ============================================================ */
@keyframes sp-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.sp-animate-in{animation:sp-fade .2s var(--ease) both}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--clr-border);border-radius:var(--radius-full)}
::-webkit-scrollbar-thumb:hover{background:var(--clr-text-muted)}
::selection{background:rgba(37,99,235,.15);color:var(--clr-text)}

/* ============================================================
   OVERLAY MOBILE
   ============================================================ */
.sp-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  z-index:calc(var(--z-sidebar) - 1);
  display:none;
}
.sp-overlay.active{display:block}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:768px){
  .sp-sidebar{
    position:fixed;
    left:-280px;
    top:0;
    bottom:0;
    width:280px;
    transition:left .3s var(--ease);
    z-index:var(--z-sidebar);
    box-shadow:4px 0 24px rgba(0,0,0,.3);
  }
  .sp-sidebar.open{left:0}
  .sp-content{padding:16px}
  .sp-header{padding:0 16px}
  .form-grid{grid-template-columns:1fr}
  .form-grid-3{grid-template-columns:1fr}
}

/* ============================================================
   UTILITÁRIOS
   ============================================================ */
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}

.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}