/* Apontamento de Producao - Filial
   Complementa o Bootstrap 5, nao substitui. */

/* Paleta da identidade Inova Carreteis:
   verde escuro do "INOVA" e verde limao do "CARRETEIS". */
:root {
  --inova-verde: #0f3b2d;        /* verde escuro da marca */
  --inova-verde-medio: #1c5c45;  /* hover / gradiente */
  --inova-verde-fundo: #072019;  /* fundo profundo do login */
  --inova-lima: #8cc63f;         /* verde limao da marca */
  --inova-lima-escuro: #6ea52c;  /* lima com contraste para texto */
}

body {
  background-color: #f3f6f3;
  color: #1f2a25;
}

/* ---------- Navbar ---------- */
.bg-dark-inova {
  background-color: var(--inova-verde) !important;
  border-bottom: 3px solid var(--inova-lima);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: var(--inova-lima);
}

/* Logo no cabecalho, quando o arquivo existe. */
.navbar-logo {
  height: 30px;
  width: auto;
  vertical-align: -6px;
  margin-right: .35rem;
}

/* ---------- Botao principal ---------- */
.btn-inova {
  background-color: var(--inova-verde);
  border-color: var(--inova-verde);
  color: #fff;
}
.btn-inova:hover,
.btn-inova:focus {
  background-color: var(--inova-verde-medio);
  border-color: var(--inova-verde-medio);
  color: #fff;
}

/* Acao secundaria em lima, para destaque sem competir com o verde escuro. */
.btn-lima {
  background-color: var(--inova-lima);
  border-color: var(--inova-lima);
  color: #14301f;
  font-weight: 600;
}
.btn-lima:hover,
.btn-lima:focus {
  background-color: var(--inova-lima-escuro);
  border-color: var(--inova-lima-escuro);
  color: #fff;
}

/* Links dentro do conteudo seguem a marca. */
main a:not(.btn):not(.nav-link):not(.page-link) {
  color: var(--inova-verde-medio);
}
main a:not(.btn):not(.nav-link):not(.page-link):hover {
  color: var(--inova-verde);
}

/* Abas do cadastro */
.nav-tabs .nav-link {
  color: #55605a;
}
.nav-tabs .nav-link.active {
  color: var(--inova-verde);
  font-weight: 600;
  border-bottom-color: transparent;
  box-shadow: inset 0 -3px 0 var(--inova-lima);
}

/* ---------- Tela de login / setup ---------- */
.tela-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--inova-verde), var(--inova-verde-fundo));
  padding: 1.5rem;
}

.login-box {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 12px;
  padding: 2rem 1.75rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
  border-top: 4px solid var(--inova-lima);
}

.login-logo {
  display: block;
  max-width: 210px;
  height: auto;
  margin: 0 auto 1rem;
}

/* ---------- Cards de acao do menu ---------- */
.card-acao {
  border: 1px solid #dfe6e0;
  border-left: 4px solid var(--inova-lima);
  transition: transform .12s ease, box-shadow .12s ease;
}
.card-acao:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 59, 45, .18);
}

.icone-acao {
  font-size: 1.9rem;
  line-height: 1;
  color: var(--inova-verde);
  margin-bottom: .5rem;
}

/* ---------- Indicadores ---------- */
.kpi {
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--inova-verde);
}

.kpi-label {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #6c757d;
}

/* Segunda linha dentro do rotulo de um KPI: o mesmo valor em outra unidade
   (ex.: "5h 30min" em cima, "5,5 h" embaixo, para copiar para planilha). */
.kpi-sub {
  font-size: .68rem;
  text-transform: none;
  letter-spacing: 0;
  color: #8b968d;
}

/* OEE e TEEP: os indicadores que resumem tudo, maiores que os demais. */
.kpi-destaque {
  font-size: 2.05rem;
  font-weight: 700;
}

/* Reaproveita a cor semantica quando aplicada no .kpi */
.kpi.text-success { color: var(--bs-success) !important; }
.kpi.text-warning { color: #b8860b !important; }
.kpi.text-danger  { color: var(--bs-danger) !important; }

/* ---------- Produtos ---------- */

.produto-card {
  border: 1px solid #dfe6e0;
  border-left: 4px solid var(--inova-verde);
}

.produto-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
  letter-spacing: .02em;
}

/* A especificacao costuma vir em linhas curtas de medidas e material:
   limitar a largura mantem a leitura confortavel. */
