/* ============================================================
   PROJETO OEE — Design system "Byttecs IoT"
   Porte do design (React/Claude Design) para CSS puro, server-rendered.
   Estrutura:
     1. Tokens (tema escuro padrão + tema claro)
     2. Base, fundo tech-grid, scrollbar
     3. Tipografia utilitária
     4. Shell: sidebar + topbar + conteúdo + rodapé
     5. Cards, painéis, KPIs
     6. Botões, chips, badges, alertas
     7. Formulários e tabelas
     8. Dashboard OEE (máquinas, pilares, gauge, ranking, metas)
     9. Relatórios, flash, login, impressão
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  --primary: #1DA1F2;
  --primary-dark: #168ACB;
  --cyan: #67E8F9;

  --bg: #0A2E35;
  --surface: #113A42;
  --surface-2: #062126;
  --surface-hi: #15454E;
  --border: #1C4E58;
  --border-soft: rgba(28,78,88,0.5);

  --text: #E6E6E6;
  --text-hi: #FFFFFF;
  --text-dim: #8FB3BC;
  --text-faint: #5C8089;

  /* Estados de máquina */
  --st-run:   #34D399;
  --st-stop:  #FB923C;
  --st-fault: #F87171;
  --st-setup: #FBBF24;
  --st-idle:  #7C97A0;

  /* Severidade / semântico */
  --sev-info:     #1DA1F2;
  --sev-warning:  #FBBF24;
  --sev-critical: #F87171;
  --ok:    #34D399;
  --aviso: #FBBF24;
  --erro:  #F87171;

  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 20px;
  --shadow-primary: 0 10px 30px -8px rgba(29,161,242,0.25);
  --shadow-card: 0 14px 40px -12px rgba(29,161,242,0.25);

  --grid-line: rgba(29,161,242,0.05);
  --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --sidebar-w: 232px;
  --sidebar-rail: 68px;
}

/* ---- Tema claro ---- */
[data-theme="light"] {
  --bg: #EEF4F6;
  --surface: #FFFFFF;
  --surface-2: #E2ECEF;
  --surface-hi: #F6FAFB;
  --border: #CBDDE2;
  --border-soft: rgba(120,160,170,0.35);

  --text: #143038;
  --text-hi: #06222A;
  --text-dim: #4E727B;
  --text-faint: #88A6AE;

  --grid-line: rgba(29,161,242,0.06);
  --shadow-primary: 0 10px 30px -10px rgba(29,161,242,0.30);
  --shadow-card: 0 14px 40px -14px rgba(20,48,56,0.18);
  --st-idle: #94A3B8;
}

/* ============================================================
   2. BASE
   ============================================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}

a { color: var(--primary); }

/* Fundo tech-grid (aplicado à área de conteúdo) */
.tech-grid {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* Scrollbar fina */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }
* { scrollbar-width: thin; scrollbar-color: var(--primary) var(--bg); }
::selection { background: rgba(29,161,242,0.3); color: #fff; }

/* ============================================================
   3. TIPOGRAFIA UTILITÁRIA
   ============================================================ */
.tk-eyebrow {
  font-size: 11px; font-weight: 900; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-dim);
}
.tk-title {
  font-weight: 900; letter-spacing: -0.03em; color: var(--text-hi); line-height: 1.05;
}
.grad-text {
  background: linear-gradient(100deg, var(--primary), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

h1 { font-size: 1.55rem; margin: 0 0 .2rem; font-weight: 900; letter-spacing: -0.03em; color: var(--text-hi); }
h2 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-hi); }

/* Ícones Material Symbols */
.ms {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal; font-size: 20px; line-height: 1;
  display: inline-block; vertical-align: middle;
  -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}
.ms.fill { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

/* ============================================================
   4. SHELL — sidebar + topbar + conteúdo
   ============================================================ */
.app { display: flex; min-height: 100vh; }

/* ---- Sidebar ---- */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--surface-2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; z-index: 30;
  transition: width .2s ease, transform .28s cubic-bezier(.2,.8,.2,1);
}
.sidebar-marca {
  display: flex; align-items: center; gap: 11px; padding: 20px;
}
.sidebar-marca .marca-wordmark { height: 24px; width: auto; }
.sidebar-marca .marca-icone { width: 30px; height: 22px; flex-shrink: 0; }

