/* =========================================================
   15. Overrides del tema base (css/01..10 proceden del prototipo original; aquí se ajustan sin tocarlos)
   ========================================================= */
/* Contenedores opacos (accesibilidad): el anidado es un tono más oscuro que la raíz para marcar profundidad. */
:root {
  --ctr-root-bg: #f4f4f2;
  --ctr-bg: #ededeb;
}
:root[data-theme="dark"] {
  --ctr-root-bg: #222222;
  --ctr-bg: #282828;
}

/* Las aristas (#edges) se dibujan encima de los nodos: con contenedores opacos quedaban ocultas.
   Los nodos en arrastre (z 1000) o elevados (z 900) siguen por encima; el hit-stroke de la arista sigue siendo clicable. */
#edges { z-index: 2; }

/* P12: degradados de marca (ids en normalize.js GRADIENTS; 135°, tres paradas). Banda en la cabecera de cada Main instance, hero de la ficha y banner del proyecto. */
.grad-sunset { background: linear-gradient(135deg, #74276c, #c53364, #fd8263); }
.grad-violet { background: linear-gradient(135deg, #274b74, #8233c5, #e963fd); }
.grad-candy { background: linear-gradient(135deg, #879af2, #d3208b, #fda000); }
.grad-ocean { background: linear-gradient(135deg, #8929ad, #436aac, #43b7b8); }
.grad-mint { background: linear-gradient(135deg, #276174, #33c58e, #63fd88); }
.grad-aurora { background: linear-gradient(135deg, #574bcd, #2999ad, #41e975); }
.grad-berry { background: linear-gradient(135deg, #363553, #903775, #e8458b); }
.grad-cobalt { background: linear-gradient(135deg, #5c2774, #335cc5, #637ffd); }
.grad-amber { background: linear-gradient(135deg, #ea5a6f, #de791e, #fccf3a); }
.grad-flamingo { background: linear-gradient(135deg, #f17b41, #e05ba2, #cd4bc9); }
.ctr.root > .ctr-head > .card-grad { height: 96px; margin: -12px -16px 6px; border-radius: 13px 13px 0 0; pointer-events: none; }
.grad-picker { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0; }
.grad-dot { width: 34px; height: 34px; border-radius: 50%; border: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .18); transition: transform .12s, box-shadow .12s; }
.grad-dot:hover { transform: scale(1.08); }
.grad-dot.active { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--fg); }
/* Staff en el pie de la card: @usuario · rol */
.card-foot .staff .role { color: var(--fg-3); }