/* ============================================================
   Espelho de aparelhos - grade e detalhe
   ============================================================
   O modal existe pra que o detalhe de um aparelho nao mova os
   outros. Abrindo embaixo da lista, olhar o terceiro celular
   empurrava os dois primeiros pra fora da tela - e num painel
   de operacao a posicao das coisas e memoria muscular.

   A tela do celular e o unico lugar do painel com fundo claro:
   e a imagem do aparelho, nao uma superficie do app. Por isso a
   moldura e escura e o conteudo nao ganha filtro nenhum.
   ============================================================ */

.espelho-fundo {
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  padding:28px;
  background:var(--scrim);
  backdrop-filter:blur(2px);
}

.espelho-caixa {
  display:flex; flex-direction:column;
  width:min(1180px,100%); max-height:100%;
  border:1px solid var(--linha-forte); border-radius:18px;
  background:var(--placa);
  box-shadow:0 40px 90px rgba(0,0,0,.6);
  overflow:hidden;
}

/* O detalhe e mais estreito que a grade: com 1180px a coluna de dados ficava
   com meia tela vazia e a lista de contas virava uma linha de 700px. */
.espelho-fundo[data-modo=detalhe] .espelho-caixa { width:min(1000px,100%); }

.espelho-cabeca { display:flex; align-items:center; gap:14px; padding:16px 18px; border-bottom:1px solid var(--linha-fina); }
.espelho-identidade { min-width:0; flex:1; }
.espelho-identidade h2 { margin:0; font-size:18px; font-weight:600; letter-spacing:-.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.espelho-apoio { margin:2px 0 0; font-size:12.5px; color:var(--tinta-apagada); }
.espelho-apoio code { font:400 12.5px var(--mono); color:var(--tinta-id); }
.espelho-voltar { flex:none; padding:8px 13px; border-radius:9px; background:none; border-color:var(--linha-forte); color:var(--tinta-suave); font-size:12.5px; }
.espelho-voltar:hover:not(:disabled) { background:var(--placa-alta); border-color:var(--tinta-sumida); color:var(--tinta-forte); }
.espelho-fechar { display:grid; place-items:center; flex:none; width:32px; height:32px; padding:0; border-color:transparent; background:none; color:var(--tinta-apagada); }
.espelho-fechar svg { width:17px; height:17px; }
.espelho-fechar:hover:not(:disabled) { background:var(--placa-alta); border-color:transparent; color:var(--tinta-forte); }

.espelho-corpo { min-height:0; flex:1; overflow:auto; padding:18px; }
.espelho-duas { display:grid; grid-template-columns:minmax(0,290px) minmax(0,1fr); gap:22px; align-items:start; }

/* ---------------- janela de telas ao vivo ---------------- */

/* A janela nao tem barra lateral; o body do painel e uma grade de duas
   colunas (ver style.css), entao aqui ela e desfeita. */
body.telas-corpo { display:flex; flex-direction:column; grid-template-columns:none; min-height:100vh; }
.telas-cabeca { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--linha-fina); }
.telas-identidade { flex:1; min-width:0; }
.telas-cabeca h1 { margin:0; font-size:17px; font-weight:600; letter-spacing:-.2px; }
.telas-apoio { margin:2px 0 0; font-size:12.5px; color:var(--tinta-apagada); }
.telas-cabeca button { flex:none; padding:8px 13px; border-radius:9px; background:none; border-color:var(--linha-forte); color:var(--tinta-suave); font-size:12.5px; }
.telas-cabeca button:hover:not(:disabled) { background:var(--placa-alta); border-color:var(--tinta-sumida); color:var(--tinta-forte); }
#telas-pausar.pausado { border-color:var(--atencao-borda); color:var(--atencao); }
.telas-corpo-grade { flex:1; min-height:0; overflow:auto; padding:18px; }
/* Na janela dedicada o celular pode ser maior que no modal: o espaco existe e
   a tela so serve se der pra LER o que esta escrito nela. */
.telas-corpo-grade .espelho-telas { grid-template-columns:repeat(auto-fit,minmax(196px,268px)); }
.telas-nota { margin:20px 0 0; text-align:center; font-size:11px; color:var(--tinta-sumida); }
/* Ampliado: um celular ocupando a janela, com a altura amarrada a viewport
   pra nao precisar rolar justamente quando se quer ler a tela inteira. */
.espelho-telas.ampliada { grid-template-columns:1fr; }
.espelho-telas.ampliada .espelho-moldura { height:calc(100vh - 215px); min-height:260px; aspect-ratio:9/19.5; width:auto; margin-inline:auto; }
.espelho-telas.ampliada .espelho-rotulo { text-align:center; }

/* ---------------- a tela do aparelho ---------------- */

/* Colunas com teto: sem ele, tres celulares num monitor largo viravam tres
   retangulos de 380px de largura - um celular nao tem essa forma. */
.espelho-telas { display:grid; grid-template-columns:repeat(auto-fit,minmax(176px,218px)); justify-content:center; gap:18px; }
.espelho-tela { min-width:0; }

.espelho-moldura {
  position:relative; display:grid; place-items:center;
  width:100%; padding:0; aspect-ratio:9/19.5;
  border:1px solid var(--linha-forte); border-radius:14px;
  background:var(--breu); overflow:hidden;
}
.espelho-moldura img { display:block; width:100%; height:100%; object-fit:contain; }
button.espelho-moldura { cursor:pointer; }
button.espelho-moldura:hover { border-color:var(--tinta-sumida); }
button.espelho-moldura:focus-visible { outline:2px solid var(--acento); outline-offset:2px; }
/* Altura explicita, largura derivada: com so max-height a moldura nao tinha
   altura propria e sobrava faixa preta embaixo da imagem. */
