/* Solar 360° v3 — Top Automações · dark executive theme */
:root {
  --bg: #0b0f1a;
  --bg-card: #131a2b;
  --bg-card2: #1a2338;
  --bg-inset: #0e1424;
  --border: #232d44;
  --border-soft: #1c2439;
  --text: #e7ecf7;
  --muted: #8b96ad;
  --faint: #5d6880;
  --green: #22c55e;
  --yellow: #eab308;
  --orange: #f59e0b;
  --red: #ef4444;
  --accent: #3987e5;          /* série 1 / ação primária (validado p/ dark) */
  --accent-soft: #12294a;
  --grid: #202942;
  /* paleta categórica validada (dark, surface #131a2b) */
  --s1: #3987e5; --s2: #199e70; --s3: #c98500; --s4: #9085e9;
  --s5: #e66767; --s6: #d55181; --s7: #d95926; --s8: #008300;
  --radius: 12px;
  --shadow: 0 8px 24px rgba(0,0,0,.45);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 22px 20px 60px;
  font-size: 14px;
  line-height: 1.45;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1240px; margin: 0 auto; }

/* ---------- header ---------- */
header.topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
header.topo .tag { text-transform: uppercase; font-size: 11px; letter-spacing: 1.5px; color: var(--muted); }
header.topo h1 { margin: 3px 0 2px; font-size: 26px; line-height: 1.15; }
header.topo .meta { font-size: 12.5px; color: var(--muted); }
.badge-demo { display: inline-block; background: #382b0c; color: var(--yellow); border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: 700; letter-spacing: .5px; vertical-align: middle; margin-left: 8px; }
.header-actions { display: flex; gap: 8px; align-items: center; }

/* ---------- botões / inputs ---------- */
.btn {
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
  border-radius: 9px; padding: 7px 14px; font-size: 13px; cursor: pointer; font-family: inherit;
  transition: border-color .12s, background .12s;
}
.btn:hover { border-color: #3a4a70; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover { background: #2a78d6; }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); }
.btn.mini { padding: 4px 10px; font-size: 12px; border-radius: 7px; }
.btn.danger { color: #fda4a4; border-color: #4a2020; }
.btn.danger:hover { border-color: var(--red); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
input, select, textarea {
  background: var(--bg-inset); border: 1px solid var(--border); color: var(--text);
  border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
input[type="date"], input[type="month"] { color-scheme: dark; }
label.fld { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--muted); }

/* ---------- barra de período ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.seg { display: inline-flex; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button {
  border: 0; background: transparent; color: var(--muted); font-family: inherit;
  padding: 6px 12px; font-size: 12.5px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--accent-soft); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent); }
.custom-range { display: none; gap: 6px; align-items: center; }
.custom-range.show { display: inline-flex; }
.periodo-meta { font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.periodo-meta b { color: var(--text); font-weight: 600; }
.pill { display: inline-block; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.pill.parcial { background: #382b0c; color: var(--yellow); }
.pill.fuso { background: var(--bg-card2); color: var(--muted); font-weight: 500; }

/* ---------- seleção de usinas ---------- */
.selbar { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 18px; }
.selbar .row1 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.selbar .row1 .busca { flex: 1; min-width: 140px; max-width: 260px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  border: 1px solid var(--border); background: var(--bg-inset); color: var(--muted);
  border-radius: 20px; padding: 6px 13px; font-size: 12.5px; cursor: pointer; user-select: none;
  transition: all .12s ease; white-space: nowrap;
}
.chip:hover { border-color: #3a4a70; color: var(--text); }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); font-weight: 600; }
.chip.hidden { display: none; }
.chip .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: var(--faint); }
.chip .dot.saudavel { background: var(--green); }
.chip .dot.atencao { background: var(--yellow); }
.chip .dot.offline, .chip .dot.sem_dado { background: var(--red); }
.grupos { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.grupos .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--faint); }
.gchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--bg-inset); border-radius: 20px; padding: 4px 6px 4px 12px; font-size: 12px; color: var(--muted); }
.gchip .nome { cursor: pointer; }
.gchip .nome:hover { color: var(--text); }
.gchip button { border: 0; background: transparent; color: var(--faint); cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 6px; }
.gchip button:hover { color: var(--text); background: var(--bg-card2); }
.gchip .fav.on { color: var(--yellow); }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 13px; margin-bottom: 20px; }
.kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 17px; position: relative; }
.kpi .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-bottom: 7px; display: flex; align-items: center; gap: 5px; }
.kpi .val { font-size: 25px; font-weight: 700; line-height: 1.1; }
.kpi .val small { font-size: 14px; font-weight: 500; color: var(--muted); }
.kpi .sub { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.kpi.hero { border-color: #28406b; background: linear-gradient(160deg, #15203a, var(--bg-card)); }
.kpi.alerta { border-color: #7c4a12; background: #241a0e; }
.kpi.alerta .val { color: var(--yellow); }
.kpi.ok-val .val { color: var(--green); }

/* tooltip ⓘ */
.info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--faint); color: var(--muted); font-size: 10px; font-style: normal; cursor: help; position: relative; flex: none; }
.info:hover, .info:focus { border-color: var(--accent); color: var(--text); }
.info::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--bg-inset); border: 1px solid #334063; color: var(--text); text-transform: none; letter-spacing: 0;
  border-radius: 10px; padding: 9px 11px; font-size: 12px; font-weight: 400; line-height: 1.45; width: 260px; max-width: 72vw;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 30; white-space: normal; text-align: left;
}
.info:hover::after, .info:focus::after { opacity: 1; }
.kpi:first-child .info::after, .selbar .info::after { left: 0; transform: none; }

