/* =========================================================
   Armac · Programação Engenharia — estilos
   Tema claro (padrão) e escuro: [data-tema="escuro"] no <html>
   ========================================================= */
:root {
  /* marca */
  --navy: #01269e;
  --navy-700: #011d7a;
  --navy-900: #00145a;
  --royal: #0116c7;
  --azul-vivo: #2f5bff;
  --green: #07a547;
  --green-600: #058c3b;
  --lime: #84e201;
  --lime-2: #b4ea00;

  /* superfícies */
  --bg: #eef2f9;
  --bg-grad: radial-gradient(1200px 500px at 80% -10%, rgba(47, 91, 255, .07), transparent 60%);
  --surface: #ffffff;
  --surface-2: #f5f7fc;
  --surface-3: #eceff7;
  --line: #e2e7f1;
  --line-2: #cfd6e4;
  --ink: #0d1834;
  --ink-2: #44506b;
  --ink-3: #75809b;
  --link: #01269e;
  --foco: rgba(1, 38, 158, .14);

  /* menu lateral */
  --lat-bg: linear-gradient(180deg, #01269e 0%, #011b7f 55%, #00145a 100%);
  --lat-ink: rgba(255, 255, 255, .78);
  --lat-hover: rgba(255, 255, 255, .08);
  --lat-ativo: rgba(255, 255, 255, .14);

  /* status / estados (texto + fundo) */
  --plan: #3456d8;   --plan-bg: #e9efff;
  --exec: #01269e;   --exec-bg: #e3e9fb;
  --repl: #b4630a;   --repl-bg: #fff2dc;
  --lib: #058c3b;    --lib-bg: #e3f6ea;
  --perigo: #d92d20; --perigo-bg: #fdecea; --perigo-borda: #f3b6b1;
  --aviso: #a95a00;  --aviso-bg: #fff4e0;  --aviso-borda: #f6d7a6;
  --info: #01269e;   --info-bg: #e8edfd;

  /* gráficos */
  --g-plan: #6b8bff;
  --g-exec: #01269e;
  --g-repl: #f29d1d;
  --g-lib: #07a547;
  --g-sem: #b8c0d4;
  --g-ok: #07a547;
  --g-ruim: #e5484d;
  --g-c1: #c7d3fd; --g-c2: #98aef8; --g-c3: #6687f0; --g-c4: #3a5fe0; --g-c5: #173cc0; --g-c6: #0a2585;
  --g-grade: #eef1f7;
  --g-texto: #44506b;
  --barra-trilho: #e6eaf3;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(13, 24, 52, .05), 0 6px 20px rgba(13, 24, 52, .06);
  --shadow-hover: 0 2px 4px rgba(13, 24, 52, .06), 0 12px 30px rgba(13, 24, 52, .10);
  --shadow-lg: 0 24px 70px rgba(0, 20, 90, .28);
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lat-w: 260px;
  color-scheme: light;
}

[data-tema="escuro"] {
  --bg: #070c1a;
  --bg-grad: radial-gradient(1200px 500px at 80% -10%, rgba(47, 91, 255, .12), transparent 60%);
  --surface: #0f1729;
  --surface-2: #141e35;
  --surface-3: #1a2540;
  --line: #1f2a45;
  --line-2: #2b3858;
  --ink: #e8edf8;
  --ink-2: #b2bcd4;
  --ink-3: #7c88a6;
  --link: #8fa8ff;
  --foco: rgba(143, 168, 255, .22);

  --lat-bg: linear-gradient(180deg, #0a1638 0%, #071030 60%, #050b22 100%);
  --lat-ink: rgba(226, 233, 255, .72);
  --lat-hover: rgba(255, 255, 255, .06);
  --lat-ativo: rgba(143, 168, 255, .14);

  --plan: #9fb4ff;   --plan-bg: rgba(107, 139, 255, .16);
  --exec: #c3d0ff;   --exec-bg: rgba(47, 91, 255, .22);
  --repl: #ffc266;   --repl-bg: rgba(242, 157, 29, .16);
  --lib: #5fe08e;    --lib-bg: rgba(7, 165, 71, .18);
  --perigo: #ff8a80; --perigo-bg: rgba(229, 72, 77, .16); --perigo-borda: rgba(229, 72, 77, .45);
  --aviso: #ffc266;  --aviso-bg: rgba(242, 157, 29, .13); --aviso-borda: rgba(242, 157, 29, .35);
  --info: #a9bbff;   --info-bg: rgba(47, 91, 255, .16);

  --g-plan: #7d9bff;
  --g-exec: #3d6bff;
  --g-repl: #f5a83a;
  --g-lib: #22c55e;
  --g-sem: #4a5675;
  --g-ok: #22c55e;
  --g-ruim: #f0565b;
  --g-c1: #1d2c5c; --g-c2: #23408f; --g-c3: #2d56c4; --g-c4: #3f6dff; --g-c5: #7895ff; --g-c6: #b7c6ff;
  --g-grade: #1b2540;
  --g-texto: #b2bcd4;
  --barra-trilho: #1d2843;

  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .25);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, .4), 0 14px 34px rgba(0, 0, 0, .35);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  background: var(--bg-grad), var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s, color .25s;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); }
