/* SGCE · components.css — extraído de index.html (divisão por seção; cascata preservada) */
/* ── ACESSIBILIDADE (3.5) ── */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
/* ── ALERTAS OPERACIONAIS (1.2) ── */
#alertas-band { display: none; flex-direction: column; gap: 8px; margin-bottom: 18px; }
#alertas-band.has-alerts { display: flex; }
.alert-item {
display: flex; align-items: flex-start; gap: 10px;
background: rgba(240,180,41,0.08); border: 1px solid rgba(240,180,41,0.35);
border-left: 3px solid var(--gold); border-radius: var(--r); padding: 10px 14px;
}
.alert-item.nivel-erro {
background: rgba(224,80,80,0.08); border-color: rgba(224,80,80,0.35);
border-left-color: var(--red);
}
.alert-item .ai-icon { font-size: 16px; line-height: 1.3; }
.alert-item .ai-title { font-size: 12px; font-weight: 700; color: var(--text); }
.alert-item .ai-det { font-size: 11px; color: var(--text2); margin-top: 2px; }
.alert-item .ai-btn {
margin-left: auto; align-self: center; background: none; border: 1px solid var(--g500);
color: var(--text2); border-radius: 6px; padding: 5px 10px; font-size: 11px; cursor: pointer;
white-space: nowrap;
}
.alert-item .ai-btn:hover { border-color: var(--accent); color: var(--accent); }
.alertas-dispensar {
align-self: flex-end; background: none; border: 1px solid var(--g500);
color: var(--text3); border-radius: 6px; padding: 5px 12px; font-size: 11px;
cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: border-color .15s, color .15s;
}
.alertas-dispensar:hover { border-color: var(--accent); color: var(--accent); }
/* ── MENU DO AVATAR (2.2) ── */
#userMenu {
display: none; position: absolute; top: 50px; right: 16px; z-index: 400;
background: var(--g800); border: 1px solid var(--g500); border-radius: 10px;
min-width: 190px; box-shadow: 0 12px 36px rgba(0,0,0,0.5); overflow: hidden; padding: 6px 0;
}
#userMenu.open { display: block; }
.um-item {
display: flex; align-items: center; gap: 9px; padding: 10px 16px;
font-size: 12px; color: var(--text2); cursor: pointer; background: none; border: none;
width: 100%; text-align: left;
}
.um-item:hover { background: var(--g700); color: var(--text); }
.um-sep { height: 1px; background: var(--g600); margin: 5px 0; }
/* ── ESTAÇÕES EM CARDS (2.3) ── */
.est-view-toggle {
display: inline-flex; border: 1px solid var(--g500); border-radius: 6px; overflow: hidden;
}
.est-view-toggle button {
background: var(--g700); border: none; color: var(--text3);
padding: 5px 11px; font-size: 12px; cursor: pointer;
}
.est-view-toggle button.active { background: var(--g500); color: var(--text); }
#estCardsWrap {
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 14px; margin-bottom: 22px;
}
.est-card {
background: var(--g800); border: 1px solid var(--g600); border-radius: 12px;
overflow: visible; display: flex; flex-direction: column; animation: fadeInUp .35s ease both;
/* overflow:visible para que o dropdown ⋯ não seja cortado pelo card */
}
.est-card-foto { height: 120px; background: var(--g700); position: relative;
overflow: hidden; border-radius: 11px 11px 0 0; /* clips a imagem nas quinas superiores */
}
.est-card-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.est-card-foto .ec-noimg {
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
font-size: 34px; color: var(--text3);
}
.est-card-status {
position: absolute; bottom: 0; left: 0; right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.72));
padding: 18px 10px 8px; display: flex; justify-content: flex-start;
}
.est-card-status .badge {
font-size: 11px; font-weight: 700; padding: 4px 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.5);
text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
@keyframes pulse-dot { 0%{opacity:1} 50%{opacity:.35} 100%{opacity:1} }
.est-card-status .dot-b { animation: pulse-dot 1.6s infinite; }
.est-card-body { padding: 13px 15px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.est-card-id { font-size: 10px; color: var(--text3); font-family: monospace; }
.est-card-nome { font-size: 14px; font-weight: 700; color: var(--text); }
.est-card-loc { font-size: 11px; color: var(--text3); }
.est-modo-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; line-height: 1; }
.est-modo-badge.pre { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); }
.est-modo-badge.pos { background: color-mix(in srgb, var(--sky) 16%, transparent); color: var(--sky); border: 1px solid color-mix(in srgb, var(--sky) 34%, transparent); }
.est-card-metrics { display: flex; gap: 16px; margin-top: 8px; }
.est-card-metrics > div { font-size: 10px; color: var(--text3); }
.est-card-metrics strong { display: block; font-size: 15px; color: var(--text); }
.est-card-actions { display: flex; gap: 6px; margin-top: 11px; }
/* ── CONFIGURAÇÕES EM SUB-ABAS (2.4) ── */
.cfg-subtabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--g600); flex-wrap: wrap; }
.cfg-subtab {
background: none; border: none; border-bottom: 2px solid transparent;
color: var(--text3); font-size: 12px; padding: 9px 14px; cursor: pointer;
}
.cfg-subtab:hover { color: var(--text2); }
.cfg-subtab.active { color: var(--accent); border-bottom-color: var(--accent); }
/* ── MENU "⋯" POR LINHA (2.5) ── */
.row-menu-wrap { position: relative; display: inline-block; }
.row-menu-btn {
background: var(--g700); border: 1px solid var(--g500); color: var(--text2);
border-radius: 6px; padding: 6px 11px; font-size: 14px; line-height: 1; cursor: pointer;
min-width: 40px; min-height: 30px;
}
.row-menu-btn:hover { border-color: var(--accent); color: var(--accent); }
.row-menu {
display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 700;
background: var(--g800); border: 1px solid var(--g500); border-radius: 8px;
min-width: 165px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); padding: 4px 0;
}
.row-menu.open { display: block; }
.row-menu button {
display: block; width: 100%; text-align: left; background: none; border: none;
color: var(--text2); font-size: 12px; padding: 9px 14px; cursor: pointer;
}
.row-menu button:hover { background: var(--g700); color: var(--text); }
.row-menu button.danger { color: var(--red); }
.tbl-pager {
display: flex; align-items: center; gap: 10px; justify-content: center;
padding: 10px 0 4px; font-size: 11px; color: var(--text3);
}
.tbl-pager button {
background: var(--g700); border: 1px solid var(--g500); color: var(--text2);
border-radius: 6px; padding: 6px 13px; font-size: 12px; cursor: pointer; min-height: 32px;
}
.tbl-pager button:disabled { opacity: .35; cursor: default; }
/* ── MEU CONSUMO: HERO + FLUXO (3.1/3.2) ── */
.hero-card {
background: linear-gradient(135deg, #163016, var(--g700));
border: 1px solid var(--g500); border-radius: 12px;
padding: 20px 22px; margin-bottom: 20px;
}
.hero-card.charging { border-color: rgba(77,182,232,0.5); box-shadow: 0 0 28px rgba(77,182,232,0.10); }
.hero-lbl { font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text3); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.hero-val { font-size: 34px; font-weight: 800; color: var(--text); line-height: 1.1; }
.hero-sub { font-size: 12px; color: var(--text2); margin-top: 6px; }
.hero-metrics { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 12px; }
.hero-metrics > div { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; }
.hero-metrics strong { display: block; font-size: 19px; color: var(--text); letter-spacing: 0; text-transform: none; }
.hero-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.pulse-live { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); animation: pulse-dot 1.2s infinite; }
.hero-secondary-links { display: flex; gap: 10px; }
/* ── Mini-grid de estações na aba usuário ── */
.est-mini-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.est-mini-chip {
display: flex; align-items: center; gap: 7px;
background: var(--g700); border: 1px solid var(--g500);
border-radius: 8px; padding: 8px 12px;
font-size: 12px; color: var(--text2); min-width: 0; flex: 1 1 auto;
}
.est-mini-chip .emc-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.est-mini-chip .emc-nome { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.est-mini-chip .emc-status { font-size: 10px; color: var(--text3); white-space: nowrap; }
.emc-disp .emc-dot { background: #5dbd5d; box-shadow: 0 0 5px rgba(93,189,93,.5); animation: pulse-dot 2s infinite; }
.emc-conn .emc-dot { background: #a98bdb; }
.emc-ocup .emc-dot { background: #4db6e8; box-shadow: 0 0 5px rgba(77,182,232,.5); animation: pulse-dot 1.2s infinite; }
.emc-idle .emc-dot { background: #f0b429; }
.emc-manut .emc-dot { background: #f0b429; }
.emc-off .emc-dot { background: #555; }
.steps-bar { display: flex; align-items: center; gap: 0; margin: 4px 0 18px; }
.step-pill { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text3); }
.step-pill .sp-n {
width: 22px; height: 22px; border-radius: 50%; background: var(--g600); color: var(--text2);
display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
border: 1px solid var(--g500);
}
.step-pill.done .sp-n { background: var(--accent); color: #fff; border-color: var(--accent); }
.step-pill.done { color: var(--text2); }
.step-conn { flex: 1; height: 1px; background: var(--g500); margin: 0 10px; min-width: 18px; }
.atalho-btn {
background: var(--g700); border: 1px solid var(--g500); color: var(--text2);
border-radius: 14px; padding: 6px 13px; font-size: 11px; cursor: pointer; min-height: 30px;
}
.atalho-btn:hover, .atalho-btn.active { border-color: var(--accent); color: var(--accent); }
/* ── RESERVAS (1.4) ── */
.res-list { display: flex; flex-direction: column; gap: 8px; }
.res-item {
display: flex; align-items: center; gap: 12px; background: var(--g800);
border: 1px solid var(--g600); border-radius: 8px; padding: 10px 14px; font-size: 12px;
}
.res-item .ri-when { font-weight: 700; color: var(--text); }
.res-item .ri-est { color: var(--text3); font-size: 11px; }
.res-item .ri-cancel {
margin-left: auto; background: none; border: 1px solid var(--g500); color: var(--text3);
border-radius: 6px; padding: 5px 11px; font-size: 11px; cursor: pointer; min-height: 30px;
}
.res-item .ri-cancel:hover { border-color: var(--red); color: var(--red); }
/* ── CURVA DE POTÊNCIA (1.3) ── */
.btn-curva {
background: none; border: 1px solid var(--g500); color: var(--sky);
border-radius: 6px; padding: 4px 9px; font-size: 12px; cursor: pointer; min-height: 28px;
}
.btn-curva:hover { border-color: var(--sky); }
/* ── PAINEL PÚBLICO: CARDS DE STATUS (3.3) ── */
#pub-status-cards {
display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 12px; margin-bottom: 22px;
}
.pub-st-card {
background: var(--g800); border: 1px solid var(--g600); border-radius: 12px;
padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.pub-st-card .ps-status { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.pub-st-card.st-disp .ps-status { color: var(--accent); }
.pub-st-card.st-conn .ps-status { color: #a98bdb; }
.pub-st-card.st-ocup .ps-status { color: var(--sky); }
.pub-st-card.st-idle .ps-status { color: var(--gold); }
.pub-st-card.st-manut .ps-status { color: var(--gold); }
.pub-st-card.st-off .ps-status { color: var(--text3); }
.pub-st-card .ps-nome { font-size: 12px; color: var(--text); font-weight: 600; }
.pub-st-card .ps-loc { font-size: 10px; color: var(--text3); }
/* ── MODO TV / QUIOSQUE (1.6) ── */
body.tv-mode .pub-topbar .btn-out,
body.tv-mode .audit-filter-card,
body.tv-mode .est-selecionada-bar,
body.tv-mode #pub-tabela-usuarios,
body.tv-mode #pub-tabela-sessoes { display: none !important; }
body.tv-mode .tw { display: none; }
body.tv-mode .content { padding: 32px 40px; }
body.tv-mode .sc-val { font-size: 44px; }
body.tv-mode .pub-st-card .ps-status { font-size: 24px; }
body.tv-mode #pub-status-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
body.tv-mode .sh { display: none; }
body.tv-mode .sh.tv-keep { display: flex; }
#tv-qr-box {
display: none; position: fixed; right: 26px; bottom: 26px; z-index: 999;
background: #fff; border-radius: 14px; padding: 12px 12px 6px; text-align: center;
box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
body.tv-mode #tv-qr-box { display: block; }
#tv-qr-box .qr-lbl { font-size: 10px; color: #333; font-weight: 700; padding: 5px 0 3px; }
#tv-relogio {
display: none; font-size: 20px; font-weight: 800; color: var(--text); margin-left: auto;
font-variant-numeric: tabular-nums;
}
body.tv-mode #tv-relogio { display: block; }
/* ── ANIMAÇÕES ── */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
from { opacity: 0; transform: scale(0.94); }
to { opacity: 1; transform: scale(1); }
}
.anim-fade-up { animation: fadeInUp 0.45s ease forwards; }
.anim-fade-scale{ animation: fadeInScale 0.35s ease forwards; }
/* Barras com transição suave (height anima de 0 → final) */
.bar, [data-bar] {
transition: height 0.55s cubic-bezier(.2,.8,.2,1);
}
/* Busca inline nas tabelas */
.tbl-search {
background: var(--g700); border: 1px solid var(--g500); border-radius: 6px;
color: var(--text); font-size: 12px; padding: 5px 10px 5px 28px;
outline: none; width: 180px; transition: border-color .15s, width .2s;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: 8px center;
}
.tbl-search:focus { border-color: var(--accent); width: 220px; }
.tbl-search::placeholder { color: var(--text3); }
/* Seta de ordenação no th */
.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sort-btn {
background: none; border: none; color: var(--text3); font-size: 11px;
cursor: pointer; padding: 0 0 0 4px; line-height: 1; vertical-align: middle;
transition: color .15s;
}
.th-sort-btn:hover, .th-sort-btn.active { color: var(--accent); }
.btn-filt {
background: var(--accent); border: none; border-radius: 6px; padding: 8px 18px;
color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.btn-filt:hover { background: var(--g300); }
.btn-exp {
background: var(--g700); border: 1px solid var(--g600); border-radius: 6px;
padding: 8px 14px; color: var(--text2); font-size: 12px; cursor: pointer; transition: all .15s;
}
.btn-exp:hover { border-color: var(--accent); color: var(--accent); }
/* RELATÓRIO CARDS */
.relat-card {
background: var(--g800); border: 1px solid var(--g600); border-radius: var(--r);
padding: 20px 22px; margin-bottom: 20px;
}
.relat-card-header {
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--g600);
}
.relat-card-title {
font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px;
}
.relat-card-desc {
font-size: 11px; color: var(--text3); line-height: 1.4;
}
.relat-card-filters {
display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
margin-bottom: 16px; padding: 12px 14px;
background: var(--g700); border-radius: 8px; border: 1px solid var(--g500);
}
/* CHART */
.cw { background: var(--g800); border: 1px solid var(--g600); border-radius: var(--r); padding: 18px; margin-bottom: 22px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 110px; margin-top: 14px; }
/* .bc não tem height:100% — a barra cresce em px e o container alinha pela base */
.bc { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bar { width: 100%; background: var(--g500); border-radius: 3px 3px 0 0; transition: background .15s, height .3s; cursor: default; min-height: 0; }
.bar:hover { background: var(--accent); }
.blbl { font-size: 9px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bval { font-size: 9px; color: var(--text3); }
#chartHoras, #chartSemana { width: 100%; box-sizing: border-box; }
/* FORM */
.fc { background: var(--g800); border: 1px solid var(--g600); border-radius: var(--r); padding: 20px; margin-bottom: 18px; }
.fc-title { font-size: 11px; color: var(--text3); margin-bottom: 16px; letter-spacing: 0.5px; }
.fg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Rodapé de botões dos formulários/modais: respiro em relação aos campos */
.fc-btns {
display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--g600);
}
.ff, .fi { display: flex; flex-direction: column; gap: 5px; }
.ff label, .fi label { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text3); }
.fi { margin-bottom: 2px; }
.ff input, .ff select, .fi input, .fi select {
background: var(--g700); border: 1px solid var(--g600); border-radius: 6px;
padding: 9px 12px; color: var(--text); font-size: 13px; outline: none; transition: border-color .15s;
}
.ff input:focus, .ff select:focus,
.fi input:focus, .fi select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(93,189,93,0.10); }
.factions { display: flex; gap: 10px; margin-top: 18px; }
.btn-save {
background: var(--accent); border: none; border-radius: 6px; padding: 9px 22px;
color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.btn-save:hover { background: var(--g300); }
/* Seletor de arquivo padronizado (label envolvendo input file oculto) */
.btn-file {
display: inline-flex; align-items: center; gap: 7px;
background: var(--g600); border: 1px solid var(--g500); color: var(--text2);
padding: 9px 16px; border-radius: 6px; cursor: pointer;
font-size: 13px; font-weight: 600; transition: border-color .15s, color .15s;
}
.btn-file:hover { border-color: var(--accent); color: var(--accent); }
.btn-cancel { background: none; border: 1px solid var(--g600); border-radius: 6px; padding: 9px 16px; color: var(--text3); font-size: 12px; cursor: pointer; }
.ocpp-help-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--g400);
font-size: 10px; font-weight: 700; color: var(--text3); cursor: pointer;
user-select: none; flex-shrink: 0; transition: border-color .15s, color .15s;
}
.ocpp-help-btn:hover { border-color: var(--accent); color: var(--accent); }
/* MY REPORT */
.mr { background: var(--g800); border: 1px solid var(--g600); border-radius: var(--r); padding: 24px; }
.mr-top { display: flex; gap: 32px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--g600); flex-wrap: wrap; }
.mr-block { }
.mr-lbl { font-size: 9px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text3); margin-bottom: 6px; }
.mr-big { font-size: 42px; font-weight: 800; line-height: 1; }
.mr-unit { font-size: 13px; color: var(--text3); font-weight: 400; margin-left: 4px; }
.mr-note { font-size: 10px; color: var(--text3); margin-top: 4px; }
.vg { color: var(--accent); }
.vo { color: var(--gold); }
.vb { color: var(--sky); }
/* PUBLIC */
.pub-hero {
background: linear-gradient(135deg, #163016, var(--g700));
border: 1px solid var(--g500); border-radius: var(--r);
padding: 22px 24px; margin-bottom: 22px; display: flex; align-items: center; gap: 18px;
}
.ph-icon { font-size: 28px; }
.ph-title { font-size: 16px; font-weight: 700; color: var(--text); }
.ph-sub { font-size: 12px; color: var(--text3); margin-top: 3px; }
.pub-sc { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 22px; }
/* ── MAPA PÚBLICO ──────────────────────────────────────────── */
.pub-mapa-wrap {
border-radius: 12px; overflow: hidden; margin-bottom: 22px;
border: 1px solid var(--g500);
box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.pub-mapa-container { height: 320px; background: #0a1a0a; }
/* Marcadores pulsantes */
@keyframes pulsar-verde {
0%, 100% { box-shadow: 0 0 0 0 rgba(93,189,93,.65); }
55% { box-shadow: 0 0 0 12px rgba(93,189,93,0); }
}
@keyframes pulsar-azul {
0%, 100% { box-shadow: 0 0 0 0 rgba(77,182,232,.65); }
55% { box-shadow: 0 0 0 10px rgba(77,182,232,0); }
}
@keyframes pulsar-laranja {
0%, 100% { box-shadow: 0 0 0 0 rgba(240,180,41,.65); }
55% { box-shadow: 0 0 0 10px rgba(240,180,41,0); }
}
.mapa-pin {
width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid;
cursor: pointer; transition: transform .15s;
}
.mapa-pin:hover { transform: scale(1.35); }
.pin-disponivel { background: #5dbd5d; border-color: #3d8a3d; animation: pulsar-verde 2s infinite; }
.pin-ocupado { background: #4db6e8; border-color: #2a7a9e; animation: pulsar-azul 1.2s infinite; }
.pin-conectado { background: #a98bdb; border-color: #6f57a0; animation: pulsar-azul 1.8s infinite; }
.pin-offline { background: #555; border-color: #333; }
.pin-manutencao { background: #f0b429; border-color: #a07010; animation: pulsar-laranja 3s infinite; }
/* Legenda do mapa */
.mapa-legenda {
background: var(--g800); border-top: 1px solid var(--g600);
padding: 8px 14px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
font-size: 11px; color: var(--text2);
}
.mapa-legenda-item { display: flex; align-items: center; gap: 6px; }
.mapa-legenda-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
/* Indicador de estação selecionada */
.est-selecionada-bar {
display: none; align-items: center; gap: 10px; margin-bottom: 10px;
background: rgba(93,189,93,0.12); border: 1px solid var(--g400);
border-radius: 8px; padding: 8px 14px; font-size: 12px; color: var(--accent);
}
.est-selecionada-bar span { flex: 1; font-weight: 600; }
.est-selecionada-bar button {
background: none; border: 1px solid var(--g400); color: var(--text3);
border-radius: 5px; padding: 3px 10px; cursor: pointer; font-size: 11px;
transition: all .15s;
}
.est-selecionada-bar button:hover { border-color: var(--accent); color: var(--accent); }
/* Popup Leaflet — tema escuro */
.leaflet-popup-content-wrapper {
background: #0d1f0d !important;
border: 1px solid #2e4a2e !important;
border-radius: 10px !important;
padding: 0 !important;
box-shadow: 0 8px 32px rgba(0,0,0,.7) !important;
overflow: hidden;
}
.leaflet-popup-tip-container { display: none; }
.leaflet-popup-content { margin: 0 !important; width: 220px !important; }
.leaflet-popup-close-button {
color: #5a845a !important; right: 8px !important; top: 6px !important;
font-size: 18px !important; background: rgba(0,0,0,.4) !important;
border-radius: 50% !important; width: 22px !important; height: 22px !important;
line-height: 22px !important; text-align: center !important;
padding: 0 !important;
}
.leaflet-popup-close-button:hover { color: #e4f0e4 !important; }
/* Conteúdo do popup */
.est-popup { width: 220px; }
.est-popup-foto { width: 100%; height: 110px; object-fit: cover; display: block; }
.est-popup-foto-ph { width: 100%; height: 80px; background: #132213; display: flex; align-items: center; justify-content: center; font-size: 32px; }
.est-popup-body { padding: 11px 13px 12px; }
.est-popup-nome { font-size: 13px; font-weight: 700; color: #e4f0e4; line-height: 1.3; }
.est-popup-id { font-size: 10px; color: #5a845a; margin: 2px 0 6px; font-family: monospace; }
.est-popup-status { font-size: 11px; font-weight: 600; margin-bottom: 9px; }
.est-popup-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 10px; }
.est-popup-stat { background: #132213; border-radius: 6px; padding: 5px 7px; }
.est-popup-stat-lbl { font-size: 9px; color: #5a845a; text-transform: uppercase; letter-spacing: .5px; }
.est-popup-stat-val { font-size: 13px; font-weight: 700; color: #e4f0e4; margin-top: 1px; }
/* Cadastro de RFID pelo carregador — animação "aproxime o cartão" */
.rfe-anim { position: relative; width: 96px; height: 96px; margin: 4px auto 0; display: flex; align-items: center; justify-content: center; }
.rfe-anim i { font-size: 46px; color: var(--accent); z-index: 1; }
.rfe-anim::before, .rfe-anim::after, .rfe-anim .rfe-wave {
content: ''; position: absolute; inset: 8px; border: 2px solid var(--accent);
border-radius: 50%; opacity: 0; animation: rfePulse 1.8s ease-out infinite;
}
.rfe-anim::after { animation-delay: .6s; }
.rfe-anim .rfe-wave { animation-delay: 1.2s; }
@keyframes rfePulse { 0% { transform: scale(.55); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }
/* "Em uso por" — foto + 1º nome de quem está carregando */
.est-popup-emuso { display: flex; align-items: center; gap: 8px; background: #132213; border-radius: 8px; padding: 6px 8px; margin-bottom: 10px; }
.est-popup-emuso-foto { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 30px; background: #0d180d; }
.est-popup-emuso-foto.ph { display: flex; align-items: center; justify-content: center; color: #5a845a; font-size: 16px; }
.est-popup-emuso-txt { display: flex; flex-direction: column; line-height: 1.25; font-size: 11px; color: #cfe0cf; }
.est-popup-emuso-txt b { color: #e4f0e4; }
.est-popup-emuso-desde { font-size: 9px; color: #5a845a; }
.est-popup-btn {
width: 100%; background: #2e4a2e; border: none; color: #b8e6b8;
padding: 8px; border-radius: 6px; cursor: pointer; font-size: 11px;
font-weight: 600; transition: background .15s;
}
.est-popup-btn:hover { background: #3d6b3d; color: #e4f0e4; }
/* TOAST */
#toast {
position: fixed; bottom: 22px; right: 22px; background: var(--g400);
border: 1px solid var(--accent); color: var(--g100);
padding: 11px 18px; border-radius: 8px; font-size: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4); opacity: 0; transition: opacity .25s; z-index: 9999; pointer-events: none;
}
#toast.show { opacity: 1; }
/* UTILS */
.hidden { display: none !important; }
.tc { display: none; }
.tc.active { display: block; }
strong.g { color: var(--accent); }
strong.o { color: var(--gold); }
strong.b { color: var(--sky); }
/* LINK PAINEL PÚBLICO NO LOGIN */
.lbox-public-link { margin-top: 20px; }
.btn-public-link {
background: none; border: none; color: var(--text3); font-size: 11px; cursor: pointer;
text-decoration: none; transition: color .15s; padding: 0; letter-spacing: 0.2px;
}
/* ── Caixa de log (aba Logs · admin) ─────────────────────────── */
.logbox {
font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace;
font-size: 11.5px; line-height: 1.5; color: var(--text2);
background: color-mix(in srgb, var(--g900, #0e1116) 92%, #000);
border: 1px solid var(--g600); border-radius: 8px; padding: 12px 14px; margin: 0;
max-height: 460px; overflow: auto; white-space: pre-wrap; word-break: break-word;
}
/* ── Autocomplete / busca em campo (ex.: usuário no Lançar crédito) ── */
.ac-list {
position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
margin-top: 4px; max-height: 240px; overflow-y: auto;
background: var(--g700); border: 1px solid var(--g500); border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.ac-item {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 12px; cursor: pointer; font-size: 13px; color: var(--text2);
border-bottom: 1px solid var(--g600);
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover { background: var(--g600); color: var(--text); }
.ac-item .ac-mat { font-size: 11px; color: var(--text3); font-family: monospace; white-space: nowrap; }
.ac-empty { padding: 10px 12px; font-size: 12px; color: var(--text3); }
/* ── Floating Bottom Navigation (mobile · papel usuário) ─────────
Barra flutuante com glassmorphism + cápsula deslizante atrás do
item ativo. --bn-count (nº de abas) e --bn-active (índice ativo)
são definidos em nav.js. Sem mudanças de funcionalidade. */
.bottom-nav {
position: fixed; left: 50%; transform: translateX(-50%);
bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
width: calc(100% - 24px); max-width: 460px; z-index: 400;
display: flex; gap: 0; padding: 6px; border-radius: 26px;
/* Glassmorphism: fundo translúcido + desfoque do que está atrás */
background: color-mix(in srgb, var(--g800) 70%, transparent);
-webkit-backdrop-filter: blur(18px) saturate(150%);
backdrop-filter: blur(18px) saturate(150%);
border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
/* Profundidade: sombra externa difusa (suave) + brilho interno superior */
box-shadow:
0 10px 30px rgba(0,0,0,.30),
0 2px 8px rgba(0,0,0,.16),
inset 0 1px 0 rgba(255,255,255,.10);
--bn-count: 5; --bn-active: 0;
}
/* Cápsula ("pill") deslizante atrás do item ativo */
.bottom-nav .bn-pill {
position: absolute; top: 6px; bottom: 6px; left: 6px;
width: calc((100% - 12px) / var(--bn-count)); border-radius: 20px;
z-index: 0; pointer-events: none;
background: linear-gradient(135deg,
color-mix(in srgb, var(--accent) 88%, white 6%),
color-mix(in srgb, var(--accent) 52%, var(--sky) 48%));
box-shadow:
0 4px 16px color-mix(in srgb, var(--accent) 32%, transparent),
inset 0 1px 0 rgba(255,255,255,.28);
transform: translateX(calc(var(--bn-active) * 100%));
transition: transform .26s ease-in-out; /* desliza entre abas */
}
.bottom-nav .bn-item {
position: relative; z-index: 1;
flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 4px;
min-height: 52px; padding: 7px 2px;
font-size: 10px; font-weight: 600; line-height: 1;
white-space: nowrap; color: var(--text3); cursor: pointer;
background: none; border: none; -webkit-tap-highlight-color: transparent;
transition: color .26s ease-in-out;
}
.bottom-nav .bn-item span {
max-width: 100%; overflow: hidden; text-overflow: ellipsis;
opacity: .9; transition: opacity .26s ease-in-out, transform .26s ease-in-out;
}
.bottom-nav .bn-item i { font-size: 21px; line-height: 1; transition: transform .22s ease-in-out; }
.bottom-nav .bn-item.active { color: #fff; }
.bottom-nav .bn-item.active span { opacity: 1; }
.bottom-nav .bn-item.active i { animation: bn-pop .28s ease-in-out; } /* ícone: 0.95 → 1.05 → 1.0 */
.bottom-nav .bn-item:active i { transform: scale(.92); }
@keyframes bn-pop {
0% { transform: scale(.95); }
55% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* telas estreitas: 5 abas sem espremer */
@media (max-width: 380px) {
.bottom-nav .bn-item { font-size: 9px; min-height: 50px; gap: 3px; padding: 6px 1px; }
.bottom-nav .bn-item i { font-size: 19px; }
}
/* Espaço p/ o conteúdo não ficar atrás da barra flutuante.
!important porque o responsivo.css força `.content { padding: … !important }` no celular. */
body.has-bottom-nav .content { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
body.has-bottom-nav #mainNav { display: none; }
/* ── Histórico do usuário: atalhos de período ── */
.hist-atalhos { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 12px; }
.hist-atalhos button {
background: var(--g800); border: 1px solid var(--g600); color: var(--text3);
border-radius: 20px; padding: 6px 14px; font-size: 12px; font-weight: 600;
cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.hist-atalhos button:hover { color: var(--text); border-color: var(--g500); }
.hist-atalhos button.active {
background: color-mix(in srgb, var(--accent) 16%, var(--g800));
border-color: var(--accent); color: var(--accent);
}