.espelho-moldura.grande { height:min(62vh,600px); aspect-ratio:9/19.5; width:auto; margin-inline:auto; }
.espelho-moldura.grande img { width:100%; height:100%; }
.espelho-recado { position:absolute; margin:0; padding:0 14px; text-align:center; font-size:11.5px; color:var(--tinta-sumida); }
.espelho-moldura:not(.falhou):not(.esperando) .espelho-recado { display:none; }
.espelho-moldura.falhou { border-color:var(--atencao-borda); }
.espelho-moldura.falhou .espelho-recado { color:var(--atencao); }

.espelho-rotulo { display:grid; gap:1px; margin-top:8px; }
.espelho-apelido { min-width:0; font-size:12.5px; font-weight:500; color:var(--tinta-forte); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.espelho-situacao { font-size:11px; color:var(--tinta-apagada); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.espelho-situacao code { font:400 11px var(--mono); color:var(--tinta-sumida); }
.espelho-situacao.ruim { color:var(--parada); }
.espelho-controle { margin-top:6px; padding:4px 10px; font-size:11px; width:100%; }

.espelho-controles { display:flex; align-items:center; justify-content:center; gap:10px; margin:12px 0 0; }
.espelho-pausar { padding:7px 12px; border-radius:8px; background:none; border-color:var(--linha-forte); color:var(--tinta-suave); font-size:12px; }
.espelho-pausar:hover:not(:disabled) { background:var(--placa-alta); border-color:var(--tinta-sumida); color:var(--tinta-forte); }
.espelho-dimensao { font:400 11px var(--mono); color:var(--tinta-sumida); }
.espelho-nota { margin:8px 0 0; text-align:center; font-size:11px; color:var(--tinta-sumida); }

/* ---------------- lado dos dados ---------------- */

.espelho-lado-dados { min-width:0; }
.espelho-estado { display:flex; align-items:center; gap:8px; margin:0 0 14px; font-size:14px; font-weight:600; color:var(--tinta-forte); }
.espelho-estado i { display:grid; place-items:center; color:var(--tinta-sumida); }
.espelho-estado i svg { width:16px; height:16px; }
.espelho-estado.bom i { color:var(--viva); }
.espelho-estado.ruim i { color:var(--parada); }
.espelho-estado b { font:500 14px var(--mono); }

.espelho-abas { display:flex; gap:4px; padding:4px; border:1px solid var(--linha); border-radius:11px; background:var(--breu); }
.espelho-abas button { flex:1; padding:8px 10px; border-color:transparent; border-radius:8px; background:none; color:var(--tinta-apagada); font-size:12.5px; }
.espelho-abas button:hover:not(.ativa) { color:var(--tinta); border-color:transparent; background:var(--placa-alta); }
.espelho-abas button.ativa { background:var(--placa-alta); border-color:var(--linha-forte); color:var(--tinta-forte); font-weight:500; }

.espelho-painel { margin-top:14px; }
/* A lista de contas no modal reusa o desenho do cartao; so recupera a
   divisoria de cima, que no cartao vinha da faixa anterior. */
.aparelho-contas.no-modal { border-top:1px solid var(--linha-fina); border-radius:12px; overflow:hidden; background:var(--breu); }
.aparelho-contas.no-modal .aparelho-conta:first-child { border-top:0; }
.aparelho-contas.no-modal .aparelho-conta.agora .conta-avatar { box-shadow:0 0 0 2px var(--breu), 0 0 0 3px var(--viva); }

.espelho-bloco { padding:15px 16px; margin-bottom:12px; border:1px solid var(--linha); border-radius:12px; background:var(--breu); }
.espelho-bloco h3 { margin:0 0 5px; font-size:14px; font-weight:600; }
.espelho-bloco p { margin:0 0 13px; font-size:12.5px; color:var(--tinta-apagada); }
.espelho-bloco p:last-child { margin-bottom:0; }
.espelho-forma { display:flex; align-items:end; gap:12px; flex-wrap:wrap; }
.espelho-forma label { display:grid; gap:7px; font-size:12px; color:var(--tinta-apagada); }
.espelho-forma input { width:130px; }
.espelho-acao { padding:10px 15px; border-radius:9px; font-size:13px; font-weight:500; }
.espelho-acao.tom-clara { background:var(--tinta); border-color:var(--tinta); color:var(--acento-tinta); font-weight:600; }
.espelho-acao.tom-clara:hover:not(:disabled) { background:var(--tinta-forte); border-color:var(--tinta-forte); }
.espelho-acao.tom-atencao { background:none; border-color:var(--atencao-borda); color:var(--atencao); font-weight:600; }
.espelho-acao.tom-atencao:hover:not(:disabled) { background:var(--atencao-veu); border-color:var(--atencao); }
.espelho-acao:disabled { background:none; border-color:var(--linha-forte); color:var(--tinta-sumida); opacity:1; }

.espelho-escolha { display:flex; flex-wrap:wrap; gap:9px; }

.espelho-vazio { margin:0; padding:34px 18px; border:1px dashed var(--linha-forte); border-radius:12px; text-align:center; font-size:12.5px; color:var(--tinta-apagada); }

@media(max-width:860px) {
  .espelho-fundo { padding:12px; }
  .espelho-duas { grid-template-columns:1fr; }
  .espelho-moldura.grande { max-height:46vh; }
  .espelho-voltar { display:none; }
}