/* =====================================================================
   ULTRA EXPRESS — CONTROLE DE FROTA
   Estilo: vidro embaçado (glassmorphism) verde, laranja e branco.
   Fundo claro com manchas desfocadas de verde e laranja; painéis em
   branco translúcido; barra lateral em verde escuro translúcido.
   Só CSS — usa as classes e ids que o HTML/JS já geram.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ---------- cores e medidas ---------- */
:root{
  /* verde */
  --green-900: #063D26;
  --green-700: #0B6B3F;
  --green-600: #12824D;
  --green-500: #1FA463;
  --green-100: #DDF5E7;

  /* laranja */
  --orange-700: #C2410C;
  --orange-600: #EA580C;
  --orange-500: #F97316;
  --orange-400: #FB923C;
  --orange-100: #FFEDD5;

  /* texto */
  --text:        #10261A;
  --text-2:      #40584B;
  --text-3:      #6B8176;

  /* status */
  --ok:          #12824D;
  --ok-bg:       #DDF5E7;
  --warn:        #B45309;
  --warn-bg:     #FEF3C7;
  --danger:      #B42318;
  --danger-bg:   #FEE4E2;
  --info:        #1F5F8B;
  --info-bg:     #E3EFF8;
  --neutral:     #52665B;
  --neutral-bg:  rgba(16,38,26,.07);

  /* fundo */
  --bg:          #F4F8F5;
  --blob-green:  rgba(31,164,99,.42);
  --blob-orange: rgba(249,115,22,.34);

  /* vidro */
  --glass:          rgba(255,255,255,.60);
  --glass-strong:   rgba(255,255,255,.82);
  --glass-soft:     rgba(255,255,255,.42);
  --glass-hover:    rgba(255,255,255,.72);
  --glass-border:   rgba(255,255,255,.75);
  --glass-blur:     blur(18px) saturate(160%);
  --line:           rgba(6,61,38,.10);
  --line-strong:    rgba(6,61,38,.18);
  --shadow:         0 10px 30px -14px rgba(6,61,38,.25), 0 1px 2px rgba(6,61,38,.06);
  --shadow-hover:   0 16px 36px -14px rgba(6,61,38,.32), 0 2px 4px rgba(6,61,38,.08);
  --shadow-pop:     0 28px 60px -18px rgba(6,61,38,.40), 0 4px 14px rgba(6,61,38,.10);
  --shadow-orange:  0 10px 22px -8px rgba(234,88,12,.55);

  /* barra lateral (vidro verde escuro) */
  --side-bg:        rgba(6,61,38,.84);
  --side-text:      rgba(255,255,255,.78);
  --side-text-2:    rgba(255,255,255,.52);
  --side-hover:     rgba(255,255,255,.09);
  --side-active:    rgba(255,255,255,.14);
  --side-line:      rgba(255,255,255,.10);

  /* tipografia */
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-display: var(--font-body);

  /* cantos */
  --radius-panel: 16px;
  --radius-field: 10px;
  --radius-sm:    8px;
  --radius-pill:  999px;

  --sidebar-w: 260px;
  --topbar-h: 66px;

  /* nomes que o app.js usa em estilos inline */
  --ink: var(--text);
  --muted: var(--text-2);
  --muted-2: var(--text-3);
  --muted-on-dark: var(--text-3);
}

/* ---------- base ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html, body{ height:100%; }
body{
  margin:0;
  min-height:100vh;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  background:
    radial-gradient(900px 600px at 0% 0%, rgba(31,164,99,.16), transparent 60%),
    radial-gradient(800px 560px at 100% 100%, rgba(249,115,22,.14), transparent 60%),
    radial-gradient(700px 500px at 100% 0%, rgba(255,237,213,.55), transparent 65%),
    var(--bg);
  background-attachment: fixed;
}

/* manchas grandes desfocadas, fixas no fundo */
body::before,
body::after{
  content:'';
  position:fixed;
  z-index:-1;
  border-radius:50%;
  filter: blur(90px);
  pointer-events:none;
}
body::before{
  width: 46vw; height: 46vw;
  min-width: 320px; min-height: 320px;
  top: -12vw; left: 8vw;
  background: var(--blob-green);
}
body::after{
  width: 40vw; height: 40vw;
  min-width: 300px; min-height: 300px;
  bottom: -14vw; right: -6vw;
  background: var(--blob-orange);
}

h1,h2,h3,h4{ font-family: var(--font-display); font-weight:700; margin:0; color: var(--text); letter-spacing:-.015em; }
p{ margin:0 0 .6em; }
a{ color: var(--orange-700); }
b, strong{ font-weight:700; }
button, input, select, textarea{ font-family: inherit; font-size: inherit; color: inherit; }
button{ cursor:pointer; }
svg{ display:block; }
img{ max-width:100%; }
::selection{ background: var(--orange-100); color: var(--text); }

/* barra de rolagem */
*{ scrollbar-width: thin; scrollbar-color: rgba(6,61,38,.25) transparent; }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background: rgba(6,61,38,.22); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background: rgba(6,61,38,.38); background-clip:content-box; }

/* foco visível */
:focus-visible{ outline: 2px solid var(--orange-500); outline-offset: 2px; border-radius:6px; }

/* ============================================================
   LAYOUT
   ============================================================ */
.app{
  display:grid;
  grid-template-columns: var(--sidebar-w) minmax(0,1fr);
  min-height:100vh;
}

