/* ═══ Trio de janela no estilo do Mac (Dinho 05/10/2026) ═══════════════════════
   Montado por js/janela-trio.js. Vermelha fecha, amarela minimiza, verde
   maximiza/restaura. Bolinhas de 14px com 8px entre elas, no canto superior
   esquerdo do cabeçalho, antes do título. O sinal só aparece com o mouse
   sobre o trio; o balão de cada bolinha aparece na hora (sem atraso). */
.trio-mac {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin-right: 12px;
  line-height: 1;
}
/* O título vem logo depois e empurra o resto para a direita (os cabeçalhos são
   flex com space-between: sem isto, título sozinho iria parar no canto direito). */
.trio-mac + * { margin-right: auto; }

.trio-bt {
  position: relative;
  width: 14px;
  height: 14px;
  min-width: 14px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18);
  font: 700 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-appearance: none;
  appearance: none;
}
/* Área de toque um pouco maior que a bolinha, sem invadir a vizinha (8px de vão). */
.trio-bt::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }

.trio-fechar    { background: #FF5F57; color: #4D0000; }
.trio-minimizar { background: #FEBC2E; color: #985700; }
.trio-maximizar { background: #28C840; color: #006500; }

.trio-sinal { opacity: 0; pointer-events: none; transform: translateY(-.5px); }
.trio-maximizar .trio-sinal { font-size: 9px; }
.trio-mac:hover .trio-sinal,
.trio-mac:focus-within .trio-sinal { opacity: 1; }

.trio-bt:focus-visible { outline: 2px solid #4285F4; outline-offset: 2px; }
.trio-bt:disabled { opacity: .45; cursor: not-allowed; }

/* Balão: alinhado pela esquerda da bolinha (o trio fica colado na borda da
   janela; centralizado, cortaria do lado de fora). */
.trio-bt::after {
  content: attr(data-balao);
  position: absolute;
  top: calc(100% + 8px);
  left: -6px;
  z-index: 1000;
  padding: 5px 8px;
  border-radius: 6px;
  background: #1F1D1A;
  color: #fff;
  font: 600 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.trio-bt:hover::after,
.trio-bt:focus-visible::after { opacity: 1; visibility: visible; }
.trio-bt:not([data-balao])::after,
.trio-bt[data-balao=""]::after { display: none; }

@media print { .trio-mac { display: none; } }