:root {
  --bg: #dce9df;
  --panel: #eef5f0;
  --panel2: #e7f1e9;
  --line: #bfd2c3;
  --text: #153222;
  --muted: #5e7467;
  --green: #35c94f;
  --green2: #059b49;
  --blue: #168e83;
  --orange: #d8861b;
  --purple: #7158bd;
}

body {
  background:
    radial-gradient(circle at 88% -5%, rgba(98, 224, 50, .28), transparent 29%),
    radial-gradient(circle at 53% 108%, rgba(0, 164, 78, .15), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .5), transparent 48%),
    var(--bg);
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 245px;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  z-index: 20;
  background: linear-gradient(180deg, #10271a 0%, #0b1d13 72%, #08170f 100%);
  border-right-color: #294735;
  box-shadow: 16px 0 45px rgba(3, 13, 8, .25);
}

body.app-shell { display: block; min-height: 100vh; }
body.app-shell > main { margin-left: 245px; min-height: 100vh; }

.brand {
  min-height: 130px;
  justify-content: center;
  padding: 0 12px 22px;
  overflow: hidden;
}

.brand-logo {
  display: block;
  width: 112px;
  height: 132px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(105, 242, 11, .22));
}

.login-brand {
  padding-bottom: 12px;
}

.login-logo {
  display: block;
  width: 155px;
  height: 205px;
  object-fit: contain;
  margin: -25px auto -14px;
  filter: drop-shadow(0 0 24px rgba(105, 242, 11, .25));
}

.sidebar nav a:hover,
.sidebar nav a.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(105, 242, 11, .2), rgba(255, 255, 255, .04));
  box-shadow: inset 3px 0 #69f20b;
}

