* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background: #f7f7f8; color: #0f172a; }
/* Remover espaçamentos padrão do Bulma que causam scroll no desktop */
.section { padding: 0 !important; }
.container { padding: 0 !important; }
@font-face {
  font-family: 'AmsiProCond-SemiBold';
  src: url('/fontes/AmsiProCond-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AmsiProCond-Black';
  src: url('/fontes/AmsiProCond-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

.columns { min-height: 100vh; gap: 20px; align-items: center; margin: 0; }

.canvas-column { position: relative; background: #fff; display: flex; align-items: center; justify-content: center; padding: 20px; overflow: hidden; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
.panel-column { padding: 20px; margin: 0 20px; background: #fff; display: flex; flex-direction: column; justify-content: center; overflow: visible; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
.app-title { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 28px; font-weight: 800; color: #0f172a; margin: 0 0 12px 0; text-align: center; font-family: inherit; }

#bgCanvas { display: block; width: 100%; height: auto; max-height: 100%; aspect-ratio: 1 / 1; }


select { width: 100%; }

.detalhes { margin-top: 16px; font-size: 14px; }
.detalhes table { width: 100%; }
.detalhes th { width: 35%; color: #64748b; font-weight: 600; }
.panel-column .detalhes { display: none !important; }

/* Botões lado a lado ocupando 100% da largura */
.buttons { display: flex; gap: 12px; }
.buttons .button { flex: 1 1 0; }
 .sending { font-size: 16px; display: inline-flex; align-items: center; }
 .dots { display: inline-flex; margin-left: 4px; }
 .dot { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: #3273dc; animation: dotBlink 1s infinite; }
 .dot:nth-child(2) { animation-delay: .2s; }
 .dot:nth-child(3) { animation-delay: .4s; }
 @keyframes dotBlink { 0% { opacity: 0; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } 100% { opacity: 0; transform: translateY(0); } }

/* Fundo do modal de login totalmente opaco */
#loginModal.is-active .modal-background { background-color: #4D594F !important; opacity: 1 !important; }

/* Botão flutuante de logout */
.floating-logout { position: fixed; top: 12px; right: 12px; z-index: 30; }
.floating-menu { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 12px; background: #ffffff; border-bottom: 1px solid #e5e7eb; }
.floating-menu .menu-links { grid-column: 2; justify-self: center; display: flex; gap: 8px; flex-wrap: wrap; }
.floating-menu .logout { grid-column: 3; justify-self: end; }
.below-menu { margin-top: 72px; }
.table-container { overflow-x: auto; }
.table.responsive { width: 100%; }
.table tr[data-index] { cursor: pointer; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1 1 0; }

@media (max-width: 768px) {
  html, body, .section, .container { height: 100%; overflow: hidden; }
  .section { padding: 0 !important; }
  .columns { height: 100vh; gap: 10px; display: flex; flex-direction: column; padding: 0 20px; }
  .panel-column { flex: 0 0 auto; overflow: visible; margin: 0 !important; padding: 12px; }
  .canvas-column { flex: 1 1 auto; min-height: 0; overflow: hidden; margin: 0 !important; }
  #bgCanvas { width: 100%; height: auto; }
  .field { margin-bottom: 8px; }
  .field .label { font-size: 12px; margin-bottom: 4px; }
  .input { height: 32px; font-size: 14px; }
  .buttons { gap: 8px; }
  .buttons .button { padding: 8px 10px; }
  .app-title { font-size: 28px; margin-bottom: 00px; margin-top: 40px; }
  body.page-table, body.page-table .section, body.page-table .container { height: auto; overflow: auto; }
  .below-menu { margin-top: 84px; }
  .table.responsive th, .table.responsive td { font-size: 12px; padding: 6px 8px; white-space: normal; word-break: break-word; }
}