.produto-descricao {
  white-space: pre-line;
  max-width: 72ch;
  line-height: 1.5;
}

/* ---------- Qualidade ---------- */

.qualidade-grupo {
  border-bottom: 2px solid var(--inova-lima);
  padding-bottom: .25rem;
  letter-spacing: .04em;
}

.qualidade-card {
  border: 1px solid #dfe6e0;
  border-left: 4px solid var(--inova-lima);
}

/* Galeria de fotos: grade que se ajusta sozinha a largura disponivel,
   sem media query - cada item pede no minimo 150px. */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .75rem;
}

.galeria-item {
  margin: 0;
  border: 1px solid #e3e9e4;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.galeria-item img {
  display: block;
  width: 100%;
  height: 130px;
  /* cover recorta em vez de distorcer: foto de chao de fabrica vem em
     proporcoes variadas e esticar atrapalha julgar o defeito. */
  object-fit: cover;
  background: #f1f4f1;
}

/* Documento que nao e imagem: bloco com o icone no lugar da miniatura. */
.galeria-doc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 130px;
  background: #f4f7f4;
  color: var(--inova-verde);
  text-decoration: none;
  gap: .25rem;
}
.galeria-doc i { font-size: 2.2rem; line-height: 1; }
.galeria-doc span { font-size: .72rem; font-weight: 700; letter-spacing: .05em; }

.galeria-item figcaption {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .4rem .5rem .5rem;
  font-size: .72rem;
  line-height: 1.3;
}

.galeria-titulo {
  font-weight: 600;
  color: #1f2a25;
  /* Legenda longa nao pode empurrar a largura da coluna do grid. */
  overflow-wrap: anywhere;
}

/* ---------- Planta da fabrica ---------- */

.planta-wrap {
  overflow-x: auto;
  background: #fff;
}

.planta-svg {
  display: block;
  width: 100%;
  height: auto;
  /* Limita a altura em tela larga: o mapa e quadrado e ocuparia a tela toda. */
  max-height: 74vh;
  /* Sem isso o SVG estica e a celula deixa de ser quadrada - num mapa em
     escala, quadrado torto e erro de leitura, nao so feiura. */
  aspect-ratio: 1 / 1;
  min-width: 420px;
}

/* Consulta: celula clicavel com realce ao passar o mouse. */
.planta-cel {
  cursor: pointer;
  transition: opacity .1s ease;
  opacity: .62;
}
.planta-cel:hover { opacity: .9; }

/* Area aberta no painel: fica opaca para se destacar das demais. */
.planta-cel-sel { opacity: .95; }

/* Editor */
.planta-edit .cel {
  /* Celula vazia precisa receber o clique mesmo sem preenchimento. */
  pointer-events: all;
  opacity: .68;
}
.planta-edit.pincel-ativo { cursor: crosshair; }
.planta-edit .cel:hover { opacity: .95; }

/* O nivel superior e pequeno: sem largura minima ele ficaria minusculo. */
@media (min-width: 992px) {
  .planta-svg { min-width: 520px; }
}

/* ---------- Presenca ---------- */

/* Linha que acabou de ser gravada individualmente: destaque temporario para
   o supervisor achar de volta a pessoa depois do recarregamento. */
.linha-salva > td {
  background-color: #e8f5ec !important;
  box-shadow: inset 3px 0 0 var(--inova-lima);
}

/* Coluna de pessoas por setor no dashboard. Usa os mesmos pontos de quebra
   dos cards de farol, entao a coluna fica alinhada com o card do setor. */
.coluna-pessoas {
  border: 1px solid #dfe6e0;
  border-top: 3px solid var(--inova-lima);
  border-radius: 6px;
  padding: .4rem .5rem .2rem;
  height: 100%;
  background: #fff;
}

.coluna-pessoas-titulo {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--inova-verde);
  text-align: center;
  padding-bottom: .3rem;
  margin-bottom: .25rem;
  border-bottom: 1px solid #eef2ee;
}

/* Grade usada no bloco "sem setor principal", onde o nome vai completo e
   nao ha coluna estreita: o numero de colunas se ajusta a largura. */
.grade-presenca {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .35rem .75rem;
}

.chip-presenca {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .1rem;
  font-size: .78rem;
  border-bottom: 1px solid #f2f5f2;
  min-width: 0;
}