.sidebar nav a { color: #b9cec1; }
.sidebar-foot { color: #96b1a0; border-top-color: #294735; }

.btn-primary {
  background: linear-gradient(135deg, #76ff12 0%, #20d65f 48%, #00a950 100%);
  color: #081008;
  box-shadow: 0 10px 26px rgba(0, 184, 90, .18);
}

.metric.accent {
  border-color: rgba(45, 177, 69, .42);
  background: linear-gradient(145deg, #d9f2dd, #eef7f0);
}

.metric::after {
  background: rgba(105, 242, 11, .055);
}

.metric-icon.green,
.quality.verde {
  background: rgba(105, 242, 11, .12);
}

.entity-icon,
.file-icon,
.avatar {
  background: linear-gradient(145deg, rgba(105, 242, 11, .13), rgba(0, 184, 90, .1));
}

.login-card {
  border-color: rgba(35, 145, 64, .25);
  background: linear-gradient(150deg, rgba(241, 248, 243, .98), rgba(224, 238, 228, .98));
  box-shadow: 0 30px 90px rgba(24, 69, 40, .18);
}

.auth-shell {
  background:
    radial-gradient(circle at 50% -10%, rgba(105, 242, 11, .25), transparent 38%),
    radial-gradient(circle at 80% 100%, rgba(0, 184, 90, .14), transparent 32%),
    linear-gradient(145deg, #e4efe7, #d2e3d7);
}

/* Tema G3 Neo Energy: verde-salvia, grafite da marca e luz eletrica. */
.topbar {
  background: rgba(235, 245, 238, .9);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 28px rgba(24, 69, 40, .08);
}

.panel,
.metric {
  background: linear-gradient(145deg, rgba(243, 249, 245, .94), rgba(229, 240, 232, .94));
  border-color: rgba(85, 128, 99, .25);
  box-shadow: inset 0 1px rgba(255,255,255,.7), 0 12px 34px rgba(28, 75, 44, .08);
}

.btn {
  background: rgba(239, 247, 241, .9);
  color: var(--text);
  border-color: #afc9b7;
  box-shadow: 0 4px 14px rgba(24, 69, 40, .06);
}

.btn:hover { background: #dcecdf; border-color: #76ad86; }
.btn-primary {
  color: #052511;
  border: 0;
  background: linear-gradient(135deg, #73ed28 0%, #27c65a 52%, #07984a 100%);
  box-shadow: 0 9px 22px rgba(7, 152, 74, .18);
}
.btn-ghost { background: transparent; }
.topbar .btn-ghost { background: rgba(229, 240, 232, .8); }
.user-chip > span { background: rgba(39, 178, 67, .13); color: #087d3c; }
.menu-toggle { color: var(--text); }

td { color: #324d3d; border-bottom-color: rgba(87, 124, 99, .2); }
tbody tr:hover { background: rgba(46, 176, 71, .055); }
th { color: #617b6b; }
.ranking b { background: rgba(39, 178, 67, .13); color: #087d3c; }
.metric em { color: #718579; }
.badge,
.quality { background: rgba(40, 164, 68, .12); color: #176f38; }

input,
select,
textarea {
  color-scheme: light;
  background: rgba(244, 249, 245, .92);
  color: var(--text);
  border-color: #abc3b2;
}

input::placeholder,
textarea::placeholder { color: #879b8e; }
.form-grid label,
.stack label,
.filter-inline label { color: #4c6757; }

.notice {
  background: rgba(210, 237, 217, .72);
  border-color: rgba(79, 169, 101, .42);
  color: #305f40;
}

.notice.warning {
  background: rgba(250, 235, 205, .72);
  border-color: rgba(205, 147, 55, .45);
  color: #855813;
}

.dropzone {
  background: rgba(233, 243, 236, .72);
  border-color: #8bad96;
}
.dropzone:hover { background: rgba(218, 237, 223, .9); }
.flow-steps span { background: rgba(193, 215, 199, .55); }
.share-progress { background: #c5d8ca; }
.permission-card,
.check-row { background: rgba(236, 245, 238, .82); }
.permission-card:hover { background: rgba(220, 237, 224, .9); border-color: #7ca88a; }
.permission-card:has(input:checked) { background: rgba(205, 235, 212, .9); border-color: #4ead68; }
.alert-success { background: rgba(203, 237, 211, .85); color: #176a36; }
.alert-danger { background: rgba(248, 216, 219, .86); color: #98343b; }
.secure-note { color: #70867a; }

@media (max-width: 800px) {
  .brand { min-height: 115px; }
  .brand-logo { width: 98px; height: 112px; }
}

.report-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.energy-flow-panel {
  overflow: hidden;
}

.energy-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(125px, 1fr) auto) minmax(155px, 1.15fr);
  align-items: center;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.energy-flow > div {
  min-height: 108px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(224, 239, 227, .82), rgba(240, 247, 242, .9));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.energy-flow > div span {
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 8px;
}

.energy-flow > div small {
  color: var(--muted);
  margin-bottom: 7px;
}

.energy-flow > div strong { white-space: nowrap; }
.energy-flow > div.result { border-color: rgba(105, 242, 11, .4); }
.energy-flow > i { color: var(--green); font-style: normal; font-size: 18px; }

@media (max-width: 1150px) {
  .report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .report-metrics { grid-template-columns: 1fr; }
}

/* Acabamento premium e movimento visual da identidade G3. */
body.app-shell { isolation: isolate; }
body.app-shell::before,
body.app-shell::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(12px);
}
body.app-shell::before {
  width: 420px;
  height: 420px;
  right: -150px;
  top: 90px;
  background: radial-gradient(circle, rgba(79, 218, 64, .18), rgba(79, 218, 64, 0) 68%);
}
body.app-shell::after {
  width: 360px;
  height: 360px;
  left: 30%;
  bottom: -210px;
  background: radial-gradient(circle, rgba(0, 158, 92, .15), rgba(0, 158, 92, 0) 70%);
}
.sidebar { z-index: 20; }
body.app-shell > main { position: relative; z-index: 1; }

.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(53, 201, 79, .6), transparent);
}

.brand-logo {
  transition: transform .3s ease, filter .3s ease;
}
.brand:hover .brand-logo {
  transform: translateY(-2px) scale(1.025);
  filter: drop-shadow(0 7px 18px rgba(105, 242, 11, .3));
}
.sidebar nav a {
  position: relative;
  border: 1px solid transparent;
  transition: color .2s ease, background .2s ease, transform .2s ease, border-color .2s ease;
}
.sidebar nav a:hover { transform: translateX(3px); }
.sidebar nav a.active { border-color: rgba(105, 242, 11, .13); }
.sidebar nav a span { color: #73e94a; }

.page-head h1,
.plant-hero h1,
.report-head h1 {
  color: #153222;
  text-shadow: 0 1px rgba(255,255,255,.7);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #087b3c;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, #69ef28, #059b49);
  box-shadow: 0 0 10px rgba(53, 201, 79, .35);
}

.panel,
.metric {
  backdrop-filter: blur(14px);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.panel:hover,
.metric:hover {
  transform: translateY(-2px);
  border-color: rgba(57, 151, 83, .38);
  box-shadow: inset 0 1px rgba(255,255,255,.8), 0 18px 38px rgba(28, 75, 44, .11);
}
.metric { border-top-color: rgba(53, 201, 79, .38); }
.metric strong { color: #173a26; }
.metric-icon {
  border: 1px solid rgba(53, 201, 79, .14);
  box-shadow: 0 6px 14px rgba(24, 98, 49, .08);
}

.btn {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary:hover {
  background: linear-gradient(135deg, #7cf235 0%, #37d25d 52%, #07984a 100%);
  box-shadow: 0 12px 26px rgba(7, 152, 74, .24);
}

.tabs {
  width: fit-content;
  max-width: 100%;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(86, 130, 100, .25);
  border-radius: 14px;
  background: rgba(234, 243, 236, .72);
  box-shadow: inset 0 1px rgba(255,255,255,.65), 0 8px 20px rgba(30, 75, 45, .06);
}
.tabs a {
  padding: 10px 15px;
  border-radius: 10px;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.tabs a:hover { color: #087b3c; background: rgba(53, 201, 79, .08); }
.tabs a.active {
  color: #effff2;
  border-bottom: 0;
  background: linear-gradient(135deg, #1a5933, #087a3d);
  box-shadow: 0 7px 17px rgba(13, 100, 51, .2);
}

.table-panel table thead {
  background: rgba(193, 216, 199, .25);
}
.table-panel tbody tr { transition: background .18s ease; }
.entity strong,
.feed strong,
.ranking strong { color: #1c3b29; }
.entity-icon,
.file-icon,
.avatar {
  border: 1px solid rgba(44, 165, 69, .15);
  box-shadow: 0 6px 15px rgba(19, 87, 41, .08);
}

.user-chip {
  padding: 5px 8px 5px 5px;
  border-radius: 99px;
  transition: background .2s ease;
}
.user-chip:hover { background: rgba(53, 201, 79, .08); }
.searchbar input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: #35b755;
  box-shadow: 0 0 0 4px rgba(53, 183, 85, .1);
}

@media (prefers-reduced-motion: reduce) {
  .panel, .metric, .btn, .sidebar nav a, .brand-logo { transition: none !important; }
}

@media (max-width: 800px) {
  body.app-shell > main { margin-left: 0; }
  .sidebar { left: -260px; }
  .sidebar.open { left: 0; }
}

@media print {
  body.app-shell > main { margin-left: 0; }
}

.brand-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  align-content: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(105, 242, 11, .16), transparent 29%),
    linear-gradient(145deg, #050806, #0a100c 58%, #07120a);
  opacity: 1;
  visibility: visible;
  transition: opacity .65s ease, visibility .65s ease;
}

.brand-splash.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.brand-splash img {
  position: relative;
  z-index: 2;
  width: 176px;
  height: 260px;
  object-fit: contain;
  filter: drop-shadow(0 0 32px rgba(105, 242, 11, .32));
  animation: splash-logo 1.4s cubic-bezier(.2,.8,.2,1) both;
}

.brand-splash p {
  margin: -16px 0 22px;
  color: #b8c7bd;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.4px;
  animation: splash-copy .8s .55s ease both;
}

.splash-orbit {
  position: absolute;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(105, 242, 11, .12);
  border-top-color: rgba(105, 242, 11, .75);
  border-radius: 50%;
  animation: splash-spin 2s linear infinite;
}

.splash-loader {
  width: 190px;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
}

.splash-loader span {
  display: block;
  width: 48%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #69f20b, #00b85a);
  animation: splash-progress 1.55s ease-in-out both;
}

@keyframes splash-logo {
  0% { opacity: 0; transform: scale(.7) translateY(20px); filter: blur(8px); }
  55% { opacity: 1; transform: scale(1.06) translateY(0); filter: blur(0) drop-shadow(0 0 42px rgba(105, 242, 11, .46)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 32px rgba(105, 242, 11, .32)); }
}

@keyframes splash-copy { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes splash-spin { to { transform: rotate(360deg); } }
@keyframes splash-progress { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

@media (prefers-reduced-motion: reduce) {
  .brand-splash *, .brand-splash { animation-duration: .01ms !important; }
}

/* G3 compact Copel chart and cotista actions */
.copel-chart-panel {
  position: relative;
  overflow: hidden;
  min-height: 0;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(240,250,243,.86));
}
.copel-chart-panel::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -85px;
  top: -105px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(105,242,11,.16), transparent 68%);
  pointer-events: none;
}
.copel-chart-panel .panel-head { position: relative; z-index: 1; margin-bottom: 2px; }
.chart-unit {
  padding: 5px 9px;
  border: 1px solid rgba(18,107,58,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  color: #4f7160;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.copel-chart-wrap { height: 224px; min-height: 224px; padding: 0 2px; }
.table-actions,.hero-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.table-actions form,.hero-actions form { margin: 0; }
.participation-card { max-width: 920px; margin-inline: auto; }
.input-suffix { position: relative; }
.input-suffix input { padding-right: 48px; }
.input-suffix span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--green2); font-weight: 800; }
button:disabled { cursor: not-allowed; opacity: .5; filter: grayscale(.3); }
@media (max-width: 800px) {
  .copel-chart-wrap { height: 260px; min-height: 260px; }
  .hero-actions { justify-content: flex-start; }
}
/* G3 reports export */
.report-export-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pdf-export-button { box-shadow: 0 10px 24px rgba(21, 174, 77, .18); }
.pdf-export-button span { font-size: 16px; line-height: 1; }
.report-filter {
  display: grid;
  grid-template-columns: 180px 180px minmax(280px,1fr) auto;
  align-items: end;
  gap: 13px;
  padding: 16px 18px;
  margin-bottom: 18px;
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(12px);
}
.report-filter>div { display: grid; gap: 6px; }
.report-filter label { color: #557064; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.report-filter input,.report-filter select { min-height: 42px; background: rgba(255,255,255,.8); }
.report-filter-actions { display: flex!important; grid-template-columns: auto auto; gap: 8px!important; }
.table-subline { display: block; margin-top: 4px; color: #789083; font-size: 10px; }
@media(max-width:1100px){.report-filter{grid-template-columns:1fr 1fr}.report-filter-plant,.report-filter-actions{grid-column:span 2}}
@media(max-width:650px){.report-filter{grid-template-columns:1fr}.report-filter-plant,.report-filter-actions{grid-column:auto}.report-filter-actions{display:flex!important;flex-wrap:wrap}.report-list-head .report-export-actions{width:100%}.report-list-head .report-export-actions .btn{flex:1}}