/* ===========================================================================
   mini-3d-viewer.css — Visor 3D incrustado en las calculadoras
   -------------------------------------------------------------------------
   Un bloque compacto: lienzo 3D a la izquierda/abajo + lista de botones
   que resaltan la pieza al tocarla. Pensado para móvil: targets ≥40px,
   scroll táctil nativo en la lista, sin estados solo-hover.
   =========================================================================== */

.mini3d{
  --m3-brand:var(--primary); --m3-brand-strong:var(--primary-hover);
  --m3-paper:var(--bg-app); --m3-ink:var(--text-body); --m3-line:var(--border);
  --m3-display:var(--font-display);
  --m3-mono:var(--font-mono);
  --m3-body:var(--font-ui);
  font-family:var(--m3-body);
  background:var(--surface);
  border:1.5px solid var(--m3-line);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--sh-sm);
  -webkit-user-select:none; user-select:none;
}
.mini3d *{ box-sizing:border-box; }

/* cabecera */
.mini3d-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; background:var(--m3-paper);
  border-bottom:1.5px solid var(--m3-line);
}
.mini3d-eye{ font-family:var(--m3-mono); font-size:var(--fs-2xs); letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-strong); font-weight:600; }
.mini3d-head h3{ font-family:var(--m3-display); font-weight:600; font-size:var(--fs-sm);
  color:var(--text-strong); margin:2px 0 0; letter-spacing:-.01em; line-height:1.2; }
.mini3d-full{ flex-shrink:0; font-family:var(--m3-mono); font-size:var(--fs-2xs); font-weight:600;
  color:var(--m3-brand); border:1.5px solid var(--m3-line); background:var(--surface);
  border-radius:var(--r-md); padding:6px 9px; text-decoration:none; white-space:nowrap;
  transition:background .14s, border-color .14s; min-height:30px; display:inline-flex;
  align-items:center; }
.mini3d-full:hover{ border-color:var(--m3-brand); }

/* cuerpo: lienzo + lista */
.mini3d-body{ display:grid; grid-template-columns:1fr 1fr; }

/* lienzo 3D */
.mini3d-canvas{
  position:relative; min-height:220px; background:radial-gradient(120% 120% at 40% 30%,var(--bg-app),var(--bg-canvas));
  border-right:1.5px solid var(--m3-line); overflow:hidden;
}
.mini3d-canvas canvas{ display:block; width:100%; height:100%; outline:none; touch-action:none; }
.mini3d-loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--m3-mono); font-size:var(--fs-2xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint); }
.mini3d-hint{ position:absolute; left:8px; bottom:8px; font-family:var(--m3-mono); font-size:var(--fs-2xs);
  color:color-mix(in srgb, var(--text-body) 50%, transparent); letter-spacing:.04em; pointer-events:none; }

/* chip de la pieza seleccionada (aparece sobre el lienzo) */
.mini3d-chip{
  position:absolute; left:50%; top:10px; transform:translateX(-50%) translateY(-6px);
  max-width:88%; padding:7px 11px; border-radius:var(--r-md);
  background:color-mix(in srgb, var(--surface) 96%, transparent); border:1.5px solid var(--accent);
  box-shadow:var(--sh-sm);
  font-size:var(--fs-xs); line-height:1.35; color:var(--m3-ink);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mini3d-chip.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.mini3d-chip b{ font-family:var(--m3-display); font-weight:600; color:var(--m3-brand);
  font-size:var(--fs-xs); display:block; }
.mini3d-chip .s{ color:var(--text-muted); font-size:var(--fs-2xs); }

/* lista de botones (a la derecha del lienzo) */
.mini3d-list{
  padding:8px; overflow-y:auto; max-height:260px;
  display:flex; flex-direction:column; gap:5px;
  scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent;
}
.mini3d-list::-webkit-scrollbar{ width:6px; }
.mini3d-list::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:var(--r-sm); }

.mini3d-cat{ font-family:var(--m3-mono); font-size:var(--fs-2xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--m3-brand); margin:6px 2px 3px; font-weight:600; }
.mini3d-cat:first-child{ margin-top:0; }

.mini3d-btn{
  appearance:none; cursor:pointer; width:100%; text-align:left;
  font-family:var(--m3-body); font-size:var(--fs-xs); line-height:1.25; color:var(--m3-ink);
  background:var(--m3-paper); border:1.5px solid var(--m3-line); border-radius:var(--r-md);
  padding:8px 10px; transition:border-color .14s, background .14s, transform .14s;
  min-height:40px; /* target táctil */
}
.mini3d-btn:hover{ border-color:var(--accent); }
.mini3d-btn:active{ transform:scale(.98); }
.mini3d-btn.active{
  border-color:var(--accent); background:var(--surface);
  box-shadow:0 0 0 1.5px var(--accent), var(--sh-sm);
}
.mini3d-btn .t{ font-weight:600; color:var(--text-strong); display:block; }
.mini3d-btn .f{ font-family:var(--m3-mono); font-size:var(--fs-2xs); font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); margin-top:2px; display:block; }
.mini3d-btn.active .f{ color:var(--accent-strong); }

.mini3d-reset{
  appearance:none; cursor:pointer; width:100%; text-align:left;
  font-family:var(--m3-mono); font-size:var(--fs-2xs); letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-muted); background:transparent;
  border:1.5px dashed var(--m3-line); border-radius:var(--r-md); padding:7px 10px;
  margin-bottom:4px; transition:color .14s, border-color .14s; min-height:34px;
}
.mini3d-reset:hover{ color:var(--m3-brand); border-color:var(--m3-brand); }
.mini3d-reset.active{ color:var(--m3-brand); border-style:solid; border-color:var(--m3-brand); }

/* ---------- responsive: en móvil el lienzo va arriba, lista debajo ---------- */
@media (max-width:760px){
  .mini3d-body{ grid-template-columns:1fr; }
  .mini3d-canvas{ min-height:260px; border-right:none; border-bottom:1.5px solid var(--m3-line); }
  .mini3d-list{ max-height:none; flex-direction:row; flex-wrap:wrap; }
  .mini3d-cat{ width:100%; }
  .mini3d-btn{ flex:1 1 calc(50% - 5px); min-width:0; }
  .mini3d-reset{ flex:1 1 100%; }
}
@media (max-width:380px){
  .mini3d-btn{ flex:1 1 100%; }
}