/* Troca do wordmark por tema (escuro é o padrão; claro sob [data-theme="light"]) */
.marca-wordmark--claro { display: none; }
[data-theme="light"] .marca-wordmark--escuro { display: none; }
[data-theme="light"] .marca-wordmark--claro { display: block; }
/* O ícone só aparece no modo compacto (rail) — ver abaixo */
.marca-icone { display: none; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 4px 12px; }
.nav-grupo { margin-bottom: 18px; }
.nav-grupo-rotulo { font-size: 8.5px; padding: 0 10px 8px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer;
  padding: 9px 11px; border-radius: 9px; border: none; text-align: left;
  background: transparent; color: var(--text-dim);
  font-family: var(--font); font-size: 13.5px; font-weight: 500;
  text-decoration: none; position: relative; transition: all .15s; margin-bottom: 2px;
}
.nav-item:hover { background: rgba(29,161,242,0.06); color: var(--text-hi); }
.nav-item.ativo { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); font-weight: 700; }
.nav-item.ativo::before {
  content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 3px; background: var(--primary);
}
.sidebar-rodape { padding: 14px; }
.coleta-card {
  padding: 13px; border-radius: var(--radius);
  background: linear-gradient(150deg, color-mix(in srgb, var(--primary) 16%, var(--surface)), var(--surface));
  border: 1px solid rgba(29,161,242,0.25);
}
.coleta-card .coleta-topo { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.coleta-card .coleta-txt { font-size: 11.5px; color: var(--text-dim); line-height: 1.45; }

/* Sidebar em rail (colapsada) no desktop */
.app.nav-rail .sidebar { width: var(--sidebar-rail); }
.app.nav-rail .sidebar-marca { justify-content: center; padding: 20px 0; }
.app.nav-rail .nav-grupo-rotulo, .app.nav-rail .nav-item span:not(.ms),
.app.nav-rail .sidebar-rodape { display: none; }
.app.nav-rail .nav-item { justify-content: center; padding: 10px 0; }
.app.nav-rail .nav-item.ativo::before { display: none; }

/* Modo compacto (rail) só no desktop: esconde o wordmark e mostra só o ícone.
   No mobile o rail é ignorado, então o wordmark continua aparecendo. */
@media (min-width: 861px) {
  .app.nav-rail .sidebar-marca .marca-wordmark { display: none; }
  .app.nav-rail .sidebar-marca .marca-icone { display: block; }
}

.sidebar-overlay { display: none; }

/* ---- Topbar ---- */
.topbar {
  position: sticky; top: 0; z-index: 35;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 12px 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.topbar-titulo { display: flex; align-items: center; gap: 9px; min-width: 0; }
.topbar-titulo h1 { font-size: 19px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.topbar-espaco { flex: 1; }
.topbar-usuario { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.topbar-avatar {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  font-weight: 900; font-size: 13px;
  background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary);
}
.topbar-usuario-nome { line-height: 1.15; }
.topbar-usuario-nome b { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-hi); }
.topbar-usuario-nome small { display: block; font-size: 9.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }

/* ---- Conteúdo + rodapé ---- */
.conteudo-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conteudo { padding: 22px; flex: 1; }
.conteudo > .secao-cabecalho:first-child { margin-top: 0; }
.rodape { text-align: center; color: var(--text-faint); padding: 22px; font-size: .82rem; border-top: 1px solid var(--border-soft); }

/* ---- Responsivo: sidebar vira off-canvas ---- */
@media (max-width: 860px) {
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100dvh; transform: translateX(-100%);
    box-shadow: none; z-index: 70; width: var(--sidebar-w);
  }
  .app.nav-aberto .sidebar { transform: translateX(0); box-shadow: 24px 0 60px -12px rgba(0,0,0,0.55); }
  .app.nav-rail .sidebar { width: var(--sidebar-w); }              /* ignora rail no mobile */
  .app.nav-rail .nav-item span:not(.ms) { display: inline; }
  .app.nav-aberto .sidebar-overlay {
    display: block; position: fixed; inset: 0; z-index: 65;
    background: rgba(6,33,38,0.6); backdrop-filter: blur(3px);
  }
  .conteudo { padding: 16px 14px 48px; }
  .topbar { padding: 11px 15px; }
}

/* ============================================================
   5. CARDS, PAINÉIS, KPIs
   ============================================================ */
.card {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 18px; margin-bottom: 16px;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.card.glow:hover { border-color: var(--primary); box-shadow: var(--shadow-card); transform: translateY(-3px); }

/* Painel = card com cabeçalho (icone + eyebrow + titulo + ação) */
.painel { padding: 0; display: flex; flex-direction: column; min-width: 0; }
.painel-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px 0; }
.painel-titulo-area { display: flex; align-items: center; gap: 10px; min-width: 0; }
.painel-titulo { font-size: 15.5px; margin: 1px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.painel-corpo { padding: 18px; flex: 1; min-width: 0; }
.painel-cabecalho + .painel-corpo { padding-top: 14px; }
.painel-acao { flex-shrink: 0; }

/* Badge de seção (pílula com ponto pulsante) */
.sec-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(29,161,242,0.10); border: 1px solid rgba(29,161,242,0.22);
}
.sec-badge .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--primary);
  box-shadow: 0 0 0 0 rgba(29,161,242,0.6); animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(29,161,242,0.55); }
  70% { box-shadow: 0 0 0 7px rgba(29,161,242,0); }
  100% { box-shadow: 0 0 0 0 rgba(29,161,242,0); }
}

