{"id":110,"date":"2026-06-02T00:04:00","date_gmt":"2026-06-02T00:04:00","guid":{"rendered":"https:\/\/citlaltepetl.gob.mx\/portal\/?page_id=110"},"modified":"2026-06-02T00:08:28","modified_gmt":"2026-06-02T00:08:28","slug":"menu-transparencia","status":"publish","type":"page","link":"https:\/\/citlaltepetl.gob.mx\/portal\/transparencia\/menu-transparencia\/","title":{"rendered":"MENU TRANSPARENCIA"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"110\" class=\"elementor elementor-110\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1cbb7c6 e-flex e-con-boxed e-con e-parent\" data-id=\"1cbb7c6\" 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-4d1f401 elementor-widget elementor-widget-shortcode\" data-id=\"4d1f401\" 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:#5C1A35;\r\n  --rojo:#92153A;\r\n  --gris:#f5f5f5;\r\n}\r\n\r\n*{ box-sizing:border-box; }\r\n\r\n#transparencia{\r\n  font-family:Arial, sans-serif;\r\n  padding:15px;\r\n}\r\n\r\n\/* TITULO *\/\r\n.titulo{\r\n  text-align:center;\r\n  font-size:22px;\r\n  color:var(--vino);\r\n  font-weight:600;\r\n  margin-bottom:15px;\r\n}\r\n\r\n\/* CONTROLES *\/\r\n.controls{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:10px;\r\n  margin-bottom:15px;\r\n}\r\n\r\n.controls input, .controls select{\r\n  padding:10px;\r\n  border:1px solid #ccc;\r\n  border-radius:6px;\r\n  font-size:15px;\r\n  width:100%;\r\n}\r\n\r\n\/* TABLA *\/\r\n.table-box{\r\n  border:1px solid #ddd;\r\n  border-radius:10px;\r\n  overflow-x:auto;\r\n}\r\n\r\ntable{\r\n  width:100%;\r\n  border-collapse:collapse;\r\n}\r\n\r\nth{\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}\r\n\r\ntd{\r\n  padding:11px;\r\n  font-size:14px;\r\n  border-top:1px solid #eee;\r\n}\r\n\r\ntr:hover{ background:#fafafa; }\r\n\r\n\/* BADGES *\/\r\n.badge{\r\n  padding:4px 10px;\r\n  border-radius:20px;\r\n  font-size:12px;\r\n  color:#fff;\r\n}\r\n\r\n.comun{ background:var(--vino); }\r\n.especifica{ background:#2E5B7D; }\r\n\r\n\/* BOTON *\/\r\n.btn{\r\n  background:var(--vino);\r\n  color:#fff;\r\n  padding:8px;\r\n  border-radius:6px;\r\n  font-size:13px;\r\n  cursor:pointer;\r\n  text-decoration:none;\r\n  display:inline-block;\r\n  text-align:center;\r\n}\r\n\r\n\/* evitar morado *\/\r\n#transparencia a,\r\n#transparencia a:visited{\r\n  color:#fff !important;\r\n}\r\n\r\n\/* PAGINACION *\/\r\n.paginacion{\r\n  display:flex;\r\n  justify-content:center;\r\n  flex-wrap:wrap;\r\n  gap:5px;\r\n  margin-top:15px;\r\n}\r\n\r\n.paginacion button{\r\n  padding:6px 10px;\r\n  border:none;\r\n  background:#ddd;\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.detalle{\r\n  padding:15px;\r\n  background:#fff;\r\n  border-radius:14px;\r\n  box-shadow:0 10px 30px rgba(0,0,0,0.06);\r\n  border-left:6px solid var(--vino);\r\n}\r\n\r\n.detalle h2{\r\n  font-size:18px;\r\n  color:var(--vino);\r\n  margin-bottom:10px;\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:6px;\r\n  font-size:13px;\r\n}\r\n\r\n\/* ACORDEON *\/\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,0.05);\r\n  border-left:5px solid var(--vino);\r\n}\r\n\r\n.acordeon-header{\r\n  padding:12px;\r\n  display:flex;\r\n  justify-content:space-between;\r\n  cursor:pointer;\r\n  background:#f7f7f7;\r\n  font-weight:600;\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\/* TABLA DETALLE *\/\r\n.detalle-tabla{\r\n  width:100%;\r\n  border-collapse:collapse;\r\n  font-size:14px;\r\n}\r\n\r\n.detalle-tabla th{\r\n  background:#eee;\r\n  padding:10px;\r\n}\r\n\r\n.detalle-tabla td{\r\n  padding:10px;\r\n  border-top:1px solid #ddd;\r\n}\r\n\r\n\/* ===== MOBILE ===== *\/\r\n@media(max-width:768px){\r\n\r\n  table, thead, tbody, th, td, tr{\r\n    display:block;\r\n    width:100%;\r\n  }\r\n\r\n  th{ display:none; }\r\n\r\n  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,0.05);\r\n    padding:10px;\r\n  }\r\n\r\n  td{\r\n    border:none;\r\n    padding:6px 0;\r\n    display:flex;\r\n    justify-content:space-between;\r\n    font-size:13px;\r\n  }\r\n\r\n  td::before{\r\n    content:attr(data-label);\r\n    font-weight:600;\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  .detalle-tabla th{ display:none; }\r\n\r\n  .detalle-tabla td{\r\n    display:flex;\r\n    justify-content:space-between;\r\n    border:none;\r\n    padding:8px 0;\r\n  }\r\n\r\n  .detalle-tabla td::before{\r\n    content:attr(data-label);\r\n    font-weight:bold;\r\n  }\r\n}\r\n\t\r\n\t\/* PEGAR AL FINAL DEL CSS PARA FORZAR EL ESTILO INSTITUCIONAL *\/\r\n\r\n#transparencia{\r\n  --verde:#1D4947 !important;\r\n  --rojo:#C21A32 !important;\r\n  --dorado:#EFC905 !important;\r\n  --magenta:#B51C58 !important;\r\n}\r\n\r\n#transparencia .titulo{\r\n  color:#1D4947 !important;\r\n  font-size:24px !important;\r\n  font-weight:700 !important;\r\n}\r\n\r\n#transparencia th{\r\n  background:linear-gradient(135deg,#1D4947,#C21A32) !important;\r\n}\r\n\r\n#transparencia .comun{\r\n  background:#1D4947 !important;\r\n}\r\n\r\n#transparencia .especifica{\r\n  background:#B51C58 !important;\r\n}\r\n\r\n#transparencia .btn,\r\n#transparencia a.btn,\r\n#transparencia button.btn{\r\n  background:#C21A32 !important;\r\n  color:#fff !important;\r\n  border:none !important;\r\n}\r\n\r\n#transparencia .btn:hover,\r\n#transparencia .btn:focus,\r\n#transparencia .btn:active,\r\n#transparencia a.btn:hover,\r\n#transparencia a.btn:focus,\r\n#transparencia a.btn:active{\r\n  background:#1D4947 !important;\r\n  color:#fff !important;\r\n  border-color:#1D4947 !important;\r\n}\r\n\r\n#transparencia .paginacion .active{\r\n  background:#1D4947 !important;\r\n  color:#fff !important;\r\n}\r\n\r\n#transparencia .detalle{\r\n  border-left:6px solid #C21A32 !important;\r\n}\r\n\r\n#transparencia .acordeon{\r\n  border-left:5px solid #EFC905 !important;\r\n}\r\n<\/style>\r\n\r\n\r\n<script>\r\n(function(){\r\n\r\nconst CSV_URL = \"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vSuP9de8e51pSxXNHWXHsmC8hSQESMoWaAz3wJRLIPNklZHZHE-H_NMAq2tJlmd9A\/pub?output=csv\";\r\n\r\nlet DATA = [];\r\nlet FILTRADO = [];\r\nlet PAGE = 1;\r\nconst PER_PAGE = 10;\r\n\r\nasync function init(){\r\n  const r = await fetch(CSV_URL);\r\n  const text = await r.text();\r\n  const parsed = Papa.parse(text,{header:true,skipEmptyLines:true});\r\n\r\n  DATA = parsed.data.filter(r=>r.Fracci\u00f3n);\r\n  FILTRADO = DATA;\r\n\r\n  render();\r\n  checkURL();\r\n}\r\n\r\nfunction render(){\r\n  const cont = document.getElementById(\"transparencia\");\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...\">\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        <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\r\n        ${\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        }\r\n      <\/table>\r\n    <\/div>\r\n\r\n    <div class=\"paginacion\">\r\n      ${\r\n        Array.from({length:Math.ceil(FILTRADO.length\/PER_PAGE)},(_,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\n\/* FILTROS *\/\r\ndocument.addEventListener(\"input\", e=>{\r\n  if(e.target.id===\"busqueda\"){\r\n    const v = e.target.value.toLowerCase();\r\n    FILTRADO = DATA.filter(r=>\r\n      (r.Descripci\u00f3n||\"\").toLowerCase().includes(v)\r\n    );\r\n    PAGE=1;\r\n    render();\r\n  }\r\n});\r\n\r\ndocument.addEventListener(\"change\", e=>{\r\n  if(e.target.id===\"tipo\"){\r\n    const v = e.target.value;\r\n    FILTRADO = DATA.filter(r=>!v || r.Tipo===v);\r\n    PAGE=1;\r\n    render();\r\n  }\r\n});\r\n\r\n\/* DETALLE *\/\r\nfunction showDetail(f){\r\n  const cont = document.getElementById(\"transparencia\");\r\n  const datos = DATA.filter(r=>r.Fracci\u00f3n==f);\r\n  const base = datos[0];\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}<\/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 g={};\r\n  datos.forEach(d=>{\r\n    const a=d.A\u00f1o||\"Sin a\u00f1o\";\r\n    if(!g[a])g[a]=[];\r\n    g[a].push(d);\r\n  });\r\n\r\n  Object.keys(g).sort((a,b)=>b-a).forEach(a=>{\r\n    html+=`\r\n    <div class=\"acordeon\">\r\n      <div class=\"acordeon-header\">\r\n        <span>${a} (${g[a].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          <tr>\r\n            <th>Periodo<\/th>\r\n            <th>Fecha<\/th>\r\n            <th>Documento<\/th>\r\n          <\/tr>\r\n\r\n          ${\r\n            g[a].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\" class=\"btn\">Ver<\/a>`\r\n                    : \"No disponible\"\r\n                  }\r\n                <\/td>\r\n              <\/tr>\r\n            `).join(\"\")\r\n          }\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  document.getElementById(\"btnVolver\").onclick = ()=>{\r\n    history.pushState({}, \"\", window.location.pathname);\r\n    render();\r\n  };\r\n}\r\n\r\n\/* EVENTOS *\/\r\ndocument.addEventListener(\"click\", 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}, \"\", \"?fraccion=\"+encodeURIComponent(f));\r\n    showDetail(f);\r\n  }\r\n\r\n  if(e.target.dataset.p){\r\n    PAGE=parseInt(e.target.dataset.p);\r\n    render();\r\n  }\r\n\r\n  if(e.target.classList.contains(\"acordeon-header\")){\r\n    e.target.parentElement.classList.toggle(\"active\");\r\n  }\r\n});\r\n\r\n\/* URL *\/\r\nfunction checkURL(){\r\n  const p = new URLSearchParams(window.location.search);\r\n  const f = p.get(\"fraccion\");\r\n  if(f) showDetail(f);\r\n}\r\n\r\nwindow.addEventListener(\"popstate\", checkURL);\r\ndocument.addEventListener(\"DOMContentLoaded\", init);\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":84,"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-110","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/citlaltepetl.gob.mx\/portal\/wp-json\/wp\/v2\/pages\/110","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/citlaltepetl.gob.mx\/portal\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/citlaltepetl.gob.mx\/portal\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/citlaltepetl.gob.mx\/portal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/citlaltepetl.gob.mx\/portal\/wp-json\/wp\/v2\/comments?post=110"}],"version-history":[{"count":0,"href":"https:\/\/citlaltepetl.gob.mx\/portal\/wp-json\/wp\/v2\/pages\/110\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/citlaltepetl.gob.mx\/portal\/wp-json\/wp\/v2\/pages\/84"}],"wp:attachment":[{"href":"https:\/\/citlaltepetl.gob.mx\/portal\/wp-json\/wp\/v2\/media?parent=110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}