/* =====================================================================
   KRELATORIO - a camera dentro da pagina.
   Companheira de public/js/camera.js. Arquivo proprio, e nao um pedaco do
   krelatorio.css, porque e um componente fechado: ele so existe enquanto
   a camera esta aberta e nao compartilha regra com o resto da tela.

   Ela ocupa a tela inteira de proposito. Quem fotografa solda esta em pe,
   de luva, com o celular numa mao: alvo pequeno e moldura com borda seriam
   duas chances de errar o disparo.
   ===================================================================== */

.cam{
  position:fixed; inset:0; z-index:9999;
  background:#000; display:flex; flex-direction:column;
}

/* `contain` e nao `cover`: a pessoa precisa enxergar TUDO que vai entrar
   na foto antes de apertar. Com `cover` a borda do enquadramento fica
   fora da tela, e a trinca que ela quer registrar aparece cortada no
   relatorio, ja fora da obra. */
.cam-video{
  flex:1; width:100%; min-height:0;
  object-fit:contain; background:#000;
}

.cam-topo{
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 14px;
  /* Degrade em vez de barra solida: a informacao fica legivel sobre
     qualquer imagem, sem tapar o alto do enquadramento. */
  background:linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
}

.cam-conta{
  color:#fff; font-size:14px; font-weight:600;
  background:rgba(0,0,0,.45); border-radius:var(--raio-pill);
  padding:4px 12px;
}

.cam-barra{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 20px;
  /* Espaco do gesto do sistema no iPhone e no iPad, senao o botao de
     disparo cai debaixo da barra de inicio. */
  padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  background:#000;
}

.cam-btn{
  background:rgba(255,255,255,.14); color:#fff;
  border:1px solid rgba(255,255,255,.28); border-radius:var(--raio-pill);
  /* 44px de altura: e o alvo minimo que a mao com luva acerta. Abaixo
     disso o campo erra o toque e tira foto sem querer, ou nao tira. */
  min-height:44px; padding:0 18px;
  font-size:15px; font-weight:600; font-family:inherit; cursor:pointer;
}
.cam-btn:active{ background:rgba(255,255,255,.28) }

/* O disparo e redondo, grande e no meio: e o gesto que a mao encontra sem
   olhar, que e como se fotografa segurando o celular com uma mao so. */
.cam-disparo{
  width:74px; height:74px; border-radius:50%;
  background:#fff; border:5px solid rgba(255,255,255,.45);
  cursor:pointer; flex:none;
}
.cam-disparo:active{ transform:scale(.94) }

/* O clarao confirma o disparo. Em obra clara, sem ele, a pessoa nao sabe
   se apertou e fotografa a mesma coisa tres vezes. */
.cam-flash{
  position:absolute; inset:0; background:#fff; pointer-events:none;
  animation:cam-clarao .09s ease-out;
}
@keyframes cam-clarao{ from{ opacity:.85 } to{ opacity:0 } }

/* Deitado, a barra vai para o lado: no tablet em paisagem, empilhada
   embaixo, ela come a metade do enquadramento. */
@media (orientation:landscape) and (max-height:520px){
  .cam{ flex-direction:row }
  .cam-barra{
    flex-direction:column-reverse; padding:20px 16px;
    padding-right:calc(16px + env(safe-area-inset-right, 0px));
    /* A BARRA COMEÇA ABAIXO DO "FECHAR" DO TOPO. Medido no celular
       deitado (915 por 412): o topo atravessa a tela inteira, e o botão
       "Fechar" dele caía EM CIMA de "Usar esta foto", que é o primeiro da
       barra lateral. O dedo que ia guardar a foto fechava a câmera. 64 px
       são a altura do topo: 10 de respiro, 44 do botão, 10 de respiro. */
    padding-top:calc(64px + env(safe-area-inset-top, 0px));
  }
}

/* O "FECHAR" DO TOPO FICA SEMPRE NO MESMO CANTO. Com a pergunta "Usar
   esta foto?" escondida, ele era o único item do topo e ia para a
   esquerda; com a pergunta à vista, pulava para a direita. Botão que
   muda de lugar entre um toque e outro é toque errado. */
.cam-fechar{ margin-left:auto }
/* O topo respeita o recorte da tela do iPhone, como a barra de baixo já
   respeitava a barra de início. */
.cam-topo{ padding-top:calc(10px + env(safe-area-inset-top, 0px)) }

/* A FOTO TIRADA, PARADA, esperando o sim ou o nao. Ela TOMA O LUGAR do
   video no fluxo, e nao fica por cima dele: por cima, a barra de decidir
   e mais baixa que a de fotografar, e uma faixa do video ao vivo aparecia
   embaixo da foto parada. Mesmo `contain`: o que a pessoa confere e
   exatamente o que vai para o relatorio, sem corte. */
.cam-previa{
  flex:1; width:100%; min-height:0;
  object-fit:contain; background:#000;
}
.cam-pergunta{
  color:#fff; font-size:17px; font-weight:600;
  background:rgba(0,0,0,.45); border-radius:var(--raio-pill); padding:6px 14px;
}
/* SIM E VERDE E GRANDE, NAO E NEUTRO. Os dois tem o alvo de 44px, mas o
   que a mao procura primeiro e o de usar a foto. */
.cam-sim{ background:#16a34a; border-color:#16a34a; min-width:150px }
.cam-sim:active{ background:#15803d }
.cam [hidden]{ display:none !important }

@media print{ .cam{ display:none !important } }