/* Divisor de seção com rótulo */
.secao-divisor { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
.secao-divisor .linha { flex: 1; height: 1px; background: var(--border-soft); }

/* KPI Card */
.kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; }
.kpi-topo { display: flex; align-items: center; justify-content: space-between; }
.kpi-icone {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent, var(--primary)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, var(--primary)) 30%, transparent);
  color: var(--accent, var(--primary));
}
.kpi-trend { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.kpi-trend .v { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 800; }
.kpi-trend .leg { font-size: 8.5px; color: var(--text-faint); font-weight: 600; margin-top: 1px; }
.kpi-rotulo { font-size: 9.5px; margin-bottom: 6px; }
.kpi-valor-linha { display: flex; align-items: baseline; gap: 4px; }
.kpi-valor { font-size: 27px; }
.kpi-unidade { font-size: 13px; font-weight: 700; color: var(--text-dim); }
.kpi-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 3px; }

/* Grid utilitário p/ KPIs e painéis */
.grid-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(214px, 100%), 1fr)); gap: 14px; margin-bottom: 16px; }
.grid-paineis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 14px; }

/* ============================================================
   6. BOTÕES, CHIPS, BADGES
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-weight: 700; font-size: 13px;
  border: none; cursor: pointer; border-radius: var(--radius-sm);
  padding: 10px 16px; white-space: nowrap; text-decoration: none;
  background: var(--primary); color: #fff; box-shadow: var(--shadow-primary);
  transition: all .18s ease; line-height: 1.2;
}
.btn:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn:active { transform: scale(0.97); }
.btn-pequeno { padding: 6px 11px; font-size: 12px; }
.btn-perigo { background: var(--erro); box-shadow: none; color: #1a0f0f; }
.btn-perigo:hover { background: #ef4444; color: #fff; }
.btn-secundario { background: transparent; color: var(--text-dim); border: 1px solid var(--border); box-shadow: none; }
.btn-secundario:hover { color: var(--text-hi); border-color: var(--primary); background: rgba(29,161,242,0.06); }
.btn-ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); box-shadow: none; }
.btn-ghost:hover { color: var(--text-hi); border-color: var(--primary); background: rgba(29,161,242,0.06); }
.btn-ghost.ativo { color: var(--primary); border-color: var(--primary); background: rgba(29,161,242,0.10); }
.btn-link { background: transparent; color: var(--text-dim); box-shadow: none; align-self: center; padding: 10px 6px; }
.btn-link:hover { color: var(--primary); background: transparent; }
.btn-sair { background: transparent; color: var(--text-dim); border: 1px solid var(--border); box-shadow: none; padding: 7px 12px; font-size: 12px; }
.btn-sair:hover { color: var(--erro); border-color: var(--erro); background: color-mix(in srgb, var(--erro) 8%, transparent); }

/* Botão somente ícone */
.icon-btn {
  width: 32px; height: 32px; display: inline-grid; place-items: center;
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  background: var(--surface-2); color: var(--text-dim); transition: all .15s; text-decoration: none;
}
.icon-btn:hover { color: var(--primary); border-color: var(--primary); background: rgba(29,161,242,0.08); }
.icon-btn.danger:hover { color: var(--st-fault); border-color: var(--st-fault); background: color-mix(in srgb, var(--st-fault) 8%, transparent); }