code { font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.hidden { display: none !important; }

/* =========================================================
   ESTRUTURA: menu lateral + área principal (tela toda)
   ========================================================= */
.app { min-height: 100vh; }
.lateral {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: var(--lat-w);
  background: var(--lat-bg);
  color: #fff;
  display: flex; flex-direction: column;
  padding: 22px 14px 16px;
  overflow: hidden;
}
.lateral::before, .lateral::after {
  content: ""; position: absolute; pointer-events: none; border-radius: 50%;
}
.lateral::before {
  width: 260px; height: 260px; left: -120px; bottom: -120px;
  background: linear-gradient(140deg, var(--lime-2), var(--green));
  opacity: .22; filter: blur(2px);
}
.lateral::after {
  width: 220px; height: 220px; right: -150px; bottom: 120px;
  background: var(--royal); opacity: .18;
}
.lateral > * { position: relative; z-index: 1; }
.lat-marca { padding: 4px 10px 18px; }
.lat-marca img { height: 34px; width: auto; display: block; }
.lat-sistema {
  margin: 0 6px 18px; padding: 12px 12px;
  border-radius: 12px; background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .08);
}
.lat-sistema strong { display: block; font-size: 14px; font-weight: 700; }
.lat-sistema span { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .62); margin-top: 2px; }

