/* ───────────────────────────────────────────────────────────────── Nav institucional compartido (home.html + paginas publicas propias: autoridades, normativas, novedades, agenda, contacto). Requiere que la pagina defina en su :root las variables --rf, --rf-d, --font y (opcional) --c-accent — todas las paginas publicas ya las traen en su propio bloque :root. ───────────────────────────────────────────────────────────────── */ /* ── Grilla del sitio ── Ancho del contenido y margen lateral, para TODAS las paginas publicas. Se define aca, en el archivo que ya comparten las seis, y no en cada plantilla: repetido, se separa. Y de hecho se habia separado — cada pagina traia su propio ancho (62, 70, 76, 78 y 80rem), asi que el contenido arrancaba en un lugar distinto segun donde estuviera parado el visitante. El fondo de cada seccion sigue ocupando todo el ancho: lo que se acota y se centra es el contenido. --rf-zoom y sus anchos compensados (--rf-maxw-esc, --rf-pad-lateral-esc) tambien se comparten aca: zoom-out general del 10% en desktop, para que el sitio se vea como a 90% de zoom del navegador. `zoom` escala la caja ENTERA (padding incluido), asi que una seccion al 90% maqueta su padding sobre un ancho de 100%/.9 y termina con un margen visible mas chico que el de un bloque sin escalar (el hero de cada pagina, que queda a tamaño real). Compensando el ancho maximo y el padding minimo por el mismo factor, el margen visible vuelve a coincidir en toda la pagina. Cada plantilla decide, en su propio @media(min-width:992px), a que bloques les aplica `zoom:var(--rf-zoom)` (tipicamente todo menos su hero) — usar siempre padding-left/padding-right (no el atajo `padding-inline`) para la compensacion, para no competir por especificidad/orden contra el `padding` fisico que ya trae cada seccion. El margen lateral tiene un TECHO en pantallas muy anchas: sin este segundo techo, --rf-maxw (70rem/1120px) queda fijo para siempre y todo el ancho que sobra por encima de eso se va al margen, sin limite (en un 4K de 3840px, mas de 1000px de margen por lado). Por eso --rf-pad-lateral ya no es un max() de dos ramas sino de tres tramos, con un segundo ancho maximo de contenido --rf-maxw2 (100rem/1600px): 1) W <= 82rem: margen fijo en --rf-pad-min, contenido crece con W (igual que siempre). 2) 82rem < W <= 100rem: contenido fijo en --rf-maxw, margen crece hasta "clavarse" en --rf-pad-elbow (igual que siempre). 3) 100rem < W <= 130rem: margen fijo en --rf-pad-elbow, el contenido vuelve a crecer (esto es lo nuevo) hasta alcanzar --rf-maxw2. 4) W > 130rem: contenido fijo en --rf-maxw2, el margen retoma el crecimiento (mismo problema de hoy, pero recien a partir de una pantalla mucho mas ancha). --rf-pad-elbow es, por construccion, el margen que la formula de dos tramos ya produce exactamente a los 1600px de viewport ((1600 - 1120) / 2 = 240px): no es un numero inventado, es el punto donde el margen ya "esta parado" hoy, lo que evita cualquier salto visual en el empalme entre el tramo 2 y el tramo 3. Ver design.md de openspec/changes/limite-margen-lateral-desktop para el detalle numerico tramo por tramo. */ :root{ --rf-maxw:70rem; --rf-pad-min:6rem; --rf-maxw2:100rem; --rf-pad-elbow:calc((var(--rf-maxw2) - var(--rf-maxw)) / 2); --rf-pad-lateral: max( min( max(var(--rf-pad-min), calc((100% - var(--rf-maxw)) / 2)), var(--rf-pad-elbow) ), calc((100% - var(--rf-maxw2)) / 2) ); --rf-zoom:.9; --rf-maxw-esc:calc(var(--rf-maxw) / var(--rf-zoom)); --rf-maxw2-esc:calc(var(--rf-maxw2) / var(--rf-zoom)); --rf-pad-elbow-esc:calc(var(--rf-pad-elbow) / var(--rf-zoom)); --rf-pad-lateral-esc: max( min( max(calc(var(--rf-pad-min) / var(--rf-zoom)), calc((100% - var(--rf-maxw-esc)) / 2)), var(--rf-pad-elbow-esc) ), calc((100% - var(--rf-maxw2-esc)) / 2) ); } /* Header mobile — oculto en desktop. */ .mobile-header{display:none;position:sticky;top:0;z-index:50;background:var(--rf);color:#fff;padding:.7rem 1rem;align-items:center;gap:.8rem;box-shadow:0 2px 8px rgba(0,0,0,.15)} .mobile-brand{display:none} .mobile-brand img{width:2.2rem;height:2.2rem;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.15);flex-shrink:0} /* Mini placeholder "RF" para el header mobile cuando no hay logo cargado */ .mobile-brand-mini{width:2.2rem;height:2.2rem;border-radius:10px;display:grid;place-items:center; background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.08)); border:1px solid rgba(255,255,255,.2); font-weight:800;font-size:.85rem;letter-spacing:-.04em;color:#fff;flex-shrink:0;text-shadow:0 1px 1px rgba(0,0,0,.2)} .mobile-brand-name{font-weight:600;font-size:.95rem;line-height:1.15;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Hamburger: 3 lineas que se animan a X cuando abre. */ .hamburger{background:transparent;border:none;width:38px;height:38px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;padding:0;flex-shrink:0;border-radius:6px;transition:background .15s} .hamburger:hover{background:rgba(255,255,255,.12)} .hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .15s} .hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0} .hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* Boton cerrar dentro del drawer — visible cuando el sidebar esta abierto (en desktop y mobile, ahora que el sidebar es colapsable en ambos). */ .side-nav-close{display:grid;place-items:center;position:absolute;top:.6rem;right:.8rem;background:rgba(255,255,255,.14);color:#fff;border:none;width:36px;height:36px;border-radius:50%;font-size:1.3rem;cursor:pointer;line-height:1;z-index:2} .side-nav-close:hover{background:rgba(255,255,255,.28)} /* Overlay detras del drawer. */ .side-nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:39;opacity:0;transition:opacity .25s;backdrop-filter:blur(2px)} .side-nav-overlay.open{display:block;opacity:1} /* Sidebar — colapsable tambien en desktop: oculto por defecto (drawer overlay) y se abre con la pestaña vertical "Menú" del borde, liberando el espacio lateral. Al abrir recupera su forma completa. */ .side-nav{position:fixed;top:0;left:0;width:17rem;height:100vh;background:var(--rf);color:#fff;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem;z-index:60;transform:translateX(-100%);transition:transform .32s cubic-bezier(.4,0,.2,1);box-shadow:6px 0 30px rgba(0,0,0,.28)} .side-nav.open{transform:translateX(0)} /* Pestaña "Menú" — visible cuando el sidebar esta colapsado. */ .side-nav-tab{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:35; display:flex;flex-direction:column;align-items:center;gap:.5rem; background:var(--rf);color:#fff;border:none;cursor:pointer; padding:1rem .55rem;border-radius:0 12px 12px 0; box-shadow:3px 0 14px rgba(0,0,0,.22);font-family:var(--font); transition:padding-left .18s ease,box-shadow .18s ease} .side-nav-tab:hover{padding-left:.85rem;box-shadow:5px 0 18px rgba(0,0,0,.3)} .side-nav-tab i{font-size:1.1rem} .side-nav-tab .tab-label{writing-mode:vertical-rl;text-orientation:mixed; text-transform:uppercase;font-weight:700;letter-spacing:.12em;font-size:.74rem} /* Logo del sidebar — rectangular con esquinas curvas (border-radius) en armonia con las cards del sitio. */ .side-nav .logo{ width:7.5rem;height:7.5rem; border-radius:18px; background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.06)); border:1.5px solid rgba(255,255,255,.18); box-shadow:0 10px 26px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.15); display:grid;place-items:center; font-weight:700;font-size:2.1rem;color:#fff; overflow:hidden;margin-bottom:1rem; } .side-nav .logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit} /* Logo temporal SVG: red federal con sus jurisdicciones — hereda el blanco del sidebar via currentColor. Si se carga el logo real (branding_config.logo) el SVG no se renderiza, el condicional del HTML elige la imagen. */ .side-nav .logo .logo-rf{width:88%;height:88%;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.22));transition:transform .35s ease} .side-nav .logo:hover .logo-rf{transform:rotate(15deg) scale(1.05)} /* Marca institucional — el nombre completo se oculta en el sidebar porque el logo ya identifica la marca. El subtitle (brand-sub) queda visible como microcopy debajo del logo. */ .side-nav .brand-name{ display:none; font-size:1.4rem;font-weight:700;text-align:center;line-height:1.2; letter-spacing:-.012em; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.18); padding:0 .35rem; position:relative; } /* Separador decorativo entre nombre y subtitle. Usa el COLOR DE ACENTO del branding en el centro — toque de identidad que acompaña sin invadir. */ .side-nav .brand-name::after{ content:'';display:block; width:2.4rem;height:2px; background:linear-gradient(to right,transparent,var(--c-accent,rgba(255,255,255,.55)),transparent); margin:.7rem auto .55rem; border-radius:2px; opacity:.85; } /* brand-sub + nav comparten el MISMO width y margin auto, así "C"omprás Públicas arranca exactamente en la misma X que "I"NICIO, NORMATIVAS, etc. */ .side-nav .brand-sub{ font-size:.66rem;letter-spacing:.18em;font-weight:600; color:rgba(255,255,255,.72); margin:0 auto 1.4rem; width:10rem; text-align:left; padding-left:.6rem; text-transform:uppercase; } .side-nav nav{width:10rem;margin:0 auto} .side-nav nav a{display:block;color:rgba(255,255,255,.85);text-transform:uppercase;font-weight:600;letter-spacing:.04em;font-size:.85rem;padding:.5rem .6rem;border-radius:6px;text-align:left;position:relative;transition:color .15s,background .15s} .side-nav nav a:hover{color:#fff;background:rgba(0,0,0,.14)} /* Grupo "Nosotros" (Autoridades + Nuestra Red) — hover en desktop, tap en mobile. El toggle no navega (agrupa 2 links), asi que es un