/* ========================================================= Organigrama CIREN Esta hoja vive DENTRO del shadow root de : ninguna de sus reglas sale hacia la página anfitriona y el CSS de esa página tampoco entra aquí. Todos los colores y medidas del organigrama se controlan desde las variables de :host — modificarlas cambia el diseño completo sin tocar el resto de las reglas. Las medidas van en px y no en rem a propósito: rem siempre se resuelve contra el del documento, así que un `html { font-size: 62.5% }` en el sitio anfitrión sí atravesaría el shadow root y encogería todo el organigrama. ========================================================= */ :host { /* Corta la herencia del sitio anfitrión (tipografía, color, interlineado, text-transform…). No afecta a las variables personalizadas declaradas más abajo. */ all: initial; /* Ubicación en la página: SIN !important a propósito, para que el sitio anfitrión pueda colocar el organigrama en su maqueta (p. ej. organigrama-ciren { max-width: 1200px; margin: 0 auto }). */ display: block; position: relative; /* ancla los position:absolute internos */ left: 50%; width: min(1880px, calc(100vw - 24px)); max-width: none; transform: translateX(-50%); background: transparent; color-scheme: dark; /* Apariencia heredable: CON !important. Una regla del sitio anfitrión que alcance a este elemento (un `* { font-family: … }` de su reset, por ejemplo) gana sobre :host en las declaraciones normales, y el valor se heredaría hacia todo el organigrama. Con !important el shadow root tiene la última palabra. */ box-sizing: border-box !important; font: 400 16px/1.45 "Segoe UI", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif !important; color: var(--texto) !important; letter-spacing: normal !important; word-spacing: normal !important; text-align: start !important; text-indent: 0 !important; text-transform: none !important; text-shadow: none !important; white-space: normal !important; visibility: visible !important; direction: ltr !important; cursor: auto !important; -webkit-text-size-adjust: 100% !important; /* Interfaz */ --fondo: #04100c; --fondo-panel: #0a1a16; --borde-panel: #17453a; --texto: #ffffff; --texto-suave: #9dc4b6; /* Colores del organigrama */ --nivel-1: #0b6b45; /* Consejo, dirección y gerencias */ --nivel-1-activo: #0f8a58; --nivel-2: #0e8a5f; /* Subgerencias */ --nivel-2-activo: #13a473; --nivel-3: #54ae46; /* Unidades */ --nivel-3-activo: #69c65a; --linea: #2f9c78; --foco: #7fe3c0; /* Medidas de las cajas y conectores */ --ancho-nodo: 202px; --alto-nodo: 62px; --radio: 12px; --grosor-linea: 2px; --medio-linea: 1px; /* mitad del grosor: centra las líneas verticales */ --codo: 16px; /* bajada antes del codo de las listas verticales */ --sep-vertical: 26px; /* alto de cada tramo vertical */ --sep-horizontal: 13px; /* separación entre hermanos */ --rail: 26px; /* posición del riel en listas verticales */ --brazo: 22px; /* largo del conector horizontal del riel */ --brazo-staff: 46px; /* conector de las unidades asesoras */ } :host([hidden]) { display: none; } :host, *, *::before, *::after { box-sizing: border-box; } .visualmente-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Buscador ---------- */ .buscador-organigrama { display: none; justify-content: center; width: 100%; padding: 20px clamp(16px, 4vw, 40px) 8px; } #busqueda { width: min(420px, 100%); padding: 9.6px 13.6px; border-radius: 10px; border: 1px solid var(--borde-panel); background: var(--fondo-panel); color: var(--texto); font: inherit; font-size: 14.4px; } #busqueda::placeholder { color: #6f9689; } :where(button, input, a):focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; } .estado { margin: 0; padding: 9.6px clamp(16px, 4vw, 40px) 0; min-height: 22.4px; font-size: 13.6px; color: var(--texto-suave); display: none; } /* ---------- Lienzo del organigrama ---------- */ .organigrama { padding: 16px 0 8px; width: 100%; max-width: 100%; margin-inline: auto; } .tree-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; padding: 8px clamp(16px, 4vw, 40px) 24px; scrollbar-color: var(--linea) transparent; } .lienzo { width: max-content; margin-inline: auto; display: flex; flex-direction: column; align-items: center; } /* En escritorio el JavaScript ajusta el lienzo completo al contenedor, por lo que no es necesario mostrar la barra horizontal. */ @media (min-width: 1080px) { .tree-scroll { overflow-x: hidden; } } /* ---------- Cajas ---------- */ .node-wrap { position: relative; display: flex; justify-content: center; } .node { display: flex; align-items: center; justify-content: center; text-align: center; width: var(--ancho-nodo); min-height: var(--alto-nodo); padding: 11.2px 12.8px; border: 1px solid transparent; border-radius: var(--radio); background: var(--nivel-1); color: var(--texto); font-family: inherit; font-size: 11.84px; font-weight: 700; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; cursor: pointer; transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease; } .node--n2 { background: var(--nivel-2); font-weight: 600; } .node--n3 { background: var(--nivel-3); font-weight: 500; letter-spacing: .01em; } .node--staff { font-weight: 600; font-size: 11.52px; min-height: 52px; } .node:hover { background: var(--nivel-1-activo); transform: translateY(-2px); } .node--n2:hover { background: var(--nivel-2-activo); } .node--n3:hover { background: var(--nivel-3-activo); } /* Botón de expandir / contraer */ .toggle { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: var(--grosor-linea) solid var(--linea); background: var(--fondo-panel); color: #bff3dd; font-size: 9.6px; line-height: 1; cursor: pointer; z-index: 2; transition: background-color .18s ease; } .toggle:hover { background: #14382e; } .toggle span { display: block; margin-left: -1px; transition: transform .18s ease; } li.contraido>.node-wrap>.toggle span { transform: rotate(-90deg); } li.contraido>.nivel { display: none; } /* ---------- Cúpula (Consejo, Dirección y unidades asesoras) ---------- */ .cupula, .cupula-item { display: flex; flex-direction: column; align-items: center; } .spine { display: grid; grid-template-columns: 1fr 0 1fr; width: 100%; min-height: var(--sep-vertical); } .spine-linea { justify-self: center; margin-left: calc(var(--medio-linea) * -1); width: 0; border-left: var(--grosor-linea) solid var(--linea); } .spine-col { list-style: none; margin: 0; padding: 11.2px 0; display: flex; flex-direction: column; gap: 12.8px; } .spine-col--izq { align-items: flex-end; padding-right: var(--brazo-staff); } .spine-col--der { align-items: flex-start; padding-left: var(--brazo-staff); } .spine-col .node-wrap::after { content: ""; position: absolute; top: 50%; width: var(--brazo-staff); border-top: var(--grosor-linea) solid var(--linea); } .spine-col--izq .node-wrap::after { left: 100%; } .spine-col--der .node-wrap::after { right: 100%; } /* ---------- Árbol: distribución horizontal ---------- */ .nivel { list-style: none; margin: 0; padding: var(--sep-vertical) 0 0; position: relative; display: flex; margin-left: -1px; justify-content: center; } /* Tramo vertical que baja desde el elemento superior */ .nivel::before { content: ""; position: absolute; top: 0; left: 50%; margin-left: calc(var(--medio-linea) * -1); height: var(--sep-vertical); border-left: var(--grosor-linea) solid var(--linea); } /*GERENCIA DE VINCULACIÓN, PRODUCTOS Y SERVICIOS*/ #grupo-gerencia-vinculacion::before { height: calc(var(--sep-vertical) + 30px) !important; } /*SUBGERENCIA DE VINCULACIÓN, PRODUCTOS Y SERVICIOS*/ #grupo-subgerencia-vinculacion::before { left: 10.9% !important; } /*SUBGERENCIA DE PROYECTOS*/ #grupo-subgerencia-proyectos::before { left: 10.9% !important; } /*SUBGERENCIA DE RECURSOS NATURALES*/ #grupo-subgerencia-recursos-naturales::before { left: 10.9% !important; margin-left: calc(var(--medio-linea) * -1); } /*SUBGERENCIA DE INFRAESTRUCTURA DE DATOS ESPACIALES*/ #grupo-subgerencia-ide::before { left: 10.9% !important; } /*GERENCIA DE ADMINISTRACIÓN Y FINANZAS*/ #grupo-gerencia-administracion::before { left: 10.9% !important; height: calc(var(--codo) + 120px) !important; } #grupo-gerencia-administracion>li:first-child { margin-top: 46%; } .nivel>li { position: relative; display: flex; flex-direction: column; align-items: center; padding: var(--sep-vertical) var(--sep-horizontal) 0; } /* Barra horizontal entre hermanos + bajada hacia cada caja */ .nivel>li::before, .nivel>li::after { content: ""; position: absolute; top: 0; right: calc(50% - var(--medio-linea)); width: calc(50% + var(--medio-linea)); height: var(--sep-vertical); border-top: var(--grosor-linea) solid var(--linea); } .nivel>li::after { right: auto; left: calc(50% - var(--medio-linea)); border-left: var(--grosor-linea) solid var(--linea); } .nivel>li:first-child::before, .nivel>li:last-child::after { border: 0 none; } .nivel>li:last-child::before { border-right: var(--grosor-linea) solid var(--linea); border-radius: 0 6px 0 0; } .nivel>li:first-child::after { border-radius: 6px 0 0 0; } /* Hijo único: solo línea vertical */ .nivel>li:only-child::before { display: none; } .nivel>li:only-child::after { border-top: 0; border-radius: 0; } /* ---------- Árbol: distribución vertical (listas de unidades y móvil) ---------- */ .nivel.stack { flex-direction: column; align-items: stretch; padding-top: var(--codo); } .nivel.stack::before { height: calc(var(--codo) + 5px); } .nivel.stack::after { /* codo que lleva la bajada hasta el riel */ content: ""; position: absolute; top: var(--codo); /*left: var(--rail);*/ right: 50%; border-top: var(--grosor-linea) solid var(--linea); } .nivel.stack>li { align-items: stretch; padding: 0 0 12px calc(var(--rail) + var(--brazo)); } .nivel.stack>li:last-child { padding-bottom: 0; } .nivel.stack>li::before { /* riel vertical continuo */ top: 0; bottom: 0; left: var(--rail); right: auto; width: 0; height: auto; border: 0; border-left: var(--grosor-linea) solid var(--linea); border-radius: 0; display: block; } .nivel.stack>li:last-child::before { bottom: auto; height: calc(var(--alto-nodo) / 2); } .nivel.stack>li::after { /* brazo horizontal hacia cada caja */ top: calc(var(--alto-nodo) / 2); left: var(--rail); right: auto; width: var(--brazo); height: 0; border: 0; border-top: var(--grosor-linea) solid var(--linea); border-radius: 0; } /* Unidad que depende de una gerencia pero se dibuja a la altura de las unidades: el espaciador reserva el alto de una subgerencia y mantiene la línea vertical continua. */ .espaciador { visibility: hidden; } .node-fantasma { display: block; width: var(--ancho-nodo); min-height: var(--alto-nodo); margin-left: calc(var(--medio-linea) * -1); } .espaciador::after { content: ""; visibility: visible; position: absolute; top: 0; bottom: calc(var(--codo) * -1); left: 50%; margin-left: calc(var(--medio-linea) * -1); border-left: var(--grosor-linea) solid var(--linea); } li.desfasada>.node-wrap:not(.espaciador) { margin-top: var(--codo); } /* Varias unidades desfasadas se apilan en una columna contra un riel. Aquí la bajada llega por el centro del espaciador, así que el codo sí tiene que dibujarse: se le fijan los dos extremos porque con `left` automático el pseudoelemento queda de ancho cero. */ .columna>.nivel.stack::after { left: var(--rail); right: 50%; } /* ---------- Modo compacto (tablet pequeña y móvil) ---------- */ .is-compact .lienzo { width: 100%; } .is-compact .cupula, .is-compact .cupula-item { align-items: stretch; width: 100%; } .is-compact .node { width: 100%; } .is-compact .node-wrap { justify-content: stretch; } .is-compact .toggle { left: auto; right: 8px; bottom: auto; top: 50%; transform: translateY(-50%); } .is-compact .espaciador { display: none; } .is-compact li.desfasada>.node-wrap { margin-top: 0; } /* La columna de unidades desfasadas no tiene caja propia: en móvil se vuelve transparente para que sus unidades queden como un ítem más de la lista de la gerencia, con la misma sangría que la subgerencia. */ .is-compact .nivel.stack>li.columna { padding-left: 0; } .is-compact .nivel.stack>li.columna::after { display: none; } .is-compact .columna>.nivel.stack { padding-top: 0; margin-left: 0; } .is-compact .columna>.nivel.stack::before, .is-compact .columna>.nivel.stack::after { display: none; } .is-compact .spine { display: flex; flex-direction: column; gap: 11.2px; padding: 11.2px 0 11.2px var(--rail); border-left: var(--grosor-linea) solid var(--linea); } .is-compact .spine-linea { display: none; } .is-compact .spine-col { padding: 0; gap: 11.2px; align-items: stretch; } .is-compact .spine-col:empty { display: none; } .is-compact .spine-col .node-wrap::after { left: calc(var(--rail) * -1); right: auto; width: var(--rail); } /* La bajada de la raíz se alinea con el riel de la cúpula */ .is-compact .nivel--raiz::before { left: 0; } .is-compact .nivel--raiz::after { left: 0; right: auto; width: var(--rail); } /* ---------- Búsqueda ---------- */ .organigrama.buscando .node:not(.coincide) { opacity: .25; } .node.coincide { box-shadow: 0 0 0 2px var(--foco); } /*GERENCIA DE TECNOLOGÍAS > UNIDADES*/ #grupo-directas-gerencia-tecnologias::before { content: none !important; } #grupo-directas-gerencia-tecnologias::after { left: auto !important; } li:has(> ul#grupo-directas-gerencia-tecnologias)::before { right: calc(86% - var(--medio-linea)); } li.desfasada.columna:has(> ul#grupo-directas-gerencia-tecnologias)>.espaciador::after { left: 1% !important; } /* ---------- Ajustes por tamaño de pantalla ---------- */ @media (max-width: 1200px) { :host { --ancho-nodo: 186px; --sep-horizontal: 10px; --sep-vertical: 22px; } .node { font-size: 11.36px; } } @media (max-width: 900px) { :host { left: auto; width: 100%; max-width: 100%; transform: none; --ancho-nodo: 100%; --alto-nodo: 58px; --rail: 20px; --brazo: 18px; } .organigrama { padding-top: 8px; } #busqueda { min-width: 0; } .tree-scroll { overflow-x: hidden; overflow-y: visible; padding-inline: clamp(14px, 4vw, 28px); } .node { font-size: 12.16px; padding-right: 32px; } #grupo-gerencia-administracion>li:first-child { margin-top: 0; } #grupo-gerencia-administracion::before { height: calc(var(--codo) + 20px) !important; } } @media (max-width: 520px) { :host { --rail: 16px; --brazo: 14px; --codo: 13px; } .buscador-organigrama { padding-inline: 12px; } .tree-scroll { padding: 6px 12px 20px; } .node { font-size: 11.52px; min-width: 0; padding: 10px 48px 10px 11px; overflow-wrap: anywhere; hyphens: auto; } .nivel.stack>li { padding-left: calc(var(--rail) + var(--brazo)); } .toggle { right: 6px; min-width: 36px; min-height: 36px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } .node:hover { transform: none; } } @media (max-width: 900px) and (orientation: landscape) { .tree-scroll { padding-bottom: 16px; } .node { min-height: 52px; } } @media (max-width: 520px) { .nivel::before { content: none !important; } } @media (max-width: 900px) { .nivel::before { content: none !important; } }