/* =========================================================
   LA SAETA DE QUIRÓN
   Atlas del Corpus · Grafo primario
   Todos los estilos quedan limitados a .saeta-atlas
   ========================================================= */

.saeta-atlas {
  --atlas-navy: #191d35;
  --atlas-deep: #101426;
  --atlas-blue: #4e8fd8;
  --atlas-blue-soft: #b9d6ff;
  --atlas-gold: #e5c77b;
  --atlas-gold-dark: #8a6a00;
  --atlas-ivory: #f6f3ea;
  --atlas-ink: #262b43;
  --atlas-muted: #62687c;
  --atlas-line: rgba(25, 29, 53, 0.14);
}

/* El texto editorial conserva la anchura normal de Quark2.
   Sólo el grafo se abre hacia el ancho disponible de pantalla. */

.saeta-atlas #saeta-atlas-primary-mount {
  width: min(1500px, calc(100vw - 2rem));
  margin: 2.5rem 0 3.25rem;
  margin-left: 50%;
  transform: translateX(-50%);
}

.saeta-atlas-primary {
  color: var(--atlas-ink);
}

.saeta-atlas-card {
  overflow: hidden;
  border: 1px solid var(--atlas-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(16, 20, 38, 0.16);
}

.saeta-atlas-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  background: var(--atlas-deep);
  color: #fff;
}

.saeta-atlas-toolbar__copy strong {
  display: block;
  font-size: 1rem;
}

.saeta-atlas-toolbar__copy span {
  color: var(--atlas-blue-soft);
  font-size: 0.82rem;
}

.saeta-atlas-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.saeta-atlas-button {
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 0.56rem 0.9rem;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
}

.saeta-atlas-button:hover,
.saeta-atlas-button:focus-visible {
  border-color: var(--atlas-gold);
  background: rgba(229, 199, 123, 0.17);
  color: #fff;
  outline: none;
}

.saeta-atlas-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  min-height: 690px;
}

.saeta-atlas-graph-wrap {
  position: relative;
  min-width: 0;
  min-height: 690px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at center,
      rgba(142, 188, 255, 0.2),
      transparent 30rem
    ),
    linear-gradient(180deg, #eef1f7, #e2e7f0);
}

#saeta-atlas-graph {
  display: block;
  width: 100%;
  height: 690px;
  touch-action: none;
  user-select: none;
}

.saeta-atlas-local-badge {
  position: absolute;
  bottom: 10px;
  left: 12px;
  padding: 0.28rem 0.58rem;
  border: 1px solid var(--atlas-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--atlas-muted);
  font-size: 0.7rem;
  pointer-events: none;
}

.saeta-atlas-panel {
  padding: 1.2rem;
  border-left: 1px solid var(--atlas-line);
  background: #fbfaf6;
}

.saeta-atlas-panel h3 {
  margin: 0 0 0.5rem;
  color: var(--atlas-navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.48rem;
  line-height: 1.2;
}

.saeta-atlas-panel p {
  margin: 0.45rem 0;
}

.saeta-atlas-meta-label {
  display: block;
  margin-top: 0.85rem;
  color: var(--atlas-gold-dark);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.saeta-atlas-meta-value {
  color: #3c4258;
  font-size: 0.92rem;
}

.saeta-atlas-legend {
  display: grid;
  gap: 0.58rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--atlas-line);
}

.saeta-atlas-legend__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: #444a61;
  font-size: 0.84rem;
}

.saeta-atlas-legend__node {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  border-radius: 50%;
}

.saeta-atlas-legend__node--seminal {
  border: 4px solid var(--atlas-gold);
  background: var(--atlas-navy);
}

.saeta-atlas-legend__node--derived {
  border: 2px solid var(--atlas-blue);
  background: var(--atlas-ivory);
}

.saeta-atlas-legend__line {
  width: 1.75rem;
  height: 0;
  flex: 0 0 auto;
  border-top: 2px solid var(--atlas-blue);
}

