/* ========================================================================== ResponsivoSN.css Adapta a celular las paginas internas del sitio (Noticias, Nota, Gobierno, Transparencia). NO cambia el diseño: mismos colores, fuentes y estructura; solo corrige anchos para que el contenido quepa en pantallas chicas. Se carga al final del , despues de webflow/bootstrap, para poder corregir lo que esas hojas dejan fijo. Todo vive dentro de media queries: en escritorio (>= 992px) este archivo no aplica nada y el sitio se ve exactamente igual que antes. ========================================================================== */ /* ========================================================================== 1. BASE COMUN (celular y tablet) ========================================================================== */ @media screen and (max-width: 991px) { /* --- Contenedores de contenido ------------------------------------- .ccontainer no trae padding lateral, asi que el texto queda pegado a la orilla de la pantalla. Solo se le da aire dentro de las zonas de contenido: la barra de navegacion tiene su propio .ccontainer y no debe tocarse. .post-wrapper vive dentro de .secion-bocy, por eso solo se le da padding al de afuera: si no, se suma y el texto queda muy angosto. */ .main-content > .ccontainer, .main-content .bloque > .ccontainer, .seccion-content-fijo > .ccontainer, .secion-bocy { padding-left: 16px; padding-right: 16px; } /* --- Rejilla -------------------------------------------------------- Bootstrap 5 (cargado por CDN despues de webflow) le pone a .row un margen negativo de -12px que se sale del contenedor porque este no tiene padding. webflow ya anulaba ese margen en <=991px, pero bootstrap gana por orden de carga. Aqui se restablece. */ .main-content .row, .seccion-content-fijo .row, .post-wrapper .row { margin-left: 0; margin-right: 0; } /* Las columnas de webflow (col-6, col-4, etc.) se apilan a ancho completo. El markup ya trae las clases para pantallas chicas, pero sin las reglas correspondientes cargadas; se fuerza aqui. */ .main-content [class*="col-"], .seccion-content-fijo [class*="col-"], .post-wrapper [class*="col-"] { flex: 0 0 100%; max-width: 100%; min-width: 0; /* permite que el contenido se encoja dentro del flex */ } /* Algunas vistas (Transparencia elem 2/3/5: Finanzas, Consultas, Datos Abiertos) montan el contenido en un .ccontainer "pelon", sin envoltorio .main-content, asi que las reglas de arriba no las alcanzaban y el margen negativo de .row se desbordaba. El navbar usa ".ccontainer > nav" y el contenido ".ccontainer > .row", por eso este selector apunta solo al contenido y nunca a la barra. */ .ccontainer > .row { margin-left: 0 !important; margin-right: 0 !important; } .ccontainer > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; min-width: 0; } /* --- Multimedia ----------------------------------------------------- Nada debe ser mas ancho que su contenedor. */ .main-content img, .seccion-content-fijo img, .post-wrapper img, .main-content video, .main-content iframe, .post-wrapper iframe { max-width: 100%; height: auto; } /* Los iframes (mapas, visores) conservan proporcion sin desbordarse. */ .main-content iframe, .post-wrapper iframe { width: 100%; } /* --- Tablas --------------------------------------------------------- Una tabla ancha empuja toda la pagina. Se le permite scroll propio en horizontal sin arrastrar el resto del contenido. */ .main-content table, .post-wrapper table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* --- Texto ---------------------------------------------------------- Palabras muy largas (URLs, nombres de archivo) rompen el ancho. */ .main-content, .seccion-content-fijo, .post-wrapper { overflow-wrap: break-word; word-wrap: break-word; } } /* ========================================================================== 2. BARRA DE NAVEGACION EN PAGINAS INTERNAS -------------------------------------------------------------------------- En Inicio la barra ya se colapsa en hamburguesa (estilos .sn-home-navbar dentro de _LayoutInicio.cshtml). En las demas paginas el boton existe en el markup y el JS que lo maneja es el mismo, pero no habia estilos: el menu quedaba en display:none y era imposible navegar desde el celular. Aqui se le da el MISMO comportamiento con diseño propio: barra blanca y texto gris, acorde a como se ve esta barra en escritorio. No se reutiliza el diseño de cristal azul de Inicio. ========================================================================== */ @media screen and (max-width: 991px) { /* .navbar es flex, asi que su .ccontainer se encoge al tamaño del contenido (~236px de 390) y todo queda apretado al centro. Se le pide que ocupe el ancho disponible. */ .navbar:not(.sn-home-navbar) > .ccontainer { flex: 1 1 auto; width: 100%; margin-left: 0; margin-right: 0; } /* Referencia para posicionar el panel desplegable. */ .navbar:not(.sn-home-navbar) .container-fluid { position: relative; display: flex; align-items: center; gap: 12px; padding: 6px 14px; } /* Logo mas compacto para dejar sitio al boton. */ .navbar:not(.sn-home-navbar) .brand { margin-left: 0 !important; flex: 0 0 auto; } .navbar:not(.sn-home-navbar) .brand img { height: 34px !important; width: auto; } /* --- Boton hamburguesa --------------------------------------------- */ .navbar:not(.sn-home-navbar) .sn-home-toggler { display: inline-flex !important; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto; padding: 9px; width: auto; height: auto; border: 1px solid #dcdcdc; border-radius: 8px; background: #ffffff; cursor: pointer; } .navbar:not(.sn-home-navbar) .sn-home-toggler span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #0048a0; transition: transform 260ms ease, opacity 200ms ease; } /* Las tres barras se vuelven una "X" al abrir. */ .navbar:not(.sn-home-navbar) .sn-home-toggler.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar:not(.sn-home-navbar) .sn-home-toggler.is-open span:nth-child(2) { opacity: 0; } .navbar:not(.sn-home-navbar) .sn-home-toggler.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* --- Panel desplegable --------------------------------------------- Bootstrap deja .collapse en display:none; se sustituye por un panel que se despliega con la clase .is-open que pone el JS del layout. */ .navbar:not(.sn-home-navbar) .navbar-collapse { display: block !important; position: absolute; top: calc(100% + 8px); left: 8px; right: 8px; z-index: 40; border: 1px solid #e4e4e4; border-radius: 12px; background: #ffffff; box-shadow: 0 16px 32px rgba(2, 20, 48, 0.16); overflow: hidden; max-height: 0; padding: 0 8px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 240ms ease, transform 260ms ease, max-height 320ms ease, padding 220ms ease, visibility 0s linear 320ms; } .navbar:not(.sn-home-navbar) .navbar-collapse.is-open { max-height: 80vh; padding: 8px; opacity: 1; visibility: visible; transform: translateY(0); overflow-y: auto; transition: opacity 240ms ease, transform 260ms ease, max-height 320ms ease, padding 220ms ease, visibility 0s; } /* --- Enlaces apilados ------------------------------------------------ */ .navbar:not(.sn-home-navbar) .navbar-nav { flex-direction: column !important; align-items: stretch; width: 100%; gap: 0; } .navbar:not(.sn-home-navbar) .nav-item { width: 100%; border-bottom: 1px solid #f0f0f0; } .navbar:not(.sn-home-navbar) .nav-item:last-child { border-bottom: 0; } .navbar:not(.sn-home-navbar) .nav-link, .navbar:not(.sn-home-navbar) .text-block { font-size: 14px; } .navbar:not(.sn-home-navbar) .nav-link { padding: 13px 12px !important; border-radius: 8px; } .navbar:not(.sn-home-navbar) .nav-link:hover, .navbar:not(.sn-home-navbar) .nav-link:focus-visible { background: #f5f8fd; color: #0048a0; } /* La flecha del dropdown de bootstrap si se muestra aqui: ayuda a saber cuales entradas abren un submenu. */ .navbar:not(.sn-home-navbar) .dropdown-toggle::after { float: right; margin-top: 8px; } /* --- Submenus en linea, no flotantes -------------------------------- */ .navbar:not(.sn-home-navbar) .dropdown-menu { position: static !important; float: none; width: 100%; margin: 0 0 6px; padding: 4px 0; border: 0; border-radius: 8px; background: #f7f9fc; box-shadow: none; transform: none !important; } .navbar:not(.sn-home-navbar) .dropdown-item { padding: 11px 16px; color: #646464; white-space: normal; /* los nombres largos de PDF se parten en varias lineas */ line-height: 1.35; } .navbar:not(.sn-home-navbar) .dropdown-item:hover, .navbar:not(.sn-home-navbar) .dropdown-item:focus { background: #eaf1fb; color: #0048a0; } } /* ========================================================================== 3. NOTICIAS (~/Noticias/Noticias) ========================================================================== */ @media screen and (max-width: 991px) { /* Una noticia por renglon, con separacion entre tarjetas. */ #div_noticias > div { margin-bottom: 28px; } /* La imagen de cada noticia mantiene proporcion y no se estira. */ #div_noticias img { width: 100%; height: auto; display: block; border-radius: 8px; } /* Titulo de cada noticia: en celular 24pt es demasiado grande. */ #div_noticias .subtitulo.blog { font-size: 20px; line-height: 1.25; margin-bottom: 6px; } #div_noticias .fecha { font-size: 14px; margin-bottom: 10px; } } /* ========================================================================== 4. GOBIERNO y TRANSPARENCIA -------------------------------------------------------------------------- Estas paginas muestran documentos en tablas (DataTables) y abren los PDF en un modal. En celular el modal traia max-width:60% en linea, quedando de 234px con un iframe de 150px de alto: imposible leer un PDF. Se hace casi pantalla completa. El resto (tablas anchas, columnas) lo cubre la seccion 1. ========================================================================== */ @media screen and (max-width: 991px) { /* Modal a pantalla casi completa (el max-width:60% viene en linea, por eso hace falta !important). #PDF_Modal existe igual en ambas vistas. */ #PDF_Modal .modal-dialog { max-width: none !important; width: auto; margin: 10px; } /* El cuerpo aprovecha el alto de la pantalla para mostrar el documento. */ #PDF_Modal .modal-body { padding: 8px; } #PDF_Modal #preview { width: 100%; height: auto; } /* El visor del PDF: ancho completo y un alto util en vez de los 150px por defecto del iframe. */ #PDF_Modal #iframepdf, #PDF_Modal #preview iframe, #PDF_Modal #preview embed, #PDF_Modal #preview object { display: block; width: 100%; height: 70vh; border: 0; } /* Contenido tipo Elementor (biografia del Alcalde y similares). Viene de la base de datos como HTML exportado de WordPress, con width:1140px metido en cada
. Esos anchos fijos empujan la pagina a ~1150px; se anulan para que el bloque se ajuste a la pantalla. */ #sn .elementor-section, #sn .elementor-container, #sn .elementor-row, #sn .elementor-column, #sn .elementor-column-wrap, #sn .elementor-widget-wrap, #sn .elementor-element, #sn .elementor-widget-container, #sn .elementor-image, #sn .elementor-text-editor { width: auto !important; max-width: 100% !important; } #sn .elementor-row { flex-wrap: wrap !important; } #sn .elementor-image img, #sn .elementor img { max-width: 100% !important; height: auto !important; } } /* ========================================================================== 5. BUSQUEDA DE NOTICIAS (~/Noticias/Busqueda_de_noticias) -------------------------------------------------------------------------- Tabla DataTables (columna Noticia + miniatura) con buscador. En celular no se desbordaba, pero el contenido quedaba en ~282px por padding anidado acumulado, y DataTables fijaba en linea width:170px a la columna del titulo, dejando espacio vacio y titulos partidos en 3-4 lineas. Se recupera el ancho y se libera la columna del titulo. ========================================================================== */ @media screen and (max-width: 991px) { /* Recupera ancho: esta pagina anida main-content > ccontainer > col > card-body, cada uno con su padding. Se recortan en pantallas chicas. */ .main-content > .ccontainer > .row > #sn.col { padding-left: 4px !important; padding-right: 4px !important; } #sn .card-body { padding-left: 6px !important; padding-right: 6px !important; } /* La tabla ocupa todo el ancho disponible. */ #dataTable_BusquedaNoticias { width: 100% !important; table-layout: fixed; } /* La columna del titulo toma el espacio restante (DataTables le mete width:170px en linea, por eso el !important); la miniatura va fija. */ #dataTable_BusquedaNoticias th:first-child, #dataTable_BusquedaNoticias td:first-child { width: auto !important; white-space: normal; word-break: break-word; } #dataTable_BusquedaNoticias th:nth-child(2), #dataTable_BusquedaNoticias td:nth-child(2) { width: 88px !important; } /* El campo de busqueda a ancho completo, comodo para el dedo. La etiqueta "Search:" que envuelve al input es inline-block y lo estrangula: se pasa a bloque para que el input llene la fila. */ #sn .dataTables_filter { width: 100%; text-align: left; } #sn .dataTables_filter label { display: block; width: 100%; } #sn .dataTables_filter input { width: 100%; max-width: 100%; margin-left: 0; margin-top: 6px; display: block; box-sizing: border-box; } } /* ========================================================================== 6. NOTA (~/Nota/Nota) - la noticia individual ========================================================================== */ @media screen and (max-width: 991px) { /* El titulo llegaba pegado a ambas orillas a 24pt. */ .post-wrapper .TituloNotas, #Titulo { font-size: 22px !important; line-height: 1.3; padding-left: 4px; padding-right: 4px; } /* El cuerpo justificado deja huecos feos en pantallas angostas. */ #div_Nota p, #div_Nota span, #div_Nota li, #div_Nota div { text-align: left !important; font-size: 16px !important; line-height: 1.6 !important; } /* Nota.cshtml fija line-height: 7.4px a todos los
  • del sitio, lo que encima los encima entre si al cortarse en varias lineas. */ #div_Nota li { line-height: 1.6 !important; margin-bottom: 8px; } /* Las imagenes dentro del cuerpo suelen traer width/height fijos. */ #div_Nota img { width: auto !important; max-width: 100% !important; height: auto !important; margin: 12px auto; display: block; } /* Enlace "Regresar": area comoda para el dedo. */ .post-wrapper > .col > a { display: inline-block; padding: 8px 0; font-size: 16px; } }