.lat-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; padding: 0 2px; }
.lat-nav .rotulo-sec {
  font-size: 10.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
  color: rgba(255, 255, 255, .45); padding: 8px 12px 6px;
}
.aba {
  position: relative; width: 100%;
  display: flex; align-items: center; gap: 12px;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 11px 12px; border-radius: 11px;
  color: var(--lat-ink); font-weight: 600; font-size: 14px;
  transition: background .15s, color .15s;
}
.aba svg { width: 19px; height: 19px; flex: none; }
.aba:hover { background: var(--lat-hover); color: #fff; }
.aba.ativa { background: var(--lat-ativo); color: #fff; }
.aba.ativa::before {
  content: ""; position: absolute; left: -2px; top: 9px; bottom: 9px; width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, var(--lime), var(--green));
}
.aba.ativa svg { color: var(--lime); }
.aba .badge { margin-left: auto; }
.badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: #ef4444; color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

.lat-rodape { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
.lat-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: rgba(255, 255, 255, .07); color: #fff;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 11px;
  padding: 10px 12px; cursor: pointer; font-weight: 600; font-size: 13px; text-align: left;
  transition: background .15s;
}
.lat-btn:hover { background: rgba(255, 255, 255, .14); }
.lat-btn svg { width: 17px; height: 17px; flex: none; }
.lat-btn .dir { margin-left: auto; font-size: 11px; opacity: .65; font-weight: 600; }
.lat-btn.on { background: linear-gradient(135deg, var(--green), #0bbf55); border-color: transparent; }
.ao-vivo {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: rgba(255, 255, 255, .78); padding: 2px 12px 4px;
}
.ao-vivo i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(132, 226, 1, .25); animation: pulso 2s infinite; }
.ao-vivo.off i { background: #f0b429; box-shadow: 0 0 0 3px rgba(240, 180, 41, .25); animation: none; }
@keyframes pulso { 50% { box-shadow: 0 0 0 6px rgba(132, 226, 1, 0); } }

.lat-fundo { display: none; }
.principal { margin-left: var(--lat-w); min-width: 0; }

/* =========================================================
   HERO (topo com a foto da HX220)
   ========================================================= */
.hero {
  position: relative; overflow: hidden;
  height: 250px;
  background: linear-gradient(180deg, #4f8fdc 0%, #8dbbec 60%, #c9def3 100%);
  color: #fff;
}
.hero-foto {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: min(760px, 72%);
  background: url("hx220.jpg") 55% 80% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
          mask-image: linear-gradient(90deg, transparent 0, #000 22%);
}
.hero-foto::after { /* leve escurecida embaixo para dar profundidade */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 20, 90, 0) 55%, rgba(0, 20, 90, .35) 100%);
}
.hero-faixa {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 46%;
  background: linear-gradient(120deg, var(--navy) 0%, #0a2fbf 75%, #0b33cf 100%);
  border-radius: 0 50% 50% 0 / 0 100% 100% 0;
  box-shadow: 14px 0 40px rgba(0, 20, 90, .35);
}
.hero-bolha {
  position: absolute; left: -70px; top: -60px;
  width: 210px; height: 210px; border-radius: 42% 58% 55% 45% / 50% 40% 60% 50%;
  background: linear-gradient(150deg, var(--lime-2), var(--green));
  opacity: .95;
}
.hero-bolha::after {
  content: ""; position: absolute; left: 40px; bottom: -150px; width: 140px; height: 160px;
  border-radius: 50%; background: var(--lime); opacity: .55;
}
.hero-conteudo {
  position: relative; z-index: 2; height: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 0 36px 0 150px;
}
.hero-txt { max-width: 40%; }
.hero-sobre {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--lime); margin-bottom: 4px;
}
.hero h1 { margin: 0; font-size: 30px; line-height: 1.12; font-weight: 800; letter-spacing: -.5px; }
.hero p { margin: 6px 0 0; color: rgba(255, 255, 255, .82); font-size: 14px; }
.btn-menu {
  display: none; flex: none;
  width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
  align-items: center; justify-content: center;
}
.btn-menu svg { width: 22px; height: 22px; }

[data-tema="escuro"] .hero-foto { filter: brightness(.82) saturate(.95); }
[data-tema="escuro"] .hero-faixa { background: linear-gradient(120deg, #00103f 0%, #021a66 70%, #03207a 100%); }

/* =========================================================
   CONTEÚDO
   ========================================================= */
main { padding: 22px 32px 48px; }
.aviso-demo { padding: 18px 32px 0; }
.aviso-demo div {
  background: var(--aviso-bg); color: var(--aviso); border: 1px solid var(--aviso-borda);
  padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px;
}
.aviso-demo a { color: inherit; font-weight: 700; }

.filtros {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: end;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > label, .campo > .rotulo {
  font-size: 11px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .5px;
}
.campo small { color: var(--ink-3); font-size: 12px; }
.filtros .campo { min-width: 160px; flex: 0 1 auto; }
.filtros .campo.busca { flex: 1 1 240px; }
.filtros .acoes-filtro { margin-left: auto; display: flex; gap: 8px; }

input[type=text], input[type=number], input[type=date], input[type=search], input[type=password], select, textarea {
  width: 100%;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 9px 11px; outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
textarea { resize: vertical; min-height: 72px; }
input:focus, select:focus, textarea:focus { border-color: var(--link); box-shadow: 0 0 0 4px var(--foco); background: var(--surface); }
.input-erro { border-color: var(--perigo) !important; }
select option { background: var(--surface); color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--radius-sm); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink);
  padding: 9px 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .05s, box-shadow .15s;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
.btn.prim {
  background: linear-gradient(135deg, var(--navy), var(--azul-vivo)); color: #fff; border-color: transparent;
  box-shadow: 0 4px 14px rgba(1, 38, 158, .28);
}
.btn.prim:hover { filter: brightness(1.08); }
.btn.verde { background: linear-gradient(135deg, var(--green), #10c15a); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(7, 165, 71, .25); }
.btn.verde:hover { filter: brightness(1.06); }
.btn.perigo { background: var(--surface); color: var(--perigo); border-color: var(--perigo-borda); }
.btn.perigo:hover { background: var(--perigo-bg); }
.btn.peq { padding: 6px 10px; font-size: 13px; }
.btn.fantasma { border-color: transparent; background: transparent; }
.btn.fantasma:hover { background: var(--surface-2); }

/* ---------- KPIs ---------- */
.kpis {
  display: grid; gap: 16px; margin-bottom: 20px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.kpis.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi {
  --cor: var(--navy);
  --cor-suave: rgba(1, 38, 158, .10);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 16px 15px; box-shadow: var(--shadow); position: relative; overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.kpi:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.kpi::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%;
  background: var(--cor-suave);
}
.kpi.verde { --cor: var(--green); --cor-suave: rgba(7, 165, 71, .11); }
.kpi.alerta { --cor: #e5484d; --cor-suave: rgba(229, 72, 77, .11); }
.kpi.aviso { --cor: #f29d1d; --cor-suave: rgba(242, 157, 29, .13); }
.kpi.lima { --cor: #6fbf00; --cor-suave: rgba(132, 226, 1, .16); }
[data-tema="escuro"] .kpi { --cor: #6b8bff; --cor-suave: rgba(47, 91, 255, .16); }
[data-tema="escuro"] .kpi.verde { --cor: #22c55e; --cor-suave: rgba(34, 197, 94, .13); }
[data-tema="escuro"] .kpi.alerta { --cor: #f0565b; --cor-suave: rgba(240, 86, 91, .14); }
[data-tema="escuro"] .kpi.aviso { --cor: #f5a83a; --cor-suave: rgba(245, 168, 58, .14); }
[data-tema="escuro"] .kpi.lima { --cor: #a3e635; --cor-suave: rgba(163, 230, 53, .13); }
.kpi-ic {
  position: absolute; right: 14px; top: 14px; z-index: 1;
  width: 36px; height: 36px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cor); color: #fff;
  box-shadow: 0 6px 14px -4px var(--cor);
}
.kpi-ic svg { width: 18px; height: 18px; }
.kpi-rot { position: relative; z-index: 1; font-size: 11.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .5px; padding-right: 44px; }
.kpi-val { position: relative; z-index: 1; font-size: 28px; font-weight: 800; margin-top: 10px; letter-spacing: -.6px; line-height: 1.1; }
.kpi-sub { position: relative; z-index: 1; font-size: 12.5px; color: var(--ink-2); margin-top: 5px; }

.grade { display: grid; gap: 18px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-3 { grid-column: span 3; }
.col-12 { grid-column: span 12; }

.painel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px; min-width: 0;
}
.painel-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.painel-cab h3 { margin: 0; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.painel-cab h3::before {
  content: ""; width: 4px; height: 16px; border-radius: 4px;
  background: linear-gradient(180deg, var(--lime), var(--green));
}
.painel-cab .dir { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.grafico { position: relative; height: 250px; }

.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12.5px; color: var(--ink-2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  white-space: nowrap; letter-spacing: .2px;
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.semponto::before { display: none; }
.st-PLANEJAMENTO { background: var(--plan-bg); color: var(--plan); }
.st-EXECUÇÃO { background: var(--exec-bg); color: var(--exec); }
.st-REPLANEJAR { background: var(--repl-bg); color: var(--repl); }
.st-LIBERADO { background: var(--lib-bg); color: var(--lib); }
.chip.crit { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-2); }
.chip.crit::before { display: none; }
.chip.mo-sim { background: var(--lib-bg); color: var(--lib); }
.chip.mo-nao { background: var(--perigo-bg); color: var(--perigo); }
.chip.pend { background: var(--aviso-bg); color: var(--aviso); }
.chip.aprov { background: var(--lib-bg); color: var(--lib); }
.chip.recus { background: var(--perigo-bg); color: var(--perigo); }
.chip.aplic { background: var(--info-bg); color: var(--info); }

.prazo { display: inline-flex; flex-direction: column; line-height: 1.25; }
.prazo small { font-size: 11.5px; font-weight: 600; }
.prazo.atrasado small { color: var(--perigo); }
.prazo.vence small { color: var(--aviso); }
.prazo.ok small { color: var(--lib); }
.prazo.sem small, .prazo.liberado small { color: var(--ink-3); }
.tag-manual { font-size: 10px; font-weight: 700; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 4px; margin-left: 4px; }

/* ---------- Tabela ---------- */
.tabela-wrap { overflow-x: auto; }
table.tab { width: 100%; border-collapse: separate; border-spacing: 0; }
.tab th {
  text-align: left; font-size: 11px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .5px;
  padding: 11px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line);
  white-space: nowrap; position: sticky; top: 0; cursor: pointer; user-select: none;
}
.tab th:hover { color: var(--ink); }
.tab th .seta { opacity: .35; margin-left: 3px; }
.tab th.ord { color: var(--link); }
.tab th.ord .seta { opacity: 1; }
.tab td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 13px; }
.tab tbody tr { cursor: pointer; transition: background .12s; }
.tab tbody tr:hover { background: var(--surface-2); }
.tab tbody tr:last-child td { border-bottom: 0; }
.tab tbody tr.linha-atrasada td:first-child { box-shadow: inset 3px 0 0 #e5484d; }
.tab .ativo-cod { font-weight: 800; color: var(--link); }
.tab .sub { font-size: 12px; color: var(--ink-3); }
.tab td.dir, .tab th.dir { text-align: right; }
.vazio { text-align: center; padding: 40px 10px; color: var(--ink-3); }

.cartoes { display: none; }
.cartao {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow); cursor: pointer;
}
.cartao + .cartao { margin-top: 10px; }
.cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cartao-linhas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 10px; font-size: 13px; }
.cartao-linhas b { display: block; font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .4px; }

/* ---------- Listas ---------- */
.lista-alerta { display: flex; flex-direction: column; }
.item-alerta {
  display: flex; align-items: center; gap: 12px; padding: 10px 6px;
  border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 8px;
}
.item-alerta:last-child { border-bottom: 0; }
.item-alerta:hover { background: var(--surface-2); }
.item-alerta .dias {
  min-width: 60px; text-align: center; font-weight: 800; font-size: 13px;
  border-radius: 9px; padding: 7px 4px;
}
.dias.atrasado { background: var(--perigo-bg); color: var(--perigo); }
.dias.vence { background: var(--aviso-bg); color: var(--aviso); }
.item-alerta .info { min-width: 0; flex: 1; }
.item-alerta .info strong { display: block; }
.item-alerta .info span { font-size: 12.5px; color: var(--ink-3); }

/* ---------- MO ---------- */
.colabs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.colab {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); transition: box-shadow .2s;
}
.colab:hover { box-shadow: var(--shadow-hover); }
.colab-topo { display: flex; align-items: center; gap: 11px; }
.avatar {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--navy), var(--azul-vivo));
  box-shadow: 0 6px 14px -6px rgba(1, 38, 158, .6);
}
.colab-topo strong { display: block; }
.colab-topo span { font-size: 12px; color: var(--ink-3); }
.colab ul { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.colab li {
  display: flex; justify-content: space-between; gap: 8px; align-items: center;
  font-size: 13px; background: var(--surface-2); border-radius: 9px; padding: 8px 10px;
}
.colab li.livre { justify-content: center; color: var(--ink-3); background: transparent; border: 1px dashed var(--line-2); }

.barra { height: 9px; background: var(--barra-trilho); border-radius: 99px; overflow: hidden; }
.barra > i { display: block; height: 100%; background: linear-gradient(90deg, var(--navy), var(--azul-vivo) 60%, #4fa3ff); border-radius: 99px; }
[data-tema="escuro"] .barra > i { background: linear-gradient(90deg, #2f5bff, #6b8bff 60%, #9fd0ff); }

/* ---------- Solicitações ---------- */
.solics { display: flex; flex-direction: column; gap: 12px; }
.solic {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 18px; box-shadow: var(--shadow);
}
.solic.pendente { border-left: 4px solid #f29d1d; }
.solic-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.solic-topo h4 { margin: 0; font-size: 15px; }
.solic-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.solic-motivo { margin-top: 10px; background: var(--surface-2); border-radius: 9px; padding: 9px 11px; font-size: 13px; }
.solic-resp { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.solic-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.solic-acoes input { flex: 1 1 220px; width: auto; }
.diff { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.diff td, .diff th { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.diff th { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .4px; }
.diff .antes { color: var(--perigo); text-decoration: line-through; text-decoration-color: currentColor; opacity: .85; }
.diff .depois { color: var(--lib); font-weight: 700; }
.seg { display: inline-flex; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; padding: 7px 12px; border-radius: 8px; cursor: pointer; font-weight: 600; color: var(--ink-2); font-size: 13px; }
.seg button.on { background: var(--surface); color: var(--link); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

/* ---------- Regras ---------- */
.regras-lista { margin: 0; padding-left: 18px; color: var(--ink-2); }
.regras-lista li { margin: 7px 0; }
.regras-lista b { color: var(--ink); }
.tab.matriz th { cursor: default; }
.tab.matriz tbody tr { cursor: default; }
.tab.matriz input { max-width: 130px; padding: 6px 8px; }

/* ---------- Gaveta / Modal ---------- */
.fundo {
  position: fixed; inset: 0; background: rgba(0, 12, 50, .45); backdrop-filter: blur(2px);
  z-index: 50; animation: fade .15s ease-out;
}
@keyframes fade { from { opacity: 0; } }
@keyframes sobe { from { transform: translateY(14px); opacity: 0; } }
@keyframes entra { from { transform: translateX(30px); opacity: 0; } }
.modal {
  position: fixed; z-index: 51; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(740px, calc(100vw - 24px)); max-height: calc(100vh - 32px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; animation: fade .15s ease-out;
}
.modal.peq { width: min(430px, calc(100vw - 24px)); }
.modal-cab {
  padding: 18px 20px 14px; border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; gap: 12px;
}
.modal-cab h2 { margin: 0; font-size: 17px; }
.modal-cab p { margin: 3px 0 0; color: var(--ink-3); font-size: 13px; }
.modal-cab .fechar { margin-left: auto; }
.modal-corpo { padding: 18px 20px; overflow-y: auto; }
.modal-pe {
  padding: 14px 20px; border-top: 1px solid var(--line);
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  background: var(--surface-2); border-radius: 0 0 20px 20px;
}
.form-grade { display: grid; gap: 14px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.form-grade .s2 { grid-column: span 2; }
.form-grade .s3 { grid-column: span 3; }
.form-grade .s4 { grid-column: span 4; }
.form-grade .s6 { grid-column: span 6; }
.calc-box {
  grid-column: span 6;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  background: var(--info-bg); border-radius: 12px; padding: 12px 14px;
}
.calc-box div b { display: block; font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .4px; }
.calc-box div span { font-weight: 700; color: var(--info); }
.secao-form {
  grid-column: span 6; margin: 4px 0 -4px; font-size: 12px; font-weight: 800; color: var(--link);
  text-transform: uppercase; letter-spacing: .6px; display: flex; align-items: center; gap: 8px;
}
.secao-form::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.nota {
  grid-column: span 6; font-size: 13px; background: var(--aviso-bg); color: var(--aviso);
  border-radius: 10px; padding: 10px 12px;
}
.nota.info { background: var(--info-bg); color: var(--info); }

.gaveta {
  position: fixed; z-index: 51; top: 0; right: 0; bottom: 0;
  width: min(540px, 100vw); background: var(--surface); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; animation: entra .18s ease-out;
  border-left: 1px solid var(--line);
}
.gaveta-cab {
  background: linear-gradient(130deg, var(--navy), #0b35d6); color: #fff; padding: 20px 22px; position: relative; overflow: hidden;
}
.gaveta-cab::after {
  content: ""; position: absolute; right: -60px; top: -80px; width: 180px; height: 180px;
  border-radius: 50%; background: linear-gradient(160deg, var(--lime-2), var(--green)); opacity: .9;
}
.gaveta-cab > * { position: relative; z-index: 1; }
.gaveta-cab h2 { margin: 8px 0 2px; font-size: 24px; letter-spacing: -.3px; }
.gaveta-cab p { margin: 0; color: rgba(255, 255, 255, .8); }
.gaveta-cab .fechar { position: absolute; right: 14px; top: 14px; z-index: 2; color: #fff; }
.gaveta-cab .fechar:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.gaveta-cab .chip { background: rgba(255, 255, 255, .92); }
.gaveta-corpo { padding: 18px 22px; overflow-y: auto; flex: 1; }
.gaveta-pe { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; background: var(--surface-2); }
.dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.dl div b { display: block; font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.dl div.cheio { grid-column: span 2; }
.subtitulo { font-size: 12px; font-weight: 800; color: var(--link); text-transform: uppercase; letter-spacing: .6px; margin: 22px 0 10px; }

.fechar {
  background: none; border: 0; cursor: pointer; border-radius: 8px; padding: 6px;
  display: inline-flex; color: var(--ink-3);
}
.fechar:hover { background: var(--surface-2); color: var(--ink); }
.fechar svg { width: 20px; height: 20px; }

/* ---------- Toast ---------- */
.toasts { position: fixed; z-index: 80; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: #0d1834; color: #fff; padding: 11px 16px; border-radius: 12px; box-shadow: var(--shadow-lg);
  font-weight: 600; font-size: 13.5px; animation: sobe .2s ease-out; max-width: calc(100vw - 32px);
}
.toast.ok { background: var(--green-600); }
.toast.erro { background: #d92d20; }

.carregando { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 80px 0; color: var(--ink-3); }
.spin { width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--link); border-radius: 50%; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.rodape { text-align: center; color: var(--ink-3); font-size: 12px; padding: 0 0 26px; }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 1500px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1280px) {
  .col-4, .col-5, .col-7 { grid-column: span 6; }
  .col-8, .col-9, .col-3 { grid-column: span 12; }
  .hero-faixa { width: 52%; }
  .hero-txt { max-width: 46%; }
}
@media (max-width: 1000px) {
  /* menu lateral vira gaveta */
  .lateral { transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow-lg); }
  .app.menu-aberto .lateral { transform: none; }
  .app.menu-aberto .lat-fundo { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(0, 12, 50, .45); }
  .principal { margin-left: 0; }
  .btn-menu { display: inline-flex; }
  .hero-conteudo { padding: 0 24px 0 110px; }
  main { padding: 18px 20px 44px; }
  .aviso-demo { padding: 16px 20px 0; }
}
@media (max-width: 860px) {
  .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: span 12; }
  .tabela-wrap.resp { display: none; }
  .cartoes { display: block; }
  .hero-faixa { width: 60%; }
  .hero-foto { width: 80%; }
  .hero-txt { max-width: 56%; }
}
@media (max-width: 640px) {
  .hero { height: 168px; }
  .hero-bolha { width: 130px; height: 130px; left: -60px; top: -50px; }
  .hero-conteudo { padding: 0 16px; align-items: flex-start; padding-top: 18px; flex-direction: column; gap: 10px; }
  .hero h1 { font-size: 23px; }
  .hero p { font-size: 12.5px; max-width: 70%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hero-sobre { display: none; }
  .hero-faixa { width: 100%; border-radius: 0; box-shadow: none; background: linear-gradient(100deg, rgba(1, 38, 158, .97) 0%, rgba(10, 47, 191, .88) 50%, rgba(11, 51, 207, .15) 100%); }
  .hero-foto { width: 100%; background-position: 78% 75%; -webkit-mask-image: none; mask-image: none; }
  .hero-txt { max-width: 100%; }
  main { padding: 14px 16px 44px; }
  .aviso-demo { padding: 14px 16px 0; }
  .kpis, .kpis.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi-val { font-size: 22px; }
  .kpi-ic { width: 30px; height: 30px; border-radius: 9px; }
  .kpi-ic svg { width: 15px; height: 15px; }
  .filtros .campo { min-width: calc(50% - 6px); flex: 1 1 calc(50% - 6px); }
  .filtros .campo.busca { flex-basis: 100%; }
  .filtros .acoes-filtro { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .filtros .acoes-filtro .btn { flex: 1; min-width: 0; white-space: normal; }
  .form-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grade .s2, .form-grade .s3 { grid-column: span 1; }
  .form-grade .s4, .form-grade .s6, .calc-box, .secao-form, .nota { grid-column: span 2; }
  .calc-box { grid-template-columns: 1fr 1fr; }
  .modal { top: auto; bottom: 0; transform: translateX(-50%); border-radius: 20px 20px 0 0; width: 100vw; max-height: 92vh; }
  .modal-pe { border-radius: 0; }
  .modal-pe .btn { flex: 1; }
  .grafico { height: 220px; }
}

@media print {
  .lateral, .hero, .filtros .acoes-filtro, .aviso-demo { display: none !important; }
  .principal { margin: 0; }
  body { background: #fff; }
}

/* =========================================================
   M+1 — quadro semanal
   ========================================================= */
.m1-topo { margin-bottom: 18px; padding: 16px 18px 12px; }
.m1-nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.m1-seta { font-size: 20px; line-height: 1; padding: 4px 13px 7px; }
.m1-mes { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.m1-mes h3 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
.m1-mes .chip { align-self: center; }
.m1-dica { margin-left: auto; font-size: 12.5px; }
.faixa-semanas {
  display: flex; gap: 6px; overflow-x: auto; margin-top: 14px; padding: 2px 2px 8px;
  scrollbar-width: thin;
}
.sem-chip {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 46px; padding: 6px 4px; border-radius: 10px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3);
  transition: background .15s, border-color .15s, transform .1s;
}
.sem-chip:hover { border-color: var(--link); transform: translateY(-1px); }
.sem-chip b { font-size: 11.5px; color: var(--ink-2); }
.sem-chip span { font-size: 12px; font-weight: 800; }
.sem-chip.tem span { color: var(--link); }
.sem-chip.no-mes { background: var(--info-bg); border-color: var(--link); }
.sem-chip.no-mes b { color: var(--link); }
.sem-chip.hoje { box-shadow: inset 0 -3px 0 var(--green); }

.quadro {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr);
  gap: 14px; overflow-x: auto; padding-bottom: 10px; align-items: start;
}
.coluna {
  background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; min-height: 260px; max-height: calc(100vh - 120px);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.coluna.backlog { background: transparent; border-style: dashed; border-color: var(--line-2); }
.coluna.atual { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.coluna.sobre { border-color: var(--link); background: var(--info-bg); box-shadow: 0 0 0 3px var(--foco); }
.coluna-cab { display: flex; align-items: center; gap: 10px; padding: 12px 14px 6px; }
.coluna-tit b { display: block; font-size: 14.5px; }
.coluna-tit span { display: block; font-size: 12px; color: var(--ink-3); }
.coluna-qtd {
  margin-left: auto; min-width: 28px; height: 28px; border-radius: 9px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800;
  background: linear-gradient(135deg, var(--navy), var(--azul-vivo)); color: #fff;
}
.coluna.backlog .coluna-qtd { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-2); }
.coluna-tot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 14px 10px; font-size: 13px; color: var(--ink-2); }
.coluna-tot .num { margin-right: auto; }
.coluna-corpo { display: flex; flex-direction: column; gap: 10px; padding: 4px 10px 10px; overflow-y: auto; flex: 1; }
.coluna-vazia {
  text-align: center; color: var(--ink-3); font-size: 12.5px; padding: 26px 10px;
  border: 1px dashed var(--line-2); border-radius: 12px;
}
.coluna-add { margin: 0 10px 10px; justify-content: center; border: 1px dashed var(--line-2) !important; }

.m1-card {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 12px 10px; box-shadow: var(--shadow); cursor: grab;
  transition: box-shadow .15s, transform .15s, opacity .15s;
}
.m1-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.m1-card.atrasado { box-shadow: inset 3px 0 0 #e5484d, var(--shadow); }
.m1-card.arrastando { opacity: .45; cursor: grabbing; }
.m1-card-topo { display: flex; align-items: center; gap: 6px; }
.m1-card-topo b { color: var(--link); font-size: 14px; font-weight: 800; }
.m1-card-topo .chip { padding: 2px 8px; font-size: 10.5px; }
.m1-esp { flex: 1; }
.m1-card-sub { font-size: 12px; color: var(--ink-3); margin: 3px 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m1-card-linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; margin-top: 5px; }
.m1-card-linha .prazo { font-size: 12.5px; }
.m1-mover { margin-top: 9px; width: 100%; }

@media (max-width: 640px) {
  .m1-dica { display: none; }
  .m1-mes h3 { font-size: 18px; }
  .quadro { grid-auto-columns: 86%; scroll-snap-type: x mandatory; }
  .coluna { scroll-snap-align: start; max-height: none; }
}
@media (max-width: 640px) {
  .m1-nav { gap: 8px; }
  .m1-mes { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
  .m1-mes h3 { font-size: 17px; }
}

.m1-novo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: 12px;
  padding: 10px 12px; font-size: 13px; color: var(--ink-2);
}
.m1-novo > svg { width: 16px; height: 16px; color: var(--link); }
.m1-novo .btn { margin-left: auto; }

/* ---------- Ativos fora da programação ---------- */
.chip.fora-pend { background: var(--aviso-bg); color: var(--aviso); }
.chip.fora-and { background: var(--plan-bg); color: var(--plan); }
.chip.fora-ok { background: var(--lib-bg); color: var(--lib); }
.tab td.fora-ativ { max-width: 360px; white-space: normal; line-height: 1.35; }
.tab th.sem-ordem { cursor: default; }

/* ---------- Menu lateral recolhível ---------- */
.lat-marca { display: flex; align-items: center; gap: 8px; }
.logo-simbolo { display: none !important; height: 32px !important; }
.lat-recolher {
  margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .14);
}
.lat-recolher:hover { background: rgba(255, 255, 255, .18); }
.lat-recolher svg { width: 17px; height: 17px; }
.lateral, .principal { transition: width .22s ease, margin-left .22s ease, transform .22s ease; }
@media (min-width: 1001px) {
  .app.recolhido { --lat-w: 78px; }
  .app.recolhido .lateral { padding-left: 10px; padding-right: 10px; }
  .app.recolhido .lat-marca { flex-direction: column; padding: 0 0 14px; gap: 12px; }
  .app.recolhido .logo-cheio, .app.recolhido .lat-sistema, .app.recolhido .rotulo-sec,
  .app.recolhido .aba > span:not(.badge), .app.recolhido .lat-btn span, .app.recolhido .ao-vivo span { display: none !important; }
  .app.recolhido .logo-simbolo { display: block !important; }
  .app.recolhido .lat-recolher { margin: 0; }
  .app.recolhido .aba, .app.recolhido .lat-btn { justify-content: center; padding-left: 0; padding-right: 0; }
  .app.recolhido .aba .badge { position: absolute; top: 4px; right: 6px; min-width: 17px; height: 17px; font-size: 10px; padding: 0 4px; }
  .app.recolhido .ao-vivo { justify-content: center; padding: 2px 0 4px; }
}
@media (max-width: 1000px) { .lat-recolher { display: none; } }

/* ---------- Nova data de liberação ---------- */
.nova-lib { display: inline-flex; align-items: center; gap: 2px; }
.nova-lib-edit { padding: 4px; }
.nova-lib-edit svg { width: 14px; height: 14px; }
.nova-lib-add { border-style: dashed; color: var(--perigo); border-color: var(--perigo-borda); white-space: nowrap; }
.nova-lib-add:hover { background: var(--perigo-bg); }
.tab td .prazo.vence small, .tab td .prazo.ok small { font-weight: 600; }