.saeta-atlas-legend__line--bridge {
  border-top-style: dashed;
  border-top-color: var(--atlas-gold-dark);
}

.saeta-atlas-legend__field {
  width: 1.9rem;
  height: 0.6rem;
  flex: 0 0 auto;
  border-top: 3px dashed var(--atlas-gold-dark);
  border-bottom: 5px dotted var(--atlas-blue);
  opacity: 0.8;
}

.saeta-atlas-panel__hint {
  margin-top: 1rem !important;
  color: var(--atlas-muted);
  font-size: 0.78rem;
}

/* =========================================================
   SVG: campo recursivo, relaciones y nodos
   ========================================================= */

.saeta-atlas-recursive-field {
  fill: none;
  pointer-events: none;
}

.saeta-atlas-recursive-field--outer {
  stroke: var(--atlas-gold);
  stroke-width: 3;
  stroke-dasharray: 18 11;
  opacity: 0.72;
}

.saeta-atlas-recursive-field--inner {
  stroke: var(--atlas-blue);
  stroke-width: 7;
  stroke-dasharray: 5 9;
  opacity: 0.28;
}

.saeta-atlas-edge {
  fill: none;
  stroke: var(--atlas-blue);
  stroke-width: 2.5;
  cursor: pointer;
}

.saeta-atlas-edge--bridge {
  stroke: var(--atlas-gold-dark);
  stroke-dasharray: 9 7;
}

.saeta-atlas-edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 18;
  cursor: pointer;
}

.saeta-atlas-edge-label {
  fill: #4b5269;
  stroke: #fff;
  stroke-width: 5;
  stroke-linejoin: round;
  paint-order: stroke;
  text-anchor: middle;
  font-size: 13px;
  pointer-events: none;
}

.saeta-atlas-node {
  cursor: grab;
}

.saeta-atlas-node--dragging {
  cursor: grabbing;
}

.saeta-atlas-node circle {
  filter: drop-shadow(0 7px 7px rgba(16, 20, 38, 0.16));
}

.saeta-atlas-node--seminal circle {
  fill: var(--atlas-navy);
  stroke: var(--atlas-gold);
  stroke-width: 5;
}

.saeta-atlas-node--derived circle {
  fill: var(--atlas-ivory);
  stroke: var(--atlas-blue);
  stroke-width: 3;
}

.saeta-atlas-node--selected circle {
  stroke: #fff;
  stroke-width: 7;
}

.saeta-atlas-node text {
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke-linejoin: round;
}

.saeta-atlas-node--seminal text {
  fill: #fff;
  stroke: var(--atlas-deep);
  stroke-width: 3;
  font-size: 14px;
}

.saeta-atlas-node--derived text {
  fill: var(--atlas-navy);
  stroke: var(--atlas-ivory);
  stroke-width: 3;
  font-size: 13px;
}

/* =========================================================
   Adaptación a pantallas pequeñas
   ========================================================= */

@media (max-width: 950px) {
  .saeta-atlas-workspace {
    grid-template-columns: 1fr;
  }

  .saeta-atlas-panel {
    border-top: 1px solid var(--atlas-line);
    border-left: 0;
  }

  .saeta-atlas-graph-wrap {
    min-height: 610px;
  }

  #saeta-atlas-graph {
    height: 610px;
  }
}

@media (max-width: 600px) {
  .saeta-atlas #saeta-atlas-primary-mount {
    width: calc(100vw - 1rem);
  }

  .saeta-atlas-card {
    border-radius: 17px;
  }

  .saeta-atlas-toolbar {
    align-items: flex-start;
  }

  .saeta-atlas-graph-wrap {
    min-height: 570px;
  }

  #saeta-atlas-graph {
    height: 570px;
  }

  .saeta-atlas-panel {
    padding: 1rem;
  }
}