/* Fontes 100% locais (sem depender de internet): usamos famílias condensada
   e monoespaçada já presentes no Windows/Mac/Linux em vez de baixar do
   Google Fonts, para a página funcionar totalmente offline. */

:root{
  --bg-navy: #0b1424;
  --bg-panel: #101d31;
  --bg-panel-2: #16273f;
  --line: #24374f;
  --accent: #ff9a3c;
  --accent-2: #ffb347;
  --text: #dce6f2;
  --text-dim: #7f93ac;
  --danger: #ff5c5c;
  --ok: #37c98a;
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0; height:100%;
  background: var(--bg-navy);
  color: var(--text);
  font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  overflow: hidden;
}

body{
  display:flex; flex-direction:column;
}

/* ---------- TOPBAR ---------- */
#topbar{
  display:flex; align-items:center; gap:20px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line);
  padding: 8px 16px;
  flex-shrink:0;
  height: 56px;
}

.brand{ display:flex; align-items:center; gap:10px; line-height:1.05; margin-right: 8px; }
.brand-logo{ height:34px; max-width:120px; object-fit:contain; }
.brand-logo.hidden{ display:none; }
.brand-text{ display:flex; flex-direction:column; }
.brand-title{ font-weight:700; letter-spacing:1px; font-size:18px; color: var(--accent); }
.brand-sub{ font-family:'Consolas', 'Courier New', monospace; font-size:10px; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; }