/* AND-04 — badge de pendências (Andon) sobre o botão-ícone da topbar */
.icon-btn-badge { position: relative; overflow: visible; }
.badge-pendencias {
  position: absolute; top: -6px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--aviso); color: #1a1a1a;
  font-size: 10px; font-weight: 800; line-height: 1; border-radius: 999px;
  border: 1.5px solid var(--surface);
}

/* Botões de paginação */
.pg-btn {
  min-width: 32px; height: 32px; padding: 0 8px; display: inline-grid; place-items: center;
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--text-dim); font-family: var(--font); font-size: 13px; font-weight: 600; transition: all .15s;
}
.pg-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--text-hi); }
.pg-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Segmentado (ex.: alternar visualização/período) */
.segmentado { display: inline-flex; gap: 3px; background: var(--surface-2); padding: 3px; border-radius: 8px; }
.segmentado button, .segmentado a {
  padding: 6px 11px; font-size: 12px; font-weight: 600; border: none; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--text-dim); font-family: var(--font); text-decoration: none;
}
.segmentado .ativo { background: var(--primary); color: #fff; }

/* Chip de estado (genérico) */
.state-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.state-dot { width: 7px; height: 7px; border-radius: 50%; }

/* Badges (pílulas de status — remapeados para o tema) */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.badge-pendente    { background: color-mix(in srgb, var(--aviso) 16%, transparent); color: var(--aviso); }
.badge-justificada { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
.badge-aprovada    { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.badge-rejeitada   { background: color-mix(in srgb, var(--erro) 16%, transparent); color: var(--erro); }
.badge-dispensada  { background: color-mix(in srgb, var(--st-idle) 16%, transparent); color: var(--text-dim); }
.badge-produzindo  { background: color-mix(in srgb, var(--st-run) 16%, transparent);   color: var(--st-run); }
.badge-parada      { background: color-mix(in srgb, var(--st-stop) 16%, transparent);  color: var(--st-stop); }
.badge-ociosa      { background: color-mix(in srgb, var(--st-idle) 18%, transparent);  color: var(--st-idle); }
.badge-manutencao  { background: color-mix(in srgb, var(--st-setup) 16%, transparent); color: var(--st-setup); }
.badge-neutro      { background: color-mix(in srgb, var(--st-idle) 16%, transparent);  color: var(--text-dim); }

/* Alertas inline (máquina muda / parada em aberto) */
.maquina-alertas { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.alerta { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 7px; font-size: .78rem; font-weight: 700; }
.alerta-muda   { background: color-mix(in srgb, var(--aviso) 14%, transparent); color: var(--aviso); border: 1px solid color-mix(in srgb, var(--aviso) 35%, transparent); }
.alerta-parada { background: color-mix(in srgb, var(--erro) 14%, transparent);  color: var(--erro);  border: 1px solid color-mix(in srgb, var(--erro) 35%, transparent); }

/* ============================================================
   7. FORMULÁRIOS E TABELAS
   ============================================================ */
label { display: block; font-weight: 700; margin: 12px 0 5px; font-size: .82rem; color: var(--text-dim); letter-spacing: .01em; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: .95rem; background: var(--surface-2); color: var(--text-hi); font-family: var(--font); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(29,161,242,0.15); }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
option { background: var(--surface); color: var(--text-hi); }

.filtros { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.filtros label { margin-top: 0; }
.filtros input, .filtros select { width: auto; min-width: 150px; }
.acao-inline { display: inline; }

.permissao-grid { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 8px; }
.permissao-grid label { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--text); margin: 0; text-transform: none; letter-spacing: 0; }
.permissao-grid input[type=checkbox] { width: auto; accent-color: var(--primary); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--primary); }

/* Tabelas */
table, table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; background: transparent; }
th { text-align: left; padding: 10px 12px; font-size: 10.5px; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-faint); border-bottom: 1px solid var(--border); }
td { padding: 11px 12px; border-bottom: 1px solid var(--border-soft); color: var(--text); }
tbody tr { transition: background .15s; }
tbody tr:hover { background: rgba(29,161,242,0.05); }
.linha-agregado td { background: color-mix(in srgb, var(--primary) 8%, transparent); font-weight: 700; color: var(--text-hi); }
/* FLU-02 — aviso inline do motivo da rejeição, logo abaixo da parada rejeitada. */
.linha-rejeicao:hover { background: transparent; }
.linha-rejeicao td { padding-top: 4px; padding-bottom: 9px; border-bottom: 1px solid var(--border-soft); font-size: 11.5px; color: var(--st-fault); }
.linha-rejeicao td .ms { vertical-align: -3px; }
.linha-rejeicao td strong { color: var(--st-fault); }

/* ============================================================
   8. DASHBOARD OEE
   ============================================================ */
.oee-resumo { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.oee-resumo strong { color: var(--text-hi); }
.oee-resumo-aviso { color: var(--text-faint); font-size: .82rem; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }

.oee-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(248px, 100%), 1fr)); }

