/* ==========================================================================
   Em Trânsito - Módulo de containers marítimos
   Design system: og-glass
   Prefixo: et-
   ========================================================================== */

/* --------------------------------------------------------------------------
   Status colors (aplicadas via data-status="...")
   -------------------------------------------------------------------------- */
[data-status="reservado"]    { --status-cor: #94a3b8; --status-cor-soft: rgba(148,163,184,.14); }
[data-status="embarcado"]    { --status-cor: #3b82f6; --status-cor-soft: rgba(59,130,246,.14); }
[data-status="em_transito"]  { --status-cor: #f59e0b; --status-cor-soft: rgba(245,158,11,.14); }
[data-status="transbordo"]   { --status-cor: #f97316; --status-cor-soft: rgba(249,115,22,.14); }
[data-status="chegou_pod"]   { --status-cor: #8b5cf6; --status-cor-soft: rgba(139,92,246,.14); }
[data-status="desembaraco"]  { --status-cor: #ea580c; --status-cor-soft: rgba(234,88,12,.14); }
[data-status="liberado"]     { --status-cor: #22c55e; --status-cor-soft: rgba(34,197,94,.14); }
[data-status="em_rota_cd"]   { --status-cor: #14b8a6; --status-cor-soft: rgba(20,184,166,.14); }
[data-status="entregue"]     { --status-cor: #15803d; --status-cor-soft: rgba(21,128,61,.14); }
[data-status="encerrado"]    { --status-cor: #475569; --status-cor-soft: rgba(71,85,105,.14); }

/* --------------------------------------------------------------------------
   Page / Header
   -------------------------------------------------------------------------- */
.et-page {
  padding: 20px 24px;
  background: linear-gradient(180deg, #fff 0%, #f6fbf8 100%);
  min-height: calc(100vh - 60px);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}

.et-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(14,79,59,.08);
}

.et-header-left { display: flex; flex-direction: column; }

.et-title {
  font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

.et-sub {
  font-size: 13px;
  color: #64748b;
  margin-top: 4px;
}

.et-header-right { display: flex; gap: 10px; align-items: center; }

/* --------------------------------------------------------------------------
   Toolbar
   -------------------------------------------------------------------------- */
.et-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.et-toolbar-spacer { flex: 1; }

.et-btn {
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}

.et-btn:hover { transform: translateY(-1px); }
.et-btn:active { transform: translateY(0); }
.et-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.et-btn--primary {
  background: #0E4F3B;
  color: #fff;
  border: 1px solid #0E4F3B;
  box-shadow: 0 4px 10px -3px rgba(14,79,59,.35);
}
.et-btn--primary:hover { background: #137a4c; box-shadow: 0 6px 14px -4px rgba(14,79,59,.45); }

.et-btn--secondary {
  background: #fff;
  color: #0E4F3B;
  border: 1px solid rgba(14,79,59,.16);
}
.et-btn--secondary:hover { border-color: rgba(14,79,59,.32); background: #f6fbf8; }

.et-btn--ghost {
  background: transparent;
  color: #64748b;
  border: 1px solid transparent;
}
.et-btn--ghost:hover { background: rgba(14,79,59,.06); color: #0E4F3B; }

.et-btn--danger {
  background: #fff;
  color: #b91c1c;
  border: 1px solid rgba(220,38,38,.24);
}
.et-btn--danger:hover { background: rgba(220,38,38,.06); }

.et-btn--sm { padding: 6px 10px; font-size: 12px; border-radius: 8px; }

/* Toggle (grupo tipo tabs) */
.et-toggle {
  display: inline-flex;
  background: #fff;
  border: 1px solid rgba(14,79,59,.16);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.et-toggle-btn {
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #64748b;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, color .12s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.et-toggle-btn:hover { color: #0E4F3B; }
.et-toggle-btn.active {
  background: #0E4F3B;
  color: #fff;
  box-shadow: 0 2px 6px -2px rgba(14,79,59,.35);
}

/* Search */
.et-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(14,79,59,.16);
  border-radius: 10px;
  padding: 0 12px;
  min-width: 240px;
}
.et-search input {
  border: 0;
  outline: 0;
  background: transparent;
  padding: 9px 4px;
  font-size: 13px;
  color: #0f172a;
  flex: 1;
  font-family: inherit;
}
.et-search input::placeholder { color: #94a3b8; }

/* Filter chip / select */
.et-filter {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(14,79,59,.16);
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  outline: 0;
}
.et-filter:focus { border-color: #0E4F3B; }

/* --------------------------------------------------------------------------
   Kanban
   -------------------------------------------------------------------------- */
.et-kanban {
  display: grid;
  grid-template-columns: repeat(9, minmax(260px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 20px;
}

.et-col {
  background: rgba(255,255,255,.6);
  border-radius: 14px;
  border: 1px solid rgba(14,79,59,.08);
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  backdrop-filter: blur(4px);
}

.et-col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px 10px;
  border-bottom: 2px solid var(--status-cor, #cbd5e1);
  font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--status-cor, #64748b);
  margin-bottom: 8px;
}

.et-col-count {
  background: var(--status-cor, #94a3b8);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}

.et-col-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  max-height: calc(100vh - 260px);
  padding-right: 2px;
}

.et-col-empty {
  padding: 24px 10px;
  text-align: center;
  color: #94a3b8;
  font-size: 11.5px;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.et-card {
  background: linear-gradient(155deg, #fff, #f6fbf8);
  border: 1px solid rgba(14,79,59,.10);
  border-radius: 12px;
  padding: 12px 14px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  position: relative;
  overflow: hidden;
}

.et-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--status-cor, #cbd5e1);
  border-radius: 12px 12px 0 0;
}

.et-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(14,79,59,.20);
  border-color: rgba(14,79,59,.20);
}

.et-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.et-card-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #0E4F3B;
}

.et-card-tipo {
  font-size: 9.5px;
  font-weight: 700;
  color: #64748b;
  background: rgba(14,79,59,.08);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.et-card-modalidade {
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: var(--status-cor, #94a3b8);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.et-card-forn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
  margin-top: 6px;
}

.et-card-rota {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.et-card-rota-arrow { color: #94a3b8; font-size: 10px; }

.et-card-navio {
  font-size: 10.5px;
  color: #94a3b8;
  font-style: italic;
  margin-top: 2px;
}

.et-card-eta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(14,79,59,.06);
  font-size: 11px;
  color: #64748b;
}

.et-card-eta-label {
  font-size: 10px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 700;
}

.et-card-eta-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(14,79,59,.08);
  color: #0E4F3B;
}
.et-card-eta-badge--ok {
  background: rgba(34,197,94,.14);
  color: #15803d;
}
.et-card-eta-badge--alerta {
  background: rgba(245,158,11,.14);
  color: #b45309;
}
.et-card-eta-badge--atrasado {
  background: rgba(220,38,38,.14);
  color: #b91c1c;
}

.et-card-pedidos {
  font-size: 10px;
  color: #0E4F3B;
  font-weight: 700;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.et-card-pedidos-icon { opacity: .7; }

/* --------------------------------------------------------------------------
   Detail drawer (overlay right side)
   -------------------------------------------------------------------------- */
.et-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 8990;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.et-drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.et-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(920px, 100vw);
  background: #fff;
  z-index: 9000;
  box-shadow: -20px 0 60px -20px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.4, 1.2, .4, 1);
}
.et-drawer.open { transform: translateX(0); }

.et-drawer-head {
  padding: 18px 22px 20px;
  background: linear-gradient(135deg, #0E4F3B, #137a4c);
  color: #fff;
  position: relative;
  flex-shrink: 0;
}

.et-drawer-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .5px;
}

.et-drawer-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(255,255,255,.85);
  flex-wrap: wrap;
}

.et-drawer-status {
  background: rgba(255,255,255,.18);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.et-drawer-close {
  position: absolute;
  top: 14px; right: 14px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  line-height: 1;
  transition: background .15s ease;
}
.et-drawer-close:hover { background: rgba(255,255,255,.15); }

.et-drawer-tabs {
  display: flex;
  gap: 0;
  background: #f8fafc;
  border-bottom: 1px solid rgba(14,79,59,.08);
  padding: 0 22px;
  flex-shrink: 0;
  overflow-x: auto;
}
.et-drawer-tab {
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  font-family: inherit;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.et-drawer-tab:hover { color: #0E4F3B; }
.et-drawer-tab.active {
  color: #0E4F3B;
  border-bottom-color: #0E4F3B;
  font-weight: 700;
}

.et-drawer-body {
  flex: 1;
  overflow: auto;
  padding: 22px;
  background: #fff;
}

.et-drawer-section {
  margin-bottom: 24px;
}
.et-drawer-section-title {
  font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #0E4F3B;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 10px;
}

.et-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 20px;
}
.et-info-item { display: flex; flex-direction: column; gap: 3px; }
.et-info-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.et-info-value {
  font-size: 13px;
  color: #0f172a;
  font-weight: 600;
}
.et-info-value--mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
}
.et-info-value--empty { color: #cbd5e1; font-style: italic; font-weight: 500; }

/* --------------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------------- */
.et-timeline {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.et-timeline-item {
  display: flex;
  gap: 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(14,79,59,.08);
  border-radius: 10px;
  border-left: 3px solid var(--status-cor, #0E4F3B);
  transition: box-shadow .12s ease;
}
.et-timeline-item:hover { box-shadow: 0 4px 12px -6px rgba(14,79,59,.15); }

.et-timeline-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(14,79,59,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0E4F3B;
  flex-shrink: 0;
  font-size: 14px;
}

.et-timeline-body { flex: 1; min-width: 0; }

.et-timeline-codigo {
  font-size: 11px;
  font-weight: 800;
  color: #0E4F3B;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.et-timeline-desc {
  font-size: 13px;
  color: #0f172a;
  margin-top: 2px;
  font-weight: 500;
}

.et-timeline-meta {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 4px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.et-timeline-meta-sep { opacity: .5; }
.et-timeline-source {
  padding: 1px 6px;
  background: rgba(14,79,59,.06);
  border-radius: 4px;
  color: #0E4F3B;
  font-weight: 700;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* --------------------------------------------------------------------------
   Table (list mode)
   -------------------------------------------------------------------------- */
.et-table-wrap {
  background: #fff;
  border: 1px solid rgba(14,79,59,.10);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px -4px rgba(14,79,59,.08);
}

.et-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.et-table thead th {
  background: #f6fbf8;
  color: #0E4F3B;
  font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(14,79,59,.10);
}
.et-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(14,79,59,.05);
  color: #0f172a;
  vertical-align: middle;
}
.et-table tbody tr { cursor: pointer; transition: background .12s ease; }
.et-table tbody tr:hover { background: #f6fbf8; }
.et-table tbody tr:last-child td { border-bottom: 0; }

.et-badge-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  background: var(--status-cor-soft, rgba(148,163,184,.14));
  color: var(--status-cor, #64748b);
}

/* --------------------------------------------------------------------------
   Modal Novo Container
   -------------------------------------------------------------------------- */
.et-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.et-modal-backdrop.open { opacity: 1; pointer-events: auto; }

.et-modal {
  max-width: 780px;
  width: 100%;
  max-height: 90vh;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.35);
  transform: translateY(20px) scale(.98);
  transition: transform .2s cubic-bezier(.4, 1.2, .4, 1);
}
.et-modal-backdrop.open .et-modal { transform: translateY(0) scale(1); }

.et-modal-head {
  padding: 18px 22px;
  background: linear-gradient(135deg, #0E4F3B, #137a4c);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.et-modal-title {
  font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0;
}
.et-modal-close {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 8px;
  line-height: 1;
}
.et-modal-close:hover { background: rgba(255,255,255,.15); }

.et-modal-body {
  padding: 22px;
  overflow: auto;
  flex: 1;
}

.et-modal-foot {
  padding: 14px 22px;
  border-top: 1px solid rgba(14,79,59,.08);
  background: #f8fafc;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

/* Form grid */
.et-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.et-form-grid--2col { grid-template-columns: repeat(2, 1fr); }
.et-form-grid--1col { grid-template-columns: 1fr; }

.et-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.et-form-group--full { grid-column: 1 / -1; }

.et-form-label {
  font-size: 11px;
  font-weight: 700;
  color: #0E4F3B;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.et-form-label--required::after {
  content: ' *';
  color: #dc2626;
}

.et-form-input,
.et-form-select,
.et-form-textarea {
  padding: 8px 12px;
  border: 1px solid rgba(14,79,59,.16);
  border-radius: 8px;
  font-size: 13px;
  color: #0f172a;
  background: #fff;
  font-family: inherit;
  outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.et-form-input:focus,
.et-form-select:focus,
.et-form-textarea:focus {
  border-color: #0E4F3B;
  box-shadow: 0 0 0 3px rgba(14,79,59,.10);
}
.et-form-input::placeholder { color: #cbd5e1; }
.et-form-textarea { min-height: 72px; resize: vertical; }

.et-form-hint {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}
.et-form-error {
  font-size: 11px;
  color: #b91c1c;
  margin-top: 2px;
  font-weight: 600;
}

.et-form-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(14,79,59,.08);
}
.et-form-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.et-form-section-title {
  font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #0E4F3B;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 12px;
}

/* --------------------------------------------------------------------------
   Empty / Loading / Error states
   -------------------------------------------------------------------------- */
.et-empty {
  padding: 60px 24px;
  text-align: center;
  color: #64748b;
}
.et-empty-icon {
  font-size: 40px;
  opacity: .35;
  margin-bottom: 10px;
}
.et-empty-title {
  font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
}
.et-empty-sub { font-size: 13px; color: #94a3b8; }

.et-loading {
  padding: 40px 20px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}
.et-loading::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(14,79,59,.16);
  border-top-color: #0E4F3B;
  border-radius: 50%;
  animation: et-spin .8s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}
@keyframes et-spin { to { transform: rotate(360deg); } }

.et-error {
  padding: 14px 16px;
  background: rgba(220,38,38,.06);
  border: 1px solid rgba(220,38,38,.20);
  border-radius: 10px;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Documentos (anexos)
   -------------------------------------------------------------------------- */
.et-doc-list { display: flex; flex-direction: column; gap: 8px; }
.et-doc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(14,79,59,.10);
  border-radius: 10px;
  background: #fff;
  transition: background .12s ease, border-color .12s ease;
}
.et-doc-item:hover { background: #f6fbf8; border-color: rgba(14,79,59,.20); }
.et-doc-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(14,79,59,.08);
  color: #0E4F3B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.et-doc-body { flex: 1; min-width: 0; }
.et-doc-tipo {
  font-size: 10.5px;
  font-weight: 800;
  color: #0E4F3B;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.et-doc-nome {
  font-size: 13px;
  color: #0f172a;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.et-doc-meta { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.et-doc-actions { display: flex; gap: 4px; }

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) {
  .et-kanban { grid-template-columns: repeat(5, minmax(240px, 1fr)); }
}

@media (max-width: 1100px) {
  .et-form-grid { grid-template-columns: repeat(2, 1fr); }
  .et-info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .et-page { padding: 14px 12px; }
  .et-kanban { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  .et-drawer { width: 100vw; }
  .et-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .et-header-right { width: 100%; }
  .et-form-grid { grid-template-columns: 1fr; }
  .et-toolbar { gap: 8px; }
  .et-search { min-width: 100%; }
}

@media (max-width: 560px) {
  .et-kanban { grid-template-columns: 1fr; }
  .et-title { font-size: 22px; }
  .et-modal { border-radius: 14px; }
  .et-drawer-tabs { padding: 0 12px; }
  .et-drawer-tab { padding: 12px 12px; font-size: 12.5px; }
}

/* ============================================================
   INBOX layout (estilo WhatsApp) — sidebar de containers + main panel
   Substitui a visão default do módulo Em Trânsito.
   Reaproveita .et-drawer-* renomeando conceitualmente para main panel.
   ============================================================ */
.et-inbox-shell {
  display: grid;
  grid-template-columns: 380px 1fr;
  height: calc(100vh - 90px);
  background: var(--og-glass);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--og-hairline);
}

.et-inbox-sidebar {
  border-right: 1px solid var(--og-hairline);
  display: flex;
  flex-direction: column;
  background: var(--og-glass-deep);
  min-width: 0;
}

.et-inbox-header {
  padding: 16px 14px;
  border-bottom: 1px solid var(--og-hairline-soft);
  display: flex;
  gap: 8px;
  align-items: center;
}

.et-inbox-search {
  flex: 1;
  background: var(--og-glass-deeper);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--og-ink);
  outline: none;
  font-family: 'Manrope', system-ui, sans-serif;
  transition: border-color .12s, box-shadow .12s;
}
.et-inbox-search:focus {
  border-color: var(--og-brand, #0E4F3B);
  box-shadow: 0 0 0 3px rgba(14, 79, 59, 0.12);
}

.et-inbox-list {
  flex: 1;
  overflow-y: auto;
}

.et-inbox-item {
  padding: 12px 14px;
  border-bottom: 1px solid var(--og-hairline-soft);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  cursor: pointer;
  transition: background .12s;
  position: relative;
}
.et-inbox-item:hover { background: var(--og-glass-deeper); }
.et-inbox-item.is-active {
  background: rgba(14, 79, 59, 0.08);
  border-left: 3px solid var(--og-brand, #0E4F3B);
  padding-left: 11px;
}

.et-inbox-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: white;
  background: #94a3b8;
  flex-shrink: 0;
}

.et-inbox-item-body { min-width: 0; }

.et-inbox-item-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 3px;
  gap: 6px;
}

.et-inbox-item-num {
  font-weight: 700;
  font-size: 14px;
  color: var(--og-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
}

.et-inbox-item-time {
  font-size: 11px;
  color: var(--og-ink-3);
  flex-shrink: 0;
  margin-left: 6px;
  font-family: 'JetBrains Mono', monospace;
}

.et-inbox-item-sub {
  font-size: 12px;
  color: var(--og-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
}

.et-inbox-item-preview {
  font-size: 12px;
  color: var(--og-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.et-inbox-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: white;
  background: #94a3b8;
}

.et-inbox-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: var(--og-glass);
}

.et-inbox-main-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--og-hairline-soft);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.et-inbox-main-title {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--og-ink);
  margin: 0 0 4px;
  line-height: 1.2;
}

.et-inbox-main-sub {
  font-size: 13px;
  color: var(--og-ink-2);
  font-family: 'Manrope', system-ui, sans-serif;
}

.et-inbox-tabs {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  border-bottom: 1px solid var(--og-hairline-soft);
  background: var(--og-glass-deeper);
}

.et-inbox-tab {
  padding: 10px 14px;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--og-ink-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-family: 'Manrope', system-ui, sans-serif;
  transition: color .12s, border-color .12s;
}
.et-inbox-tab:hover { color: var(--og-ink); }
.et-inbox-tab.is-active {
  color: var(--og-brand, #0E4F3B);
  border-bottom-color: var(--og-brand, #0E4F3B);
}

.et-inbox-tab-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.et-inbox-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--og-ink-3);
  font-size: 14px;
  padding: 40px;
  text-align: center;
  font-family: 'Manrope', system-ui, sans-serif;
}

.et-inbox-mode-toggle {
  display: inline-flex;
  background: var(--og-glass-deeper);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 10px;
  padding: 2px;
}
.et-inbox-mode-toggle button {
  padding: 6px 12px;
  background: none;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--og-ink-2);
  cursor: pointer;
  font-family: 'Manrope', system-ui, sans-serif;
  transition: background .12s, color .12s;
}
.et-inbox-mode-toggle button:hover { color: var(--og-ink); }
.et-inbox-mode-toggle button.is-active {
  background: var(--og-brand, #0E4F3B);
  color: white;
}

/* ---- Status colors (avatar bg + chip bg) ---- */
.et-inbox-item[data-status="reservado"]    .et-inbox-avatar,
.et-inbox-item[data-status="reservado"]    .et-inbox-status-chip { background: #94a3b8; }
.et-inbox-item[data-status="embarcado"]    .et-inbox-avatar,
.et-inbox-item[data-status="embarcado"]    .et-inbox-status-chip { background: #3b82f6; }
.et-inbox-item[data-status="em_transito"]  .et-inbox-avatar,
.et-inbox-item[data-status="em_transito"]  .et-inbox-status-chip { background: #f59e0b; }
.et-inbox-item[data-status="transbordo"]   .et-inbox-avatar,
.et-inbox-item[data-status="transbordo"]   .et-inbox-status-chip { background: #a855f7; }
.et-inbox-item[data-status="chegou_pod"]   .et-inbox-avatar,
.et-inbox-item[data-status="chegou_pod"]   .et-inbox-status-chip { background: #06b6d4; }
.et-inbox-item[data-status="desembaraco"]  .et-inbox-avatar,
.et-inbox-item[data-status="desembaraco"]  .et-inbox-status-chip { background: #ec4899; }
.et-inbox-item[data-status="liberado"]     .et-inbox-avatar,
.et-inbox-item[data-status="liberado"]     .et-inbox-status-chip { background: #10b981; }
.et-inbox-item[data-status="em_rota_cd"]   .et-inbox-avatar,
.et-inbox-item[data-status="em_rota_cd"]   .et-inbox-status-chip { background: #22c55e; }
.et-inbox-item[data-status="entregue"]     .et-inbox-avatar,
.et-inbox-item[data-status="entregue"]     .et-inbox-status-chip { background: #16a34a; }
.et-inbox-item[data-status="encerrado"]    .et-inbox-avatar,
.et-inbox-item[data-status="encerrado"]    .et-inbox-status-chip { background: #64748b; }

/* Chip standalone (fora do item, ex.: no header do main panel) */
.et-inbox-status-chip[data-status="reservado"]    { background: #94a3b8; }
.et-inbox-status-chip[data-status="embarcado"]    { background: #3b82f6; }
.et-inbox-status-chip[data-status="em_transito"]  { background: #f59e0b; }
.et-inbox-status-chip[data-status="transbordo"]   { background: #a855f7; }
.et-inbox-status-chip[data-status="chegou_pod"]   { background: #06b6d4; }
.et-inbox-status-chip[data-status="desembaraco"]  { background: #ec4899; }
.et-inbox-status-chip[data-status="liberado"]     { background: #10b981; }
.et-inbox-status-chip[data-status="em_rota_cd"]   { background: #22c55e; }
.et-inbox-status-chip[data-status="entregue"]     { background: #16a34a; }
.et-inbox-status-chip[data-status="encerrado"]    { background: #64748b; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .et-inbox-shell {
    grid-template-columns: 1fr;
    height: calc(100vh - 70px);
  }
  .et-inbox-sidebar { display: flex; }
  .et-inbox-sidebar.is-hidden { display: none; }
  .et-inbox-main { display: flex; }
  .et-inbox-main.is-hidden { display: none; }
  .et-inbox-main-header { padding: 14px 16px; }
  .et-inbox-main-title { font-size: 18px; }
  .et-inbox-tabs { padding: 0 12px; }
  .et-inbox-tab { padding: 10px 10px; font-size: 12.5px; }
  .et-inbox-tab-body { padding: 14px 16px; }
}

/* ---------- Dropdown og-glass local (equivalente ao .kn-cfg-dropdown) ---------- */
.et-dd-wrap { position: relative; display: inline-block; }
.et-dd-btn {
  background: var(--og-glass-strong, rgba(255,255,255,0.65));
  border: 1px solid var(--og-hairline, rgba(15,23,42,0.10));
  border-radius: 10px;
  padding: 8px 32px 8px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--og-ink, #0f172a);
  cursor: pointer;
  min-width: 180px;
  text-align: left;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color .12s, background .12s;
}
.et-dd-btn:hover { border-color: var(--og-hairline-strong, rgba(15,23,42,0.18)); }
.et-dd-panel {
  position: absolute; top: 42px; left: 0; width: 240px;
  max-height: 380px; overflow-y: auto;
  background: var(--og-glass-strong, rgba(255,255,255,0.85));
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--og-hairline, rgba(15,23,42,0.10));
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(15,23,42,0.14);
  z-index: 9999; padding: 6px 0;
  display: none;
}
.et-dd-item {
  width: 100%; padding: 10px 14px;
  background: transparent; border: 0;
  color: var(--og-ink, #0f172a);
  font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; text-align: left;
  font-family: inherit;
}
.et-dd-item:hover { background: var(--og-hairline-soft, rgba(15,23,42,0.05)); }
.et-dd-item svg { width: 16px; height: 16px; opacity: 0.7; flex: none; }
.et-dd-item .et-dd-check { margin-left: auto; opacity: 1; color: var(--og-green, #0E7C66); }