/* Estilos da tela: dashboard + tela Hoje + peças compartilhadas do Painel (use as variáveis de style.css) */

/* ---------- Compartilhado ---------- */
.txt-verde { color: #059669 !important; } .txt-vermelho { color: #e11d48 !important; } .txt-amarelo { color: #b45309 !important; }
.kpi.azul-kpi { --cor-kpi: var(--azul); } .kpi.cinza { --cor-kpi: #64748b; }
.variacao { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 750; padding: 2px 8px 2px 4px; border-radius: 999px; white-space: nowrap; }
.variacao .ic { width: 15px; height: 15px; padding: 2px; border-radius: 50%; }
.variacao small { font-weight: 600; color: var(--texto-3); font-size: 11px; }
.variacao.boa { color: #047857; background: #d1fae5; } .variacao.boa .ic { background: #10b981; color: #fff; }
.variacao.ruim { color: #be123c; background: #ffe4e6; } .variacao.ruim .ic { background: #f43f5e; color: #fff; }
.variacao.neutra { color: var(--texto-3); background: rgba(255,255,255,.6); padding-left: 8px; }
.variacao.neutra .ic { padding: 0; }
.pn-cont { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--preto); color: #fff; font-size: 12px; margin-left: 6px; vertical-align: 2px; }
.painel-topo h2 { display: flex; align-items: center; gap: 8px; }
.painel-topo h2 > .ic { width: 20px; height: 20px; color: var(--turquesa); flex: none; }
.espaco { flex: 1; }
.spin.escuro { border-color: rgba(12,37,51,.15); border-top-color: var(--preto); width: 26px; height: 26px; }

/* Avatar com anel de situação (equipe agora) */
.avatar-sit { position: relative; display: inline-grid; place-items: center; border-radius: 50%; padding: 3px; background: #cbd5e1; flex: none; }
.avatar-sit .avatar { box-shadow: 0 0 0 2px #fff; }
.avatar-sit.trabalhando { background: conic-gradient(#10b981, #22d3ee, #10b981); animation: giraAnel 4s linear infinite; }
.avatar-sit.trabalhando .avatar { animation: giraAnel 4s linear infinite reverse; }
.avatar-sit.almoco { background: #f59e0b; } .avatar-sit.saiu { background: #94a3b8; } .avatar-sit.nao_bateu { background: #f43f5e; }
.avatar-sit.ausente { background: #8b5cf6; } .avatar-sit.folga { background: #cbd5e1; }
@keyframes giraAnel { to { transform: rotate(360deg); } }
.avatar.g2 { width: 50px; height: 50px; font-size: 17px; }
.mini-sit { font-size: 11px; font-weight: 750; padding: 2px 8px; border-radius: 999px; background: #e2e8f0; color: #475569; }
.mini-sit.verde, .sit-selo.verde { background: #d1fae5; color: #047857; } .mini-sit.amarelo, .sit-selo.amarelo { background: #fef3c7; color: #b45309; }
.mini-sit.vermelho, .sit-selo.vermelho { background: #ffe4e6; color: #be123c; } .mini-sit.roxo, .sit-selo.roxo { background: #ede9fe; color: #6d28d9; }
.mini-sit.cinza, .sit-selo.cinza { background: #e2e8f0; color: #475569; }

/* Mini barras (Hoje do técnico) */
.mini-barras { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.mini-barras .mb { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; cursor: pointer; }
.mini-barras .mb i { width: 100%; max-width: 34px; border-radius: 9px 9px 4px 4px; transform-origin: bottom; animation: cresce .7s var(--anim) both; box-shadow: 0 6px 14px rgba(20,184,166,.25); }
.mini-barras .mb span { font-size: 11px; color: var(--texto-3); font-weight: 650; }
.destaque-n { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }

/* ---------- Hoje ---------- */
.hoje-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; padding: 24px 26px; margin-bottom: 18px; position: relative; overflow: hidden; }
.hoje-hero.tec { grid-template-columns: 1fr; padding: 20px 22px; }
.hoje-hero::before { content: ""; position: absolute; right: -80px; top: -90px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(34,211,238,.35), transparent 70%); pointer-events: none; }
.hoje-hero h1 { font-size: 30px; margin: 6px 0 6px; background: linear-gradient(90deg, #0b1720, #0a7f91); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hoje-hero p { margin: 0; color: var(--texto-2); font-size: 14.5px; }
.hh-data { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--texto-2); text-transform: capitalize; background: rgba(255,255,255,.7); padding: 4px 11px; border-radius: 999px; }
.hh-data .ic { width: 15px; height: 15px; color: var(--turquesa); }
.hh-acoes { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.hh-graf { min-width: 0; align-self: center; }
.equipe-tira { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; }
.eq-pessoa { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 92px; padding: 12px 8px; border-radius: 18px; background: rgba(255,255,255,.55); border: 1px solid #fff; cursor: pointer; transition: transform .2s var(--anim), box-shadow .2s; }
.eq-pessoa:hover { transform: translateY(-3px); box-shadow: var(--sombra-p); }
.eq-pessoa b { font-size: 13px; }
.atividade { display: flex; flex-direction: column; position: relative; max-height: 520px; overflow-y: auto; padding-right: 4px; }
.atividade .at { display: flex; gap: 11px; align-items: flex-start; padding: 9px 6px; border-radius: 14px; cursor: pointer; position: relative; transition: background .15s; animation: sobeSuave .4s var(--anim) both; }
.atividade .at:hover { background: rgba(255,255,255,.45); }
.atividade .at:not(:last-child)::after { content: ""; position: absolute; left: 22px; top: 44px; bottom: -6px; width: 2px; background: rgba(255,255,255,.7); }
.atividade .at .txt { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.35; }
.atividade .at .quando { font-size: 11.5px; color: var(--texto-3); font-weight: 650; white-space: nowrap; }
.at-ic { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; background: #64748b; box-shadow: 0 4px 10px rgba(0,0,0,.12); position: relative; z-index: 1; }
.at-ic .ic { width: 17px; height: 17px; }
.at-ic.azul { background: var(--azul); } .at-ic.amarelo { background: var(--amarelo); } .at-ic.laranja { background: var(--laranja); } .at-ic.turquesa { background: var(--turquesa); }
.at-ic.roxo { background: var(--roxo); } .at-ic.verde { background: var(--verde); } .at-ic.vermelho { background: var(--vermelho); } .at-ic.cinza { background: #94a3b8; }

/* ---------- Dashboard ---------- */
.dash-corpo .grid-2 > *, .dash-corpo .grid-meia > *, .dash-corpo .grid-3 > *, .conteudo .grid-meia > * { min-width: 0; }
@media (max-width: 1100px) { .dash-corpo .grid-2, .dash-corpo .grid-meia, .dash-corpo .grid-3 { grid-template-columns: minmax(0, 1fr); } }
.dash-filtros { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 14px; border-radius: 20px; }
.df-periodos { display: flex; gap: 6px; flex-wrap: wrap; }
.df-periodos .chip .ic { width: 14px; height: 14px; }
.df-datas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.df-datas input { width: auto; padding: 7px 10px; border-radius: 12px; }
.df-sel { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.78); border: 1px solid #fff; border-radius: 999px; padding: 0 4px 0 12px; }
.df-sel .ic { width: 16px; height: 16px; color: var(--turquesa); flex: none; }
.df-sel select { border: 0; background: transparent; padding: 8px 6px; width: auto; max-width: 210px; box-shadow: none !important; }
.abas .aba .ic { width: 15px; height: 15px; }
.abas.mini { padding: 3px; margin: 0; } .abas.mini .aba { padding: 5px 11px; font-size: 12.5px; }

.kpis-dash { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kpis-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi-dash .val { font-size: 27px; }
.kpi-dash .kd-spark { position: absolute; right: 14px; top: 52px; opacity: .85; }
.kpi .sub { min-height: 20px; }

.tira-agora { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 18px; }
.ta-rot { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; text-shadow: 0 1px 6px rgba(0,40,60,.3); }
.ta-rot .ic { width: 17px; height: 17px; }
.ta-i { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 8px; border-radius: 999px; background: rgba(255,255,255,.82); color: var(--texto); font-size: 13px; font-weight: 650; box-shadow: var(--sombra-p); transition: transform .15s var(--anim); }
.ta-i:hover { transform: translateY(-2px); }
.ta-i b { min-width: 28px; height: 26px; padding: 0 7px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-size: 13px; }
.ta-i.azul b { background: var(--azul); } .ta-i.amarelo b { background: var(--amarelo); } .ta-i.roxo b { background: var(--roxo); } .ta-i.vermelho b { background: var(--vermelho); }
.ta-i.pulsa b { animation: pulsa 1.8s infinite; }

.rosca-dash { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.rd-leg { display: flex; flex-direction: column; gap: 4px; min-width: 170px; flex: 1; }
.rd-i { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 34px; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; font-size: 13px; transition: background .15s; }
.rd-i[data-ir] { cursor: pointer; } .rd-i[data-ir]:hover { background: rgba(255,255,255,.6); }
.rd-i i { width: 12px; height: 12px; border-radius: 4px; }
.rd-i span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-i small { color: var(--texto-3); text-align: right; font-weight: 650; }

.barras-h { display: flex; flex-direction: column; gap: 6px; }
.bh { display: grid; grid-template-columns: 22px minmax(0, 1.1fr) minmax(60px, 1fr) auto; align-items: center; gap: 10px; padding: 6px 6px; border-radius: 12px; font-size: 13px; }
.bh.clic { cursor: pointer; } .bh.clic:hover { background: rgba(255,255,255,.5); }
.bh-pos { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: rgba(12,37,51,.07); font-size: 11px; font-weight: 800; color: var(--texto-2); }
.bh-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.bh-nome small { display: block; color: var(--texto-3); font-weight: 600; font-size: 11.5px; }
.bh-trilho { display: block; height: 10px; border-radius: 6px; background: rgba(255,255,255,.65); overflow: hidden; }
.bh-trilho i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--turquesa), var(--azul)); transform-origin: left; animation: enche .8s var(--anim) both; }
.bh-v { font-weight: 800; white-space: nowrap; }

.podio { display: flex; align-items: flex-end; justify-content: center; gap: 12px; padding-top: 8px; }
.pd { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; max-width: 120px; cursor: pointer; text-align: center; }
.pd b { font-size: 14px; } .pd .fraco { font-size: 11.5px; }
.pd-av { position: relative; transition: transform .2s var(--anim); }
.pd:hover .pd-av { transform: translateY(-4px); }
.pd .avatar.g { width: 58px; height: 58px; font-size: 19px; }
.pd.pos1 .avatar.g { width: 70px; height: 70px; font-size: 22px; background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.pd.pos2 .avatar.g { background: linear-gradient(135deg, #cbd5e1, #94a3b8); }
.pd.pos3 .avatar.g { background: linear-gradient(135deg, #fdba74, #ea580c); }
.pd-med { position: absolute; right: -4px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--preto); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
.pd-base { width: 100%; border-radius: 14px 14px 6px 6px; margin-top: 6px; display: grid; place-items: center; color: #fff; transform-origin: bottom; animation: cresce .8s var(--anim) both; }
.pd.pos1 .pd-base { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.pd.pos2 .pd-base { background: linear-gradient(180deg, #cbd5e1, #94a3b8); }
.pd.pos3 .pd-base { background: linear-gradient(180deg, #fdba74, #f97316); }
.pd-base .ic { width: 26px; height: 26px; }

.medidor .med-arco { animation: medidor 1.1s var(--anim) both; }
@keyframes medidor { from { stroke-dasharray: 0 999; } }
.medidor .legenda { max-width: 260px; }
.mini-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.mini-kpis > div { background: rgba(255,255,255,.6); border-radius: 14px; padding: 10px 12px; }
.mini-kpis small { display: block; color: var(--texto-3); font-size: 11.5px; font-weight: 650; }
.mini-kpis b { font-size: 19px; }

.calor-rolagem { overflow-x: auto; padding-bottom: 4px; }
.calor { display: grid; gap: 4px; min-width: 560px; }
.calor .cl-h { font-size: 10.5px; color: var(--texto-3); text-align: center; font-weight: 650; }
.calor .cl-d { font-size: 12px; color: var(--texto-2); font-weight: 700; align-self: center; }
.calor .cl-c { aspect-ratio: 1; min-height: 20px; border-radius: 6px; cursor: pointer; animation: aparece .5s both;
  background: color-mix(in srgb, #0d9488 calc(var(--f) * 100%), rgba(255,255,255,.55)); transition: transform .12s; }
.calor .cc.zero { background: rgba(255,255,255,.45); }
.calor .cl-c:hover { transform: scale(1.18); box-shadow: 0 0 0 2px var(--preto); }
.calor-rodape { display: flex; align-items: center; gap: 5px; margin-top: 12px; flex-wrap: wrap; }
.calor-rodape i { width: 16px; height: 16px; border-radius: 4px; background: color-mix(in srgb, #0d9488 calc(var(--f) * 100%), rgba(255,255,255,.55)); }
.calor-rodape .tag-info { display: inline-flex; align-items: center; gap: 5px; }
.calor-rodape .tag-info .ic { width: 14px; height: 14px; }

.tabela-rolagem { overflow-x: auto; }
.ranking td { padding: 10px 8px; }
.rk-nome { display: flex; align-items: center; gap: 10px; }
.rk-nome small { display: block; font-size: 11.5px; }
.rk-barra { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.rk-barra .bh-trilho { flex: 1; }
.medalha { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: rgba(12,37,51,.08); }
.medalha.m1 { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #fff; box-shadow: 0 4px 10px rgba(245,158,11,.4); }
.medalha.m2 { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: #fff; }
.medalha.m3 { background: linear-gradient(135deg, #fed7aa, #ea580c); color: #fff; }

.banco-barras { display: flex; flex-direction: column; gap: 10px; }
.bb-l { display: grid; grid-template-columns: 90px 1fr 70px; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; padding: 4px; border-radius: 10px; }
.bb-l:hover { background: rgba(255,255,255,.45); }
.bb-l > b { text-align: right; }
.bb-nome { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-eixo { display: grid; grid-template-columns: 1fr 1fr; height: 14px; position: relative; }
.bb-eixo::after { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: rgba(12,37,51,.25); }
.bb-neg { display: flex; justify-content: flex-end; background: rgba(255,255,255,.45); border-radius: 7px 0 0 7px; overflow: hidden; }
.bb-pos { background: rgba(255,255,255,.45); border-radius: 0 7px 7px 0; overflow: hidden; }
.bb-neg i { display: block; height: 100%; background: linear-gradient(270deg, #fb7185, #e11d48); border-radius: 7px 0 0 7px; transform-origin: right; animation: enche .8s var(--anim) both; }
.bb-pos i { display: block; height: 100%; background: linear-gradient(90deg, #34d399, #059669); border-radius: 0 7px 7px 0; transform-origin: left; animation: enche .8s var(--anim) both; }

.veic-lista { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.veic { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: rgba(255,255,255,.5); cursor: pointer; font-size: 13.5px; }
.veic .txt { flex: 1; min-width: 0; } .veic .txt b { display: block; }
.ponto-cor { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.chips-faltou { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-faltou .chip b { background: var(--amarelo); color: #fff; border-radius: 9px; padding: 0 7px; font-size: 11.5px; }

@media (max-width: 1100px) { .hoje-hero { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .hoje-hero { padding: 18px; }
  .hoje-hero h1 { font-size: 24px; }
  .dash-filtros { gap: 8px; }
  .df-periodos { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .df-periodos::-webkit-scrollbar { display: none; }
  .df-sel { flex: 1; min-width: 0; } .df-sel select { max-width: none; width: 100%; }
  .dash-filtros > .espaco { display: none; }
  .kpis-dash { grid-template-columns: 1fr 1fr; }
  .kpi-dash .val { font-size: 21px; }
  .kpi-dash .kd-spark { display: none; }
  .kpi .sub .variacao small { display: none; }
  .variacao { white-space: normal; }
  .bh { grid-template-columns: 22px minmax(0, 1fr) 70px auto; gap: 8px; }
  .bb-l { grid-template-columns: 70px 1fr 62px; }
  .podio .pd .avatar.g { width: 48px; height: 48px; }
  .tira-agora { gap: 6px; } .ta-i { font-size: 12px; padding: 6px 10px 6px 6px; }
  .rd-leg { min-width: 0; width: 100%; }
}