:root {
  --ink: #112b3a; --muted: #607785; --canvas: #f5f9f9; --paper: #fff; --line: #d8e4e6;
  --teal: #0b7285; --teal-dark: #075766; --blue: #2d73b9; --green: #2f8b68; --amber: #bc7a21; --purple: #7853a9; --rose: #b45773;
  --shadow: 0 16px 42px rgba(31, 74, 88, .12); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--canvas);
}
* { box-sizing: border-box; } body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--canvas); } button, input, select { font: inherit; } button { cursor: pointer; } button:disabled { cursor: not-allowed; opacity: .55; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }.app-background { position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 0 0, #dff4ef 0, transparent 29rem), radial-gradient(circle at 100% 20%, #e1edf9 0, transparent 31rem), var(--canvas); }
.topbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: minmax(240px,1fr) minmax(280px,530px) minmax(130px,1fr); align-items: center; gap: 28px; min-height: 76px; padding: 12px clamp(20px,4vw,68px); background: rgba(255,255,255,.91); border-bottom: 1px solid rgba(203,219,222,.85); backdrop-filter: blur(16px); }.brand { display: inline-flex; align-items: center; gap: 12px; width: fit-content; color: var(--ink); text-decoration: none; }.brand strong,.brand small { display:block; }.brand strong { font-family: Georgia,serif; font-size:1.06rem; letter-spacing:-.02em; }.brand small { margin-top:2px; color:var(--muted); font-size:.73rem; font-weight:650; letter-spacing:.08em; text-transform:uppercase; }.brand-mark { position:relative; display:inline-flex; align-items:end; justify-content:center; gap:3px; width:37px; height:37px; padding:7px; overflow:hidden; border-radius:11px; background:linear-gradient(145deg,var(--teal),#3fa79b); box-shadow:0 5px 15px rgba(11,114,133,.25); }.brand-mark::before { position:absolute; top:7px; left:9px; width:17px; height:6px; content:""; border:2px solid rgba(255,255,255,.9); border-bottom:0; border-radius:5px 5px 0 0; }.brand-mark span { width:5px; background:#fff; border-radius:2px 2px 1px 1px; }.brand-mark span:nth-child(1){height:10px}.brand-mark span:nth-child(2){height:15px}.brand-mark span:nth-child(3){height:8px}
.search-wrap { position:relative; display:flex; align-items:center; height:43px; border:1px solid #cfe0e2; border-radius:13px; background:#fff; transition:box-shadow .2s,border-color .2s; }.search-wrap:focus-within { border-color:#66aebb; box-shadow:0 0 0 4px rgba(11,114,133,.11); }.search-wrap>svg { width:19px; margin:0 10px 0 14px; stroke:#6c8790; stroke-width:1.8; fill:none; }.search-wrap input { width:100%; min-width:0; height:100%; color:var(--ink); border:0; outline:0; background:transparent; }.search-wrap input::placeholder { color:#8a9ca3; }.search-results { position:absolute; top:calc(100% + 9px); right:0; left:0; max-height:360px; overflow-y:auto; padding:7px; border:1px solid #d6e2e5; border-radius:12px; background:rgba(255,255,255,.98); box-shadow:0 18px 38px rgba(31,74,88,.18); }.search-result { display:grid; grid-template-columns:auto 1fr; gap:3px 10px; width:100%; padding:10px; color:inherit; text-align:left; border:0; border-radius:8px; background:transparent; }.search-result:hover,.search-result:focus-visible { background:#eaf6f4; outline:0; }.search-result-code { grid-row:span 2; align-self:center; padding:3px 6px; color:#087286; font-size:.7rem; font-weight:800; border-radius:5px; background:#d9f0ec; }.search-result strong{font-size:.86rem}.search-result small { overflow:hidden; color:var(--muted); font-size:.75rem; text-overflow:ellipsis; white-space:nowrap; }.source-label { justify-self:end; display:flex; align-items:center; gap:7px; color:var(--muted); font-size:.76rem; font-weight:700; white-space:nowrap; }.status-dot { width:8px; height:8px; border-radius:50%; background:#42ae83; box-shadow:0 0 0 3px #dff4eb; }
.app-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; max-width:1760px; padding:30px clamp(20px,4vw,68px) 24px; margin:0 auto; }.workspace,.details-panel { border:1px solid rgba(208,223,225,.92); border-radius:18px; background:rgba(255,255,255,.8); box-shadow:var(--shadow); }.workspace { min-width:0; overflow:hidden; }.workspace-head { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:25px 28px 20px; border-bottom:1px solid var(--line); }.eyebrow { margin:0 0 6px; color:var(--teal); font-size:.69rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }.workspace-head h1,.tree-intro h2,.details-panel h2,.dialog-head h2 { margin:0; font-family:Georgia,serif; font-weight:700; letter-spacing:-.025em; }.workspace-head h1 { font-size:clamp(1.45rem,2vw,1.85rem); }.subtitle { margin:6px 0 0; color:var(--muted); font-size:.88rem; }.view-switcher { display:flex; padding:4px; border:1px solid #d5e3e5; border-radius:11px; background:#edf4f4; }.view-tab { display:inline-flex; align-items:center; gap:7px; padding:8px 11px; color:#56707a; font-size:.8rem; font-weight:750; border:0; border-radius:8px; background:transparent; }.view-tab.is-active { color:#075c6d; background:#fff; box-shadow:0 2px 6px rgba(45,91,100,.12); }
.view-panel { min-height:650px; }.diagram-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; padding:10px 18px; border-bottom:1px solid #e0eaeb; background:rgba(250,253,253,.78); }.legend,.zoom-controls { display:flex; align-items:center; gap:15px; color:var(--muted); font-size:.72rem; font-weight:650; }.legend span { display:inline-flex; align-items:center; gap:6px; }.legend-line { display:inline-block; width:23px; height:0; border-top:2px solid #66828b; }.legend-line.advisory { border-top-style:dotted; }.zoom-controls { gap:7px; }.zoom-controls output { min-width:38px; color:#47636d; font-variant-numeric:tabular-nums; text-align:center; }.icon-button,.text-button { color:#45636c; font-size:.75rem; font-weight:750; border:1px solid #d3e0e2; border-radius:8px; background:#fff; transition:background .18s,border-color .18s; }.icon-button:hover,.text-button:hover { border-color:#88b4bb; background:#edf8f7; }.icon-button { width:27px; height:27px; font-size:1rem; line-height:1; }.text-button { padding:6px 9px; }.division-filter-wrap { display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding:9px 18px; color:#617d84; font-size:.72rem; font-weight:720; border-bottom:1px solid #e2eced; background:#fcfefe; }.division-filters { display:flex; flex-wrap:wrap; gap:6px; }.division-chip { padding:5px 8px; color:#637a82; font-size:.69rem; font-weight:750; border:1px solid #d5e3e5; border-radius:999px; background:#fff; }.division-chip.is-visible { color:#075d6e; border-color:#83b7bf; background:#e3f4f1; }.division-chip.is-all { color:#fff; border-color:#0b778a; background:#0b778a; }
.diagram-canvas { position:relative; min-height:690px; overflow:auto; background-color:#f9fcfc; background-image:linear-gradient(rgba(20,112,126,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,112,126,.045) 1px,transparent 1px); background-size:22px 22px; outline:0; }.diagram-stage { min-width:1780px; min-height:720px; padding:34px 34px 54px; }.diagram-header { display:flex; justify-content:center; }.diagram-root-wrap { position:relative; width:220px; }.diagram-root-wrap::after { position:absolute; top:100%; left:50%; width:2px; height:25px; content:""; background:#66828b; transform:translateX(-50%); }.diagram-support { position:relative; display:grid; grid-template-columns:repeat(3,170px); justify-content:center; gap:10px; padding:31px 0 28px; }.diagram-support::before { position:absolute; top:20px; left:calc(50% - 265px); width:530px; height:2px; content:""; background:#66828b; }.support-link { position:relative; }.support-link::before { position:absolute; top:-11px; left:50%; width:2px; height:11px; content:""; background:#66828b; }.support-link.is-advisory::before { width:0; border-left:2px dotted #66828b; background:none; }.diagram-spine { position:relative; height:32px; margin:0 80px; border-top:2px solid #66828b; }.diagram-spine::before { position:absolute; top:-32px; left:50%; width:2px; height:32px; content:""; background:#66828b; transform:translateX(-50%); }.division-grid { display:grid; grid-template-columns:repeat(var(--division-count, 6),minmax(220px,1fr)); gap:18px; }.branch-lane { position:relative; min-width:0; padding-top:18px; }.branch-lane::before { position:absolute; top:0; left:50%; width:2px; height:18px; content:""; background:#66828b; }.branch-children { display:grid; gap:9px; padding:13px 0 0 15px; margin:13px 0 0 14px; border-left:1.5px solid #9aafb5; }.branch-item { position:relative; }.branch-item::before { position:absolute; top:21px; left:-15px; width:15px; height:1.5px; content:""; background:#9aafb5; }.branch-children.is-collapsed { display:none; }
.node-card { position:relative; width:100%; color:var(--ink); text-align:left; border:1px solid #cbdcdf; border-radius:10px; background:#fff; box-shadow:0 3px 8px rgba(22,68,78,.06); transition:transform .18s,box-shadow .18s,border-color .18s; }.node-card:hover { z-index:2; border-color:#64aab4; box-shadow:0 8px 18px rgba(25,85,93,.14); transform:translateY(-2px); }.node-card.is-selected { z-index:3; border-color:#0f8da3; box-shadow:0 0 0 3px rgba(15,141,163,.18),0 10px 20px rgba(25,85,93,.15); }.node-card.is-inactive { opacity:.48; filter:grayscale(.5); }.node-select { display:block; width:100%; padding:12px 36px 11px 12px; color:inherit; font:inherit; text-align:inherit; border:0; border-radius:inherit; background:transparent; cursor:pointer; }.node-select:focus-visible,.tree-node:focus-visible,.tree-toggle:focus-visible,button:focus-visible { outline:3px solid rgba(20,130,151,.34); outline-offset:2px; }.node-card[data-depth="0"] { color:#fff; text-align:center; border-color:#0c6679; background:linear-gradient(135deg,#087c91,#0d5b72); }.node-card[data-depth="0"] .node-select { padding:15px; }.node-card[data-depth="1"] { border-top:4px solid var(--branch-color,var(--teal)); }.node-card[data-depth="2"] .node-select { padding:9px 31px 9px 10px; }.node-card[data-depth="3"] { border-color:#d9e4e5; background:#fdfefe; }.node-card[data-depth="3"] .node-select { padding:8px 29px 8px 9px; }.node-code { display:block; margin-bottom:4px; color:#0a7c90; font-size:.64rem; font-weight:850; letter-spacing:.07em; }.node-card[data-depth="0"] .node-code { color:#bee9e6; }.node-title { display:block; font-size:.76rem; font-weight:780; line-height:1.25; }.node-card[data-depth="1"] .node-title { font-size:.8rem; }.node-card[data-depth="2"] .node-title { font-size:.72rem; }.node-card[data-depth="3"] .node-title { font-size:.7rem; font-weight:680; }.node-responsible { display:block; margin-top:6px; color:#65808a; font-size:.65rem; font-weight:550; line-height:1.3; }.node-card[data-depth="0"] .node-responsible { color:#e1f3f2; }.node-toggle { position:absolute; top:50%; right:8px; display:grid; place-items:center; width:20px; height:20px; padding:0; color:#44727c; font-size:1rem; font-weight:600; line-height:1; border:1px solid #c8dadd; border-radius:5px; background:#f5faf9; transform:translateY(-50%); }.node-toggle:hover { color:#075c6d; border-color:#75aeb8; background:#e4f4f1; }
.tree-view { padding:0 26px 28px; }.tree-intro { display:flex; align-items:end; justify-content:space-between; gap:16px; padding:24px 2px 19px; }.tree-intro h2 { font-size:1.35rem; }.tree-actions { display:flex; gap:8px; }.tree-container { padding:18px; overflow:auto; border:1px solid #dce8e9; border-radius:12px; background:#fbfdfd; }.tree-list { padding:0; margin:0; list-style:none; }.tree-list .tree-list { position:relative; padding-left:28px; margin-left:13px; border-left:1.5px solid #d0dfe1; }.tree-item { position:relative; padding:3px 0; }.tree-list .tree-list>.tree-item::before { position:absolute; top:22px; left:-28px; width:27px; height:1.5px; content:""; background:#d0dfe1; }.tree-row { display:flex; align-items:stretch; gap:5px; width:fit-content; max-width:100%; }.tree-toggle { flex:0 0 24px; width:24px; min-height:40px; padding:0; color:#6c838a; font-size:1.05rem; border:0; border-radius:6px; background:transparent; }.tree-toggle:hover { color:var(--teal); background:#e6f4f1; }.tree-spacer { flex:0 0 24px; }.tree-node { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:9px; max-width:min(700px,calc(100vw - 180px)); padding:7px 13px 7px 9px; color:var(--ink); text-align:left; border:1px solid transparent; border-radius:8px; background:transparent; }.tree-node:hover { background:#edf8f6; }.tree-node.is-selected { border-color:#86bac1; background:#e2f2f0; box-shadow:0 1px 2px rgba(25,85,93,.08); }.tree-node.is-inactive { opacity:.5; }.tree-icon { display:grid; place-items:center; width:25px; height:25px; color:#fff; font-size:.65rem; font-weight:850; border-radius:7px; background:var(--node-color,var(--teal)); }.tree-node-text { min-width:0; }.tree-node-name { display:block; overflow:hidden; font-size:.82rem; font-weight:750; line-height:1.22; text-overflow:ellipsis; white-space:nowrap; }.tree-node-meta { display:block; overflow:hidden; margin-top:2px; color:#6b848b; font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; }.empty-state { display:grid; gap:5px; padding:22px; color:var(--muted); text-align:center; }.empty-state strong { color:var(--ink); }
.details-panel { align-self:start; position:sticky; top:100px; padding:22px; }.details-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }.type-badge { padding:4px 7px; color:#087084; font-size:.65rem; font-weight:800; border-radius:5px; background:#dff2ef; }.details-panel h2 { margin-top:15px; font-size:1.38rem; line-height:1.14; }.details-code { margin:7px 0 18px; color:#6c858c; font-size:.76rem; font-weight:730; }.details-list { display:grid; gap:13px; padding:16px 0; margin:0; border-top:1px solid #deeaeb; border-bottom:1px solid #deeaeb; }.details-list div { display:grid; gap:4px; }.details-list dt,.details-path-wrap>span { color:#799097; font-size:.66rem; font-weight:820; letter-spacing:.09em; text-transform:uppercase; }.details-list dd { margin:0; color:#264552; font-size:.79rem; font-weight:650; line-height:1.35; }.details-path-wrap { margin-top:17px; }.details-path { margin:7px 0 15px; color:#48666f; font-size:.75rem; line-height:1.45; }.details-actions { display:grid; gap:8px; }.primary-button,.secondary-button,.danger-button { width:100%; padding:10px 13px; font-size:.79rem; font-weight:780; border-radius:8px; }.primary-button { color:#fff; border:1px solid #087388; background:linear-gradient(135deg,#0b7f91,#0c6378); box-shadow:0 4px 10px rgba(8,105,123,.2); }.primary-button:hover { background:linear-gradient(135deg,#086f81,#075568); }.secondary-button { color:#075f70; border:1px solid #82b4bc; background:#e7f5f3; }.danger-button { color:#984159; border:1px solid #e4bdc8; background:#fff5f7; }.inactive-toggle { display:flex; align-items:center; gap:8px; margin-top:15px; color:#5d7780; font-size:.73rem; font-weight:650; }.inactive-toggle input { accent-color:var(--teal); }
.service-dialog { width:min(610px,calc(100vw - 32px)); padding:0; color:var(--ink); border:1px solid #cddfe1; border-radius:16px; box-shadow:0 25px 70px rgba(21,61,72,.28); }.service-dialog::backdrop { background:rgba(12,43,52,.44); backdrop-filter:blur(2px); }.service-dialog form { padding:24px; }.dialog-head { display:flex; align-items:start; justify-content:space-between; gap:15px; margin-bottom:20px; }.dialog-head h2 { font-size:1.42rem; }.close-button { display:grid; place-items:center; width:31px; height:31px; color:#55727a; font-size:1.4rem; line-height:1; border:1px solid #d5e3e5; border-radius:8px; background:#fff; }.form-grid { display:grid; grid-template-columns:1fr 110px; gap:14px; }.form-grid label { display:grid; gap:6px; color:#58727a; font-size:.73rem; font-weight:760; }.form-grid input,.form-grid select { width:100%; padding:9px 10px; color:var(--ink); border:1px solid #cbdde0; border-radius:8px; outline:0; background:#fff; }.form-grid input:focus,.form-grid select:focus { border-color:#55a4b0; box-shadow:0 0 0 3px rgba(11,114,133,.11); }.form-grid .full { grid-column:1 / -1; }.dialog-actions { display:flex; justify-content:end; gap:9px; margin-top:22px; }.dialog-actions .primary-button { width:auto; }.form-error { margin:15px 0 0; padding:9px 11px; color:#963f57; font-size:.78rem; font-weight:650; border-radius:8px; background:#fff0f3; } footer { display:flex; justify-content:center; gap:8px; padding:8px 20px 24px; color:#799097; font-size:.72rem; text-align:center; }
.details-parent-responsible { display:block; margin-top:2px; color:#5f7c85; font-size:.72rem; font-weight:560; }.details-parent-note { display:block; margin-top:8px; padding:7px 8px; color:#6f5400; font-size:.69rem; font-weight:580; line-height:1.4; border-left:2px solid #e0aa00; border-radius:3px; background:#fffaf0; }.details-parent-note[hidden] { display:none; }
.topbar-controls { justify-self:end; display:flex; align-items:center; gap:10px; }.topbar-controls .service-actions-popover { right:0; left:auto; }.diagram-toolbar-main { display:flex; flex:1 1 auto; align-items:center; flex-wrap:wrap; gap:15px; min-width:0; }.diagram-toolbar .division-filter-wrap { padding:0; border:0; background:transparent; }.diagram-toolbar .division-filters { min-width:0; }
.diagram-toolbar-tools,.diagram-actions { display:flex; align-items:center; gap:7px; }.diagram-toolbar-tools { flex:0 0 auto; gap:12px; }
.diagram-legend { position:absolute; z-index:8; top:11px; left:18px; padding:7px 9px; border:1px solid rgba(203,219,222,.92); border-radius:8px; background:rgba(255,255,255,.88); box-shadow:0 3px 9px rgba(22,68,78,.08); }
.diagram-canvas { background-image:none; }
.node-card[data-depth="0"] { color:var(--ink); text-align:left; border-color:#cbdcdf; border-top:4px solid #2d73b9; background:#fff; }.node-card[data-depth="0"] .node-select { padding:12px 36px 11px 12px; }.node-card[data-depth="0"] .node-responsible { color:#65808a; }

/* Tema institucional: azul marino, azul real, azul claro y violeta del logotipo. */
:root { --ink:#14254d; --muted:#5b6b8c; --canvas:#f5f7fc; --line:#d6def0; --teal:#0755ac; --teal-dark:#092963; --blue:#0755ac; --green:#34328c; --amber:#1f6fbd; --purple:#34328c; --rose:#5b56b8; --shadow:0 16px 42px rgba(9,41,99,.12); }
.app-background { background:radial-gradient(circle at 0 0,#e2efff 0,transparent 29rem),radial-gradient(circle at 100% 20%,#ecebff 0,transparent 31rem),var(--canvas); }
.brand-mark { background:linear-gradient(145deg,#092963,#0755ac); box-shadow:0 5px 15px rgba(9,41,99,.25); }.search-wrap:focus-within { border-color:#4d92d7; box-shadow:0 0 0 4px rgba(7,85,172,.12); }.search-result:hover,.search-result:focus-visible { background:#edf4ff; }.search-result-code { color:#0755ac; background:#e2efff; }
.view-switcher { border-color:#d6def0; background:#edf3ff; }.view-tab { color:#536586; }.view-tab.is-active { color:#092963; }.icon-button,.text-button { color:#38557f; border-color:#ccd8ea; }.icon-button:hover,.text-button:hover { border-color:#7aa4d8; background:#edf4ff; }
.division-chip { color:#536586; border-color:#ccd8ea; background:#fff; }.division-chip.is-visible { color:#092963; border-color:#7ea7d8; background:#e5f0ff; }.division-chip.is-all { border-color:#0755ac; background:#0755ac; }
.diagram-canvas { background-color:#fbfcff; }.legend-line { border-color:#42658f; }.legend-line.advisory { border-color:#5b56b8; }.diagram-legend { border-color:#d5dff0; background:rgba(255,255,255,.92); box-shadow:0 3px 9px rgba(9,41,99,.08); }
.diagram-root-wrap::after,.support-axis::before,.support-link.is-left::after,.support-link.is-right::before,.diagram-spine,.diagram-spine::before,.branch-lane::before { border-color:#597b9f; background-color:#597b9f; }.branch-children::before,.branch-item > .node-card::before { background:#7f96b4; border-color:#7f96b4; }
.node-card:hover,.node-card.is-selected { border-color:#0755ac; box-shadow:0 0 0 3px rgba(7,85,172,.22),0 10px 20px rgba(9,41,99,.15); }.node-card:hover[data-depth="1"],.node-card.is-selected[data-depth="1"] { border-top-color:#0755ac; }.node-card[data-depth="0"] { border-color:#ccd8ea; border-top-color:#0755ac; }.node-card[data-depth="0"] .node-responsible,.node-responsible { color:#58708f; }.node-toggle { color:#44648a; border-color:#cbd8ea; background:#f4f7fd; }.node-toggle:hover { color:#092963; border-color:#7aa4d8; background:#eaf2ff; }
.tree-node:hover,.tree-node.is-selected { border-color:#0755ac; background:#eef4ff; box-shadow:0 0 0 2px rgba(7,85,172,.18); }.tree-toggle:hover { color:#0755ac; background:#eaf2ff; }.tree-list .tree-list { border-color:#cad7ea; }.tree-list .tree-list>.tree-item::before { background:#cad7ea; }
.primary-button { border-color:#092963; background:linear-gradient(135deg,#0755ac,#092963); box-shadow:0 4px 10px rgba(9,41,99,.2); }.primary-button:hover { background:linear-gradient(135deg,#06488f,#071e4c); }.secondary-button { color:#092963; border-color:#80a5d4; background:#e9f2ff; }.danger-button { color:#34328c; border-color:#b7b4e3; background:#f2f1ff; }.inactive-toggle { color:#536586; }.inactive-toggle input { accent-color:#0755ac; }
.service-actions-trigger { color:#092963; border-color:#8cacd5; background:#edf4ff; }.service-actions-popover { border-color:#ccd8ea; box-shadow:0 14px 30px rgba(9,41,99,.18); }.details-close { color:#4d6384; border-color:#d2ddec; }.details-close:hover { color:#092963; border-color:#8cabd4; background:#edf4ff; }
.node-detail-trigger,.tree-detail-trigger { color:#092963; border-color:#4d83c4; background:#edf4ff; box-shadow:0 3px 8px rgba(9,41,99,.18); }.node-detail-trigger:hover,.tree-detail-trigger:hover { color:#071e4c; border-color:#0755ac; background:#dcecff; }.details-panel.is-open { border-color:#0755ac; box-shadow:0 0 0 3px rgba(7,85,172,.2),var(--shadow); }.details-connector { background:#0755ac; box-shadow:0 0 0 1px rgba(7,85,172,.16); }
.details-parent-note { color:#34328c; border-left-color:#34328c; background:#f3f2ff; }.details-parent-responsible { color:#58708f; }
.node-select:focus-visible,.tree-node:focus-visible,.tree-toggle:focus-visible,button:focus-visible { outline-color:rgba(7,85,172,.34); }.status-dot { background:#1499d4; box-shadow:0 0 0 3px #e1f0ff; }.form-grid input:focus,.form-grid select:focus { border-color:#4d92d7; box-shadow:0 0 0 3px rgba(7,85,172,.11); }.form-error { color:#34328c; background:#f2f1ff; }
@media (max-width:1080px) { .app-layout { grid-template-columns:minmax(0,1fr); }.details-panel { position:static; }.topbar { grid-template-columns:auto minmax(250px,1fr) auto; gap:16px; } }
@media (max-width:760px) { .topbar { position:relative; grid-template-columns:1fr auto; padding:13px 18px; }.search-wrap { grid-row:2; grid-column:1 / -1; }.source-label { grid-column:2; }.app-layout { padding:18px 14px; }.workspace-head { align-items:start; flex-direction:column; padding:20px; }.view-switcher { width:100%; }.view-tab { flex:1; justify-content:center; }.diagram-toolbar { align-items:start; flex-direction:column; }.legend { flex-wrap:wrap; gap:10px; }.division-filter-wrap { align-items:start; flex-direction:column; }.tree-view { padding:0 14px 20px; }.tree-intro { align-items:start; flex-direction:column; }.tree-container { padding:10px; }.tree-node { max-width:calc(100vw - 110px); }.form-grid { grid-template-columns:1fr; }.form-grid .full { grid-column:auto; } footer { flex-wrap:wrap; } }

/* El lienzo aprovecha todo el ancho; el detalle se abre como panel flotante opcional. */
.app-layout { display:block; max-width:none; padding:8px 10px 20px; margin:0; }
.workspace-controls { display:flex; align-items:center; gap:10px; }.details-toggle { padding-inline:11px; color:#075f70; border-color:#93bcc3; background:#eef8f7; white-space:nowrap; }
.details-panel { position:fixed; z-index:25; top:92px; right:10px; width:min(340px,calc(100vw - 20px)); max-height:calc(100vh - 108px); overflow:auto; padding:22px; pointer-events:none; opacity:0; transform:translateX(calc(100% + 24px)); transition:opacity .2s ease,transform .25s ease; }.details-panel.is-open { pointer-events:auto; opacity:1; transform:translateX(0); }.details-head-actions { display:flex; align-items:center; gap:7px; }.details-close { display:grid; place-items:center; width:25px; height:25px; padding:0; color:#5b747b; font-size:1.22rem; line-height:1; border:1px solid #d3e1e3; border-radius:6px; background:#fff; }.details-close:hover { color:#075f70; border-color:#86b5bd; background:#edf8f7; }
@media (max-width:760px) { .app-layout { padding:8px 6px 16px; }.workspace-controls { width:100%; justify-content:space-between; }.details-toggle { flex:0 0 auto; }.details-panel { top:10px; right:6px; width:calc(100vw - 12px); max-height:calc(100vh - 20px); }.workspace-head { gap:15px; } }

/* Bloque de apoyo directo y asesoría, siguiendo la composición original: 3 filas y eje central. */
.diagram-support { display:grid; grid-template-columns:210px 120px 210px; grid-template-rows:repeat(3, minmax(72px, auto)); column-gap:0; row-gap:10px; justify-content:center; align-items:stretch; padding:25px 0 28px; }
.diagram-support.is-collapsed { display:block; height:48px; padding:0; }
.diagram-support.is-collapsed > * { display:none; }
.diagram-support::before { content:none; }.support-axis { position:relative; grid-column:2; grid-row:1 / span 3; }.support-axis::before { position:absolute; top:-25px; bottom:-28px; left:50%; width:2px; content:""; background:#66828b; transform:translateX(-50%); }
.support-link { position:relative; align-self:center; }.support-link::before { content:none; }.support-link.is-left::after,.support-link.is-right::before { position:absolute; top:50%; width:60px; height:0; content:""; border-top:2px solid #66828b; }.support-link.is-left::after { right:-60px; }.support-link.is-right::before { left:-60px; border-left:0; background:none; }.support-link.is-advisory.is-left::after,.support-link.is-advisory.is-right::before { border-top-style:dotted; }.support-link.is-advisory::before { border-left:0; }

/* Extiende cada relación de autoridad desde la tarjeta hasta la línea horizontal principal. */
.branch-lane::before { top:-32px; height:50px; }

/* El panel flotante no debe permitir que se vea el contenido situado detrás. */
.details-panel { background:#fff; }

/* Ajustes de limpieza: no se muestran códigos en los diagramas y no quedan tramos de línea aislados. */
.node-code,.tree-icon { display:none; }.tree-node { grid-template-columns:1fr; }
.diagram-spine { margin:0 var(--spine-inset,calc(100% / (var(--division-count, 6) * 2))); }

/* Cada nivel conserva su propia "columna" vertical: sale de la tarjeta padre,
   continúa junto a sus hijos y se conecta al centro de cada tarjeta hija. */
.branch-children { position:relative; gap:9px; margin:0 0 0 14px; padding:13px 0 0 19px; border-left:2px solid transparent; }
.branch-children::before { position:absolute; top:0; left:-2px; width:2px; height:var(--trunk-height,0); content:""; background:#78939b; }
.branch-item::before { content:none; }
.branch-item > .node-card::before { position:absolute; z-index:0; top:50%; right:100%; width:22px; height:0; content:""; border-top:2px solid #78939b; transform:translateY(-50%); }

/* La selección debe ser visible sin perder los colores de la jerarquía. */
.node-card:hover,.node-card.is-selected { border-color:#e0aa00; box-shadow:0 0 0 3px rgba(255,203,51,.5),0 10px 20px rgba(25,85,93,.15); }
.node-card:hover[data-depth="1"],.node-card.is-selected[data-depth="1"] { border-top-color:#e0aa00; }
.tree-node:hover,.tree-node.is-selected { border-color:#e0aa00; background:#fff9df; box-shadow:0 0 0 2px rgba(255,203,51,.4); }

/* El detalle se invoca desde la tarjeta seleccionada y se ancla a ella. */
#detailsToggle { display:none; }
.node-card.is-selected { z-index:6; }
.node-detail-trigger { position:absolute; z-index:7; top:50%; left:calc(100% + 10px); padding:7px 10px; color:#6f5400; font-size:.69rem; font-weight:800; white-space:nowrap; border:1px solid #d8a600; border-radius:7px; background:#fff8d7; box-shadow:0 3px 8px rgba(89,71,8,.18); transform:translateY(-50%); }
.node-card.detail-trigger-left .node-detail-trigger { right:calc(100% + 10px); left:auto; }
.node-detail-trigger:hover { color:#4f3b00; border-color:#a87d00; background:#fff1a6; }
.tree-detail-trigger { align-self:center; padding:6px 9px; margin-left:6px; color:#6f5400; font-size:.7rem; font-weight:800; white-space:nowrap; border:1px solid #d8a600; border-radius:7px; background:#fff8d7; }
.tree-detail-trigger:hover { color:#4f3b00; border-color:#a87d00; background:#fff1a6; }
.has-open-details .node-detail-trigger,.has-open-details .tree-detail-trigger { display:none; }
.details-panel { top:12px; right:auto; left:12px; max-height:none; padding:0; overflow:visible; transform:translateY(8px); }
.details-scroll { max-height:calc(100vh - 24px); padding:22px; overflow:auto; border-radius:inherit; background:#fff; }
.details-panel.is-open { border-color:#e0aa00; box-shadow:0 0 0 3px rgba(255,203,51,.34),var(--shadow); transform:translateY(0); }
.details-connector { position:absolute; z-index:3; top:var(--details-arrow-top,36px); display:none; width:var(--details-connector-length,0); height:2px; background:#e0aa00; box-shadow:0 0 0 1px rgba(255,203,51,.22); transform:translateY(-50%); }
.details-panel.is-positioned-right .details-connector { left:var(--details-connector-offset,0); display:block; }
.details-panel.is-positioned-left .details-connector { right:var(--details-connector-offset,0); display:block; }
.service-actions-menu { position:relative; }.service-actions-trigger { display:inline-flex; align-items:center; gap:6px; padding:8px 11px; color:#075f70; border-color:#93bcc3; background:#eef8f7; }.service-actions-popover { position:absolute; z-index:35; top:calc(100% + 8px); left:0; display:grid; gap:8px; width:238px; padding:10px; border:1px solid #cbdde0; border-radius:11px; background:#fff; box-shadow:0 14px 30px rgba(31,74,88,.18); }.service-actions-popover[hidden] { display:none; }.service-actions-popover .inactive-toggle { margin-top:2px; }.service-actions-popover .primary-button,.service-actions-popover .secondary-button,.service-actions-popover .danger-button { padding:9px 11px; }

/* Aplicación final del tema institucional: las reglas precedentes conservan la estructura. */
:root { --ink:#14254d; --muted:#5b6b8c; --canvas:#f5f7fc; --line:#d6def0; --teal:#0755ac; --teal-dark:#092963; --blue:#0755ac; --green:#34328c; --amber:#1f6fbd; --purple:#34328c; --rose:#5b56b8; --shadow:0 16px 42px rgba(9,41,99,.12); }
.app-background { background:radial-gradient(circle at 0 0,#e2efff 0,transparent 29rem),radial-gradient(circle at 100% 20%,#ecebff 0,transparent 31rem),var(--canvas); }.brand-mark { background:linear-gradient(145deg,#092963,#0755ac); box-shadow:0 5px 15px rgba(9,41,99,.25); }
.search-wrap:focus-within,.form-grid input:focus,.form-grid select:focus { border-color:#4d92d7; box-shadow:0 0 0 4px rgba(7,85,172,.12); }.search-result:hover,.search-result:focus-visible { background:#edf4ff; }.search-result-code { color:#0755ac; background:#e2efff; }.status-dot { background:#1499d4; box-shadow:0 0 0 3px #e1f0ff; }
.view-switcher { border-color:#d6def0; background:#edf3ff; }.view-tab { color:#536586; }.view-tab.is-active { color:#092963; }.icon-button,.text-button { color:#38557f; border-color:#ccd8ea; }.icon-button:hover,.text-button:hover { border-color:#7aa4d8; background:#edf4ff; }.node-select:focus-visible,.tree-node:focus-visible,.tree-toggle:focus-visible,button:focus-visible { outline-color:rgba(7,85,172,.34); }
.division-chip { color:#536586; border-color:#ccd8ea; background:#fff; }.division-chip.is-visible { color:#092963; border-color:#7ea7d8; background:#e5f0ff; }.division-chip.is-all { border-color:#0755ac; background:#0755ac; }.diagram-canvas { background-color:#fbfcff; }.diagram-legend { border-color:#d5dff0; background:rgba(255,255,255,.92); box-shadow:0 3px 9px rgba(9,41,99,.08); }.legend-line { border-color:#42658f; }.legend-line.advisory { border-color:#5b56b8; }
.diagram-root-wrap::after,.support-axis::before { background:#597b9f; }.support-link.is-left::after,.support-link.is-right::before,.diagram-spine { border-color:#597b9f; }.diagram-spine::before,.branch-lane::before,.branch-children::before { background:#597b9f; }.branch-item > .node-card::before { border-color:#7f96b4; }
.node-card[data-depth="0"] { color:var(--ink); text-align:left; border-color:#ccd8ea; border-top-color:#0755ac; background:#fff; }.node-card[data-depth="0"] .node-responsible,.node-responsible { color:#58708f; }.node-card:hover,.node-card.is-selected { border-color:#0755ac; box-shadow:0 0 0 3px rgba(7,85,172,.22),0 10px 20px rgba(9,41,99,.15); }.node-card:hover[data-depth="1"],.node-card.is-selected[data-depth="1"] { border-top-color:#0755ac; }.node-toggle { color:#44648a; border-color:#cbd8ea; background:#f4f7fd; }.node-toggle:hover { color:#092963; border-color:#7aa4d8; background:#eaf2ff; }
.tree-node:hover,.tree-node.is-selected { border-color:#0755ac; background:#eef4ff; box-shadow:0 0 0 2px rgba(7,85,172,.18); }.tree-toggle:hover { color:#0755ac; background:#eaf2ff; }.tree-list .tree-list { border-color:#cad7ea; }.tree-list .tree-list>.tree-item::before { background:#cad7ea; }
.primary-button { border-color:#092963; background:linear-gradient(135deg,#0755ac,#092963); box-shadow:0 4px 10px rgba(9,41,99,.2); }.primary-button:hover { background:linear-gradient(135deg,#06488f,#071e4c); }.secondary-button { color:#092963; border-color:#80a5d4; background:#e9f2ff; }.danger-button { color:#34328c; border-color:#b7b4e3; background:#f2f1ff; }.form-error { color:#34328c; background:#f2f1ff; }
.service-actions-trigger { color:#092963; border-color:#8cacd5; background:#edf4ff; }.service-actions-popover { border-color:#ccd8ea; box-shadow:0 14px 30px rgba(9,41,99,.18); }.details-close { color:#4d6384; border-color:#d2ddec; }.details-close:hover { color:#092963; border-color:#8cabd4; background:#edf4ff; }.node-detail-trigger,.tree-detail-trigger { color:#092963; border-color:#4d83c4; background:#edf4ff; box-shadow:0 3px 8px rgba(9,41,99,.18); }.node-detail-trigger:hover,.tree-detail-trigger:hover { color:#071e4c; border-color:#0755ac; background:#dcecff; }
.details-panel.is-open { border-color:#0755ac; box-shadow:0 0 0 3px rgba(7,85,172,.2),var(--shadow); }.details-connector { background:#0755ac; box-shadow:0 0 0 1px rgba(7,85,172,.16); }.details-parent-note { color:#34328c; border-left-color:#34328c; background:#f3f2ff; }.details-parent-responsible { color:#58708f; }

/* Excepciones de interacción solicitadas y corrección de la línea principal. */
.division-chip.is-all { color:#fff; border-color:#092963; background:#092963; text-shadow:0 1px 1px rgba(0,0,0,.22); }
.node-card:hover,.node-card.is-selected { border-color:#e0aa00; box-shadow:0 0 0 3px rgba(255,203,51,.5),0 10px 20px rgba(25,85,93,.15); }.node-card:hover[data-depth="1"],.node-card.is-selected[data-depth="1"] { border-top-color:#e0aa00; }.tree-node:hover,.tree-node.is-selected { border-color:#e0aa00; background:#fff9df; box-shadow:0 0 0 2px rgba(255,203,51,.4); }
.details-panel.is-open { border-color:#e0aa00; box-shadow:0 0 0 3px rgba(255,203,51,.34),var(--shadow); }.details-connector { background:#e0aa00; box-shadow:0 0 0 1px rgba(255,203,51,.22); }.node-detail-trigger,.tree-detail-trigger { color:#6f5400; border-color:#d8a600; background:#fff8d7; box-shadow:0 3px 8px rgba(89,71,8,.18); }
.diagram-spine { background-color:transparent; }
.node-card[data-depth="0"] { border-top-color:#28a745; }
.diagram-canvas { background-color:#fffefa; }
.details-parent-note { color:#765600; border-left-color:#e0a500; background:#fff8df; }

/* Sesión de Firebase: los usuarios se administran únicamente en Firebase Authentication. */
.auth-session { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:9px; margin-top:2px; color:#536586; font-size:.69rem; font-weight:700; border-top:1px solid #dbe4f1; }
.auth-session[hidden] { display:none; }
.auth-session span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.auth-session .text-button { flex:0 0 auto; padding:5px 7px; font-size:.67rem; }
.auth-dialog { width:min(430px,calc(100vw - 32px)); }
.auth-dialog-copy { margin:0 0 18px; color:#5b6b8c; font-size:.82rem; line-height:1.45; }
.auth-form-grid { grid-template-columns:1fr; }

/* Tour guiado: el sombreado bloquea la pantalla y el recorte deja visible el control explicado. */
.tour-overlay { position:fixed; z-index:100; inset:0; }
.tour-shade { position:absolute; inset:0; background:rgba(10,25,58,.18); }
.tour-spotlight { position:fixed; z-index:1; border:3px solid #ffcb33; border-radius:12px; box-shadow:0 0 0 9999px rgba(10,25,58,.18),0 0 0 5px rgba(255,203,51,.24); pointer-events:none; transition:top .2s ease,left .2s ease,width .2s ease,height .2s ease; }
.tour-spotlight[hidden] { display:none; }
.tour-cursor { position:fixed; z-index:3; width:22px; height:29px; opacity:0; pointer-events:none; transform:translate(-3px,-3px); transition:left .55s ease,top .55s ease,opacity .2s ease; }
.tour-cursor::before { position:absolute; top:0; left:0; width:20px; height:27px; content:""; background:#17233d; clip-path:polygon(0 0,0 100%,29% 72%,47% 100%,62% 92%,43% 64%,100% 64%); filter:drop-shadow(1px 2px 1px rgba(0,0,0,.35)); }
.tour-cursor::after { position:absolute; top:50%; left:50%; width:9px; height:9px; content:""; border:2px solid #ffcb33; border-radius:50%; opacity:0; transform:translate(-50%,-50%) scale(.5); }
.tour-cursor.is-visible { opacity:1; }
.tour-cursor.is-clicking::after { animation:tour-click .42s ease-out; }
@keyframes tour-click { 0% { opacity:1; transform:translate(-50%,-50%) scale(.5); } 100% { opacity:0; transform:translate(-50%,-50%) scale(2.8); } }
.tour-card { position:fixed; z-index:2; display:grid; width:min(420px,calc(100vw - 32px)); padding:22px 24px 20px; color:var(--ink); border:1px solid #d5dff0; border-top:4px solid #28a745; border-radius:15px; background:#fff; box-shadow:0 20px 60px rgba(4,18,52,.35); transition:top .2s ease,left .2s ease; }
.tour-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tour-step-label { color:#0755ac; font-size:.68rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.tour-close { display:grid; place-items:center; width:28px; height:28px; padding:0; color:#4d6384; font-size:1.25rem; line-height:1; border:1px solid #d2ddec; border-radius:7px; background:#fff; }
.tour-close:hover { color:#092963; border-color:#8cabd4; background:#edf4ff; }
.tour-card h2 { margin:13px 0 7px; font-family:Georgia,serif; font-size:1.35rem; line-height:1.15; }
.tour-card p { min-height:62px; margin:0; color:#5b6b8c; font-size:.82rem; line-height:1.5; }
.tour-progress { height:5px; margin:18px 0 17px; overflow:hidden; border-radius:999px; background:#e9eef8; }
.tour-progress span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#0755ac,#28a745); transition:width .2s ease; }
.tour-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.tour-actions .primary-button { width:auto; min-width:100px; }
.tour-skip { margin-right:auto; }
.tour-card [hidden] { display:none; }
.tour-toggle { display:inline-flex; align-items:center; min-height:35px; padding:8px 11px; white-space:nowrap; }
@media (max-width:760px) { .tour-card { padding:19px 18px 17px; }.tour-card h2 { font-size:1.2rem; }.tour-card p { min-height:0; }.tour-actions { flex-wrap:wrap; }.tour-actions .primary-button { flex:1 1 auto; } }
@media (max-width:900px) { .tour-card { width:min(350px,calc(100vw - 24px)); } }