/* Episodio 3 · el mapa de relaciones del artículo */
.mapa-ddd { max-width: 44rem; margin: 1rem auto 0; }
.mapa-ddd__barra { display: flex; justify-content: flex-end; margin-top: 0.5rem; }
.mapa-ddd__info { border: 1px solid var(--linea-suave); border-radius: var(--radio); background: var(--papel-2); padding: 0.7rem 1rem; margin-top: 0.6rem; min-height: 6rem; font-size: 0.93rem; }
.mapa-ddd__info h4 { margin: 0 0 0.3rem; font-size: 1rem; }
.mapa-ddd__info p:last-child { margin-bottom: 0; }
.mapa-ddd__info .nota { margin: 0; border: 0; padding: 0; }

.mapa-ddd__linea { stroke: var(--linea); stroke-width: 1.4; fill: none; }
.mapa-ddd__linea--ohs { stroke-width: 2.4; }
.mapa-ddd__linea--cf { stroke-dasharray: 2 4; stroke-linecap: round; }
.mapa-ddd__linea--sk { stroke-width: 5; stroke: var(--linea-suave); }
.mapa-ddd__linea--acl { stroke-dasharray: 8 3 2 3; }
.mapa-ddd__ud { font-family: var(--mono); font-size: 9px; fill: var(--tinta-suave); }

.mapa-ddd__etiqueta { cursor: pointer; }
.mapa-ddd__etiqueta rect { fill: var(--papel); stroke: var(--tinta); stroke-width: 1; }
.mapa-ddd__etiqueta text { font-family: var(--mono); font-size: 9.5px; font-weight: 500; fill: var(--tinta); }
.mapa-ddd__etiqueta:hover rect, .mapa-ddd__etiqueta:focus-visible rect { stroke: var(--activo); }
.mapa-ddd__etiqueta:focus { outline: none; }
.mapa-ddd--elegido rect { stroke: var(--activo); stroke-width: 2; fill: var(--activo-fondo); }

.mapa-ddd__nodo { cursor: pointer; }
.mapa-ddd__nodo rect { fill: var(--papel); stroke: var(--tinta); stroke-width: 1; }
.mapa-ddd__nodo:focus { outline: none; }
.mapa-ddd__nodo:hover rect, .mapa-ddd__nodo:focus-visible rect { stroke: var(--activo); }
.mapa-ddd__nodo--externo rect { stroke-dasharray: 4 3; fill: var(--papel-2); }
.mapa-ddd__nombre { font-family: var(--mono); font-size: 11px; font-weight: 500; fill: var(--tinta); }
.mapa-ddd__sub { font-family: var(--mono); font-size: 8px; fill: var(--tinta-suave); letter-spacing: 0.06em; text-transform: uppercase; display: none; }
.mapa-ddd--subdominios .mapa-ddd__sub { display: inline; }
.mapa-ddd--subdominios .mapa-ddd__nombre { transform: translateY(-4px); }
.mapa-ddd--subdominios .mapa-ddd__nodo--core rect { stroke-width: 3; fill: var(--papel-3); }
.mapa-ddd--subdominios .mapa-ddd__nodo--generic rect { stroke-dasharray: 2 3; }