/* ---------- seções / painéis ---------- */
section { margin-bottom: 26px; }
section > h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .9px; color: var(--muted); margin: 0 0 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.painel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 17px; }

/* ---------- qualidade dos dados ---------- */
.qualidade { border: 1px solid var(--border); background: var(--bg-card); border-radius: var(--radius); margin-bottom: 20px; overflow: hidden; }
.qualidade summary { list-style: none; cursor: pointer; padding: 11px 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.qualidade summary::-webkit-details-marker { display: none; }
.qualidade summary .tt { font-weight: 700; color: var(--text); font-size: 12px; text-transform: uppercase; letter-spacing: .8px; }
.qualidade summary .caret { margin-left: auto; color: var(--faint); transition: transform .15s; }
.qualidade[open] summary .caret { transform: rotate(180deg); }
.qualidade .corpo { border-top: 1px solid var(--border-soft); padding: 13px 16px; font-size: 13px; color: var(--muted); display: grid; gap: 9px; }
.qualidade .corpo b { color: var(--text); }
.qnum { display: inline-flex; align-items: center; gap: 5px; }
.qnum b { color: var(--text); }
.qnum.warn b { color: var(--yellow); }
.qnum.bad b { color: var(--red); }

/* ---------- gráfico ---------- */
.chart-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.chart-wrap { position: relative; }
.chart-wrap svg { width: 100%; height: auto; display: block; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 8px; }
.legenda .it { display: inline-flex; align-items: center; gap: 6px; }
.legenda .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.legenda .ln { width: 16px; height: 0; border-top: 2px solid; flex: none; }
.legenda .ln.dash { border-top-style: dashed; }
.tooltip {
  position: absolute; pointer-events: none; z-index: 10; display: none;
  background: var(--bg-inset); border: 1px solid #334063; border-radius: 10px; padding: 10px 12px;
  font-size: 12.5px; min-width: 185px; box-shadow: var(--shadow);
}
.tooltip .tt-data { font-weight: 700; margin-bottom: 6px; }
.tooltip .tt-row { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); padding: 1.5px 0; }
.tooltip .tt-row b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.tooltip .tt-row .k { display: inline-flex; align-items: center; gap: 6px; }
.tooltip .tt-row .k i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.tooltip .tt-total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }
.tooltip .tt-miss { color: var(--yellow); }

