/* ==========================================================================
   Diagrama interactivo del controlador (UC 561) y manuales embebidos.
   Usa los tokens de tokens.css, así que respeta tema claro/oscuro.
   ========================================================================== */

/* --- Contenedor y lienzo ------------------------------------------------- */
.uc-diagrama {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr);
  gap: var(--e-4);
  align-items: start;
}
@media (max-width: 900px) {
  .uc-diagrama { grid-template-columns: 1fr; }
}

.uc-lienzo {
  background: var(--fondo-1);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  padding: var(--e-3);
}
.uc-svg { display: block; width: 100%; height: auto; }

/* --- Cuerpo de la placa y caja central ----------------------------------- */
.uc-placa {
  fill: var(--fondo-2);
  stroke: var(--acento);
  stroke-width: 1.5;
}
.uc-placa__titulo {
  fill: var(--acento);
  font-size: 46px;
  font-weight: 700;
  letter-spacing: 2px;
  font-family: var(--fuente);
}
.uc-caja__marco { fill: none; stroke: var(--borde-fuerte); stroke-width: 1; }
.uc-caja__trafo { fill: none; stroke: var(--acento); stroke-width: 1; }
.uc-cable { stroke: var(--texto-3); stroke-width: 1; }

.uc-rotulo { fill: var(--texto-2); font-size: 13px; font-family: var(--fuente); }
.uc-rotulo--azul { fill: var(--acento); font-weight: 600; }
.uc-rotulo--rojo { fill: var(--error); font-weight: 600; }
.uc-rotulo--min { font-size: 9px; fill: var(--texto-3); }
.uc-vert { writing-mode: vertical-rl; text-orientation: mixed; }

/* --- Borneras (dibujo) --------------------------------------------------- */
.uc-bornera__caja {
  fill: var(--fondo-3);
  stroke: var(--borde-fuerte);
  stroke-width: 1;
}
.uc-guia { stroke: var(--acento); stroke-width: 1.2; opacity: .55; }

/* --- Hotspots (botones sobre cada conector) ------------------------------ */
.uc-hotspot {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--acento);
  border-radius: 4px;
  background: var(--acento-suave);
  color: var(--acento);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.uc-hotspot:hover,
.uc-hotspot:focus-visible {
  background: var(--acento);
  color: #fff;
  outline: none;
  box-shadow: 0 0 0 3px var(--acento-suave);
  transform: translateY(-1px);
}
.uc-hotspot__num {
  font-family: var(--fuente-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

/* --- Leyenda ------------------------------------------------------------- */
.uc-leyenda {
  background: var(--fondo-1);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  padding: var(--e-3);
}
.uc-leyenda__titulo {
  margin: 0 0 var(--e-2);
  font-size: var(--t-sm);
  color: var(--texto-2);
}
.uc-leyenda__lista { display: flex; flex-direction: column; gap: 2px; }
.uc-leyenda__item {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  width: 100%;
  padding: 6px var(--e-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--texto-1);
  text-align: left;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion);
}
.uc-leyenda__item:hover,
.uc-leyenda__item:focus-visible {
  background: var(--acento-suave);
  border-color: var(--acento);
  outline: none;
}
.uc-leyenda__num {
  flex: 0 0 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
  font-family: var(--fuente-mono);
  font-size: var(--t-xs);
  font-weight: 700;
}
.uc-leyenda__texto { font-size: var(--t-sm); }

/* --- Diálogo de detalle de conector -------------------------------------- */
.uc-funcion { margin: 0 0 var(--e-2); font-weight: 600; color: var(--texto-1); }
.uc-desc { margin: 0 0 var(--e-4); color: var(--texto-2); }
.uc-sub {
  margin: var(--e-4) 0 var(--e-2);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-3);
}
.uc-pin { font-weight: 700; color: var(--acento); white-space: nowrap; }
.uc-detalle { color: var(--texto-2); }
.uc-config { margin: 0; padding-left: var(--e-4); color: var(--texto-1); }
.uc-config li { margin: 3px 0; }
.uc-nota {
  margin: var(--e-3) 0 0;
  padding: var(--e-2) var(--e-3);
  background: var(--acento-suave);
  border-left: 3px solid var(--acento);
  border-radius: var(--r-sm);
  color: var(--texto-2);
  font-size: var(--t-sm);
}
.uc-tabla td, .uc-tabla th { vertical-align: top; }

/* --- Manuales (tarjetas) ------------------------------------------------- */
.manuales {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--e-3);
}
.manual-tarjeta {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-3);
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion), transform var(--transicion);
}
.manual-tarjeta:hover,
.manual-tarjeta:focus-visible {
  border-color: var(--acento);
  background: var(--fondo-3);
  outline: none;
  transform: translateY(-1px);
}
.manual-tarjeta__icono { flex: 0 0 auto; color: var(--acento); margin-top: 1px; }
.manual-tarjeta__texto { display: flex; flex-direction: column; gap: 2px; }
.manual-tarjeta__titulo { font-weight: 600; color: var(--texto-1); }
.manual-tarjeta__resumen { font-size: var(--t-sm); color: var(--texto-2); }

/* --- Visor de documentos ------------------------------------------------- */
.visor-doc { max-height: 68vh; overflow: auto; padding-right: var(--e-2); }
.visor-pdf { height: 70vh; }
.visor-pdf__marco { width: 100%; height: 100%; border: 0; border-radius: var(--r-md); }

.doc-intro, .doc-p { color: var(--texto-2); }
.doc-intro { margin: 0 0 var(--e-4); }
.doc-seccion { margin: 0 0 var(--e-4); }
.doc-h3 { margin: 0 0 var(--e-1); font-size: var(--t-md); color: var(--texto-1); }
.doc-pasos { margin: 0; padding-left: var(--e-4); color: var(--texto-1); }
.doc-pasos li { margin: var(--e-2) 0; }
.doc-nota {
  margin: var(--e-4) 0 0;
  padding: var(--e-2) var(--e-3);
  background: var(--aviso-suave);
  border-left: 3px solid var(--aviso);
  border-radius: var(--r-sm);
  color: var(--texto-2);
  font-size: var(--t-sm);
}