:root {
  --fundo: #1b1f3b;
  --fundo2: #151832;
  --card: #252a4a;
  --card2: #2c3257;
  --texto: #e6e8f2;
  --texto2: #8a90b5;
  --grade: rgba(138, 144, 181, .14);
  --trilho: #343a63;
  --marca: #b8323f;
  --marca2: #e5485a;
  /* Paleta dos gráficos - validada (contraste e daltonismo) no fundo escuro. Meta = sempre azul. */
  --vermelho: #e5485a;  --vermelho-escuro: #b8323f;
  --petroleo: #22a6b3;  --petroleo-escuro: #147580;
  --laranja: #d9772c;   --laranja-escuro: #9e5019;
  --azul: #5b7cfa;      --azul-escuro: #3d55c4;
  --roxo: #a970e8;      --roxo-escuro: #7246b0;
  --ok: #3ccf91;
  --erro: #ff6b7a;
  --raio: 16px;
  --sombra: 0 10px 30px rgba(5, 7, 25, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(91, 124, 250, .16), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(229, 72, 90, .14), transparent 60%),
    var(--fundo);
  background-attachment: fixed;
  display: flex;
}

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0; }
h1 small, h2 small { color: var(--texto2); font-weight: 400; font-size: .8em; }
h2 { font-size: 1rem; margin: 0 0 14px; color: var(--texto); font-weight: 600; }

/* Menu lateral */
.menu {
  width: 230px;
  flex-shrink: 0;
  padding: 24px 16px;
  background: rgba(21, 24, 50, .75);
  backdrop-filter: blur(12px);
  border-right: 1px solid var(--grade);
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.logo { width: 100%; max-width: 190px; }
.menu nav { display: flex; flex-direction: column; gap: 10px; }
.menu nav a {
  padding: 12px 16px;
  border-radius: 12px;
  color: var(--texto);
  background: var(--card);
  box-shadow: var(--sombra);
  transition: transform .2s, background .3s, box-shadow .3s;
}
.menu nav a:hover { text-decoration: none; transform: translateX(4px); background: var(--card2); }
.menu nav a.ativo {
  background: linear-gradient(135deg, var(--marca), var(--marca2));
  box-shadow: 0 8px 24px rgba(229, 72, 90, .4);
  font-weight: 600;
}
.quem { margin-top: auto; color: var(--texto2); font-size: .9rem; display: flex; flex-direction: column; gap: 4px; }

main { flex: 1; min-width: 0; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
main.solo { align-items: center; justify-content: center; }

/* Cards com entrada em cascata */
.card {
  background: linear-gradient(160deg, var(--card2), var(--card));
  border-radius: var(--raio);
  padding: 20px;
  box-shadow: var(--sombra);
  border: 1px solid rgba(255, 255, 255, .03);
  animation: surge .6s cubic-bezier(.2, .8, .2, 1) both;
  transition: transform .25s, box-shadow .25s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(5, 7, 25, .55), 0 0 0 1px rgba(91, 124, 250, .18); }
main > :nth-child(2), .kpis > :nth-child(1), .grade2 > :nth-child(1) { animation-delay: .05s; }
main > :nth-child(3), .kpis > :nth-child(2), .grade2 > :nth-child(2) { animation-delay: .1s; }
main > :nth-child(4), .kpis > :nth-child(3), .grade2 > :nth-child(3) { animation-delay: .15s; }
main > :nth-child(5), .kpis > :nth-child(4), .grade2 > :nth-child(4) { animation-delay: .2s; }
.kpis > :nth-child(5) { animation-delay: .25s; }
.kpis > :nth-child(6) { animation-delay: .3s; }
@keyframes surge { from { opacity: 0; transform: translateY(14px) scale(.98); } }

.titulo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.grade2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 20px; }

/* KPIs */
.kpis, .aneis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.aneis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Cor de destaque por cartão (como no modelo: cada indicador com a sua cor) */
.c-vermelho { --c: var(--vermelho); --c2: var(--vermelho-escuro); }
.c-petroleo { --c: var(--petroleo); --c2: var(--petroleo-escuro); }
.c-laranja  { --c: var(--laranja);  --c2: var(--laranja-escuro); }
.c-azul     { --c: var(--azul);     --c2: var(--azul-escuro); }
.c-roxo     { --c: var(--roxo);     --c2: var(--roxo-escuro); }
.card[class*="c-"] { border-top: 3px solid var(--c); }
.card[class*="c-"] h2::before {
  content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  background: var(--c); margin-right: 8px; box-shadow: 0 0 10px var(--c);
}

.kpi { display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; }
.kpi b { font-size: 2rem; font-weight: 700; letter-spacing: -.5px; }
.kpi span { color: var(--texto2); font-size: .85rem; padding-right: 44px; }
.kpi::after { /* brilho da cor no canto */
  content: ""; position: absolute; right: -30px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%;
  background: var(--c, transparent); opacity: .14; filter: blur(10px);
}
.kpi .icone {
  position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--c2), var(--c)); box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
.kpi .icone svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kpi.ok b { color: var(--ok); }
.kpi.falta b { color: var(--marca2); }

.anel { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.anel span { color: var(--texto2); font-size: .85rem; }
.anel-graf { position: relative; width: 140px; height: 140px; }
.anel-graf b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.35rem; }
.anel-graf::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  box-shadow: 0 0 40px color-mix(in srgb, var(--c, var(--vermelho)) 35%, transparent), inset 0 0 20px rgba(0, 0, 0, .35);
}

.graf { position: relative; height: 300px; }

/* Formulários */
.form { display: flex; flex-direction: column; gap: 14px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--texto2); }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--texto); }
input, select, textarea {
  font: inherit;
  color: var(--texto);
  background: var(--fundo2);
  border: 1px solid var(--trilho);
  border-radius: 10px;
  padding: 10px 12px;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(91, 124, 250, .25); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--marca2); padding: 0; }
input[type=month] { color-scheme: dark; }
button, .sec {
  font: inherit;
  font-weight: 600;
  border: 0;
  border-radius: 10px;
  padding: 11px 18px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--marca), var(--marca2));
  box-shadow: 0 6px 18px rgba(229, 72, 90, .35);
  transition: transform .15s, box-shadow .2s, filter .2s;
  text-align: center;
}
button:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 10px 26px rgba(229, 72, 90, .5); }
button:active { transform: translateY(0); }
.sec { background: var(--card2); box-shadow: none; color: var(--texto); }
.sec:hover { text-decoration: none; filter: brightness(1.15); }
button.link { background: none; box-shadow: none; padding: 0; color: var(--erro); font-weight: 400; }
button.link:hover { transform: none; text-decoration: underline; }

.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; position: relative; z-index: 5; }
.filtros label { min-width: 150px; }