/* ---------- ações prioritárias ---------- */
.acao { border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 10px; background: var(--bg-card); margin-bottom: 9px; overflow: hidden; }
.acao.alta, .acao.critica { border-left-color: var(--red); }
.acao.media { border-left-color: var(--yellow); }
.acao.baixa { border-left-color: var(--accent); }
.acao summary { list-style: none; cursor: pointer; padding: 11px 15px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.acao summary::-webkit-details-marker { display: none; }
.acao summary b { font-size: 13.5px; }
.acao summary .mot { color: var(--muted); font-size: 13px; flex: 1; min-width: 200px; }
.acao .corpo { padding: 0 15px 13px; font-size: 13px; color: var(--muted); display: grid; gap: 7px; }
.acao .corpo b { color: var(--text); }
.acao .prox { background: var(--bg-inset); border-radius: 8px; padding: 8px 11px; }
.grav { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; border-radius: 20px; padding: 2px 9px; }
.grav.alta, .grav.critica { background: #3a1414; color: #fda4a4; }
.grav.media { background: #382b0c; color: var(--yellow); }
.grav.baixa { background: var(--accent-soft); color: #9cc3f2; }

/* ---------- cards de usinas ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 13px; }
.ucard {
  background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; cursor: pointer; display: block; color: inherit;
  transition: border-color .12s, transform .12s;
}
.ucard:hover { border-color: #3a4a70; text-decoration: none; transform: translateY(-1px); }
.ucard.saudavel { border-left-color: var(--green); }
.ucard.atencao { border-left-color: var(--yellow); }
.ucard.offline, .ucard.sem_dado { border-left-color: var(--red); }
.ucard .head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 2px; }
.ucard .head strong { font-size: 14.5px; }
.ucard .portal { font-size: 11px; color: var(--faint); text-transform: capitalize; margin-bottom: 9px; }
.ucard .kwh { font-size: 21px; font-weight: 700; }
.ucard .kwh small { font-size: 12px; color: var(--muted); font-weight: 500; }
.ucard .ating { display: flex; align-items: center; gap: 9px; margin: 7px 0 4px; font-size: 12.5px; }
.ucard .ating b { font-variant-numeric: tabular-nums; }
.barra { flex: 1; height: 6px; border-radius: 4px; background: var(--bg-inset); overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.barra i.ok { background: var(--green); }
.barra i.warn { background: var(--yellow); }
.barra i.bad { background: var(--red); }
.ucard .linha { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); padding: 2px 0; }
.ucard .linha b { color: var(--text); font-weight: 600; }
.ucard .motivo { margin-top: 8px; font-size: 12px; color: var(--muted); background: var(--bg-inset); border-radius: 8px; padding: 7px 10px; }
.selos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.selo { font-size: 10.5px; border-radius: 20px; padding: 2px 9px; font-weight: 600; }
.selo.stale { background: #3a1414; color: #fda4a4; }
.selo.ficha { background: #2a2338; color: #b7a8ef; }
.tend { font-size: 12px; font-weight: 600; }
.tend.up { color: var(--green); }
.tend.down { color: var(--red); }
.tend.flat { color: var(--muted); }
.badge { font-size: 10.5px; padding: 3px 9px; border-radius: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; flex: none; }
.badge.saudavel { background: #123420; color: var(--green); }
.badge.atencao { background: #382b0c; color: var(--yellow); }
.badge.offline, .badge.sem_dado { background: #3a1414; color: #fda4a4; }

/* ---------- estados ---------- */
.vazio { border: 1px dashed var(--border); border-radius: var(--radius); padding: 26px 20px; text-align: center; color: var(--muted); font-size: 13.5px; background: rgba(19,26,43,.5); }
.vazio b { color: var(--text); display: block; margin-bottom: 5px; font-size: 15px; }
.erro { background: #3a1414; border: 1px solid #7c1d1d; border-radius: 10px; padding: 14px 16px; color: #fecaca; font-size: 13.5px; }
.skeleton { color: var(--faint); font-size: 13.5px; padding: 30px 0; text-align: center; }
.skeleton::after { content: '…'; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.fonte { text-align: center; font-size: 12px; color: var(--faint); margin-top: 40px; }

/* ---------- gate de acesso ---------- */
.gate { position: fixed; inset: 0; background: var(--bg); z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; }
.gate.show { display: flex; }
.gate .box { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 34px 32px; width: 100%; max-width: 380px; text-align: center; }
.gate h2 { margin: 0 0 6px; font-size: 20px; }
.gate p { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.gate input { width: 100%; margin-bottom: 12px; padding: 10px 12px; text-align: center; font-size: 15px; }
.gate .btn { width: 100%; padding: 10px; font-size: 14px; }
.gate .ginfo { margin-top: 14px; font-size: 12px; color: var(--faint); }
.gate .gerr { color: #fda4a4; font-size: 12.5px; margin: 0 0 10px; display: none; }
.gate .gerr.show { display: block; }

/* ---------- toast ---------- */
#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--bg-inset); border: 1px solid #334063; color: var(--text); border-radius: 10px; padding: 10px 18px; font-size: 13px; box-shadow: var(--shadow); animation: toastIn .18s ease; max-width: 85vw; }
.toast.ok { border-color: #1c5c38; }
.toast.err { border-color: #7c1d1d; color: #fecaca; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

/* ---------- página da usina ---------- */
.volta { font-size: 13px; color: var(--muted); display: inline-block; margin-bottom: 10px; }
.uhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.uhead .sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; overflow-x: auto; }
.tabs button {
  border: 0; background: transparent; color: var(--muted); font-family: inherit; font-size: 13.5px;
  padding: 10px 15px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
#tabSelect { display: none; width: 100%; margin-bottom: 18px; padding: 10px; font-size: 14px; }
.aba { display: none; }
.aba.show { display: block; }
.duo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--faint); padding: 7px 10px; border-bottom: 1px solid var(--border); font-weight: 600; }
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); color: var(--muted); vertical-align: top; }
.tbl td b { color: var(--text); font-weight: 600; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.frm { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.frm .full { grid-column: 1 / -1; }
.frm input, .frm select, .frm textarea { width: 100%; }
.aviso { background: #241a0e; border: 1px solid #7c4a12; color: #fcd34d; border-radius: 10px; padding: 11px 14px; font-size: 13px; }
.nota-box { background: var(--bg-inset); border-radius: 10px; padding: 12px 14px; font-size: 13px; color: var(--muted); }
.nota-box b { color: var(--text); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--border); display: grid; gap: 14px; }
.timeline li { position: relative; }
.timeline li::before { content: ''; position: absolute; left: -24px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
.timeline .tdata { font-size: 11.5px; color: var(--faint); }
.timeline .ttit { font-weight: 600; font-size: 13.5px; }
.timeline .tdet { font-size: 12.5px; color: var(--muted); }
.ocor { border: 1px solid var(--border); border-radius: 10px; padding: 12px 15px; margin-bottom: 10px; background: var(--bg-card); }
.ocor .oc-head { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.ocor .oc-body { font-size: 13px; color: var(--muted); display: grid; gap: 5px; }
.ocor .oc-body b { color: var(--text); }
.ocor .oc-acts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.st { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; border-radius: 20px; padding: 2px 9px; }
.st.aberta { background: #3a1414; color: #fda4a4; }
.st.reconhecida { background: #382b0c; color: var(--yellow); }
.st.em_tratamento { background: var(--accent-soft); color: #9cc3f2; }
.st.resolvida { background: #123420; color: var(--green); }
.st.descartada, .st.cancelada { background: var(--bg-card2); color: var(--muted); }
.st.agendada { background: var(--accent-soft); color: #9cc3f2; }
.st.executada { background: #123420; color: var(--green); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; }

/* ---------- responsivo ---------- */
@media (max-width: 960px) {
  .duo { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { padding: 16px 12px 50px; }
  header.topo h1 { font-size: 21px; }
  .kpi .val { font-size: 21px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .chip { flex: none; }
  .grid { grid-template-columns: 1fr; }
  .seg { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .toolbar { align-items: stretch; }
}
@media (max-width: 480px) {
  .tabs { display: none; }
  #tabSelect { display: block; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .frm { grid-template-columns: 1fr; }
  .info::after { left: auto; right: 0; transform: none; }
}

/* ---------------- faturas (upload + revisão) ---------------- */
.dropzone{border:2px dashed var(--borda,#3a4a63);border-radius:14px;padding:34px 20px;text-align:center;cursor:pointer;margin:18px 0;transition:border-color .15s, background .15s}
.dropzone.over,.dropzone:hover{border-color:var(--acc,#4da3ff);background:rgba(77,163,255,.06)}
.dropzone .sub{margin-top:6px}
.fila-item{display:flex;gap:12px;align-items:baseline;padding:8px 12px;border-bottom:1px solid var(--borda,#2a3a53);flex-wrap:wrap}
.fila-item .fnome{font-weight:600;min-width:200px}
.fila-item .fst .good{color:var(--ok,#4ade80)}
.fila-item .fst .warn{color:var(--warn,#fbbf24)}
.fila-item .fst .bad{color:var(--err,#f87171)}
.fat-card{margin:14px 0;padding:16px}
.fat-head{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px}
.fat-head .ver-orig{margin-left:auto}
.fat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:10px 0}
.fat-acoes{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.btn.danger{border-color:#7f1d1d;color:#fca5a5}
.badge{font-size:.8em;background:var(--acc,#4da3ff);color:#fff;border-radius:10px;padding:1px 8px;vertical-align:middle}

/* ---- modal relatório diário ---- */
.modal { position: fixed; inset: 0; background: rgba(3,8,20,.66); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 16px; }
.modal[hidden] { display: none; }
.modal .sheet { background: var(--bg-inset, #10182b); border: 1px solid #334063; border-radius: 14px; padding: 20px 22px; width: min(440px, 94vw); box-shadow: var(--shadow); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sheet-head b { font-size: 16px; }
.sheet .x { background: none; border: 0; color: var(--faint, #8aa); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.sheet .x:hover { color: var(--text, #fff); }
.relchk { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; margin-bottom: 12px; }
.relrow { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 12px; }
.relrow input[type=time] { background: var(--bg, #0b1120); border: 1px solid #334063; color: var(--text, #fff); border-radius: 8px; padding: 6px 8px; font-size: 14px; }
.reldias { display: flex; gap: 6px; flex-wrap: wrap; }
.reldias .d { border: 1px solid #334063; border-radius: 8px; padding: 6px 10px; font-size: 13px; cursor: pointer; user-select: none; color: var(--faint, #8aa); }
.reldias .d.on { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }