/* Organisation tree: department names only. Lines and the travelling pulses are drawn by almasa-orgchart.js in the SVG layer. */
.ot, .ot__legend { --ot-line: rgba(11, 21, 86, 0.28); --ot-card: #FFFDF8; --ot-text: #0B1556; --ot-muted: #475569; --ot-gold: #D9B25A; --ot-return: #14B8A6;
      position: relative; display: grid; justify-items: center; gap: clamp(2.6rem, 5vw, 3.6rem); }
html.dark .ot, html.dark .ot__legend { --ot-line: rgba(217, 178, 90, 0.4); --ot-card: #0F1857; --ot-text: #F8F2E6; --ot-muted: rgba(248, 242, 230, 0.8); --ot-return: #5EEAD4; }

.ot__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.ot__line { fill: none; stroke: var(--ot-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ot__pulse { filter: drop-shadow(0 0 5px currentColor); }
.ot__pulse--down { color: var(--ot-gold); fill: var(--ot-gold); }
.ot__pulse--up { color: var(--ot-return); fill: var(--ot-return); }

.ot ul { margin: 0; padding: 0; list-style: none; }
.ot__box { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1.1rem; border-radius: 1rem; background: var(--ot-card); border: 1px solid rgba(183, 142, 59, 0.55); color: var(--ot-text); box-shadow: 0 18px 34px -26px rgba(11, 21, 86, 0.55); }
.ot__icon { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 0.8rem; color: #F6DE9A; background: linear-gradient(150deg, #0B1556, #1b2a8f); }
.ot__name { margin: 0 !important; font-size: 1.0625rem !important; font-weight: 700; line-height: 1.35; color: inherit !important; }

.ot__root { width: min(24rem, 100%); justify-content: center; text-align: center; color: #F8F2E6; background: linear-gradient(155deg, #0B1556, #1b2a8f); border: 1px solid #D9B25A; box-shadow: 0 28px 46px -28px rgba(3, 17, 105, 0.85); }
.ot__root .ot__icon { color: #0B1556; background: linear-gradient(145deg, #F6DE9A, #D9B25A); }
.ot__root .ot__name { font-size: 1.2rem !important; color: #fff !important; }

.ot__divs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); width: 100%; align-items: start; }
.ot__div { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ot__box--div { border-width: 2px; border-color: #D9B25A; }
.ot .ot__leaves { display: grid; gap: 0.7rem; padding-inline-start: 2rem; }
.ot__box--leaf { padding: 0.65rem 0.9rem; }
.ot__box--leaf .ot__icon { width: 2.2rem; height: 2.2rem; border-radius: 0.65rem; font-size: 0.9rem; }
.ot__box--leaf .ot__name { font-size: 1rem !important; font-weight: 600; }

.ot__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.6rem; margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--ot-muted); }
.ot__legend li { display: inline-flex; align-items: center; gap: 0.5rem; }
.ot__legend i { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; }
.ot__legend .is-down { background: var(--ot-gold); box-shadow: 0 0 8px var(--ot-gold); }
.ot__legend .is-up { background: var(--ot-return); box-shadow: 0 0 8px var(--ot-return); }

@media (max-width: 860px) {
    .ot__divs { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
    .ot__root { width: 100%; justify-content: flex-start; text-align: start; }
    .ot__div { margin-inline-start: 2rem; }
}
@media (prefers-reduced-motion: reduce) { .ot__pulse { display: none; } }