/* Filtro múltiplo com pesquisa */
.multi { position: relative; flex: 1 1 140px; max-width: 240px; min-width: 0; }
.multi summary {
  list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px;
  background: var(--fundo2); border: 1px solid var(--trilho); border-radius: 10px; padding: 7px 34px 7px 12px;
  position: relative; transition: border-color .2s;
}
.multi summary::-webkit-details-marker { display: none; }
.multi summary small { color: var(--texto2); font-size: .72rem; }
.multi summary span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.multi summary::after { content: "▾"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--texto2); transition: transform .2s; }
.multi[open] summary { border-color: var(--azul); }
.multi[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.multi .painel {
  position: absolute; top: calc(100% + 6px); left: 0; width: max(100%, 280px); z-index: 20;
  padding: 10px; display: flex; flex-direction: column; gap: 6px;
  background: var(--card2); border: 1px solid var(--trilho); border-radius: 12px; box-shadow: var(--sombra);
  animation: surge .2s both;
}
.multi .opcoes { max-height: 280px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.multi .check { padding: 5px 6px; border-radius: 8px; cursor: pointer; font-size: .88rem; }
.multi .check:hover { background: rgba(91, 124, 250, .12); }
.multi .todos { border-bottom: 1px solid var(--trilho); border-radius: 8px 8px 0 0; font-weight: 600; }
.multi .grupo-rotulo { font-weight: 700; color: var(--petroleo); }
.multi .itens { padding-left: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.multi .opcoes { overflow-x: hidden; }
.multi [hidden] { display: none !important; }

/* Campo com lista pesquisável (Meus treinamentos) */
.combo { position: relative; }
.combo > input:not([type=hidden]) { width: 100%; padding-right: 34px; }
.combo::after { content: "⌕"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--texto2); pointer-events: none; }
.combo-lista {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; margin: 0; padding: 6px; list-style: none;
  max-height: 260px; overflow: auto; background: var(--card2); border: 1px solid var(--trilho); border-radius: 12px;
  box-shadow: var(--sombra); animation: surge .15s both;
}
.combo-lista li { padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--texto); font-size: .9rem; }
.combo-lista li.ativo, .combo-lista li:hover { background: rgba(91, 124, 250, .16); }
.combo-lista li.novo { color: var(--petroleo); font-weight: 600; }
.combo-lista li.vazio { color: var(--texto2); cursor: default; background: none; }

/* Tabelas */
.rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabela th { text-align: left; color: var(--texto2); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--trilho); white-space: nowrap; }
.tabela td { padding: 8px 10px; border-bottom: 1px solid var(--grade); }
.tabela tbody tr { transition: background .15s; }
.tabela tbody tr:hover { background: rgba(91, 124, 250, .08); }
.tabela tfoot td { font-weight: 700; border-top: 1px solid var(--trilho); }
.tabela .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela .c { text-align: center; }
.tabela .acoes { white-space: nowrap; display: flex; gap: 12px; align-items: center; }
.tabela .acoes form { margin: 0; }
.matriz th:first-child, .matriz td:first-child { position: sticky; left: 0; background: var(--card); white-space: nowrap; }
.matriz .grupo td { font-weight: 700; background: rgba(229, 72, 90, .08); }
.matriz .grupo td:first-child { background: #2e2c4e; }
tr.apagado { opacity: .5; }

.sobe { color: var(--ok); }
.desce { color: var(--erro); }
.tag { font-size: .7rem; padding: 2px 8px; border-radius: 99px; background: var(--azul); color: #fff; vertical-align: middle; }
.falta { color: var(--erro); }
.dica { color: var(--texto2); font-size: .88rem; }
.erro, .ok { margin: 0; padding: 12px 16px; border-radius: 12px; animation: surge .4s both; }
.erro { background: rgba(255, 107, 122, .14); color: var(--erro); }
.ok { background: rgba(60, 207, 145, .14); color: var(--ok); }
code { background: var(--fundo2); padding: 1px 6px; border-radius: 6px; }

/* Login */
.login { width: min(400px, 100%); text-align: center; padding: 36px 32px; }
.login .logo { margin: 0 auto 8px; display: block; }
.login h1 { margin-bottom: 20px; font-size: 1.25rem; color: var(--texto2); font-weight: 500; }
.login form { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.login input { font-size: 1.1rem; }
.login input[name=codigo] { letter-spacing: 8px; text-align: center; font-size: 1.5rem; }

/* Celular */
@media (max-width: 800px) {
  body { flex-direction: column; }
  .menu { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; }
  .logo { max-width: 140px; }
  .menu nav { flex-direction: row; flex-wrap: wrap; }
  .menu nav a { padding: 8px 12px; }
  .quem { margin: 0 0 0 auto; flex-direction: row; gap: 10px; }
  main { padding: 16px; }
  .grade2 { grid-template-columns: 1fr; }
  .kpi b { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}