/* ============================================================
   OperaFull — Base Visual Unificada
   styles/global.css  |  v1.0.0
   Fase 2 da Auditoria Visual
   ============================================================
   SEÇÕES
   1.  Design Tokens (variáveis CSS)
   2.  Reset & Base
   3.  Material Symbols
   4.  Tipografia utilitária  (.label-micro)
   5.  Botões  (.btn, .btn-primary, .btn-outline, .btn-ghost …)
   6.  Badges  (.badge, .badge-kit, .badge-autosave …)
   7.  Header Pill  (.header-pill, .pill-label, .pill-value)
   8.  Dot Pulse  (.dot-pulse + modificadores de cor)
   9.  Cards  (.card, .card-sm, .glass-card, .dark-card …)
   10. Skeleton Loading  (.skeleton)
   11. Scrollbar  (global + .custom-scrollbar)
   12. Pill Tabs  (.pill-tabs, .tab-active)
   13. Tabelas  (.table-wrapper, .table-header-cell …)
   14. Scanner / Picking  (.scanner-board, .scanner-input)
   15. Upload / Documentos  (.doc-drop-zone, .doc-item …)
   16. Login Background  (.login-bg)
   17. Barra de Progresso  (.progress-bar, .progress-bar-fill)
   18. Animações  (.animate-fade-in, .animate-slide-up …)
   19. Utilitários  (.loading-overlay, .container-main …)
   20. Impressão  (@media print)
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
════════════════════════════════════════════════════════════ */
:root {

  /* ── Marca ───────────────────────────────────────────── */
  --color-primary:         #ff5c35;
  --color-primary-hover:   #e0451f;
  --color-primary-light:   rgba(255, 92, 53, 0.1);
  --color-primary-subtle:  rgba(255, 92, 53, 0.06);
  --color-primary-border:  rgba(255, 92, 53, 0.2);
  --color-primary-muted:   rgba(255, 92, 53, 0.7);

  --color-brand:           #ff5c35;   /* destaque / CTA */
  --color-logo:            #e18d53;   /* texto do logotipo OperaFull */

  /* ── Superfícies ─────────────────────────────────────── */
  --color-bg:              #f4f6fb;
  --color-surface:         #ffffff;
  --color-surface-2:       #f8fafc;   /* slate-50 — fundos de tabela / input */
  --color-surface-3:       #f1f5f9;   /* slate-100 — pill-tabs / badges neutros */

  /* ── Bordas ──────────────────────────────────────────── */
  --color-border:          #e8ecf4;
  --color-border-2:        #e2e8f0;   /* slate-200 — variante dos módulos */
  --color-border-light:    #f1f5f9;   /* slate-100 */

  /* ── Texto ───────────────────────────────────────────── */
  --color-dark:            #1a1a2e;
  --color-text-primary:    #1a1a2e;
  --color-text-secondary:  #64748b;   /* slate-500 */
  --color-text-muted:      #94a3b8;   /* slate-400 */
  --color-text-subtle:     #475569;   /* slate-600 — nav items */
  --color-text-nav:        #334155;   /* slate-700 — header pills */

  /* ── Sucesso ─────────────────────────────────────────── */
  --color-success:         #15803d;   /* green-700  — token canônico */
  --color-success-light:   #16a34a;   /* green-600  — variante clara */
  --color-success-bg:      #f0fdf4;
  --color-success-border:  #bbf7d0;

  /* ── Aviso ───────────────────────────────────────────── */
  --color-warning:         #f97316;   /* orange-500 */
  --color-warning-dark:    #c2410c;   /* orange-700 */
  --color-warning-bg:      #fff7ed;

  /* ── Erro ────────────────────────────────────────────── */
  --color-error:           #dc2626;   /* red-600 */
  --color-error-bg:        #fef2f2;
  --color-error-border:    #fecaca;

  /* ── Info ────────────────────────────────────────────── */
  --color-info:            #1d4ed8;   /* blue-700 */
  --color-info-bg:         #eff6ff;
  --color-info-border:     #bfdbfe;

  /* ── Ícones de arquivo (doc-item) ────────────────────── */
  --color-file-pdf-bg:     #fef2f2;
  --color-file-pdf-fg:     #ef4444;
  --color-file-img-bg:     #eff6ff;
  --color-file-img-fg:     #3b82f6;
  --color-file-gen-bg:     #f0fdf4;
  --color-file-gen-fg:     #22c55e;

  /* ── Tipografia ──────────────────────────────────────── */
  --font-family:           'Roboto', sans-serif;
  --text-micro:            9px;
  --text-xs:               11px;
  --text-sm:               13px;
  --text-base:             14px;
  --text-lg:               16px;
  --text-xl:               18px;

  /* Shorthand para label-micro (uso: font: var(--font-label)) */
  --font-label:            900 var(--text-micro) / 1 'Inter', sans-serif;

  /* ── Border-radius ───────────────────────────────────── */
  --radius-sm:             8px;
  --radius-md:             12px;
  --radius-lg:             16px;
  --radius-xl:             20px;
  --radius-2xl:            24px;
  --radius-pill:           9999px;

  /* ── Sombras ─────────────────────────────────────────── */
  --shadow-card:           0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:             0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-primary:        0 10px 30px rgba(26, 53, 91, 0.08);
  --shadow-elevated:       0 20px 25px -5px rgb(0 0 0 / 0.1),
                           0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-modal:          0 25px 50px rgba(0, 0, 0, 0.15);
  --shadow-header:         0 1px 0 var(--color-border-2);
}


