/* Visor de GLB publico. Se apoya en pages.css para la cabecera del articulo,
   la prosa y las preguntas frecuentes; aqui solo va lo propio de la
   herramienta. */

.vglb-publico .post-cabecera { margin-bottom: 0; }

.vglb-zona {
  max-width: 1100px;
  padding-block: 1.8rem 2.2rem;
}

/* ── La zona de soltar ─────────────────────────────────────────────── */
.vglb-soltar {
  display: grid;
  place-items: center;
  gap: 0.45rem;
  min-height: 340px;
  padding: 2rem;
  border: 2px dashed var(--c-ink-30);
  border-radius: 16px;
  background: var(--c-sand-soft);
  color: var(--c-ink-70);
  cursor: pointer;
  text-align: center;
  transition: border-color 140ms ease, background-color 140ms ease;
}
/* EL ATRIBUTO `hidden` NO PUEDE SOLO CONTRA UN `display` DE AUTOR.
   La regla del navegador es [hidden] { display: none }, y pierde contra
   .vglb-soltar { display: grid }, que tiene mas peso. Resultado: el JS hacia
   soltar.hidden = true y no pasaba nada, asi que al abrir un modelo el recuadro
   de "suelta aqui tu archivo" se quedaba puesto ENCIMA y el 3D salia debajo, en
   un panel aparte, como si fueran dos cosas distintas.
   Con esta linea el recuadro desaparece de verdad y el visor ocupa su sitio,
   que es lo que uno espera al soltar un fichero dentro de una caja. */
.vglb-soltar[hidden] { display: none; }

.vglb-soltar:hover,
.vglb-soltar:focus-visible,
.vglb-soltar.is-drag {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  outline: none;
}
.vglb-soltar svg { color: var(--c-accent); }
.vglb-soltar strong { font-size: 1.05rem; color: var(--c-ink); }
.vglb-soltar span { font-size: 0.9rem; }

/* ── El visor ──────────────────────────────────────────────────────── */
.vglb-visor {
  position: relative;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  overflow: hidden;
  background: #141414;
}
.vglb-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #1B1B1B;
}
.vglb-nombre { display: flex; align-items: baseline; gap: 0.55rem; min-width: 0; }
.vglb-nombre strong {
  color: #F5F5F0; font-size: 0.92rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch;
}
.vglb-nombre span { color: rgba(245, 245, 240, 0.5); font-size: 0.8rem; }
.vglb-botones { display: flex; gap: 0.5rem; }
.vglb-chip {
  padding: 0.34rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: transparent;
  color: rgba(245, 245, 240, 0.8);
  font: inherit; font-size: 0.8rem;
  cursor: pointer;
}
.vglb-chip:hover { border-color: rgba(255, 255, 255, 0.3); color: #F5F5F0; }
.vglb-chip.is-on { border-color: var(--c-accent); color: var(--c-accent-glow); }

.vglb-visor model-viewer {
  display: block;
  width: 100%;
  /* Alto acotado: una ventana alta no tiene por que dar un visor de 900px que
     empuje el texto de debajo fuera de la pantalla. */
  height: min(62vh, 520px);
  --poster-color: transparent;
}
.vglb-estado {
  position: absolute;
  inset: auto 0 46% 0;
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  color: rgba(245, 245, 240, 0.6);
  pointer-events: none;
}

/* ── El informe ────────────────────────────────────────────────────── */
.vglb-informe { margin-top: 1.6rem; }
.vglb-informe h2 {
  margin: 0 0 0.9rem;
  font-family: var(--f-display);
  font-size: 1.15rem;
  color: var(--c-ink);
}
.vglb-fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.7rem;
}
.vglb-ficha {
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: var(--c-white);
}
.vglb-ficha b {
  display: block;
  font-family: var(--f-display);
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--c-ink);
}
.vglb-ficha span {
  display: block; margin-top: 2px;
  font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-ink-62);
}

.vglb-veredicto { margin-top: 1rem; display: grid; gap: 0.55rem; }
.vglb-aviso {
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--c-ink-30);
  border-radius: 8px;
  background: var(--c-sand-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--c-ink-70);
}
.vglb-aviso b { color: var(--c-ink); }
.vglb-aviso--bien  { border-left-color: #3E8E5A; }
.vglb-aviso--medio { border-left-color: var(--c-accent); }
.vglb-aviso--mal   { border-left-color: #B4402C; }
.vglb-aviso--info  { border-left-color: var(--c-ink-30); }

.vglb-texto { margin-top: 2.4rem; }

@media (max-width: 620px) {
  .vglb-soltar { min-height: 240px; }
  .vglb-visor model-viewer { height: 52vh; }
  .vglb-nombre strong { max-width: 22ch; }
}

/* Resalte al arrastrar sobre la zona, tambien cuando ya hay un modelo abierto
   y el recuadro de soltar esta oculto. Sin una señal visible, quien arrastra
   un segundo archivo no sabe si esta pagina lo va a aceptar. */
.vglb-zona.is-drag .vglb-visor {
  outline: 2px dashed var(--c-accent);
  outline-offset: 4px;
}
.vglb-zona.is-drag .vglb-visor::after {
  content: 'Suelta para sustituir el modelo';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(20, 20, 20, 0.72);
  color: var(--c-accent-glow);
  font-size: 0.95rem;
  font-weight: 600;
  pointer-events: none;
}