/* Estilos del organigrama municipal */

:root {
  font-family:system-ui,-apple-system,Segoe UI,sans-serif;
  color:#20314a;
  background:#f3f6fb}


* {
  box-sizing:border-box}

body {
  margin:0}

.top {
  background:linear-gradient(115deg,#102c50,#245c88);
  color:white;
  padding:30px max(20px,calc((100vw - 1200px)/2));
  }


.brand {
  display:flex;
  align-items:center;
  gap:20px}

.brand-logo {
  width:90px;
  height:90px;
  object-fit:contain;
  flex-shrink:0}

.brand-copy {
  min-width:0}

@media(max-width:600px) {
  .brand-logo {
  width:65px;
  height:65px}

.brand {
  gap:12px}

}


h1 {
  margin:0 0 8px;
  font-size:clamp(24px,3vw,35px)}

.top p {
  margin:0;
  color:#d7e8f6}


main {
  max-width:1250px;
  margin:auto;
  padding:22px}

.toolbar {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:14px}


input,button {
  font:inherit;
  border-radius:9px;
  padding:11px 14px}

input {
  border:1px solid #cad5e4;
  flex:1;
  min-width:210px}


button {
  border:1px solid #c9d6e6;
  background:white;
  color:#173d67;
  cursor:pointer}

button:hover {
  background:#e8f1fa}

button:focus-visible,input:focus-visible {
  outline:3px solid #f7ba42;
  outline-offset:2px}


.note {
  font-size:13px;
  color:#5e6c7e;
  margin:0 0 18px}

.panel {
  background:white;
  border-radius:16px;
  padding:20px;
  box-shadow:0 5px 25px #12345612;
  overflow:auto}


.tree,.tree ul {
  list-style:none;
  margin:0;
  padding:0}

.tree ul {
  margin-left:20px;
  padding-left:23px;
  border-left:2px solid #d4e0ec}


.tree li {
  position:relative;
  margin:10px 0}

.tree ul>li:before {
  content:"";
  position:absolute;
  left:-23px;
  top:22px;
  width:22px;
  border-top:2px solid #d4e0ec}


.node {
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #dbe3ed;
  border-left:5px solid #7b8ca3;
  border-radius:10px;
  padding:10px 12px;
  max-width:650px;
  background:#fff;
  box-shadow:0 1px 4px #00000008}


.node.root {
  background:#143d69;
  color:white;
  border-color:#143d69}

.node.level1 {
  border-left-color:#17619c;
  background:#edf5fc}

.node.depto {
  border-left-color:#0c9b89}

.node.seccion {
  border-left-color:#d69b27}

.node.oficina {
  border-left-color:#8b64b2}


.node .num {
  font-weight:750;
  font-size:13px;
  min-width:34px}

.node .name {
  flex:1;
  font-weight:600;
  font-size:14px}


.toggle {
  padding:3px 9px;
  min-width:33px;
  font-weight:800;
  background:#fff;
  color:#183b61}

.root .toggle {
  color:#183b61}


.hidden {
  display:none!important}

.highlight {
  background:#fff1b8!important;
  outline:2px solid #e4b840}


.legend {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:0 0 15px;
  font-size:13px}

.legend span:before {
  content:"";
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:3px;
  margin-right:6px;
  background:var(--c)}


footer {
  text-align:center;
  color:#66758b;
  font-size:12px;
  margin:24px 0}


@media(max-width:600px) {
  main {
  padding:12px}

.panel {
  padding:12px}

.tree ul {
  margin-left:7px;
  padding-left:15px}

.tree ul>li:before {
  left:-15px;
  width:14px}

.node {
  gap:6px;
  padding:9px 7px}

.node .name {
  font-size:12px}

.node .num {
  min-width:25px;
  font-size:11px}

}


@media print {
  .toolbar,.note,.legend,footer {
  display:none}

.panel {
  box-shadow:none;
  overflow:visible}

.tree ul {
  display:block!important}

}



.info {
  border:1px solid #aac4dc;
  background:#f4f9ff;
  padding:5px 10px;
  font-size:12px;
  white-space:nowrap}


.modal {
  border:0;
  border-radius:16px;
  max-width:min(620px,calc(100vw - 30px));
  width:100%;
  padding:26px;
  box-shadow:0 20px 70px #122b4b66;
  color:#20314a}


.modal::backdrop {
  background:#0a1d35a8}

.modal h2 {
  font-size:22px;
  margin:5px 0 12px}

.modal p {
  line-height:1.6}

.modal .close {
  float:right}


.modal small {
  color:#536b85}


.tabs {
  display:flex;
  gap:8px;
  border-bottom:1px solid #dbe3ed;
  margin:15px 0 10px}

.tabs button {
  border:0;
  border-radius:8px 8px 0 0}

.tabs button.active {
  background:#143d69;
  color:white}

.modal {
  max-height:85vh;
  overflow-y:auto}

.modal ol {
  padding-left:24px;
  line-height:1.55}

.modal li {
  margin:0 0 10px}

.modal [hidden] {
  display:none!important}