{"id":51,"date":"2026-06-03T16:36:29","date_gmt":"2026-06-03T16:36:29","guid":{"rendered":"https:\/\/atlahuilco.gob.mx\/portal\/?page_id=51"},"modified":"2026-06-17T16:46:37","modified_gmt":"2026-06-17T16:46:37","slug":"menu-transparencia","status":"publish","type":"page","link":"https:\/\/atlahuilco.gob.mx\/portal\/transparencia\/menu-transparencia\/","title":{"rendered":"Menu transparencia"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"51\" class=\"elementor elementor-51\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-741f76e e-flex e-con-boxed e-con e-parent\" data-id=\"741f76e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a984d62 elementor-widget elementor-widget-shortcode\" data-id=\"a984d62\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div id=\"transparencia\"><\/div>\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/PapaParse\/5.4.1\/papaparse.min.js\"><\/script>\r\n\r\n<style>\r\n:root{\r\n  --vino:#6b2441;\r\n  --rojo:#a83a5b;\r\n  --azul:#2E5B7D;\r\n  --gris:#f7f7f8;\r\n  --borde:#e4e4e7;\r\n}\r\n\r\n#transparencia{\r\n  font-family:Arial, sans-serif;\r\n  padding:15px;\r\n}\r\n\r\n#transparencia *{\r\n  box-sizing:border-box;\r\n}\r\n\r\n.titulo{\r\n  text-align:center;\r\n  font-size:24px;\r\n  color:var(--vino);\r\n  font-weight:700;\r\n  margin-bottom:18px;\r\n}\r\n\r\n.controls{\r\n  display:grid;\r\n  grid-template-columns:1fr 220px;\r\n  gap:10px;\r\n  margin-bottom:15px;\r\n}\r\n\r\n.controls input,\r\n.controls select{\r\n  padding:11px;\r\n  border:1px solid var(--borde);\r\n  border-radius:8px;\r\n  font-size:15px;\r\n  width:100%;\r\n}\r\n\r\n.table-box{\r\n  border:1px solid var(--borde);\r\n  border-radius:14px;\r\n  overflow-x:auto;\r\n  background:#fff;\r\n  box-shadow:0 8px 22px rgba(0,0,0,.05);\r\n}\r\n\r\n#transparencia table{\r\n  width:100%;\r\n  border-collapse:collapse;\r\n}\r\n\r\n#transparencia th{\r\n  background:linear-gradient(90deg,var(--vino),var(--rojo));\r\n  color:#fff;\r\n  padding:12px;\r\n  font-size:14px;\r\n  text-align:left;\r\n}\r\n\r\n#transparencia td{\r\n  padding:11px;\r\n  font-size:14px;\r\n  border-top:1px solid #eee;\r\n}\r\n\r\n#transparencia tr:hover{\r\n  background:#fafafa;\r\n}\r\n\r\n.badge{\r\n  padding:5px 11px;\r\n  border-radius:20px;\r\n  font-size:12px;\r\n  color:#fff;\r\n  display:inline-block;\r\n}\r\n\r\n.comun{ background:var(--vino); }\r\n.especifica{ background:var(--azul); }\r\n\r\n.btn{\r\n  background:var(--vino);\r\n  color:#fff !important;\r\n  padding:8px 11px;\r\n  border-radius:7px;\r\n  font-size:13px;\r\n  cursor:pointer;\r\n  text-decoration:none !important;\r\n  display:inline-block;\r\n  text-align:center;\r\n  border:none;\r\n}\r\n\r\n.btn:hover{\r\n  background:var(--rojo);\r\n  color:#fff !important;\r\n}\r\n\r\n.paginacion{\r\n  display:flex;\r\n  justify-content:center;\r\n  flex-wrap:wrap;\r\n  gap:6px;\r\n  margin-top:15px;\r\n}\r\n\r\n.paginacion button{\r\n  padding:7px 11px;\r\n  border:none;\r\n  border-radius:6px;\r\n  background:#ddd;\r\n  cursor:pointer;\r\n}\r\n\r\n.paginacion .active{\r\n  background:var(--vino);\r\n  color:#fff;\r\n}\r\n\r\n.detalle{\r\n  padding:16px;\r\n  background:#fff;\r\n  border-radius:14px;\r\n  box-shadow:0 10px 30px rgba(0,0,0,.06);\r\n  border-left:6px solid var(--vino);\r\n}\r\n\r\n.detalle h2{\r\n  font-size:19px;\r\n  color:var(--vino);\r\n  margin:14px 0;\r\n  border-bottom:2px solid #f0f0f0;\r\n  padding-bottom:8px;\r\n}\r\n\r\n.meta{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:10px;\r\n  margin-bottom:15px;\r\n}\r\n\r\n.meta div{\r\n  background:#fafafa;\r\n  border:1px solid #e5e5e5;\r\n  padding:8px 12px;\r\n  border-radius:7px;\r\n  font-size:13px;\r\n}\r\n\r\n.acordeon{\r\n  margin-top:15px;\r\n  border-radius:12px;\r\n  border:1px solid #e6e6e6;\r\n  background:#fff;\r\n  box-shadow:0 6px 18px rgba(0,0,0,.05);\r\n  border-left:5px solid var(--vino);\r\n  overflow:hidden;\r\n}\r\n\r\n.acordeon-header{\r\n  padding:13px;\r\n  display:flex;\r\n  justify-content:space-between;\r\n  align-items:center;\r\n  cursor:pointer;\r\n  background:#f7f7f7;\r\n  font-weight:700;\r\n  color:#333;\r\n}\r\n\r\n.acordeon-body{\r\n  display:none;\r\n  padding:12px;\r\n}\r\n\r\n.acordeon.active .acordeon-body{\r\n  display:block;\r\n}\r\n\r\n.detalle-tabla th{\r\n  background:#eee !important;\r\n  color:#333 !important;\r\n}\r\n\r\n.estado{\r\n  padding:15px;\r\n  border-radius:10px;\r\n  background:#fff3cd;\r\n  color:#6b5300;\r\n  border:1px solid #ffe08a;\r\n  font-weight:600;\r\n}\r\n\r\n@media(max-width:768px){\r\n  .controls{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  #transparencia table,\r\n  #transparencia thead,\r\n  #transparencia tbody,\r\n  #transparencia th,\r\n  #transparencia td,\r\n  #transparencia tr{\r\n    display:block;\r\n    width:100%;\r\n  }\r\n\r\n  #transparencia th{\r\n    display:none;\r\n  }\r\n\r\n  #transparencia tr{\r\n    background:#fff;\r\n    margin-bottom:12px;\r\n    border-radius:10px;\r\n    box-shadow:0 4px 10px rgba(0,0,0,.05);\r\n    padding:10px;\r\n  }\r\n\r\n  #transparencia td{\r\n    border:none;\r\n    padding:7px 0;\r\n    display:flex;\r\n    justify-content:space-between;\r\n    gap:10px;\r\n    font-size:13px;\r\n  }\r\n\r\n  #transparencia td::before{\r\n    content:attr(data-label);\r\n    font-weight:700;\r\n    color:#555;\r\n  }\r\n\r\n  .btn{\r\n    width:100%;\r\n    margin-top:8px;\r\n  }\r\n\r\n  .meta{\r\n    flex-direction:column;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n\r\nconst CSV_URL = \"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vSd9qSZYDmYIjhd4M5DdcU7IJ0AR_8NSJuvixJuqzIz-yDhvFe7OtxXLV_vfFqg0A\/pub?output=csv\";\r\n\r\nlet DATA = [];\r\nlet FILTRADO = [];\r\nlet PAGE = 1;\r\nconst PER_PAGE = 10;\r\n\r\nfunction contenedor(){\r\n  return document.getElementById(\"transparencia\");\r\n}\r\n\r\nfunction mostrarEstado(msg){\r\n  const cont = contenedor();\r\n  if(cont){\r\n    cont.innerHTML = `<div class=\"estado\">${msg}<\/div>`;\r\n  }\r\n}\r\n\r\nasync function init(){\r\n  const cont = contenedor();\r\n\r\n  if(!cont){\r\n    console.error(\"No existe el contenedor #transparencia\");\r\n    return;\r\n  }\r\n\r\n  mostrarEstado(\"Cargando informaci\u00f3n...\");\r\n\r\n  if(typeof Papa === \"undefined\"){\r\n    mostrarEstado(\"Error: no se pudo cargar PapaParse. Revisa si WPCode, el tema o alg\u00fan plugin bloquea scripts externos.\");\r\n    return;\r\n  }\r\n\r\n  try{\r\n    const r = await fetch(CSV_URL, { cache:\"no-store\" });\r\n\r\n    if(!r.ok){\r\n      throw new Error(\"No se pudo leer el CSV. C\u00f3digo HTTP: \" + r.status);\r\n    }\r\n\r\n    const text = await r.text();\r\n\r\n    const parsed = Papa.parse(text,{\r\n      header:true,\r\n      skipEmptyLines:true\r\n    });\r\n\r\n    if(parsed.errors && parsed.errors.length){\r\n      console.warn(\"Errores al leer CSV:\", parsed.errors);\r\n    }\r\n\r\n    DATA = parsed.data.filter(r => r && r.Fracci\u00f3n);\r\n    FILTRADO = DATA.slice();\r\n\r\n    if(!DATA.length){\r\n      mostrarEstado(\"No se encontraron registros. Revisa que la hoja publicada tenga la columna Fracci\u00f3n.\");\r\n      return;\r\n    }\r\n\r\n    checkURL();\r\n    render();\r\n\r\n  }catch(error){\r\n    console.error(error);\r\n    mostrarEstado(\"No se pudo cargar la informaci\u00f3n. Revisa que Google Sheets est\u00e9 publicado como CSV.\");\r\n  }\r\n}\r\n\r\nfunction aplicarFiltros(){\r\n  const busqueda = document.getElementById(\"busqueda\")?.value.toLowerCase() || \"\";\r\n  const tipo = document.getElementById(\"tipo\")?.value || \"\";\r\n\r\n  FILTRADO = DATA.filter(r => {\r\n    const texto = [\r\n      r.Tipo,\r\n      r.\u00c1rea,\r\n      r.Fracci\u00f3n,\r\n      r.Descripci\u00f3n,\r\n      r[\"Tipo de Ley\"],\r\n      r.Vigencia\r\n    ].join(\" \").toLowerCase();\r\n\r\n    const coincideBusqueda = !busqueda || texto.includes(busqueda);\r\n    const coincideTipo = !tipo || r.Tipo === tipo;\r\n\r\n    return coincideBusqueda && coincideTipo;\r\n  });\r\n\r\n  PAGE = 1;\r\n  render();\r\n}\r\n\r\nfunction render(){\r\n  const cont = contenedor();\r\n  if(!cont) return;\r\n\r\n  const totalPaginas = Math.max(1, Math.ceil(FILTRADO.length \/ PER_PAGE));\r\n  if(PAGE > totalPaginas) PAGE = totalPaginas;\r\n\r\n  const inicio = (PAGE - 1) * PER_PAGE;\r\n  const dataPage = FILTRADO.slice(inicio, inicio + PER_PAGE);\r\n\r\n  cont.innerHTML = `\r\n    <div class=\"titulo\">Men\u00fa de Transparencia<\/div>\r\n\r\n    <div class=\"controls\">\r\n      <input id=\"busqueda\" placeholder=\"Buscar por \u00e1rea, fracci\u00f3n, descripci\u00f3n, ley...\">\r\n      <select id=\"tipo\">\r\n        <option value=\"\">Todos<\/option>\r\n        <option value=\"Com\u00fan\">Com\u00fan<\/option>\r\n        <option value=\"Espec\u00edfica\">Espec\u00edfica<\/option>\r\n      <\/select>\r\n    <\/div>\r\n\r\n    <div class=\"table-box\">\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th>Tipo<\/th>\r\n            <th>\u00c1rea<\/th>\r\n            <th>Fracci\u00f3n<\/th>\r\n            <th>Descripci\u00f3n<\/th>\r\n            <th><\/th>\r\n          <\/tr>\r\n        <\/thead>\r\n        <tbody>\r\n          ${\r\n            dataPage.length\r\n            ? dataPage.map(r => `\r\n              <tr>\r\n                <td data-label=\"Tipo\">\r\n                  <span class=\"badge ${r.Tipo === \"Espec\u00edfica\" ? \"especifica\" : \"comun\"}\">\r\n                    ${r.Tipo || \"-\"}\r\n                  <\/span>\r\n                <\/td>\r\n                <td data-label=\"\u00c1rea\">${r.\u00c1rea || \"-\"}<\/td>\r\n                <td data-label=\"Fracci\u00f3n\">${r.Fracci\u00f3n || \"-\"}<\/td>\r\n                <td data-label=\"Descripci\u00f3n\">${r.Descripci\u00f3n || \"-\"}<\/td>\r\n                <td data-label=\"\">\r\n                  <a href=\"?fraccion=${encodeURIComponent(r.Fracci\u00f3n)}\"\r\n                     class=\"btn link-ver\"\r\n                     data-f=\"${r.Fracci\u00f3n}\">\r\n                     Ver\r\n                  <\/a>\r\n                <\/td>\r\n              <\/tr>\r\n            `).join(\"\")\r\n            : `<tr><td colspan=\"5\">No se encontraron resultados.<\/td><\/tr>`\r\n          }\r\n        <\/tbody>\r\n      <\/table>\r\n    <\/div>\r\n\r\n    <div class=\"paginacion\">\r\n      ${\r\n        Array.from({length:totalPaginas}, (_,i) =>\r\n          `<button class=\"${PAGE === i+1 ? \"active\" : \"\"}\" data-p=\"${i+1}\">${i+1}<\/button>`\r\n        ).join(\"\")\r\n      }\r\n    <\/div>\r\n  `;\r\n}\r\n\r\nfunction showDetail(f){\r\n  const cont = contenedor();\r\n  if(!cont) return;\r\n\r\n  const datos = DATA.filter(r => String(r.Fracci\u00f3n) === String(f));\r\n  const base = datos[0];\r\n\r\n  if(!base){\r\n    mostrarEstado(\"No se encontr\u00f3 la fracci\u00f3n solicitada.\");\r\n    return;\r\n  }\r\n\r\n  let html = `\r\n    <div class=\"detalle\">\r\n      <button class=\"btn\" id=\"btnVolver\">\u2190 Volver<\/button>\r\n\r\n      <h2>${base.Descripci\u00f3n || \"Sin descripci\u00f3n\"}<\/h2>\r\n\r\n      <div class=\"meta\">\r\n        <div><b>Fracci\u00f3n:<\/b> ${base.Fracci\u00f3n || \"-\"}<\/div>\r\n        <div><b>\u00c1rea:<\/b> ${base.\u00c1rea || \"-\"}<\/div>\r\n        <div><b>Tipo:<\/b> ${base.Tipo || \"-\"}<\/div>\r\n        <div><b>Ley:<\/b> ${base[\"Tipo de Ley\"] || \"-\"}<\/div>\r\n        <div><b>Vigencia:<\/b> ${base.Vigencia || \"-\"}<\/div>\r\n      <\/div>\r\n  `;\r\n\r\n  const grupos = {};\r\n\r\n  datos.forEach(d => {\r\n    const a\u00f1o = d.A\u00f1o || \"Sin a\u00f1o\";\r\n    if(!grupos[a\u00f1o]) grupos[a\u00f1o] = [];\r\n    grupos[a\u00f1o].push(d);\r\n  });\r\n\r\n  Object.keys(grupos).sort((a,b) => Number(b) - Number(a)).forEach(a\u00f1o => {\r\n    html += `\r\n      <div class=\"acordeon\">\r\n        <div class=\"acordeon-header\">\r\n          <span>${a\u00f1o} (${grupos[a\u00f1o].length})<\/span>\r\n          <i class=\"fa fa-chevron-down\"><\/i>\r\n        <\/div>\r\n\r\n        <div class=\"acordeon-body\">\r\n          <table class=\"detalle-tabla\">\r\n            <thead>\r\n              <tr>\r\n                <th>Periodo<\/th>\r\n                <th>Fecha<\/th>\r\n                <th>Documento<\/th>\r\n              <\/tr>\r\n            <\/thead>\r\n            <tbody>\r\n              ${\r\n                grupos[a\u00f1o].map(i => `\r\n                  <tr>\r\n                    <td data-label=\"Periodo\">${i.Trimestre || \"General\"}<\/td>\r\n                    <td data-label=\"Fecha\">${i.Fecha || \"-\"}<\/td>\r\n                    <td data-label=\"Documento\">\r\n                      ${\r\n                        i.Enlace\r\n                        ? `<a href=\"${i.Enlace}\" target=\"_blank\" rel=\"noopener\" class=\"btn\">Ver<\/a>`\r\n                        : \"No disponible\"\r\n                      }\r\n                    <\/td>\r\n                  <\/tr>\r\n                `).join(\"\")\r\n              }\r\n            <\/tbody>\r\n          <\/table>\r\n        <\/div>\r\n      <\/div>\r\n    `;\r\n  });\r\n\r\n  html += `<\/div>`;\r\n  cont.innerHTML = html;\r\n}\r\n\r\ndocument.addEventListener(\"input\", function(e){\r\n  if(e.target && e.target.id === \"busqueda\"){\r\n    aplicarFiltros();\r\n  }\r\n});\r\n\r\ndocument.addEventListener(\"change\", function(e){\r\n  if(e.target && e.target.id === \"tipo\"){\r\n    aplicarFiltros();\r\n  }\r\n});\r\n\r\ndocument.addEventListener(\"click\", function(e){\r\n  const link = e.target.closest(\".link-ver\");\r\n\r\n  if(link){\r\n    e.preventDefault();\r\n    const f = link.dataset.f;\r\n    history.pushState({f:f}, \"\", \"?fraccion=\" + encodeURIComponent(f));\r\n    showDetail(f);\r\n    return;\r\n  }\r\n\r\n  const pag = e.target.closest(\"[data-p]\");\r\n\r\n  if(pag){\r\n    PAGE = parseInt(pag.dataset.p, 10);\r\n    render();\r\n    return;\r\n  }\r\n\r\n  const acc = e.target.closest(\".acordeon-header\");\r\n\r\n  if(acc){\r\n    acc.parentElement.classList.toggle(\"active\");\r\n    return;\r\n  }\r\n\r\n  if(e.target && e.target.id === \"btnVolver\"){\r\n    history.pushState({}, \"\", window.location.pathname);\r\n    render();\r\n  }\r\n});\r\n\r\nfunction checkURL(){\r\n  const p = new URLSearchParams(window.location.search);\r\n  const f = p.get(\"fraccion\");\r\n\r\n  if(f){\r\n    showDetail(f);\r\n  }\r\n}\r\n\r\nwindow.addEventListener(\"popstate\", function(){\r\n  checkURL();\r\n});\r\n\r\nif(document.readyState === \"loading\"){\r\n  document.addEventListener(\"DOMContentLoaded\", init);\r\n}else{\r\n  init();\r\n}\r\n\r\n})();\r\n<\/script> <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":49,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-51","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/atlahuilco.gob.mx\/portal\/wp-json\/wp\/v2\/pages\/51","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atlahuilco.gob.mx\/portal\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/atlahuilco.gob.mx\/portal\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/atlahuilco.gob.mx\/portal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atlahuilco.gob.mx\/portal\/wp-json\/wp\/v2\/comments?post=51"}],"version-history":[{"count":0,"href":"https:\/\/atlahuilco.gob.mx\/portal\/wp-json\/wp\/v2\/pages\/51\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/atlahuilco.gob.mx\/portal\/wp-json\/wp\/v2\/pages\/49"}],"wp:attachment":[{"href":"https:\/\/atlahuilco.gob.mx\/portal\/wp-json\/wp\/v2\/media?parent=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}