/* ============================================================
   Ideal Sistemas — Conversor DXF (demo pública)
   Prefixo dxf- para tudo que é específico desta ferramenta;
   herda tokens e vocabulário de ../../../style.css + ../../../demo.css
   + ../../demo-vitrine.css.
   ============================================================ */

.dxf-main{ max-width:1320px; }

/* ----- galeria de modelos (seleção por código FEFCO) ---------- */
.dxf-modelos{
  border:1px solid var(--line-2, #CDD6C7);
  background:var(--surface, #FFFFFF);
  padding:clamp(16px,2vw,22px);
  margin:0 0 28px;
}
.dxf-modelos-titulo{
  font-family:var(--mono, 'IBM Plex Mono', monospace);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted, #718070); margin:0 0 14px; padding:0;
}
.dxf-modelos-grade{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
}
.dxf-modelo-cartao{ position:relative; display:block; cursor:pointer; }
.dxf-modelo-cartao input{ position:absolute; opacity:0; pointer-events:none; }
.dxf-modelo-corpo{
  display:flex; flex-direction:column; gap:8px;
  border:1px solid var(--line-2, #CDD6C7); border-radius:4px;
  padding:12px; height:100%; box-sizing:border-box;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.dxf-modelo-corpo svg{ width:100%; height:auto; display:block; }
.dxf-modelo-codigo{
  font-family:var(--mono, 'IBM Plex Mono', monospace);
  font-size:10px; letter-spacing:.06em; color:var(--accent, #5F8F26); font-weight:500;
}
.dxf-modelo-nome{
  font-family:var(--body, 'IBM Plex Sans', sans-serif);
  font-size:13px; color:var(--ink, #18211B); line-height:1.3;
}
.dxf-modelo-cartao input:checked + .dxf-modelo-corpo{
  border-color:var(--accent, #5F8F26);
  box-shadow:0 0 0 3px rgba(95,143,38,.14);
  background:var(--ground, #F7F9F5);
}
.dxf-modelo-cartao:focus-within .dxf-modelo-corpo{ outline:2px solid var(--accent, #5F8F26); outline-offset:1px; }
.dxf-modelos-nota{
  font-family:var(--mono, 'IBM Plex Mono', monospace);
  font-size:10.5px; letter-spacing:.03em; line-height:1.5;
  color:var(--dim, #A3AFA0); margin:14px 0 0;
}

.dxf-grid{
  display:grid; gap:28px;
  grid-template-columns:minmax(0,340px) minmax(0,1fr);
  align-items:start;
}
@media (max-width:860px){
  .dxf-grid{ grid-template-columns:minmax(0,1fr); }
}

.dxf-col{ display:flex; flex-direction:column; gap:28px; min-width:0; }

/* ----- formulário -------------------------------------------- */
.dxf-form{
  border:1px solid var(--line-2, #CDD6C7);
  background:var(--surface, #FFFFFF);
  padding:clamp(20px,2.4vw,28px);
}
.dxf-form-titulo{
  font-family:var(--display, 'Archivo', sans-serif);
  font-weight:700; font-size:16px; letter-spacing:-.01em;
  color:var(--ink, #18211B);
  margin:0 0 18px;
}
.dxf-campo{ margin:0 0 16px; }
.dxf-campo label{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  font-family:var(--mono, 'IBM Plex Mono', monospace);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted, #718070);
  margin:0 0 6px;
}
.dxf-unid{ color:var(--dim, #A3AFA0); text-transform:none; letter-spacing:0; }
.dxf-campo input,
.dxf-campo select{
  width:100%; box-sizing:border-box;
  font-family:var(--body, 'IBM Plex Sans', sans-serif);
  font-size:16px; color:var(--ink, #18211B);
  background:var(--ground, #F7F9F5);
  border:1px solid var(--line-2, #CDD6C7);
  padding:10px 12px;
}
.dxf-campo input:focus,
.dxf-campo select:focus{
  outline:2px solid var(--accent, #5F8F26); outline-offset:1px;
}

.dxf-erro{
  font-family:var(--mono, 'IBM Plex Mono', monospace);
  font-size:12.5px; line-height:1.5;
  color:#B3261E;
  background:#FBEAE8;
  border:1px solid #E7B4AE;
  padding:10px 12px; margin:0 0 16px;
}

.dxf-acoes{ display:flex; gap:10px; flex-wrap:wrap; margin:4px 0 0; }
.dxf-btn{
  font-family:var(--mono, 'IBM Plex Mono', monospace);
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink, #18211B);
  background:var(--surface, #FFFFFF);
  border:1px solid var(--line-2, #CDD6C7);
  padding:11px 18px; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.dxf-btn:hover:not(:disabled){ border-color:var(--accent, #5F8F26); color:var(--accent, #5F8F26); }
.dxf-btn:disabled{ opacity:.45; cursor:not-allowed; }
.dxf-btn--principal{
  background:var(--accent, #5F8F26); border-color:var(--accent, #5F8F26); color:#fff;
}
.dxf-btn--principal:hover{ background:var(--accent-bright, #8DC63F); border-color:var(--accent-bright, #8DC63F); color:var(--ink, #18211B); }

.dxf-nota{
  font-family:var(--mono, 'IBM Plex Mono', monospace);
  font-size:10.5px; letter-spacing:.04em;
  color:var(--dim, #A3AFA0);
  margin:6px 0 0;
}

.dxf-bloco{
  margin:22px 0 0; padding-top:18px;
  border-top:1px solid var(--line, #E3E8DF);
}
.dxf-bloco-top{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap;
  margin:0 0 12px;
}
.dxf-bloco-top h3{
  font-family:var(--mono, 'IBM Plex Mono', monospace);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted, #718070); margin:0;
}
.dxf-link{
  font-family:var(--mono, 'IBM Plex Mono', monospace);
  font-size:10.5px; color:var(--accent, #5F8F26); text-decoration:none;
}
.dxf-link:hover{ text-decoration:underline; }

.dxf-comp3{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.dxf-comp3 label,
.dxf-av-grade label{
  display:flex; flex-direction:column; gap:5px;
}
.dxf-comp3 label span,
.dxf-av-grade label span{
  font-family:var(--mono, 'IBM Plex Mono', monospace);
  font-size:9.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted, #718070);
}
.dxf-num{
  width:100%; box-sizing:border-box;
  font-family:var(--body, 'IBM Plex Sans', sans-serif);
  font-size:14px; color:var(--ink, #18211B);
  background:var(--ground, #F7F9F5);
  border:1px solid var(--line-2, #CDD6C7);
  padding:8px 10px;
}
.dxf-num:focus{ outline:2px solid var(--accent, #5F8F26); outline-offset:1px; }

.dxf-av-cab{
  display:flex; align-items:center; gap:8px;
  width:100%; background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--mono, 'IBM Plex Mono', monospace);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted, #718070);
}
.dxf-av-corpo{ margin-top:14px; display:flex; flex-direction:column; gap:14px; }
.dxf-av-grade{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 14px; }

.dxf-resultado{
  margin:22px 0 0; padding-top:18px;
  border-top:1px solid var(--line, #E3E8DF);
  display:flex; flex-direction:column; gap:10px;
}
.dxf-resultado > div{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.dxf-resultado dt{
  font-family:var(--mono, 'IBM Plex Mono', monospace);
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted, #718070); margin:0;
}
.dxf-resultado dd{
  font-family:var(--mono, 'IBM Plex Mono', monospace);
  font-size:13px; color:var(--ink, #18211B); margin:0; text-align:right;
}

/* ----- área de desenho ---------------------------------------- */
.dxf-desenho{
  border:1px solid var(--line-2, #CDD6C7);
  background:var(--surface, #FFFFFF);
  min-height:420px; display:flex; flex-direction:column;
}
.dxf-desenho-top{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:14px clamp(16px,2vw,24px);
  border-bottom:1px solid var(--line, #E3E8DF);
}
.dxf-legenda{
  list-style:none; margin:0; padding:0;
  display:flex; gap:12px 16px; flex-wrap:wrap;
}
.dxf-legenda li{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono, 'IBM Plex Mono', monospace);
  font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted, #718070);
}
.dxf-legenda i{
  width:14px; height:3px; border-radius:1px; flex:none; display:inline-block;
}

.dxf-tela{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,2.4vw,28px);
  overflow:auto;
}
.dxf-tela .viz-vazio{ border:none; padding:0; }
.dxf-tela svg{ width:100%; height:auto; max-height:70vh; }

/* ----- painel 3D ------------------------------------------------ */
.dxf-3d-acoes{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.dxf-3d-fold{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono, 'IBM Plex Mono', monospace);
  font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted, #718070);
}
.dxf-3d-fold input[type="range"]{ width:120px; accent-color:var(--accent, #5F8F26); }
.dxf-btn--mini{ padding:7px 12px; font-size:10.5px; }

.dxf-tela--3d{
  padding:0; overflow:hidden; touch-action:none;
  height:clamp(280px, 42vw, 440px); max-width:100%;
}
.dxf-tela--3d .viz-vazio{ padding:clamp(16px,2.4vw,28px); margin:0; }
.dxf-tela--3d canvas{ display:block; max-width:100%; }

@media (prefers-reduced-motion:reduce){
  .dxf-btn{ transition:none; }
}