:root{--bg:#f4f8f5;--card:#fff;--ink:#18392c;--muted:#71867b;--line:#dce9e0;--green:#075d3d;--green-2:#0b8b5b;--mint:#e3f3e9;--blue:#5376da;--orange:#e98b44;--shadow:0 16px 44px rgba(20,70,46,.08)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:"DM Sans",Arial,sans-serif;display:flex}button,input,select,textarea{font:inherit}.sidebar{width:240px;position:fixed;inset:0 auto 0 0;background:var(--green);color:#deefe6;padding:27px 18px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:11px;padding:0 8px 47px}.brand-mark{width:39px;height:39px;border-radius:12px;background:#f4bf34;color:#17452f;display:grid;place-items:center;font:700 22px "Space Grotesk"}.brand strong{display:block;font:700 17px "Space Grotesk";color:#fff}.brand small{font-size:10px;color:#acd1be;letter-spacing:.3px}.workspace-label,.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.35px;color:var(--muted)}.workspace-label{color:#91bbaa;padding:0 13px 11px}.nav-item{border:0;width:100%;background:transparent;color:#c7e0d3;padding:13px 14px;border-radius:10px;text-align:left;display:flex;align-items:center;gap:13px;cursor:pointer;margin:2px 0;font-size:14px}.nav-item span{width:20px;font-size:18px;text-align:center}.nav-item:hover,.nav-item.active{background:#1e7555;color:white}.sidebar-foot{margin-top:auto;padding:15px 12px;border-top:1px solid rgba(255,255,255,.13)}.sync-state{display:flex;gap:8px;align-items:center;color:#d7f2df;font-size:12px}.sync-state i{display:block;width:7px;height:7px;border-radius:50%;background:#6ee19b;box-shadow:0 0 0 4px rgba(110,225,155,.14)}.sidebar-foot small{display:block;color:#99c0ad;line-height:1.5;margin-top:9px;font-size:10px}.main{margin-left:240px;width:calc(100% - 240px);padding:36px 45px 60px;max-width:1600px}.topbar{display:flex;justify-content:space-between;gap:28px;align-items:flex-start;margin-bottom:28px}.topbar h1{font:700 clamp(28px,3vw,42px)/1.1 "Space Grotesk";letter-spacing:-1.4px;margin:5px 0 9px}.topbar h1 em{color:var(--green-2);font-style:normal}.subtitle{color:var(--muted);margin:0;font-size:13px}.top-actions{display:flex;gap:9px;align-items:center}.button{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:10px 14px;border-radius:9px;cursor:pointer;font-size:12px;transition:.2s;white-space:nowrap}.button:hover{border-color:var(--green-2);color:var(--green-2)}.button.primary{background:var(--green-2);border-color:var(--green-2);color:white;font-weight:700}.button.danger{color:#bd4437;border-color:#f1d0cb}.button.danger:hover{background:#fff2ef}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}.summary-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:17px 18px;display:flex;align-items:flex-start;gap:13px;box-shadow:var(--shadow)}.summary-card.accent{background:var(--green);color:white;border-color:var(--green);justify-content:space-between}.summary-card small{display:block;font-size:10px;color:var(--muted);font-weight:700;letter-spacing:1px;margin:1px 0 5px}.summary-card.accent small,.summary-card.accent span{color:#acd5c0}.summary-card strong{font:700 27px "Space Grotesk";display:block}.summary-card span:not(.summary-icon){font-size:11px;color:var(--muted)}.summary-icon{min-width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:17px}.summary-icon.green{color:var(--green-2);background:var(--mint)}.summary-icon.blue{color:var(--blue);background:#edf0ff}.summary-icon.orange{color:var(--orange);background:#fff0e4}.summary-icon.white{color:#fff;background:rgba(255,255,255,.14)}.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:18px}.search-box{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:0 12px;width:min(400px,100%);height:41px;color:var(--muted)}.search-box input{border:0;outline:0;width:100%;background:transparent;color:var(--ink);font-size:12px}.toolbar-actions{display:flex;align-items:center;gap:9px}.select-label{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.7px}.select-label select{margin-left:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:9px 28px 9px 10px;border-radius:8px;font-size:12px}.canvas-card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}.canvas-heading{display:flex;justify-content:space-between;align-items:center;padding:21px 24px 17px;border-bottom:1px solid var(--line)}.canvas-heading h2{font:600 20px "Space Grotesk";margin:0}.canvas-heading .eyebrow{margin-bottom:6px}.zoom-note{color:var(--muted);font-size:11px}.chart-canvas{padding:34px 28px 54px;min-height:420px;overflow:auto;position:relative}.tree{min-width:max-content;display:flex;justify-content:center}.tree ul{padding-top:28px;position:relative;display:flex;justify-content:center;margin:0}.tree>ul{padding-top:0}.tree li{list-style:none;text-align:center;position:relative;padding:28px 10px 0}.tree>ul>li{padding-top:0}.tree li::before,.tree li::after{content:"";position:absolute;top:0;right:50%;border-top:1px solid #bfd3c6;width:50%;height:28px}.tree li::after{right:auto;left:50%;border-left:1px solid #bfd3c6}.tree li:only-child::before,.tree li:only-child::after{display:none}.tree li:only-child{padding-top:0}.tree li:first-child::before,.tree li:last-child::after{border:0}.tree li:last-child::before{border-right:1px solid #bfd3c6;border-radius:0 7px 0 0}.tree li:first-child::after{border-radius:7px 0 0 0}.tree ul ul::before{content:"";position:absolute;top:0;left:50%;height:28px;border-left:1px solid #bfd3c6}.position-card{width:218px;min-height:143px;background:#fff;border:1px solid #d9e8df;border-radius:13px;text-align:left;padding:13px 13px 11px;box-shadow:0 8px 20px rgba(20,80,52,.07);position:relative;transition:.2s}.position-card:hover{transform:translateY(-2px);border-color:#7cbea0;box-shadow:0 13px 26px rgba(20,80,52,.12)}.position-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;border-radius:13px 13px 0 0;background:var(--green-2)}.position-top{display:flex;gap:10px;align-items:center}.avatar{height:40px;width:40px;border-radius:11px;object-fit:cover;background:var(--mint);display:grid;place-items:center;flex:none;color:var(--green-2);font-size:19px}.position-name{font-size:12px;font-weight:700;line-height:1.25}.position-role{font-size:10px;color:var(--green-2);font-weight:600;margin-top:3px;line-height:1.25}.position-area{display:inline-block;background:var(--mint);color:var(--green-2);font-size:9px;font-weight:700;border-radius:10px;padding:4px 7px;margin-top:11px}.position-bottom{border-top:1px solid #edf3ef;margin-top:11px;padding-top:8px;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px}.edit-link{border:0;background:transparent;color:var(--green-2);cursor:pointer;font-size:10px;font-weight:700}.empty-state{text-align:center;color:var(--muted);padding:42px}.hidden{display:none!important}.modal-backdrop{position:fixed;inset:0;background:rgba(17,51,36,.44);z-index:10;display:grid;place-items:center;padding:20px}.edit-modal{background:var(--card);width:min(600px,100%);max-height:92vh;overflow:auto;border-radius:17px;box-shadow:0 24px 70px rgba(0,0,0,.2);padding:25px}.modal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:21px}.modal-header h2{font:600 23px "Space Grotesk";margin:5px 0 0}.close-button{border:0;background:transparent;font-size:28px;color:var(--muted);cursor:pointer;line-height:1}.photo-field{display:flex;gap:13px;align-items:center;margin-bottom:20px}.photo-preview{width:67px;height:67px;border-radius:16px;background:var(--mint);display:grid;place-items:center;overflow:hidden;color:var(--green-2);font-size:26px}.photo-preview img{width:100%;height:100%;object-fit:cover}.upload-button{display:inline-block;cursor:pointer;background:var(--mint);color:var(--green-2);font-size:12px;font-weight:700;padding:9px 12px;border-radius:8px}.photo-field small{display:block;color:var(--muted);font-size:10px;margin-top:6px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid label{font-size:11px;color:var(--muted);font-weight:700}.form-grid input,.form-grid select,.form-grid textarea{display:block;width:100%;margin-top:6px;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fbfdfb;color:var(--ink);outline:0;font-size:12px;resize:vertical}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:var(--green-2);box-shadow:0 0 0 3px var(--mint)}.full{grid-column:1/-1}.modal-actions{display:grid;grid-template-columns:auto 1fr auto auto;gap:9px;align-items:center;border-top:1px solid var(--line);padding-top:18px;margin-top:22px}.toast{position:fixed;right:24px;bottom:24px;background:#173d2d;color:#fff;padding:12px 16px;border-radius:9px;font-size:12px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:.25s;z-index:20}.toast.show{opacity:1;transform:translateY(0)}@media(max-width:1000px){.sidebar{width:200px}.main{margin-left:200px;width:calc(100% - 200px);padding:28px}.summary-grid{grid-template-columns:repeat(2,1fr)}.topbar{flex-direction:column}.top-actions{width:100%}}@media(max-width:700px){body{display:block}.sidebar{position:static;width:100%;height:auto;padding:16px}.brand{padding-bottom:18px}.workspace-label,.sidebar-foot{display:none}.nav-item{display:inline-flex;width:auto;margin-right:4px;padding:9px 10px}.nav-item:not(.active){display:none}.main{margin:0;width:100%;padding:22px 16px 45px}.top-actions{flex-wrap:wrap}.summary-grid{grid-template-columns:1fr 1fr}.toolbar{align-items:stretch;flex-direction:column}.toolbar-actions{flex-wrap:wrap}.canvas-heading{align-items:flex-start;gap:10px;flex-direction:column}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.modal-actions{grid-template-columns:1fr 1fr}.modal-actions span{display:none}.modal-actions .danger{grid-column:1/-1}.chart-canvas{padding-left:8px;padding-right:8px}}
.new-area-input{margin-top:6px!important;border-color:var(--green-2)!important;box-shadow:0 0 0 3px var(--mint)}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:var(--green-2);box-shadow:0 0 0 3px var(--mint)}.full{grid-column:1/-1}.modal-actions{display:grid;grid-template-columns:auto 1fr auto auto;gap:9px;align-items:center;border-top:1px solid var(--line);padding-top:18px;margin-top:22px}.toast{position:fixed;right:24px;bottom:24px;background:#173d2d;color:#fff;padding:12px 16px;border-radius:9px;font-size:12px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:.25s;z-index:20}.toast.show{opacity:1;transform:translateY(0)}@media(max-width:1000px){.sidebar{width:200px}.main{margin-left:200px;width:calc(100% - 200px);padding:28px}.summary-grid{grid-template-columns:repeat(2,1fr)}.topbar{flex-direction:column}.top-actions{width:100%}}@media(max-width:700px){body{display:block}.sidebar{position:static;width:100%;height:auto;padding:16px}.brand{padding-bottom:18px}.workspace-label,.sidebar-foot{display:none}.nav-item{display:inline-flex;width:auto;margin-right:4px;padding:9px 10px}.nav-item:not(.active){display:none}.main{margin:0;width:100%;padding:22px 16px 45px}.top-actions{flex-wrap:wrap}.summary-grid{grid-template-columns:1fr 1fr}.toolbar{align-items:stretch;flex-direction:column}.toolbar-actions{flex-wrap:wrap}.canvas-heading{align-items:flex-start;gap:10px;flex-direction:column}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.modal-actions{grid-template-columns:1fr 1fr}.modal-actions span{display:none}.modal-actions .danger{grid-column:1/-1}.chart-canvas{padding-left:8px;padding-right:8px}}
@media print{*{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}.sidebar,.top-actions,.toolbar,.edit-link,.zoom-note,.canvas-tools{display:none!important}html,body{background:#e3e3e3!important;overflow:visible!important}.main{margin:0;width:100%;max-width:none;padding:18px 22px 45px}.topbar{display:flex!important;margin-bottom:0}.corporate-logo{display:block!important}.canvas-card{box-shadow:none;background:transparent;border:0;overflow:visible}.chart-canvas{overflow:visible;min-height:0}.tree{min-width:1250px}.position-card{box-shadow:0 2px 4px rgba(0,0,0,.22)}}

/* Vista corporativa inspirada en la referencia entregada. */
body{background:linear-gradient(135deg,#f7f7f7 0%,#e3e3e3 54%,#cfcfcf 100%);overflow-x:hidden}
.sidebar{display:none}
.main{margin-left:0;width:100%;max-width:none;padding:18px 22px 45px}
.topbar{position:relative;min-height:92px;margin-bottom:0;align-items:flex-start}
.topbar .eyebrow{display:none}
.topbar h1{font:italic 800 31px/1 "Arial Black",Arial,sans-serif;letter-spacing:-1.4px;color:#263748;margin:8px 0 0;padding-bottom:14px;position:relative}
.topbar h1:after{content:"";position:absolute;left:0;bottom:0;width:67px;height:5px;background:#f2dc00}
.subtitle{display:none}
.corporate-logo{position:absolute;right:4px;top:0;width:181px;height:61px;object-fit:cover;object-position:center;mix-blend-mode:multiply}
.top-actions{position:absolute;right:0;top:70px;z-index:4}
.top-actions .button{padding:7px 10px;font-size:10px;background:rgba(255,255,255,.76)}
.top-actions .button.primary{background:#008b28;color:#fff}
.summary-grid,.toolbar{display:none}
.canvas-card{background:transparent;border:0;box-shadow:none;border-radius:0;margin-top:22px}
.canvas-heading{display:flex;align-items:center;justify-content:space-between}
.canvas-tools{display:flex;align-items:center;gap:14px}.zoom-controls{display:flex;align-items:center;background:#fff;border:1px solid #cbd7cf;border-radius:8px;overflow:hidden}.zoom-button,.zoom-value{border:0;background:#fff;color:#3c5146;height:29px;min-width:31px;cursor:pointer;font-size:14px}.zoom-value{border-left:1px solid #dce5df;border-right:1px solid #dce5df;font-size:11px;min-width:52px}.zoom-button:hover,.zoom-value:hover{background:#e9f4ed;color:#087849}
.chart-canvas{padding:0 8px 50px;min-height:650px;overflow:auto}
.tree{min-width:1250px;min-height:610px;align-items:flex-start}
.tree>ul{padding-top:0}
.tree li{padding:42px 8px 0}
.tree>ul>li{padding-top:0}
.tree li:before,.tree li:after{top:0;height:42px;border-color:#59615d;border-style:dotted}
.tree ul ul:before{height:42px;border-color:#59615d;border-style:dotted}
.position-card{width:190px;min-height:38px;height:auto;margin:0 auto;padding:8px 10px 8px 35px;border:0;border-radius:22px;background:#00a900;color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.22);text-align:center;cursor:grab}
.position-card.is-dragging{opacity:.45;cursor:grabbing}.position-card.drop-target{outline:3px solid #f5df00;outline-offset:4px;transform:scale(1.04)}
.position-card:before{display:none}
.position-card:hover{transform:translateY(-2px);background:#009800}
.position-top{display:block}
.avatar{position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:37px;height:37px;min-width:37px;min-height:37px;border-radius:50%;border:4px solid #f8e900;background:#f5f5f5;color:#555;box-shadow:0 1px 4px #777;font-size:11px;overflow:hidden;isolation:isolate}
.avatar img{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;max-width:none;max-height:none;border-radius:50%;object-fit:cover;object-position:center}
.position-name{font-size:10px;line-height:1.05;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.position-role{font-size:8px;line-height:1.05;color:#fff;margin-top:2px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.position-area{display:block;width:max-content;max-width:100%;margin:13px auto 0;padding:4px 24px;border-radius:10px;background:#ffed00;color:#26412f;font-size:8px;text-transform:uppercase;letter-spacing:.2px}
.position-bottom{border:0;margin:0;padding:0;height:0;overflow:hidden}
.position-bottom span{display:none}
.edit-link{position:absolute;right:7px;top:10px;color:rgba(255,255,255,.85);font-size:8px;padding:0}
.empty-state{color:#3a4e43}
@media(max-width:700px){.corporate-logo{width:135px;height:47px;right:0}.topbar h1{font-size:25px}.top-actions{top:60px}.chart-canvas{padding-top:18px}.tree{min-width:1000px}}
@media(max-width:700px){body{min-width:320px;overflow-x:hidden}.main{padding:14px 12px 30px}.topbar{min-height:111px}.topbar h1{font-size:24px;max-width:48%}.corporate-logo{width:135px;height:47px;top:0}.top-actions{left:0;right:0;top:68px;display:flex;gap:6px;flex-wrap:wrap}.top-actions .button{min-height:38px;padding:9px 10px;font-size:11px}.canvas-card{margin-top:12px}.canvas-heading{padding:12px 0 10px;gap:10px;flex-wrap:wrap}.canvas-heading h2{font-size:16px}.canvas-tools{width:100%;justify-content:space-between;gap:8px}.zoom-note{font-size:10px;max-width:calc(100% - 118px)}.zoom-controls{flex:none}.zoom-button,.zoom-value{height:36px;min-width:38px}.zoom-value{min-width:58px}.chart-canvas{margin:0 -12px;padding:18px 12px 40px;min-height:520px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}.tree{min-width:920px}.position-card{touch-action:manipulation}.edit-modal{padding:18px;border-radius:14px}.form-grid{gap:11px}.form-grid input,.form-grid select,.form-grid textarea{min-height:42px}.modal-actions .button{min-height:42px}.photo-preview{width:62px;height:62px}}
@media(min-width:701px) and (max-width:1100px){.main{padding:25px 24px}.tree{min-width:1100px}.canvas-tools{gap:8px}}

/* Conectores limpios: quedan por detrás de las tarjetas y con espacio propio. */
.tree{position:relative;padding-top:8px}
.tree ul{position:relative;z-index:1}
.toolbar-actions{flex-wrap:wrap}
.toolbar-actions .button:disabled{opacity:.45;cursor:not-allowed}
.chart-dialog{width:min(460px,100%)}
.chart-dialog label{display:block;color:var(--muted);font-size:11px;font-weight:700}
.chart-dialog label input{display:block;width:100%;margin-top:7px;border:1px solid var(--line);border-radius:8px;padding:11px 12px;outline:0;color:var(--ink)}
.chart-dialog label input:focus{border-color:var(--green-2);box-shadow:0 0 0 3px rgba(11,139,91,.1)}
@media(max-width:700px){.toolbar-actions{width:100%;justify-content:flex-start}.toolbar-actions .select-label{width:100%}.toolbar-actions .select-label select{max-width:calc(100% - 88px)}}
.tree li{z-index:1;padding-top:52px}
.tree>ul>li{padding-top:0}
.tree li::before,.tree li::after{display:none}
.tree li:first-child::after,.tree li:last-child::before{border-top:0}
.tree li:first-child::after{border-left:0}
.tree ul ul::before{display:none}
.tree>ul>li>.position-card{margin-top:0}
.position-card{z-index:3;isolation:isolate}
.summary-grid{display:grid}
.toolbar{display:flex}
@media print{.summary-grid,.toolbar{display:none}}
/* Fuerza un único trazo sólido en cada tramo del conector. */
.connector-layer{position:absolute;inset:0;z-index:0;overflow:visible;pointer-events:none}
.connector-layer path{fill:none;stroke:#777;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}