/* ════════════════════════════════════════════════════════════
   2. RESET & BASE
════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}


/* ════════════════════════════════════════════════════════════
   3. MATERIAL SYMBOLS
════════════════════════════════════════════════════════════ */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}


/* ════════════════════════════════════════════════════════════
   4. TIPOGRAFIA UTILITÁRIA
════════════════════════════════════════════════════════════ */

/* Micro-label canônico: 9 px · 900 · uppercase · tracking amplo */
.label-micro {
  font-size: var(--text-micro);
  font-weight: 900;
  font-family: var(--font-family);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}


/* ════════════════════════════════════════════════════════════
   5. BOTÕES
════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
  border: none;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-surface);
}
.btn-primary:hover { background-color: var(--color-primary-hover); }

.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-border-2);
}
.btn-outline:hover {
  background-color: var(--color-surface-2);
  border-color: var(--color-primary);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
  border: none;
}
.btn-ghost:hover {
  background-color: var(--color-surface-2);
  color: var(--color-primary);
}

.btn-success {
  background-color: var(--color-success);
  color: var(--color-surface);
}
.btn-success:hover { background-color: var(--color-success-light); }

.btn-danger {
  background-color: var(--color-error);
  color: var(--color-surface);
}
.btn-danger:hover { background-color: #b91c1c; }

.btn:disabled,
.btn[disabled],
.btn-disabled {
  background-color: var(--color-surface-3);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
}


/* ════════════════════════════════════════════════════════════
   6. BADGES
════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-micro);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ── Status de processo ── */
.badge-pendente   { background-color: var(--color-surface-3);  color: var(--color-text-secondary); }
.badge-em-curso   { background-color: var(--color-warning-bg); color: var(--color-warning-dark); }
.badge-concluido  { background-color: var(--color-success-bg); color: var(--color-success); }
.badge-lacrado    { background-color: var(--color-success-bg); color: var(--color-success); }
.badge-em-pesagem { background-color: var(--color-warning-bg); color: var(--color-warning-dark); }
.badge-critico    { background-color: var(--color-error-bg);   color: var(--color-error); }
.badge-ativo      { background-color: var(--color-success-bg); color: var(--color-success); }

/* ── Semânticos genéricos ── */
.badge-success { background-color: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
.badge-error   { background-color: var(--color-error-bg);   color: var(--color-error);   border: 1px solid var(--color-error-border); }
.badge-warning { background-color: var(--color-warning-bg); color: var(--color-warning-dark); }
.badge-info    { background-color: var(--color-info-bg);    color: var(--color-info);    border: 1px solid var(--color-info-border); }

/* ── KIT — azul ── */
.badge-kit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-info-bg);
  color: var(--color-info);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--color-info-border);
  cursor: default;
}

/* ── Autosave — verde ── */
.badge-autosave {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-size: 10px;
  font-weight: 800;
  color: var(--color-success);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ════════════════════════════════════════════════════════════
   7. HEADER PILL
════════════════════════════════════════════════════════════ */
.header-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-nav);
  white-space: nowrap;
}

.header-pill .pill-label { color: var(--color-text-muted);  font-weight: 600; }
.header-pill .pill-value { color: var(--color-primary);     font-weight: 900; }


/* ════════════════════════════════════════════════════════════
   8. DOT PULSE
════════════════════════════════════════════════════════════ */
.dot-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--color-success);  /* padrão: verde (autosave/online) */
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

/* Modificadores de cor */
.dot-pulse--primary { background-color: var(--color-primary); }
.dot-pulse--warning { background-color: var(--color-warning); }
.dot-pulse--danger  { background-color: var(--color-error);   }
.dot-pulse--muted   { background-color: var(--color-text-muted); }


/* ════════════════════════════════════════════════════════════
   9. CARDS
════════════════════════════════════════════════════════════ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.card-sm {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px;
}

/* Glass — painel Operativo/Detalhes */
.glass-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-primary-light);
}

/* Dark — painel de volume / picking */
.dark-card {
  background: linear-gradient(135deg, #1e293b 0%, var(--color-dark) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-2xl);
  color: var(--color-surface);
}

/* Packing — gradiente da marca */
.packing-card {
  background: linear-gradient(135deg, var(--color-primary) 0%, #0d1b2a 100%);
}

/* Desabilitado */
.card-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.3);
}


