/* =============================================================================
 * Render de la estructura. Misma familia visual que Planta: el alumno pasa de
 * una a otra y no tiene que volver a aprender dónde está cada cosa.
 * ========================================================================== */

.zmc-render-modal {
  position: fixed; inset: 0; z-index: 10050;
  display: grid; place-items: center;
  background: rgba(2, 8, 20, .78);
  backdrop-filter: blur(3px);
}
.zmc-render-modal[hidden] { display: none; }

.zmc-render-caja {
  width: min(1180px, 96vw); height: min(88vh, 860px);
  display: flex; flex-direction: column;
  border: 1px solid rgba(69, 224, 255, .25);
  border-radius: 14px;
  background: linear-gradient(180deg, #071427, #040d1c);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  overflow: hidden;
}

.zmc-render-cabecera {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(69, 224, 255, .18);
}
.zmc-render-cabecera h3 { margin: 2px 0 0; color: #e6f4ff; font-size: 1.05rem; }
.zmc-render-marca {
  margin: 0; color: #45e0ff; font-size: .58rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
}
.zmc-render-version { margin-left: auto; color: #5f87ad; font-size: .68rem; }

.zmc-render-cuerpo {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 320px 1fr;
}
.zmc-render-controles {
  overflow-y: auto; padding: 16px;
  border-right: 1px solid rgba(69, 224, 255, .18);
}
.zmc-render-panel {
  display: flex; flex-direction: column; min-width: 0;
  padding: 16px;
}

/* Los pasos, encadenados por la línea de la izquierda, igual que en Planta. */
.zmc-render-paso {
  border-left: 2px solid rgba(69, 224, 255, .28);
  padding: 2px 0 10px 12px;
  margin: 0 0 12px 6px;
}
.zmc-render-paso h4 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px; font-size: .82rem; color: #7dd3fc; font-weight: 700;
}
.zmc-render-paso h4 span {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(69, 224, 255, .18); color: #bfe9ff;
  font-size: .72rem; font-weight: 800; line-height: 1;
}
.zmc-render-pista {
  margin: 0 0 8px; color: #93b4d6; font-size: .73rem; line-height: 1.45;
}

.zmc-render-principal {
  width: 100%; padding: 10px 12px; margin-bottom: 6px;
  border: 0; border-radius: 9px; cursor: pointer;
  background: linear-gradient(180deg, #0ea5e9, #0284c7);
  color: #04101f; font-weight: 800; font-size: .82rem;
}
.zmc-render-principal:hover { filter: brightness(1.08); }
.zmc-render-principal:disabled { opacity: .45; cursor: default; filter: none; }
.zmc-render-secundario {
  padding: 5px 10px; font-size: .72rem; cursor: pointer;
  border: 1px solid rgba(69, 224, 255, .35); border-radius: 6px;
  background: transparent; color: #7dd3fc;
}

.zmc-render-check {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px; color: #cfe8ff; font-size: .76rem; cursor: pointer;
}
.zmc-render-campo { display: block; margin-bottom: 8px; }
.zmc-render-campo span {
  display: block; margin-bottom: 3px;
  color: #7dd3fc; font-size: .7rem; font-weight: 700;
}
.zmc-render-campo textarea {
  width: 100%; resize: vertical;
  padding: 7px 9px; border-radius: 7px;
  border: 1px solid rgba(69, 224, 255, .22);
  background: rgba(4, 14, 28, .8); color: #dbeeff;
  font-size: .72rem; line-height: 1.45; font-family: inherit;
}
.zmc-render-mas > summary {
  cursor: pointer; color: #7dd3fc; font-size: .74rem;
  padding: 5px 0; list-style: none;
}
.zmc-render-mas > summary::before { content: '▸ '; }
.zmc-render-mas[open] > summary::before { content: '▾ '; }

#zmc-render-miniatura img {
  width: 100%; border-radius: 8px; margin-top: 6px;
  border: 1px solid rgba(69, 224, 255, .25);
}

/* ── La salida ───────────────────────────────────────────────────────────── */
.zmc-render-salida {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  align-content: start;
}
.zmc-render-vista { margin: 0; }
.zmc-render-vista figcaption {
  margin-bottom: 5px; color: #7dd3fc;
  font-size: .74rem; font-weight: 700;
}
.zmc-render-vista img {
  width: 100%; border-radius: 10px;
  border: 1px solid rgba(69, 224, 255, .22);
}
.zmc-render-fallo {
  margin: 0; padding: 14px; border-radius: 10px;
  border: 1px dashed rgba(255, 158, 205, .4);
  color: #ff9ecd; font-size: .76rem;
}
/* El control de la estructura: lo que dice la IA revisora al comparar el render
   con la captura. Va debajo de la imagen porque es parte de mirarla. */
.zmc-render-control {
  margin: 6px 0 0; padding: 7px 9px; border-radius: 7px;
  background: rgba(8, 21, 43, .6);
  border-left: 3px solid rgba(14, 165, 233, .7);
  color: #a8c8e6; font-size: .72rem; line-height: 1.45;
}

.zmc-render-acciones {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; flex-wrap: wrap;
}
.zmc-render-aviso {
  flex: 1; color: rgba(190, 226, 255, .78);
  font-size: .74rem; line-height: 1.4;
}
.zmc-render-aviso.es-ok { color: #4ade80; }
.zmc-render-aviso.es-mal { color: #ff9ecd; }
.zmc-render-aviso.es-esperando {
  flex: 0 0 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid rgba(69, 224, 255, .22);
  background: rgba(8, 21, 43, .6);
  font-variant-numeric: tabular-nums;
}
.zmc-render-aviso.es-esperando::before {
  content: ''; flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: #0ea5e9;
  animation: zmc-render-late 1s ease-in-out infinite;
}
@keyframes zmc-render-late { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .zmc-render-aviso.es-esperando::before { animation: none; opacity: .9; }
}

@media (max-width: 900px) {
  .zmc-render-cuerpo { grid-template-columns: 1fr; }
  .zmc-render-controles { border-right: none; border-bottom: 1px solid rgba(69, 224, 255, .18); max-height: 46%; }
}