.site-footer{
  flex-shrink:0;
  background: var(--bg-panel);
  border-top: 1px solid var(--line);
  padding: 6px 12px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.site-footer.hidden{ display:none; }

/* ---------- ESPAÇOS DE ANÚNCIO (ocultos por padrão, só o admin habilita) ---------- */
.ad-strip{
  background: var(--bg-panel);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.ad-strip.hidden{ display:none; }

.ad-top{
  border-bottom: 1px solid var(--line);
  padding: 6px 12px;
}

#appRow{ display:flex; flex:1; min-height:0; }

.ad-side{
  width: 160px;
  flex-direction:column;
}
.ad-side#adSideLeft{ border-right: 1px solid var(--line); }
.ad-side#adSideRight{ border-left: 1px solid var(--line); }

.ad-popup-backdrop{
  position:fixed; inset:0; z-index:200;
  background: rgba(11,20,36,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.ad-popup-backdrop.hidden{ display:none; }
.ad-popup-box{
  position:relative;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  max-width: min(520px, 92vw);
  max-height: 85vh;
  overflow:auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.ad-popup-close{
  position:absolute; top:8px; right:8px;
  background:none; border:none; color: var(--text-dim);
  font-size:20px; cursor:pointer; line-height:1; padding:4px 8px;
}
.ad-popup-close:hover{ color: var(--accent); }

@media (max-width: 900px){
  .ad-side{ display:none !important; }
}

/* ---------- AVISO DE COOKIES ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:220;
  background: var(--bg-panel);
  border-top: 1px solid var(--line);
  padding: 14px 18px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
}
.cookie-banner.hidden{ display:none; }
.cookie-banner p{
  flex:1; min-width:220px; margin:0;
  font-size:13px; color: var(--text); line-height:1.5;
}
.cookie-banner-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cookie-banner-link{
  font-size:12px; color: var(--text-dim); text-decoration:underline;
  white-space:nowrap;
}
.cookie-banner-link.hidden{ display:none; }
.cookie-banner-actions .btn{ padding:8px 16px; font-size:13px; white-space:nowrap; }

/* ---------- QUANTITATIVO ---------- */
.qto-backdrop{
  position:fixed; inset:0; z-index:210;
  background: rgba(11,20,36,0.65);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.qto-backdrop.hidden{ display:none; }
.qto-box{
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 22px;
  width: min(880px, 94vw);
  max-height: 86vh;
  display:flex; flex-direction:column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.qto-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.qto-title{ flex:1; font-size:16px; font-weight:600; color: var(--accent-2); }
.qto-status{ font-size:13px; color: var(--text-dim); margin-bottom:10px; }
.qto-table-wrap{ overflow:auto; flex:1; border:1px solid var(--line); border-radius:6px; }
.qto-table{ width:100%; border-collapse:collapse; font-size:13px; }
.qto-table thead th{
  position:sticky; top:0;
  background: var(--bg-panel-2); color: var(--text-dim);
  text-align:left; padding:9px 10px; font-weight:600;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.qto-table tbody td{
  padding:7px 10px; border-bottom:1px solid var(--line); color: var(--text);
  white-space:nowrap;
}
.qto-table tbody tr:last-child td{ border-bottom:none; }
.qto-table tbody tr.qto-total-row td{
  font-weight:700; color: var(--accent-2); background: var(--bg-panel-2);
}
.qto-actions{ margin-top:14px; display:flex; justify-content:flex-end; }

.toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.btn{
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-family:'Oswald', 'Arial Narrow', Arial, sans-serif;
  font-size: 14px;
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  white-space:nowrap;
}
.btn:hover{ border-color: var(--accent); color: var(--accent-2); }
.btn.toggle.active{ background: var(--accent); color: #1a1005; border-color: var(--accent); font-weight:600; }
.btn.danger{ color: var(--danger); border-color: #4a2a2a; }
.btn.danger:hover{ border-color: var(--danger); }
.file-btn{ background: var(--accent); color:#1a1005; font-weight:700; border-color: var(--accent); }
.file-btn:hover{ background: var(--accent-2); color:#1a1005; }

.bg-switch{
  display:flex; align-items:center; gap:6px;
  margin-left: 4px; padding-left: 12px;
  border-left: 1px solid var(--line);
}
.bg-switch-label{
  font-size:12px; color: var(--text-dim); letter-spacing:1px; text-transform:uppercase;
  font-family:'Consolas','Courier New',monospace;
}
.bg-swatch{
  width:22px; height:22px; border-radius:50%;
  background: var(--swatch-color);
  border: 2px solid var(--line);
  cursor:pointer; padding:0;
  transition: border-color .15s, transform .15s;
}
.bg-swatch:hover{ transform: scale(1.1); }
.bg-swatch.active{ border-color: var(--accent); }

.bg-switch input[type="range"]{
  width: 90px;
  accent-color: var(--accent);
}
.bg-switch-val{
  font-family:'Consolas','Courier New',monospace;
  font-size:12px; color: var(--text-dim);
  width: 34px;
}

#loadingIndicator{
  margin-left:auto; display:flex; align-items:center; gap:8px;
  font-family:'Consolas', 'Courier New', monospace; font-size:12px; color: var(--accent-2);
}
#loadingIndicator.hidden{ display:none; }
.spinner{
  width:14px; height:14px; border-radius:50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---------- MAIN LAYOUT ---------- */
#main{ flex:1; display:flex; min-height:0; }

#sidebar{
  width: 320px; flex-shrink:0;
  background: var(--bg-panel);
  border-left: 1px solid var(--line);
  display:flex; flex-direction:column;
  padding: 14px;
}
#sidebar h2{
  font-size:13px; text-transform:uppercase; letter-spacing:1.5px;
  color: var(--text-dim); margin: 0 0 10px 0; font-weight:600;
}

.model-list{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.empty-hint{ color: var(--text-dim); font-size:14px; line-height:1.4; }

.model-card{
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--model-color, var(--accent));
  border-radius: 4px;
  padding: 10px 12px;
}
.model-card.disabled{ opacity: .45; }

.model-card-top{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.model-name{
  flex:1; font-size:15px; font-weight:600; color: var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.model-remove{
  background:none; border:none; color: var(--text-dim); cursor:pointer;
  font-size:16px; line-height:1; padding:2px 4px;
}
.model-remove:hover{ color: var(--danger); }

.model-row{ display:flex; align-items:center; gap:8px; font-size:12px; color: var(--text-dim); margin-top:4px; font-family:'Consolas', 'Courier New', monospace; }
.model-row input[type="range"]{ flex:1; accent-color: var(--accent); }
.model-row .val{ width: 34px; text-align:right; }

.chk{ display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none; font-size:13px; }
.chk input{ accent-color: var(--accent); width:15px; height:15px; }

.sidebar-footer{ padding-top: 10px; border-top: 1px solid var(--line); margin-top:10px; }
.sidebar-footer-row{ display:flex; gap:8px; }
.sidebar-footer-row .btn{ flex:1; font-size:13px; padding:9px 8px; text-align:center; }
.file-label{ display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; }

.search-row{ position:relative; margin-bottom:12px; }
.search-row input{
  width:100%;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-family:'Oswald','Arial Narrow',Arial,sans-serif;
  font-size:13px;
  padding:8px 10px;
  border-radius:5px;
}
.search-row input:focus{ outline:none; border-color: var(--accent); }
.search-results{
  position:absolute; top:100%; left:0; right:0; margin-top:4px;
  background: var(--bg-panel-2); border:1px solid var(--line); border-radius:5px;
  max-height:260px; overflow-y:auto; z-index:30;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.search-results.hidden{ display:none; }
.search-result-item{
  padding:8px 10px; cursor:pointer; font-size:13px; color: var(--text);
  border-bottom:1px solid var(--line);
}
.search-result-item:last-child{ border-bottom:none; }
.search-result-item:hover{ background: var(--bg-panel); color: var(--accent-2); }
.search-result-item .sr-meta{ display:block; font-size:11px; color: var(--text-dim); margin-top:2px; }
.search-empty{ padding:10px; font-size:12px; color: var(--text-dim); }

@media print{
  body *{ visibility:hidden; }
  #qtoBox, #qtoBox *{ visibility:visible; }
  #qtoBox{
    position:absolute; top:0; left:0; width:100%; max-height:none;
    box-shadow:none; border:none; background:#fff; color:#000;
  }
  #qtoBox .qto-title{ color:#000; }
  .qto-table thead th{ background:#eee; color:#000; }
  .qto-table tbody td{ color:#000; border-color:#ccc; }
  .qto-table tbody tr.qto-total-row td{ background:#ddd; color:#000; }
  #qtoClose, .qto-actions, .hint{ display:none !important; }
}
.sidebar-footer .btn{ width:100%; }

/* ---------- MODEL TREE ---------- */
.tree-toggle{
  background:none; border:1px solid var(--line); border-radius:4px; color: var(--text-dim); cursor:pointer;
  font-size:18px; line-height:1; padding: 4px 9px; transition: color .15s, transform .15s, border-color .15s;
  flex-shrink:0;
}
.tree-toggle:hover{ color: var(--accent); border-color: var(--accent); }
.tree-toggle.open{ transform: rotate(90deg); color: var(--accent); border-color: var(--accent); }

.model-tree{
  margin-top:8px; padding-top:8px; border-top: 1px solid var(--line);
  max-height: 260px; overflow-y:auto;
  font-size:13px;
}
.model-tree.hidden{ display:none; }
.tree-loading{ color: var(--text-dim); font-size:12px; padding:4px 0; }

.tree-node{ display:flex; flex-direction:column; }
.tree-row{
  display:flex; align-items:center; gap:6px;
  padding: 2px 0;
  cursor:pointer;
  border-radius:3px;
}
.tree-row:hover{ background: var(--bg-panel); }
.tree-row.selectable .tree-label:hover{ color: var(--accent-2); }
.tree-row input[type="checkbox"]{ accent-color: var(--accent); width:13px; height:13px; flex-shrink:0; }
.tree-label{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color: var(--text);
}
.tree-label.container{ color: var(--text-dim); font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:.5px; }
.tree-children{ display:flex; flex-direction:column; }

/* ---------- VIEWPORT ---------- */
#viewport{ flex:1; position:relative; background: radial-gradient(circle at 50% 40%, #0e1c30 0%, #08111e 100%); }
#three-canvas{ display:block; width:100%; height:100%; }

#axisHint{
  position:absolute; bottom:12px; left:14px;
  font-family:'Consolas', 'Courier New', monospace; font-size:11px; color: var(--text-dim);
  letter-spacing:2px; pointer-events:none;
}

/* ---------- FLOATING NAV TOOLBAR ---------- */
.viewport-toolbar{
  position:absolute; top:16px; left:16px;
  display:flex; flex-direction:column; gap:4px;
  background: rgba(16,29,49,0.92);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px;
  backdrop-filter: blur(2px);
}

.nav-btn{
  display:flex; align-items:center; gap:8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-family:'Oswald', 'Arial Narrow', Arial, sans-serif;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-btn:hover{ background: var(--bg-panel-2); color: var(--text); }
.nav-btn.active{ background: var(--accent); color:#1a1005; font-weight:600; }
.nav-btn:disabled{ opacity:.4; cursor:not-allowed; }
.nav-btn:disabled:hover{ background:transparent; color: var(--text-dim); }
.nav-icon{ font-size:15px; width:16px; text-align:center; }
.nav-sep{ height:1px; background: var(--line); margin: 2px 4px; }
.nav-section-label{
  font-size:11px; color: var(--text-dim); letter-spacing:1px; text-transform:uppercase;
  padding: 2px 10px 0;
}

.measure-actions{
  display:flex; flex-direction:column; gap:6px;
  padding: 6px 10px 4px;
}
.measure-actions.hidden{ display:none; }
.measure-status{
  font-family:'Consolas','Courier New',monospace; font-size:11px; color: var(--accent-2);
}
.measure-actions-row{ display:flex; gap:6px; }
.measure-actions-row .btn{ flex:1; padding:5px 8px; font-size:12px; }
#measureFinish.hidden{ display:none; }
#measureFinish:disabled{ opacity:.4; cursor:not-allowed; }

.selection-panel{
  position:absolute; top:16px; right:16px; width: 240px;
  background: rgba(16,29,49,0.95);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 10px 12px;
  display:flex; flex-direction:column; gap:8px;
}
.selection-panel.hidden{ display:none; }
.selection-panel-top{ display:flex; align-items:center; gap:8px; }
.selection-name{
  flex:1; font-size:15px; font-weight:600; color: var(--accent-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.selection-panel input[type="color"]{
  width:34px; height:24px; padding:0; border:1px solid var(--line);
  border-radius:4px; background:none; cursor:pointer; flex-shrink:0;
}
.icon-btn{
  background:none; border:1px solid var(--line); color: var(--text-dim);
  cursor:pointer; font-size:14px; line-height:1; padding:4px 7px;
  border-radius:4px; transition: color .15s, border-color .15s;
}
.icon-btn:hover{ color: var(--accent-2); border-color: var(--accent); }

.comment-block{ display:flex; flex-direction:column; gap:4px; }
.comment-label{ font-size:13px; color: var(--text); }
.comment-block textarea{
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-family:'Oswald','Arial Narrow',Arial,sans-serif;
  font-size:13px;
  padding:6px 8px;
  border-radius:4px;
  resize: vertical;
  min-height: 44px;
}
.comment-block textarea:focus{ outline:none; border-color: var(--accent); }

/* ---------------------------------------------------------------------- */
/* RESPONSIVO — celular / tablet                                          */
/* ---------------------------------------------------------------------- */

.sidebar-toggle-btn{ display:none; }

.sidebar-backdrop{
  display:none;
  position:fixed; inset:0;
  background: rgba(0,0,0,0.55);
  z-index:40;
}
.sidebar-backdrop.visible{ display:block; }

@media (max-width: 900px){
  html, body{ overflow:auto; }

  #topbar{
    height:auto;
    flex-wrap:wrap;
    row-gap:8px;
    padding: 10px 12px;
  }
  .brand{ order:1; }
  .sidebar-toggle-btn{
    display:inline-flex; align-items:center;
    order:2; margin-left:auto;
  }
  .toolbar{
    order:3;
    flex-basis:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
  }
  .toolbar > *{ flex-shrink:0; }
  #loadingIndicator{ order:4; margin-left:0; }

  .btn, .nav-btn{ padding:9px 13px; font-size:15px; }

  /* Barra lateral de modelos vira uma gaveta que desliza por cima da tela */
  #sidebar{
    position:fixed;
    top:0; right:0;
    height:100%;
    width:min(340px, 86vw);
    z-index:50;
    transform: translateX(100%);
    transition: transform .25s ease;
    box-shadow: -8px 0 24px rgba(0,0,0,0.4);
  }
  #sidebar.open{ transform: translateX(0); }

  /* Barra flutuante de navegação/medição — mais compacta, com scroll se
     não couber na tela toda (celular na horizontal, por exemplo) */
  .viewport-toolbar{
    max-height: 72vh;
    overflow-y:auto;
    max-width: 62vw;
  }
  .nav-label{ font-size:13px; }

  /* Painel de seleção do item vira uma folha fixada embaixo, ocupando a
     largura toda — mais fácil de mexer com o dedo */
  .selection-panel{
    top:auto; left:0; right:0; bottom:0;
    width:auto;
    max-height: 60vh;
    overflow-y:auto;
    border-radius: 14px 14px 0 0;
    border: 1px solid var(--accent);
    border-bottom:none;
  }
}

@media (max-width: 480px){
  .brand-title{ font-size:15px; }
  .brand-sub{ font-size:9px; }
  .sidebar-toggle-btn{ font-size:13px; padding:7px 10px; }
  #sidebar{ width:100vw; }
  .viewport-toolbar{ max-width:70vw; }
}