/* ---------- barra lateral: verde escuro translúcido ---------- */
.sidebar{
  position:sticky; top:0;
  height:100vh;
  z-index:40;
  display:flex; flex-direction:column;
  background:
    linear-gradient(180deg, rgba(11,107,63,.35), rgba(6,61,38,0) 45%),
    var(--side-bg);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border-right:1px solid rgba(255,255,255,.14);
  box-shadow: 8px 0 30px -18px rgba(6,61,38,.5);
  color: var(--side-text);
}
.brand{
  display:flex; align-items:center;
  width:100%;
  padding: 22px 20px 18px;
  background:none; border:none;
  border-bottom:1px solid var(--side-line);
  text-align:left;
  transition: background .15s ease;
}
.brand:hover{ background: rgba(255,255,255,.04); }
.brand-logo{ width:100%; max-width:196px; height:auto; display:block; }

.nav{ flex:1; overflow-y:auto; padding: 12px 12px 10px; }
.nav-group-label{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color: var(--side-text-2);
  padding: 16px 12px 6px;
}
.nav-group-label:first-child{ padding-top:6px; }
.nav-item{
  position:relative;
  width:100%;
  display:flex; align-items:center; gap:11px;
  margin: 2px 0;
  padding: 9px 12px;
  background:none; border:none;
  border-radius: var(--radius-field);
  color: var(--side-text);
  font-size:13.5px;
  font-weight:500;
  text-align:left;
  transition: background .15s ease, color .15s ease;
}
.nav-item svg{ width:17px; height:17px; flex:none; stroke:currentColor; opacity:.85; }
.nav-item span:not(.nav-count){ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-item:hover{ background: var(--side-hover); color:#fff; }
.nav-item.active{
  background: var(--side-active);
  color:#fff;
  font-weight:600;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.nav-item.active svg{ opacity:1; color: var(--orange-400); stroke: var(--orange-400); }
/* traço laranja à esquerda do item ativo */
.nav-item.active::before{
  content:'';
  position:absolute; left:-12px; top:7px; bottom:7px;
  width:4px;
  border-radius:0 4px 4px 0;
  background: linear-gradient(180deg, var(--orange-400), var(--orange-600));
  box-shadow: 0 0 12px rgba(249,115,22,.7);
}
.nav-item:focus-visible{ outline-color: var(--orange-400); }
.nav-count{
  flex:none;
  font-family: var(--font-mono);
  font-size:11px;
  font-weight:600;
  min-width:22px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  text-align:center;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.8);
}
.nav-item.active .nav-count{ background: rgba(255,255,255,.2); color:#fff; }
.nav-item.danger-count .nav-count{ background: var(--orange-600); color:#fff; }

.sidebar-foot{ padding: 12px; border-top:1px solid var(--side-line); }
.sync-pill{
  display:flex; align-items:center; gap:9px;
  padding: 8px 12px;
  font-size:12px;
  color: var(--side-text);
  background: rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-pill);
}

/* bolinhas de status */
.dot{ width:8px; height:8px; border-radius:50%; flex:none; background: var(--text-3); }
.dot--ok{ background: var(--green-500); box-shadow: 0 0 0 3px rgba(31,164,99,.28); }
.dot--warn{ background: var(--orange-400); box-shadow: 0 0 0 3px rgba(251,146,60,.28); animation: pulse-dot 1.8s ease-in-out infinite; }
.dot--danger{ background: #F04438; box-shadow: 0 0 0 3px rgba(240,68,56,.28); }
@keyframes pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

.scrim{
  display:none;
  position:fixed; inset:0; z-index:39;
  background: rgba(6,61,38,.25);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.scrim.open{ display:block; }

/* ---------- área principal / barra superior ---------- */
.main{ display:flex; flex-direction:column; min-width:0; }
.topbar{
  position:sticky; top:0; z-index:30;
  height: var(--topbar-h);
  display:flex; align-items:center; gap:14px;
  padding: 0 26px;
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border-bottom:1px solid var(--glass-border);
  box-shadow: 0 6px 24px -18px rgba(6,61,38,.35);
}
.topbar-mark{ display:none; height:30px; width:auto; flex:none; }

.icon-btn{
  position:relative;
  flex:none;
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  background: var(--glass);
  border:1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  color: var(--text-2);
  box-shadow: 0 2px 8px -4px rgba(6,61,38,.2);
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.icon-btn:hover{ background: var(--glass-strong); color: var(--green-700); }
.icon-btn:active{ transform: scale(.96); }
.icon-btn svg{ stroke: currentColor; }
.icon-btn#trackBtn:hover{ color: var(--green-600); }
.icon-btn#alertsBtn:hover{ color: var(--orange-600); }

.badge{
  position:absolute; top:-4px; right:-4px;
  min-width:18px; height:18px; padding:0 5px;
  display:flex; align-items:center; justify-content:center;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--orange-500), var(--orange-600));
  color:#fff;
  font-family: var(--font-mono);
  font-size:10px; font-weight:700;
  border:2px solid #fff;
  box-shadow: 0 3px 8px -2px rgba(234,88,12,.6);
}
.badge.hidden{ display:none; }

.search{
  flex:1; min-width:0; max-width:440px;
  display:flex; align-items:center; gap:9px;
  height:40px;
  padding: 0 16px;
  background: var(--glass);
  border:1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  color: var(--text-3);
  box-shadow: inset 0 1px 2px rgba(6,61,38,.05);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.search svg{ flex:none; }
.search:focus-within{
  background: var(--glass-strong);
  border-color: var(--orange-400);
  box-shadow: 0 0 0 4px rgba(249,115,22,.15);
}
.search input{
  flex:1; min-width:0; height:100%;
  padding:0;
  background:none; border:none; outline:none; box-shadow:none;
  color: var(--text);
}
.search input:focus{ background:none; box-shadow:none; }
.search input::placeholder{ color: var(--text-3); }

.topbar-actions{ display:flex; gap:10px; flex:none; margin-left:auto; }

.content{
  flex:1;
  width:100%; max-width:1360px;
  margin:0 auto;
  padding: 28px 32px 64px;
  outline:none;
}

/* animação leve ao trocar de tela (o conteúdo é recriado a cada navegação) */
.content > *{ animation: screen-in .38s cubic-bezier(.2,.8,.3,1) both; }
.content > *:nth-child(2){ animation-delay:.03s; }
.content > *:nth-child(3){ animation-delay:.06s; }
.content > *:nth-child(4){ animation-delay:.09s; }
.content > *:nth-child(n+5){ animation-delay:.12s; }
@keyframes screen-in{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform:none; }
}

.only-mobile{ display:none; }

/* ============================================================
   CABEÇALHO DA PÁGINA
   ============================================================ */
.page-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
  margin-bottom:24px;
}
.page-head > div{ min-width:0; }
.page-head h1{ font-size:25px; font-weight:800; line-height:1.25; overflow-wrap:anywhere; }
.page-head .sub{ margin-top:5px; }
.sub{
  font-size:13px; color: var(--text-2);
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px;
}

/* ============================================================
   BOTÕES (pílula)
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border:1px solid var(--glass-border);
  background: var(--glass);
  color: var(--text);
  font-weight:600;
  font-size:13.5px;
  line-height:1.3;
  white-space:nowrap;
  box-shadow: 0 2px 8px -4px rgba(6,61,38,.18);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease, color .15s ease;
}
.btn svg{ flex:none; }
.btn:hover{ background: var(--glass-strong); border-color:#fff; box-shadow: 0 6px 14px -8px rgba(6,61,38,.3); }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

/* botão principal: gradiente laranja com sombra laranja */
.btn-accent{
  background: linear-gradient(135deg, var(--orange-500) 0%, var(--orange-600) 100%);
  border-color: rgba(255,255,255,.35);
  color:#fff;
  box-shadow: var(--shadow-orange), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-accent:hover{
  background: linear-gradient(135deg, var(--orange-400) 0%, var(--orange-600) 100%);
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 14px 26px -8px rgba(234,88,12,.6), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-accent:disabled{ box-shadow:none; }

.btn-danger{
  background: rgba(254,228,226,.75);
  border-color: rgba(180,35,24,.22);
  color: var(--danger);
  box-shadow:none;
}
.btn-danger:hover{ background: var(--danger-bg); border-color: rgba(180,35,24,.4); color:#912018; box-shadow:none; }

.btn-ghost{
  background: transparent;
  border-color: transparent;
  color: var(--green-700);
  box-shadow:none;
}
.btn-ghost:hover{ background: var(--glass); border-color: var(--glass-border); color: var(--green-900); box-shadow:none; }

.btn-sm{ padding: 5px 12px; font-size:12.5px; }

/* ============================================================
   CARTÕES DE INDICADOR (KPI)
   ============================================================ */
.kpi-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap:14px;
  margin-bottom:24px;
}
.kpi-grid--destaque{ margin-bottom:10px; }
.kpi{
  position:relative;
  overflow:hidden;
  display:block;
  width:100%;
  min-width:0;
  padding: 16px 18px 16px 20px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
  color: var(--text);
  font: inherit;
  text-align:left;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.kpi::before{
  content:'';
  position:absolute; left:0; top:14px; bottom:14px;
  width:4px;
  border-radius:0 4px 4px 0;
  background: rgba(6,61,38,.18);
}
.kpi--ok::before{ background: var(--green-500); }
.kpi--warn::before{ background: var(--orange-500); }
.kpi--danger::before{ background: var(--danger); }
.kpi--link, .kpi[data-nav]{ cursor:pointer; }
.kpi--link:hover, .kpi[data-nav]:hover{
  transform: translateY(-2px);
  background: var(--glass-hover);
  box-shadow: var(--shadow-hover);
}
.kpi-label{ font-size:12.5px; font-weight:600; color: var(--text-2); margin-bottom:8px; }
.kpi-value{
  font-family: var(--font-mono);
  font-size:25px;
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.2;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow-wrap:anywhere;
}
.kpi--ok .kpi-value{ color: var(--ok); }
.kpi--warn .kpi-value{ color: var(--orange-700); }
.kpi--danger .kpi-value{ color: var(--danger); }
.kpi-sub{ margin-top:6px; font-size:11.5px; color: var(--text-3); }

/* ============================================================
   PAINÉIS
   ============================================================ */
.dash-section-title{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px;
  margin: 32px 0 14px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--green-700);
}
.dash-section-title::after{
  content:'';
  flex:1 1 40px;
  height:1px;
  align-self:center;
  background: linear-gradient(90deg, rgba(11,107,63,.25), transparent);
}
.dash-section-title:first-child{ margin-top:0; }
.dash-section-title span{
  font-weight:500; font-size:12px;
  letter-spacing:0; text-transform:none;
  color: var(--text-3);
}

.dash-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr);
  gap:16px;
  margin-bottom:16px;
}
.dash-grid--wide{ grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); }

.panel{
  min-width:0;
  padding: 20px 22px 22px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
}
.content > .panel{ margin-bottom:16px; }
.panel h3{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  margin-bottom:16px;
  font-size:15px;
  font-weight:700;
}
.panel h3 small{
  font-weight:500;
  font-size:12px;
  color: var(--text-3);
}

/* ============================================================
   BARRA DE FILTROS
   ============================================================ */
.toolbar{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  margin-bottom:20px;
}
.toolbar select{ width:auto; min-width:190px; max-width:100%; }
.count-tag{
  padding: 7px 14px;
  font-size:12.5px;
  color: var(--text-2);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius: var(--radius-pill);
}

/* ============================================================
   TABELAS
   ============================================================ */
.table-wrap{
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
}
/* tabela dentro de painel: sem vidro sobre vidro */
.panel .table-wrap{
  background: transparent;
  -webkit-backdrop-filter:none;
          backdrop-filter:none;
  box-shadow:none;
  border-radius: var(--radius-field);
  margin: 0 -8px;
  max-width: calc(100% + 16px);
}

table{ width:100%; border-collapse:collapse; min-width:560px; }
thead th{
  padding: 12px 16px;
  text-align:left;
  font-size:11px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color: var(--green-700);
  background: rgba(221,245,231,.55);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.panel thead th{ background: rgba(221,245,231,.45); }
tbody td{
  padding: 12px 16px;
  font-size:13.5px;
  color: var(--text);
  vertical-align:middle;
  border-bottom:1px solid var(--line);
}
tbody tr:last-child td{ border-bottom:none; }
tbody tr{ transition: background .12s ease; }
/* linha clareia ao passar o mouse */
tbody tr:hover{ background: rgba(255,255,255,.7); }
tbody tr:hover td:first-child{ box-shadow: inset 3px 0 0 var(--orange-400); }

/* números e valores em mono */
.mono, td .mono, td.mono{
  font-family: var(--font-mono);
  font-size:12.5px;
  letter-spacing:-.02em;
  font-variant-numeric: tabular-nums;
}
/* colunas numéricas/valores alinhadas à direita (célula e cabeçalho) */
td.mono{ text-align:right; white-space:nowrap; }
table:has(tbody tr:first-child > td.mono:nth-child(1))  thead th:nth-child(1),
table:has(tbody tr:first-child > td.mono:nth-child(2))  thead th:nth-child(2),
table:has(tbody tr:first-child > td.mono:nth-child(3))  thead th:nth-child(3),
table:has(tbody tr:first-child > td.mono:nth-child(4))  thead th:nth-child(4),
table:has(tbody tr:first-child > td.mono:nth-child(5))  thead th:nth-child(5),
table:has(tbody tr:first-child > td.mono:nth-child(6))  thead th:nth-child(6),
table:has(tbody tr:first-child > td.mono:nth-child(7))  thead th:nth-child(7),
table:has(tbody tr:first-child > td.mono:nth-child(8))  thead th:nth-child(8),
table:has(tbody tr:first-child > td.mono:nth-child(9))  thead th:nth-child(9),
table:has(tbody tr:first-child > td.mono:nth-child(10)) thead th:nth-child(10),
table:has(tbody tr:first-child > td.mono:nth-child(11)) thead th:nth-child(11),
table:has(tbody tr:first-child > td.mono:nth-child(12)) thead th:nth-child(12){ text-align:right; }
td.mono b{ color: var(--green-900); font-weight:700; }

td.wrap, .wrap{ white-space:normal; max-width:300px; color: var(--text-2); }

.row-actions{ display:flex; gap:6px; justify-content:flex-end; flex-wrap:nowrap; }

/* ============================================================
   PÍLULAS DE STATUS (com bolinha na frente)
   ============================================================ */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding: 3px 10px 3px 8px;
  font-size:11.5px; font-weight:600;
  line-height:1.4;
  white-space:nowrap;
  border-radius: var(--radius-pill);
  border:1px solid transparent;
}
.pill::before{
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  flex:none;
  background: currentColor;
}
.pill--green{ background: var(--ok-bg);     color: var(--ok);     border-color: rgba(18,130,77,.22); }
.pill--amber{ background: var(--warn-bg);   color: var(--warn);   border-color: rgba(180,83,9,.22); }
.pill--red{   background: var(--danger-bg); color: var(--danger); border-color: rgba(180,35,24,.22); }
.pill--blue{  background: var(--info-bg);   color: var(--info);   border-color: rgba(31,95,139,.2); }
.pill--grey{  background: var(--neutral-bg);color: var(--neutral);border-color: rgba(16,38,26,.1); }

/* ============================================================
   ALERTAS
   ============================================================ */
.alert-row{
  display:flex; align-items:center; gap:11px;
  width:100%;
  padding: 11px 10px;
  background:none;
  border:none;
  border-bottom:1px solid var(--line);
  text-align:left;
  color: var(--text);
  font: inherit;
  font-size:13px;
}
.alert-row:last-child{ border-bottom:none; }
.alert-row > svg{ width:17px; height:17px; flex:none; color: var(--text-3); stroke: currentColor; }
.alert-row--link{
  cursor:pointer;
  border-radius: var(--radius-field);
  transition: background .12s ease;
}
.alert-row--link:hover{ background: rgba(255,255,255,.7); }
.sev-dot{ width:9px; height:9px; border-radius:50%; flex:none; background: var(--text-3); }
.sev-dot.warn{ background: var(--orange-500); box-shadow: 0 0 0 3px rgba(249,115,22,.18); }
.sev-dot.danger{ background: var(--danger); box-shadow: 0 0 0 3px rgba(180,35,24,.16); }
.alert-txt{ flex:1; min-width:0; color: var(--text); overflow-wrap:anywhere; }
.alert-tag{
  flex:none;
  padding: 3px 10px;
  font-size:11px; font-weight:600;
  color: var(--green-700);
  background: rgba(221,245,231,.8);
  border:1px solid rgba(18,130,77,.14);
  border-radius: var(--radius-pill);
}
.alert-tag.mono{ font-size:11px; }
.alert-go{ flex:none; font-size:18px; line-height:1; color: var(--text-3); transition: color .12s ease, transform .12s ease; }
.alert-row--link:hover .alert-go{ color: var(--orange-600); transform: translateX(2px); }

/* ============================================================
   LINHA DO TEMPO (histórico do veículo)
   ============================================================ */
.timeline{ position:relative; padding-left:24px; }
.timeline::before{
  content:'';
  position:absolute; left:5px; top:6px; bottom:6px;
  width:2px;
  border-radius:2px;
  background: linear-gradient(180deg, var(--orange-400), rgba(31,164,99,.45));
}
.tl-item{ position:relative; padding: 0 0 20px; }
.tl-item::before{
  content:'';
  position:absolute; left:-24px; top:3px;
  width:12px; height:12px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--orange-500);
  box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}
.tl-item:last-child{ padding-bottom:0; }
.tl-date{ font-family: var(--font-mono); font-size:11.5px; color: var(--text-3); margin-bottom:3px; }
.tl-title{ font-weight:600; font-size:14px; margin-bottom:2px; }
.tl-meta{ font-size:12.5px; color: var(--text-2); }

/* ============================================================
   ESTADO VAZIO
   ============================================================ */
.empty-state{
  padding: 48px 24px;
  text-align:center;
  color: var(--text-2);
}
.empty-state svg{
  width:40px; height:40px;
  margin:0 auto 14px;
  padding:8px;
  box-sizing:content-box;
  color: var(--green-600);
  stroke: currentColor;
  background: rgba(221,245,231,.8);
  border-radius:50%;
}
.empty-state h3{ font-size:15.5px; margin-bottom:6px; }
.empty-state p{ font-size:13px; max-width:380px; margin:0 auto; }
.content > .empty-state{
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
}

/* ============================================================
   JANELA (MODAL) E FORMULÁRIO
   ============================================================ */
.modal-backdrop{
  display:none;
  position:fixed; inset:0; z-index:60;
  align-items:center; justify-content:center;
  padding:20px;
  background: rgba(6,61,38,.22);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
          backdrop-filter: blur(10px) saturate(120%);
}
.modal-backdrop.open{ display:flex; animation: fade-in .2s ease both; }
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }
.modal{
  width:100%; max-width:660px;
  max-height:88vh;
  display:flex; flex-direction:column;
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
          backdrop-filter: blur(24px) saturate(170%);
  border:1px solid rgba(255,255,255,.9);
  border-radius: 20px;
  box-shadow: var(--shadow-pop);
  overflow:hidden;
  animation: modal-in .24s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes modal-in{ from{ opacity:0; transform: translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }
.modal-head{
  flex:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 18px 22px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(90deg, rgba(221,245,231,.6), rgba(255,237,213,.35));
}
.modal-head h2{ font-size:17px; font-weight:700; }
.modal-body{ padding: 22px; overflow-y:auto; }

.field-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px 14px;
}
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size:12.5px; font-weight:600; color: var(--text-2); }