/* ════════════════════════════════════════════════════════════
   10. SKELETON LOADING
════════════════════════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-3) 25%,
    var(--color-border-2)  50%,
    var(--color-surface-3) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}


/* ════════════════════════════════════════════════════════════
   11. SCROLLBAR
════════════════════════════════════════════════════════════ */

/* Global */
::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: var(--color-border-light); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb   { background: var(--color-border-2);     border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* Scoped — track transparente para containers internos */
.custom-scrollbar::-webkit-scrollbar         { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track   { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb   { background: var(--color-border-2); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }


/* ════════════════════════════════════════════════════════════
   12. PILL TABS
════════════════════════════════════════════════════════════ */
.pill-tabs {
  background: var(--color-surface-3);
  padding: 4px;
  border-radius: 14px;
}

.tab-active {
  background-color: var(--color-surface)  !important;
  box-shadow:       var(--shadow-elevated) !important;
  color:            var(--color-dark)      !important;
  border-color:     var(--color-border-2)  !important;
}


/* ════════════════════════════════════════════════════════════
   13. TABELAS
════════════════════════════════════════════════════════════ */
.table-wrapper {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.table-header-cell {
  padding: 12px 24px;
  font-size: var(--text-micro);
  font-weight: 900;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background-color: var(--color-surface-2);
}

.table-row {
  border-bottom: 1px solid var(--color-border-light);
  transition: background-color 0.1s;
}

.table-row:hover,
.table-row-hover:hover {
  background-color: rgba(248, 250, 252, 0.5);
}

.table-cell {
  padding: 16px 24px;
  font-size: var(--text-sm);
}


/* ════════════════════════════════════════════════════════════
   14. SCANNER / PICKING
════════════════════════════════════════════════════════════ */
.scanner-board {
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-primary);
}

.scanner-input {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.scanner-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}


/* ════════════════════════════════════════════════════════════
   15. UPLOAD / DOCUMENTOS
════════════════════════════════════════════════════════════ */
.doc-drop-zone {
  border: 2px dashed var(--color-border-2);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.doc-drop-zone:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.doc-drop-zone.drag-over {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}

.doc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-2);
  border-radius: 10px;
  margin-top: 8px;
}

.doc-item-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.doc-item-icon.pdf  { background: var(--color-file-pdf-bg); color: var(--color-file-pdf-fg); }
.doc-item-icon.img  { background: var(--color-file-img-bg); color: var(--color-file-img-fg); }
.doc-item-icon.file { background: var(--color-file-gen-bg); color: var(--color-file-gen-fg); }


/* ════════════════════════════════════════════════════════════
   16. LOGIN BACKGROUND
════════════════════════════════════════════════════════════ */
.login-bg {
  background-image: radial-gradient(
    circle at center,
    rgba(26, 53, 91, 0.063) 1px,
    transparent 1px
  );
  background-size: 90.51px 76.933px;
}


/* ════════════════════════════════════════════════════════════
   17. BARRA DE PROGRESSO
════════════════════════════════════════════════════════════ */
.progress-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--color-border-2);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  transition: width 0.3s ease;
}

.progress-bar-fill.success { background-color: var(--color-success); }
.progress-bar-fill.warning { background-color: var(--color-warning); }
.progress-bar-fill.danger  { background-color: var(--color-error);   }


/* ════════════════════════════════════════════════════════════
   18. ANIMAÇÕES
════════════════════════════════════════════════════════════ */
.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-slide-up {
  animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Spin lento — ícone de carregamento (3 s) */
.animate-spin-slow {
  animation: spinSlow 3s linear infinite;
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Pulsate — opacidade (badge scanner ativo, avisos) */
.pulse {
  animation: pulseFade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulseFade {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.4; }
}


/* ════════════════════════════════════════════════════════════
   19. UTILITÁRIOS
════════════════════════════════════════════════════════════ */

/* Overlay de loading */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Container centralizado padrão */
.container-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Separador */
.divider {
  height: 1px;
  background-color: var(--color-border-light);
  width: 100%;
}

/* Texto com clamp */
.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Rotação estática (seta de submenu expandido) */
.rotate-90 { transform: rotate(90deg); }


/* ════════════════════════════════════════════════════════════
   20. IMPRESSÃO
════════════════════════════════════════════════════════════ */
@media print {
  header,
  .sidebar,
  .page-header,
  .no-print,
  footer {
    display: none !important;
  }

  body {
    background: white !important;
    font-size: 12px;
  }

  .print-only {
    display: block !important;
  }

  .card {
    box-shadow: none;
    border: 1px solid var(--color-border-2);
    break-inside: avoid;
  }

  @page {
    margin: 10mm;
    size: A4;
  }
}