/* Cartão de máquina (borda lateral pela cor do estado) */
.maquina-card {
  background: var(--surface); border: 1px solid var(--border-soft); border-left: 3px solid var(--st, var(--border));
  border-radius: var(--radius); padding: 16px; margin: 0;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
  container-type: inline-size;   /* permite que os pilares reajam à largura do card */
}
.maquina-card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }
.maquina-card-total { border: 1px solid rgba(29,161,242,0.35); border-left-width: 1px; }
.maquina-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Trunca nome+código juntos quando faltar largura; o badge de estado não encolhe. */
.maquina-head > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maquina-head > .state-chip { flex-shrink: 0; }
.maquina-head strong { font-size: 14px; font-weight: 800; color: var(--text-hi); }
.maquina-codigo { color: var(--text-faint); font-size: .78rem; margin-left: 6px; font-weight: 600; }

.metricas { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 13px 0; }
.metrica-rotulo { display: block; color: var(--text-faint); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.metrica-valor { font-weight: 800; color: var(--text-hi); }

.sem-justificativa {
  background: color-mix(in srgb, var(--erro) 12%, transparent); color: var(--erro);
  border: 1px solid color-mix(in srgb, var(--erro) 30%, transparent);
  border-radius: 8px; padding: 6px 10px; font-size: .82rem; margin-bottom: 12px;
}

/* Pilares OEE (Disp / Perf / Qual / OEE) */
/* Base: auto-fit (usado pelo painel consolidado, fora do card de máquina). */
.pilares { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; margin-top: 10px; }
.pilar { text-align: center; background: var(--surface-2); border-radius: 9px; padding: 9px 4px; min-width: 0; }
.pilar-oee { background: color-mix(in srgb, var(--primary) 14%, transparent); border: 1px solid rgba(29,161,242,0.25); }
.pilar-valor { display: block; font-size: clamp(.95rem, 2.6vw, 1.05rem); font-weight: 900; color: var(--text-hi); font-variant-numeric: tabular-nums; }

/* Dentro do card, o nº de colunas reage à largura do PRÓPRIO card (container
   query): 2×2 quando estreito, 4 quando há folga — nunca o 3+1 com o OEE sozinho. */
.maquina-card .pilares { grid-template-columns: repeat(2, 1fr); }
@container (min-width: 300px) {
  .maquina-card .pilares { grid-template-columns: repeat(4, 1fr); }
}
.pilar-rotulo { display: block; font-size: .68rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; margin-top: 2px; }
.pilar-oee .pilar-valor { color: var(--primary); }
.parcial { color: var(--aviso); }

.selo {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 4px 10px; border-radius: 7px;
  background: color-mix(in srgb, var(--aviso) 14%, transparent); color: var(--aviso);
  border: 1px solid color-mix(in srgb, var(--aviso) 30%, transparent); font-size: .76rem; font-weight: 600;
}
.nota-parcial { margin-top: 8px; color: var(--text-faint); font-size: .76rem; }

/* Gauge semicircular (componente gauge_svg) */
.gauge { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gauge svg { display: block; }
.gauge-label { margin-top: -2px; }

/* Ranking de barras horizontais (componente barras_ranking) */
.ranking { display: flex; flex-direction: column; gap: 11px; }
.ranking-linha { display: grid; grid-template-columns: 1fr 58px; gap: 10px; align-items: center; }
.ranking-nome { font-size: 12.5px; color: var(--text); margin-bottom: 5px; font-weight: 600; }
.ranking-trilha { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ranking-barra { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--cyan)); transition: width .6s ease; }
.ranking-valor { font-size: 12.5px; font-weight: 800; color: var(--text-hi); text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   Metas (realizado × meta)
   ============================================================ */
.metas-bloco { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.meta-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.meta-rotulo { font-size: .8rem; color: var(--text-dim); font-weight: 700; }
.meta-sem {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 7px; font-size: .76rem;
  background: var(--surface-2); color: var(--text-faint); border: 1px solid var(--border-soft);
}
.meta-ok     { background: color-mix(in srgb, var(--ok) 18%, transparent);  color: var(--ok); }
.meta-abaixo { background: color-mix(in srgb, var(--erro) 18%, transparent); color: var(--erro); }

/* ============================================================
   9. RELATÓRIOS, FLASH, LOGIN, IMPRESSÃO
   ============================================================ */
.relatorio-periodo { color: var(--text-dim); font-weight: 700; margin-top: 0; }
.secao-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.secao-cabecalho h1, .secao-cabecalho h2 { margin: 0; }
.secao-cabecalho-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.col-barra { width: 180px; }
.barra { background: var(--surface-2); border-radius: 6px; height: 14px; overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--primary); border-radius: 6px; }
.barra-aprovada > span    { background: var(--ok); }
.barra-justificada > span { background: var(--primary); }
.barra-sem > span         { background: var(--erro); }
.barra-dispensada > span  { background: var(--st-idle); }
.nota-rodape { color: var(--text-faint); font-size: .82rem; margin: 12px 0 0; }

/* Flash */
.flash { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-weight: 600; font-size: .9rem; border: 1px solid transparent; }
.flash::before { font-family: 'Material Symbols Outlined'; font-size: 19px; }
.flash-sucesso { background: color-mix(in srgb, var(--ok) 12%, transparent);    color: var(--ok);    border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.flash-sucesso::before { content: 'check_circle'; }
.flash-erro    { background: color-mix(in srgb, var(--erro) 12%, transparent);  color: var(--erro);  border-color: color-mix(in srgb, var(--erro) 30%, transparent); }
.flash-erro::before { content: 'error'; }
.flash-aviso   { background: color-mix(in srgb, var(--aviso) 12%, transparent); color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 30%, transparent); }
.flash-aviso::before { content: 'warning'; }

/* Toasts — mensagens flash flutuantes (ver app.js). Fixos no canto inferior-
   direito, acima de modais; entrada por animação CSS (degrada com reduced-motion
   e funciona sem JS — o JS só agenda a dispensa e anima a saída). Reaproveitam
   as cores/ícones da .flash. */
.toast-host {
  position: fixed; right: 18px; bottom: 18px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(380px, calc(100vw - 36px)); pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 10px;
  font-weight: 600; font-size: .9rem;
  border: 1px solid transparent; box-shadow: var(--shadow-card);
  pointer-events: auto;
  animation: toast-entra .28s cubic-bezier(.2,.8,.2,1);
}
.toast::before { font-family: 'Material Symbols Outlined'; font-size: 20px; flex-shrink: 0; line-height: 1; }
.toast-msg { flex: 1; min-width: 0; }
.toast-fechar {
  flex-shrink: 0; display: inline-grid; place-items: center;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: inherit; cursor: pointer; opacity: .65;
  transition: opacity .15s, background .15s;
}
.toast-fechar:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.toast-sucesso { color: var(--ok);    border-color: color-mix(in srgb, var(--ok) 32%, transparent);    background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.toast-sucesso::before { content: 'check_circle'; }
.toast-erro    { color: var(--erro);  border-color: color-mix(in srgb, var(--erro) 32%, transparent);  background: color-mix(in srgb, var(--erro) 12%, var(--surface)); }
.toast-erro::before { content: 'error'; }
.toast-aviso   { color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 32%, transparent); background: color-mix(in srgb, var(--aviso) 12%, var(--surface)); }
.toast-aviso::before { content: 'warning'; }
/* Saída: classe aplicada pelo JS antes de remover do DOM. */
.toast.toast-saindo { opacity: 0; transform: translateX(22px); transition: opacity .2s, transform .2s; }
@keyframes toast-entra {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Entrada de página: fade/translate sutil nos blocos principais ao carregar.
   Seletor global sobre os filhos diretos do conteúdo, cobrindo todas as telas
   sem editar página a página. Modais (animação própria) e o host de toasts
   (fixo) ficam de fora.

   Sem stagger: com atraso escalonado os blocos nasciam em opacity 0 e entravam
   um a um (~0,5s até o último), o que na navegação parecia página "sem estilo"
   se montando aos poucos. Entrada única e curta preserva o efeito sem isso. */
@keyframes anim-entrada {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.conteudo > *:not(.modal-overlay):not(#toasts) {
  animation: anim-entrada .18s cubic-bezier(.2,.8,.2,1) both;
}

/* Transição entre páginas. O sistema é multipágina (cada item do menu recarrega
   o documento), então sem isto a troca pisca: o navegador apaga a tela e repinta
   sidebar + topbar idênticas. Com View Transitions ele mantém o quadro anterior
   e faz o cross-fade só do conteúdo; sidebar e topbar têm nome próprio e
   atravessam a navegação paradas. Navegadores sem suporte ignoram o bloco e
   caem no comportamento atual. */
@view-transition { navigation: auto; }

.sidebar  { view-transition-name: vt-sidebar; }
.topbar   { view-transition-name: vt-topbar; }
.conteudo { view-transition-name: vt-conteudo; }

/* Partes persistentes: sem animação = sem piscada (o pixel não muda). */
::view-transition-old(vt-sidebar), ::view-transition-new(vt-sidebar),
::view-transition-old(vt-topbar),  ::view-transition-new(vt-topbar) {
  animation: none;
}

/* O conteúdo é a única coisa que troca: a página que sai some rápido e a que
   entra aparece por cima, sem intervalo em branco. */
::view-transition-old(vt-conteudo) {
  animation: anim-vt-sai .09s cubic-bezier(.4,0,1,1) both;
}
::view-transition-new(vt-conteudo) {
  animation: anim-vt-entra .18s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes anim-vt-sai   { to   { opacity: 0; } }
@keyframes anim-vt-entra { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .conteudo > *:not(.modal-overlay):not(#toasts) { animation: none; }
  ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}

/* Login */
.login-body { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.login-wrap { width: 100%; max-width: 380px; }
.login-marca { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 22px; }
.login-marca .marca-wordmark { height: 44px; width: auto; max-width: 100%; }
.login-marca .marca-icone { width: 54px; height: auto; flex-shrink: 0; }
@media (max-width: 480px) {
  .login-marca .marca-wordmark { height: 36px; }
}
.login-wrap .card { box-shadow: var(--shadow-card); }
.login-wrap h1 { text-align: center; font-size: 1.2rem; margin-bottom: 4px; }
.login-wrap .login-info { text-align: center; color: var(--text-faint); font-size: .82rem; margin-top: 16px; }

/* Estado vazio */
.vazio { display: grid; place-items: center; padding: 48px 20px; text-align: center; }
.vazio .ms { font-size: 42px; color: var(--text-faint); margin-bottom: 10px; }
.vazio p { color: var(--text-dim); margin: 0; }

/* ============================================================
   CRUD — cabeçalho, contador, toolbar, disclosure, formulários em grade
   (utilitários reutilizáveis por todas as páginas de cadastro)
   ============================================================ */
.crud-cabecalho { align-items: flex-end; }
.crud-cabecalho-info { min-width: 0; }
.crud-cabecalho-info h1 { margin-top: 10px; }
.crud-cabecalho-acoes { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.crud-contador { text-align: right; line-height: 1.05; }
.crud-contador .tk-title { font-size: 22px; display: block; }
.crud-contador .tk-eyebrow { font-size: 8px; }

.crud-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 14px; }
.campo-busca { position: relative; display: flex; align-items: center; flex: 1; min-width: 200px; }
.campo-busca-icone { position: absolute; left: 12px; color: var(--text-faint); pointer-events: none; }
.campo-busca input { padding-left: 38px; }

/* Disclosure de formulário (summary estilizado como botão) */
.bloco-form { margin-bottom: 16px; }
.bloco-form > summary { display: inline-flex; width: auto; list-style: none; cursor: pointer; user-select: none; }
.bloco-form > summary::-webkit-details-marker { display: none; }
.bloco-form > summary::after { content: 'expand_more'; font-family: 'Material Symbols Outlined'; font-size: 18px; transition: transform .2s; }
.bloco-form[open] > summary::after { transform: rotate(180deg); }
.bloco-form-corpo { margin-top: 12px; }
.bloco-form-corpo > h2:first-child { margin-top: 0; }

/* Qualquer <summary class="btn"> some com o marcador padrão */
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }

/* Painel destacado (modo edição) */
.painel-editar { border-color: rgba(29,161,242,0.35); }

/* Disclosure de justificativa dentro da tabela de paradas */
.justificar { display: inline-block; }
.justificar-corpo { margin-top: 8px; padding: 12px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px; min-width: 260px; text-align: left; }
.justificar-corpo label { margin-top: 8px; }
.justificar-corpo label:first-child { margin-top: 0; }

/* Disclosure da trilha de histórico (auditoria) dentro da tabela de paradas */
.historico { display: inline-block; }
.historico-corpo { margin-top: 8px; padding: 12px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px; min-width: 280px; max-width: 360px; text-align: left; }
.historico-vazio { margin: 0; color: var(--text-faint); font-size: .85rem; }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.timeline > li { display: flex; flex-direction: column; gap: 3px; padding-left: 12px; border-left: 2px solid var(--border-soft); }
.timeline-meta { color: var(--text-dim); font-size: .8rem; }
.timeline-det { color: var(--text-dim); font-size: .82rem; }
.timeline-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* Texto de ajuda dentro de um modal/formulário. */
.form-ajuda { margin: 0 0 14px; color: var(--text-faint); font-size: .85rem; line-height: 1.45; }

/* Campo de escopo travado (Nova versão a partir de um escopo existente): o valor
   continua sendo submetido (controle ainda habilitado), só o input é bloqueado. */
.campo-travado { opacity: .65; pointer-events: none; }

/* Filtros: cada rótulo+campo empilhado em coluna */
.filtros .campo { display: flex; flex-direction: column; }

/* Formulário em grade: 2+ colunas no desktop, 1 no mobile. Cada campo em .campo. */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 18px; }
.form-grid > .campo { display: flex; flex-direction: column; min-width: 0; }
.form-grid > .form-largo { grid-column: 1 / -1; }
.form-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.form-acoes .btn { margin-top: 0; }
.check-inline { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); margin-top: 14px; cursor: pointer; }
.check-inline input { width: auto; }

/* Wrapper de tabela com rolagem horizontal em telas estreitas */
.tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
.tabela-wrap > table { min-width: 560px; }
.tabela-wrap > table tbody tr:last-child td { border-bottom: none; }

/* Ações de linha (icon-btns / botões pequenos) */
td.col-acoes { text-align: right; white-space: nowrap; }
.acoes-linha { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.acoes-linha .btn { margin-top: 0; }
.cel-forte { font-weight: 700; color: var(--text-hi); }
.usuario-cel { display: inline-flex; align-items: center; gap: 10px; }
.usuario-avatar { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-weight: 900; font-size: 12px; flex-shrink: 0; background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }

/* ============================================================
   Ajustes responsivos finos
   ============================================================ */
@media (max-width: 1080px) {
  .conteudo { padding: 18px; }
}
@media (max-width: 560px) {
  .topbar-usuario-nome { display: none; }            /* só o avatar no celular */
  .topbar { gap: 10px; }
  .crud-cabecalho-acoes { width: 100%; justify-content: space-between; }
  .segmentado { width: 100%; justify-content: space-between; }
  .filtros { width: 100%; }
  .filtros .campo, .filtros input, .filtros select, .filtros .btn { width: 100%; min-width: 0; }
  .form-acoes .btn { width: 100%; justify-content: center; }
  .oee-resumo-aviso { margin-left: 0; }
}

/* ============================================================
   Impressão
   ============================================================ */
@media print {
  .sidebar, .topbar, .rodape, .no-print, .sidebar-overlay { display: none !important; }
  html, body { background: #fff; color: #000; }
  .app { display: block; }
  .conteudo { padding: 0; }
  .card, .maquina-card { border: 1px solid #ccc; border-radius: 0; box-shadow: none; }
  table { font-size: .8rem; }
  .col-barra, th.col-barra { display: none; }
  th, td { color: #000; }
}