/* Ultima pessoa da coluna nao precisa de divisoria. */
.coluna-pessoas .chip-presenca:last-child {
  border-bottom: 0;
}

.chip-nome {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip-pct {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: #6c757d;
  font-size: .76rem;
}

/* Ponto colorido do status. Tem borda escura para nao desaparecer quando a
   pagina e impressa em preto e branco. */
.ponto-presenca {
  display: inline-block;
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .35);
}

.ponto-verde    { background: #2e9e5b; }
.ponto-vermelho { background: #d64550; }
.ponto-amarelo  { background: #e8a70a; }
.ponto-neutro   { background: #cfd6d0; }

/* ---------- Pessoas ---------- */

.pessoa-card {
  border: 1px solid #dfe6e0;
  border-left: 4px solid var(--inova-verde);
}

/* Nivel de polivalencia: a cor indica o quanto a pessoa esta autonoma
   naquele setor, do amarelo (ainda aprendendo) ao verde da marca. */
.badge.nivel-aprendendo {
  background: #ffe06b;
  color: #3d2c00;
}
.badge.nivel-apto {
  background: #2e9e5b;
  color: #fff;
}
.badge.nivel-referencia {
  background: var(--inova-verde);
  color: #fff;
  border: 2px solid var(--inova-lima);
}

/* ---------- Treinamento ---------- */

.treinamento-card {
  border: 1px solid #dfe6e0;
  border-left: 4px solid var(--inova-verde-medio);
}

/* Video incorporado (YouTube/Vimeo): mantem a proporcao 16:9 em qualquer
   largura, sem depender de altura fixa. */
.video-embed {
  position: relative;
  width: 100%;
  max-width: 820px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Fallback para navegador sem aspect-ratio (versoes antigas). */
@supports not (aspect-ratio: 16 / 9) {
  .video-embed { height: 0; padding-bottom: 56.25%; }
}

/* Video enviado como arquivo. */
.video-arquivo {
  width: 100%;
  max-height: 420px;
  background: #000;
  border-radius: 8px;
}

/* ---------- Card de setor do dashboard ---------- */

.card-setor {
  border: 1px solid #d5ded7;
}

/* Nome do processo: e o titulo do card, precisa dominar visualmente. */
.card-setor-titulo {
  background: var(--inova-verde);
  color: #fff;
  text-align: center;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .6rem .5rem;
  border-bottom: 3px solid var(--inova-lima);
  line-height: 1.2;
}

.card-setor .card-body {
  padding: .6rem .7rem;
}

.card-setor-total {
  background: #f4f7f4;
  text-align: right;
  font-size: .72rem;
  color: #6c757d;
  padding: .4rem .7rem;
  line-height: 1.35;
}

/* ---------- Indicadores do dashboard (sinaleiro) ---------- */

.ind-linha {
  padding: .6rem 0;
  border-bottom: 1px solid #e9efe9;
}
.ind-linha:first-of-type {
  padding-top: .15rem;
}
.ind-linha:last-of-type {
  border-bottom: 0;
  padding-bottom: .15rem;
}

.ind-nome {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #55606d;
  margin-bottom: .3rem;
  text-align: center;
}

/* valor atual | sinaleiro | valor alvo
   As colunas laterais tem largura minima zero para o texto poder encolher
   quando o card ocupa 1/6 da tela. */
.ind-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .3rem;
}

.ind-atual,
.ind-alvo {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0;
}

/* Tamanho calibrado pelo pior caso: um percentual tipo "79,7%" tem 5
   caracteres e precisa caber na coluna de ~57px quando sao 6 cards por linha.
   Aumentar isso faz o numero encostar no sinaleiro. */
.ind-atual {
  align-items: flex-end;
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--inova-verde);
  white-space: nowrap;
}

.ind-alvo {
  align-items: flex-start;
  font-size: .98rem;
  font-weight: 600;
  color: #8b95a3;
  white-space: nowrap;
}

.ind-atual small,
.ind-alvo small {
  font-size: .56rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #9aa4b1;
  margin-top: .1rem;
}

/* Corpo do sinaleiro: pilula escura com as tres lampadas. */
.sinaleiro {
  display: flex;
  gap: 4px;
  padding: 4px 6px;
  background: #2b3038;
  border-radius: 999px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55);
  flex: 0 0 auto;
}

.lampada {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  /* Apagada: quase preta, para a acesa saltar. */
  background: #454c56;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
}

.lampada.acesa {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35);
}

.lampada.acesa-vermelho {
  background: radial-gradient(circle at 35% 30%, #ff7d86, #cc2b36);
  box-shadow: 0 0 9px 2px rgba(230, 60, 72, .75), inset 0 1px 1px rgba(255, 255, 255, .4);
}
.lampada.acesa-amarelo {
  background: radial-gradient(circle at 35% 30%, #ffe06b, #e0a005);
  box-shadow: 0 0 9px 2px rgba(230, 170, 10, .75), inset 0 1px 1px rgba(255, 255, 255, .4);
}
.lampada.acesa-verde {
  background: radial-gradient(circle at 35% 30%, #74d998, #1e8a4d);
  box-shadow: 0 0 9px 2px rgba(40, 165, 95, .75), inset 0 1px 1px rgba(255, 255, 255, .4);
}

.ind-status {
  font-size: .66rem;
  text-align: center;
  margin-top: .25rem;
  color: #6c757d;
  line-height: 1.3;
}
.ind-status-verde    { color: #1f8049; font-weight: 600; }
.ind-status-vermelho { color: #b02a35; font-weight: 600; }
.ind-status-amarelo  { color: #8a6100; }

/* Telas largas (6 cards por linha ja cabem): pode crescer de novo. */
@media (min-width: 1600px) {
  .card-setor-titulo { font-size: 1.16rem; }
  .ind-atual { font-size: 1.5rem; }
  .ind-alvo  { font-size: 1.12rem; }
  .lampada   { width: 16px; height: 16px; }
  .ind-nome  { font-size: .72rem; }
  .ind-status { font-size: .7rem; }
}

/* Celular: 2 cards por linha, tudo menor. */
@media (max-width: 575px) {
  .card-setor-titulo { font-size: .92rem; padding: .45rem .35rem; }
  .card-setor .card-body { padding: .45rem .4rem; }
  .ind-atual { font-size: 1.15rem; }
  .ind-alvo  { font-size: .9rem; }
  .lampada   { width: 11px; height: 11px; }
  .sinaleiro { gap: 3px; padding: 3px 4px; }
  .ind-nome  { font-size: .6rem; }
  .ind-status { font-size: .58rem; }
  .card-setor-total { font-size: .64rem; }
}

/* ---------- Grafico de producao por dia ---------- */

/* Com muitos dias o SVG fica mais largo que a tela: rola so ele,
   nunca o corpo da pagina. */
.grafico-scroll {
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: .25rem;
}

.grafico-scroll svg {
  max-width: none; /* preserva a largura calculada por dia */
  height: auto;
}

.legenda-cor {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  vertical-align: -1px;
  margin-right: .15rem;
}

.legenda-refugo {
  background: #8d99ae;
  position: relative;
}
.legenda-refugo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .28);
  border-radius: 2px;
}

/* Dia util sem apontamento: contorno tracejado, igual ao marcador do grafico. */
.legenda-vazio {
  background: transparent;
  border: 1px dashed #8d99ae;
  height: 7px;
  vertical-align: 1px;
}

.legenda-traco {
  display: inline-block;
  width: 18px;
  height: 0;
  border-top: 2px dashed #0f3b2d;
  vertical-align: 3px;
  margin-right: .15rem;
}

.legenda-traco.legenda-oee {
  border-top-color: #c0392b;
}

.legenda-traco.legenda-capacidade {
  border-top-color: #8d99ae;
  border-top-style: dotted;
}

.legenda-traco.legenda-tendencia {
  border-top-color: #e07b39;
  border-top-width: 3px;
}

/* ---------- Formulario ---------- */
label.form-label {
  font-weight: 500;
  margin-bottom: .2rem;
}

input[readonly] {
  cursor: default;
}

/* Em celular os campos ficam maiores para o dedo. */
@media (max-width: 576px) {
  .form-control, .form-select {
    font-size: 1rem;
    padding: .55rem .75rem;
  }
  .kpi { font-size: 1.25rem; }
  .kpi-destaque { font-size: 1.65rem; }
}

/* ---------- Impressao ---------- */
@media print {
  .navbar, footer, .btn, form.card { display: none !important; }
  body { background: #fff; }
  .card { border: 1px solid #ccc !important; break-inside: avoid; }
}