:root {
  --iw-azul: #1f4e79;
  --iw-azul-escuro: #163a5c;
  --iw-fundo: #f4f6f9;
  --sidebar-w: 248px;
}
body { background: var(--iw-fundo); font-size: .925rem; }
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w); background: var(--iw-azul-escuro); color: #cfd9e4;
  position: fixed; inset: 0 auto 0 0; z-index: 1030; transition: transform .2s;
}
.sidebar .marca { color: #fff; font-weight: 700; font-size: 1.25rem; padding: 1rem 1.1rem .25rem; text-decoration: none; display: block; }
.sidebar .tenant-nome { font-size: .78rem; padding: 0 1.1rem .8rem; color: #9fb3c8; border-bottom: 1px solid rgba(255,255,255,.08); }
.menu-item, .menu-grupo-titulo {
  display: flex; align-items: center; gap: .55rem; width: 100%; color: #cfd9e4; text-decoration: none;
  padding: .5rem 1.1rem; background: none; border: 0; text-align: left; font-size: .9rem;
}
.menu-item:hover, .menu-grupo-titulo:hover { background: rgba(255,255,255,.06); color: #fff; }
.menu-item.sub { padding-left: 2.6rem; font-size: .86rem; }
.menu-item.ativo { background: rgba(255,255,255,.12); color: #fff; border-left: 3px solid #6fb1ff; }
.conteudo { margin-left: var(--sidebar-w); flex: 1; min-width: 0; }
.topo { background: #fff; border-bottom: 1px solid #e3e7ed; padding: .6rem 1rem; position: sticky; top: 0; z-index: 1020; }

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.aberta { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  .conteudo { margin-left: 0; }
}

.card { border: 1px solid #e3e7ed; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; color: #5b6878; white-space: nowrap; }
.table td { vertical-align: middle; }
.table-hover tbody tr { cursor: default; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.kpi-rotulo { font-size: .8rem; color: #5b6878; text-transform: uppercase; letter-spacing: .03em; }
.form-label { font-size: .82rem; font-weight: 600; color: #3d4a5a; margin-bottom: .2rem; }
.secao-form { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #5b6878; border-bottom: 1px solid #e3e7ed; padding-bottom: .3rem; margin: 1rem 0 .5rem; }
.btn-primary { background: var(--iw-azul); border-color: var(--iw-azul); }
.btn-primary:hover { background: var(--iw-azul-escuro); border-color: var(--iw-azul-escuro); }

/* Telas de login */
.tela-login { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--iw-azul-escuro), var(--iw-azul)); }
.tela-login .card { width: 100%; max-width: 380px; }

/* Coletor: botões grandes, fonte maior, pensado para tela de 4-6" e luva */
.coletor { background: #eef2f6; font-size: 1.05rem; }
.coletor .barra { background: var(--iw-azul-escuro); color: #fff; padding: .55rem .8rem; position: sticky; top: 0; z-index: 10; }
.coletor .barra a, .coletor .barra button { color: #fff; }
.coletor main { padding: .8rem; max-width: 560px; margin: 0 auto; }
.coletor .form-control, .coletor .form-select { font-size: 1.15rem; padding: .6rem .75rem; }
.coletor .btn { font-size: 1.1rem; padding: .7rem 1rem; }
.coletor .btn-menu { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left;
  padding: 1rem; margin-bottom: .6rem; font-size: 1.15rem; background: #fff; border: 1px solid #d5dce5; border-radius: .6rem; color: #1d2b3a; text-decoration: none; }
.coletor .btn-menu i { font-size: 1.6rem; color: var(--iw-azul); }
.coletor .btn-menu .badge { margin-left: auto; }
.coletor .info { background: #fff; border-radius: .5rem; padding: .6rem .8rem; border: 1px solid #d5dce5; margin-bottom: .6rem; }
.coletor .info dt { font-size: .75rem; text-transform: uppercase; color: #5b6878; font-weight: 600; }
.coletor .info dd { margin-bottom: .35rem; font-weight: 600; }
.coletor .destino { font-size: 2rem; font-weight: 800; letter-spacing: .03em; color: var(--iw-azul); }
.campo-erro { animation: tremor .3s; border-color: #dc3545 !important; }
@keyframes tremor { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.text-uppercase::placeholder { text-transform: none; }