input, select, textarea{
  width:100%;
  padding: 10px 12px;
  background: rgba(255,255,255,.72);
  border:1px solid var(--line-strong);
  border-radius: var(--radius-field);
  color: var(--text);
  outline:none;
  box-shadow: inset 0 1px 2px rgba(6,61,38,.05);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
input:hover, select:hover, textarea:hover{ border-color: rgba(6,61,38,.3); }
input:focus, select:focus, textarea:focus{
  background:#fff;
  border-color: var(--orange-500);
  box-shadow: 0 0 0 4px rgba(249,115,22,.16);
}
input[type="number"], input[type="date"], input[type="time"]{ font-family: var(--font-mono); font-size:13.5px; }
textarea{ min-height:84px; resize:vertical; }
select{
  appearance:none; -webkit-appearance:none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230B6B3F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: right 12px center;
}
::placeholder{ color: var(--text-3); }

.form-actions{
  display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px;
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

/* ============================================================
   AVISO (TOAST) — verde escuro translúcido
   ============================================================ */
.toast{
  position:fixed; left:50%; bottom:26px; z-index:80;
  max-width: calc(100vw - 32px);
  padding: 12px 20px 12px 16px;
  display:flex; align-items:center; gap:10px;
  background: rgba(6,61,38,.86);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border:1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-pill);
  color:#fff;
  font-size:13px; font-weight:500;
  box-shadow: var(--shadow-pop);
  transform: translate(-50%, 14px);
  opacity:0; pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast::before{
  content:'';
  width:8px; height:8px; border-radius:50%; flex:none;
  background: var(--green-500);
  box-shadow: 0 0 0 3px rgba(31,164,99,.3);
}
.toast.show{ opacity:1; transform: translate(-50%, 0); pointer-events:auto; }
/* aviso de erro em vermelho (para quando houver uma classe de erro) */
.toast.error, .toast--error, .toast.danger{
  background: rgba(180,35,24,.9);
}
.toast.error::before, .toast--error::before, .toast.danger::before{
  background:#FEE4E2; box-shadow: 0 0 0 3px rgba(254,228,226,.3);
}

/* ============================================================
   GRÁFICOS (charts.js)
   ============================================================ */
.chart{ width:100%; min-width:0; }
.chart-top{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
  margin-bottom:14px;
}
.chart-legend{ display:flex; flex-wrap:wrap; gap:6px; }
.ch-leg{
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 11px;
  font-size:11.5px; font-weight:600;
  color: var(--text-2);
  background: rgba(255,255,255,.55);
  border:1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  transition: opacity .15s ease, background .15s ease;
}
.ch-leg i{ width:9px; height:9px; border-radius:3px; flex:none; }
.ch-leg i.ln{ width:12px; height:3px; border-radius:99px; }
.ch-leg:hover{ background: rgba(255,255,255,.85); color: var(--text); }
.ch-leg.off{ opacity:.45; text-decoration: line-through; }

.ch-segs{
  display:inline-flex; gap:2px;
  padding:3px;
  background: rgba(6,61,38,.06);
  border:1px solid var(--line);
  border-radius: var(--radius-pill);
}
.ch-seg{
  padding: 5px 12px;
  background:none; border:none;
  border-radius: var(--radius-pill);
  color: var(--text-2);
  font-size:11.5px; font-weight:600;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.ch-seg.on{
  background: linear-gradient(135deg, var(--orange-500), var(--orange-600));
  color:#fff;
  box-shadow: 0 4px 10px -4px rgba(234,88,12,.6);
}
.ch-seg:not(.on):hover{ color: var(--text); background: rgba(255,255,255,.6); }

.chart-plot{ position:relative; min-width:0; }
.chart-empty{
  display:flex; align-items:center; justify-content:center;
  min-height:160px;
  padding:16px;
  text-align:center;
  color: var(--text-3);
  font-size:13px;
  border:1px dashed var(--line-strong);
  border-radius: var(--radius-field);
  background: rgba(255,255,255,.3);
}

/* colunas + linha */
.ch-svg{ max-width:100%; height:auto; overflow:visible; }
.ch-svg text{ fill: var(--text-3); font-size:10.5px; font-family: var(--font-mono); }
.ch-xl--now{ fill: var(--text) !important; font-weight:600; }
.ch-grid{ stroke: rgba(6,61,38,.08); stroke-width:1; }
.ch-grid--base{ stroke: rgba(6,61,38,.22); }
.ch-b{ transition: opacity .15s ease; }
.ch-guide{ fill: transparent; transition: fill .12s ease; }
.ch-guide.on{ fill: rgba(255,255,255,.65); }
.ch-hit{ fill: transparent; }
.ch-hit.is-click{ cursor:pointer; }
.ch-hit:focus-visible{ outline:none; }
.ch-line{ fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.ch-dot{ stroke:#fff; stroke-width:2; transition: r .12s ease; }
.ch-dot.on{ r:5.5px; }
.ch-enter .ch-b{ animation: bar-in .45s ease both; transform-box: fill-box; transform-origin: bottom; }
.ch-enter .ch-line{ stroke-dasharray:1; stroke-dashoffset:1; animation: line-in .7s ease .1s both; }
@keyframes bar-in{ from{ opacity:0; transform: scaleY(.6); } to{ opacity:1; transform:none; } }
@keyframes line-in{ to{ stroke-dashoffset:0; } }

/* rosca */
.dn{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; }
.dn-wrap{ position:relative; width:190px; height:190px; flex:none; }
.dn-wrap svg{ width:100%; height:100%; overflow:visible; }
.ch-slice{ transition: filter .15s ease, transform .15s ease; transform-origin:center; stroke: rgba(255,255,255,.85); stroke-width:1.5; }
.ch-slice.is-click{ cursor:pointer; }
.ch-slice:hover, .ch-slice.hot{ filter: brightness(1.08) saturate(1.1); transform: translate(var(--dx), var(--dy)); }
.ch-slice:focus-visible{ outline:none; filter: brightness(1.1); }
.dn-center{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  pointer-events:none;
}
.dn-t{ font-size:11.5px; font-weight:600; color: var(--text-2); max-width:104px; }
.dn-v{ font-family: var(--font-mono); font-size:21px; font-weight:700; color: var(--text); margin:2px 0; letter-spacing:-.03em; }
.dn-s{ font-size:11px; color: var(--text-3); max-width:110px; }
.dn-legend{ flex:1 1 230px; min-width:0; max-width:100%; display:flex; flex-direction:column; gap:2px; }
.dl-row{
  display:grid; grid-template-columns: 9px minmax(0,1fr) minmax(0,var(--vw,60px)) 36px;
  min-width:0;
  align-items:center; gap:10px;
  padding: 7px 10px;
  background:none; border:none;
  border-radius: var(--radius-field);
  text-align:left;
  color: var(--text);
  transition: background .12s ease, opacity .15s ease;
}
.dl-row i{ width:9px; height:9px; border-radius:3px; }
.dl-row:hover, .dl-row.hot{ background: rgba(255,255,255,.7); }
.dl-row.off{ opacity:.45; }
.dl-row.is-click{ cursor:pointer; }
.dl-n{ font-size:13px; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-v{ font-family: var(--font-mono); font-size:12.5px; color: var(--text); text-align:right; }
.dl-p{ font-family: var(--font-mono); font-size:11px; color: var(--text-3); text-align:right; min-width:34px; }

/* barras horizontais (ranking) */
.hb{ display:flex; flex-direction:column; gap:8px; }
.hb-row{
  display:grid; grid-template-columns: 118px minmax(0,1fr) auto;
  align-items:center; gap:12px;
  width:100%;
  padding: 6px 8px;
  background:none; border:none;
  border-radius: var(--radius-field);
  text-align:left;
  color: var(--text);
  transition: background .12s ease;
}
.hb-row:hover{ background: rgba(255,255,255,.7); }
.hb-row.is-click{ cursor:pointer; }
.hb-label{ overflow:hidden; min-width:0; }
.hb-label b{ display:block; font-size:13px; font-weight:600; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hb-label small{ display:block; margin-top:1px; font-family: var(--font-mono); font-size:10.5px; color: var(--text-3); }
.hb-track{
  position:relative;
  display:flex;
  height:14px;
  background: rgba(6,61,38,.07);
  border-radius: var(--radius-pill);
}
.hb-fill{ display:flex; height:100%; border-radius: var(--radius-pill); overflow:hidden; transition: width .5s cubic-bezier(.2,.8,.3,1); }
.hb-seg{ height:100%; }
.hb-mark{ position:absolute; top:-4px; bottom:-4px; width:2px; margin-left:-1px; background: var(--orange-600); border-radius:2px; }
.hb-val{ font-family: var(--font-mono); font-size:12.5px; color: var(--text); text-align:right; min-width:72px; white-space:nowrap; }
.hb-note{ margin-top:8px; display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:11.5px; color: var(--text-3); }
.hb-mk{ display:inline-block; width:10px; height:2px; background: var(--orange-600); }

/* ranking com nomes compridos (ex.: "MOVIDA · MACAPÁ") */
.hb-wide .hb-row{ grid-template-columns: 190px minmax(0,1fr) auto; }
@media (max-width: 880px){ .hb-wide .hb-row{ grid-template-columns: 120px minmax(0,1fr) auto; } }

/* dica flutuante do gráfico (charts.js usa a classe "on") */
.chart-tip{
  position:fixed; left:0; top:0; z-index:70;
  max-width:250px;
  padding: 10px 13px;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border:1px solid rgba(255,255,255,.95);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  font-size:12.5px;
  color: var(--text);
  pointer-events:none;
  opacity:0; visibility:hidden;
  transition: opacity .12s ease, visibility .12s ease;
}
.chart-tip.on, .chart-tip.show{ opacity:1; visibility:visible; }
.ct-title{ font-weight:700; color: var(--text); margin-bottom:6px; font-size:12.5px; }
.ct-sub{ font-weight:500; color: var(--text-3); font-size:11px; font-family: var(--font-mono); }
.ct-row{ display:flex; align-items:center; gap:7px; padding:2px 0; color: var(--text-2); }
.ct-row i{ width:8px; height:8px; border-radius:2px; flex:none; }
.ct-row i.ln{ height:3px; border-radius:99px; }
.ct-row span{ flex:1; }
.ct-row b{ color: var(--text); font-family: var(--font-mono); font-weight:600; text-align:right; }
.ct-total{ display:flex; justify-content:space-between; gap:12px; margin-top:5px; padding-top:5px; border-top:1px solid var(--line); font-size:12px; color: var(--text-2); }
.ct-total b{ color: var(--text); font-family: var(--font-mono); }
.ct-hint{ margin-top:6px; font-size:11px; color: var(--orange-700); font-weight:500; }

/* ============================================================
   MAPA (Leaflet)
   ============================================================ */
.leaflet-container{
  background: var(--green-100);
  border-radius: var(--radius-panel);
  font-family: var(--font-body);
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  color: var(--text);
  box-shadow: var(--shadow-pop);
}
.leaflet-popup-content-wrapper{ border-radius: 12px; }
.leaflet-bar a{ color: var(--green-700); }

/* ============================================================
   SEM SUPORTE A DESFOQUE: painéis mais sólidos
   ============================================================ */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  :root{
    --glass: rgba(255,255,255,.93);
    --glass-strong: #fff;
    --glass-hover: #fff;
    --side-bg: rgba(6,61,38,.98);
  }
  .topbar{ background: rgba(255,255,255,.95); }
  .modal{ background: #fff; }
  .modal-backdrop{ background: rgba(6,61,38,.5); }
  .chart-tip{ background:#fff; }
  .toast{ background: var(--green-900); }
  .scrim{ background: rgba(6,61,38,.5); }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1080px){
  .dash-grid--wide{ grid-template-columns: minmax(0,1fr); }
  .field-grid{ grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 880px){
  .app{ grid-template-columns: minmax(0,1fr); }
  .sidebar{
    position:fixed; left:0; top:0; bottom:0;
    height:100%;
    width: min(82vw, 290px);
    transform: translateX(-105%);
    transition: transform .25s cubic-bezier(.2,.8,.3,1);
    background: rgba(6,61,38,.92);
    box-shadow: var(--shadow-pop);
  }
  .sidebar.open{ transform:none; }
  .only-mobile{ display:flex; }
  .topbar-mark{ display:block; }
  .topbar{ padding: 0 14px; gap:10px; }
  .content{ padding: 20px 16px 52px; }
  .search{ max-width:none; }
  .search input::placeholder{ font-size:12.5px; }
  .kpi-grid{ grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:12px; }
  .hb-row{ grid-template-columns: 86px minmax(0,1fr) auto; gap:8px; }
  .page-head{ flex-direction:column; align-items:stretch; }
  .page-head .btn{ align-self:flex-start; }
  .page-head h1{ font-size:22px; }
  .panel{ padding: 16px 16px 18px; }
  .panel .table-wrap{ margin: 0 -4px; max-width: calc(100% + 8px); }
  body::before{ top:-30vw; left:-20vw; }
  body::after{ bottom:-30vw; right:-25vw; }
}

@media (max-width: 560px){
  .topbar{ gap:8px; padding: 0 12px; }
  .topbar-mark{ height:26px; }
  .topbar-actions{ gap:6px; }
  .icon-btn{ width:36px; height:36px; }
  .search{ padding: 0 12px; height:38px; }
  .kpi-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
  .kpi{ padding: 14px 12px 14px 16px; }
  .kpi-value{ font-size:21px; }
  .kpi-label{ font-size:12px; }
  .modal-backdrop{ padding:10px; align-items:flex-end; }
  .modal{ max-height:92vh; border-radius: 20px; }
  .modal-head{ padding: 16px 18px; }
  .modal-body{ padding: 18px; }
  .field-grid{ gap:12px; }
  .form-actions .btn{ flex:1; }
  .table-wrap table{ min-width:520px; }
  tbody td{ white-space:nowrap; }
  tbody td.wrap{ white-space:normal; min-width:200px; }
  .toolbar select{ flex:1; min-width:0; }
  .hb-val{ min-width:0; font-size:12px; }
  .dn-wrap{ width:170px; height:170px; }
  .dn-legend{ flex-basis:100%; }
  .toast{ bottom:16px; border-radius:16px; }
}

/* ============================================================
   REDUZIR MOVIMENTO
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0s !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .kpi--link:hover, .kpi[data-nav]:hover{ transform:none; }
}

/* ============================================================
   LOGIN
   ============================================================ */
body.is-locked .app{ display:none; }
.login{
  display:none;
  min-height:100vh;
  align-items:center; justify-content:center;
  padding: 24px 16px;
}
body.is-locked .login{ display:flex; }
.login-card{
  width:100%; max-width:410px;
  padding: 30px 28px 26px;
  background:
    linear-gradient(180deg, rgba(11,107,63,.35), rgba(6,61,38,0) 45%),
    var(--side-bg);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border:1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  box-shadow: var(--shadow-pop);
  color:#fff;
}
.login-logo{ display:block; width:100%; max-width:250px; height:auto; margin: 0 auto 22px; }
.login-card h1{ color:#fff; font-size:20px; margin-bottom:4px; }
.login-sub{ color: var(--side-text); font-size:13px; margin-bottom:18px; }
.login-card .field{ margin-bottom:14px; }
.login-card .field label{ color: var(--side-text); }
.login-card input{ background: rgba(255,255,255,.94); }
.login-btn{ width:100%; padding:12px 18px; font-size:14.5px; margin-top:4px; }
.login-erro{ min-height:18px; margin: 2px 0 10px; font-size:13px; font-weight:600; color:#FFB4A8; }
.login-hint{ display:block; margin: 14px 0 0; font-size:12px; color: var(--side-text-2); text-align:center; }
.login-msg{ text-align:center; color: var(--side-text); padding: 16px 0; }

/* usuário logado (rodapé da barra lateral) */
.user-box{ display:flex; align-items:center; gap:10px; padding: 4px 4px 10px; }
.user-avatar{
  flex:none; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--orange-500), var(--orange-600));
  color:#fff; font-weight:700; font-size:13px;
}
.user-info{ min-width:0; display:flex; flex-direction:column; }
.user-info b{ color:#fff; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-info small{ color: var(--side-text-2); font-size:11.5px; }
.user-actions{ display:flex; gap:6px; margin-bottom:10px; }
.side-btn{
  flex:1; padding: 6px 8px;
  background: rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-pill);
  color: var(--side-text); font-size:12px; font-weight:600;
  transition: background .15s ease, color .15s ease;
}
.side-btn:hover{ background: rgba(255,255,255,.14); color:#fff; }

/* grade de permissões no cadastro de usuário */
.perm-table{ width:100%; min-width:0; border-collapse:collapse; margin-top:4px; }
.perm-table td{ padding: 6px 4px; border-bottom:1px solid var(--line); font-size:13px; white-space:normal; }
.perm-table tr:last-child td{ border-bottom:none; }
.perm-table td:last-child{ width:210px; }
.perm-table select{ padding: 7px 34px 7px 10px; font-size:13px; }
.perm-table tbody tr:hover{ background:transparent; }
.perm-table tbody tr:hover td:first-child{ box-shadow:none; }
.perm-atalhos{ display:flex; flex-wrap:wrap; gap:6px; margin: 4px 0 6px; }
.form-note{ font-size:12.5px; color: var(--text-2); background: var(--info-bg); border-radius: var(--radius-field); padding: 10px 12px; }
input[readonly], select:disabled, textarea[readonly]{ background: rgba(6,61,38,.04); color: var(--text-2); cursor:default; }
@media (max-width: 560px){ .perm-table td:last-child{ width:150px; } }