ar-poncho 2.0.308 → 2.0.310

package/dist/js/poncho.js

@@ -314,11 +314,25 @@ const ponchoColorDefinitions = color => {
  * getColor("celeste")
  * @returns {string} Color en formato hexadecimal.
  */
-const ponchoColor = color => ponchoColorDefinitions(color)?.color || color;
+const ponchoColor = color => {
+    const defaultColor = "#99999";
+
+    if (typeof color !== "string") {
+        console.warn(`Invalid color provided. Using default: ${defaultColor}`);
+        return defaultColor;
+    }
+
+    const definition = ponchoColorDefinitions(color);
+    if (definition) {
+      return definition.color || defaultColor;
+    }
+
+    return defaultColor;
+};
 
 
 /**
- * Conversor de hex a binary
+ * Hace un refactor del número hexa
  * 
  * @param {string} value Valor hexadecimal 
  * @returns {string}
@@ -330,10 +344,12 @@ const cleanUpHex = value => {
             .trim()
             .toUpperCase();
 
-    if(hex.length == 3){
+    if (hex.length < 3 || hex.length > 6){
+        return false;
+    } else if(hex.length == 3){
         hex = Array.from(hex).map(a => a.repeat(2)).join("");
     }
-    return hex;
+    return `#${hex}`;
 };
 
 
@@ -354,7 +370,7 @@ const cleanUpHex = value => {
  * findByHex("#f79525");
  * @returns {object} Objecto con la defición del color
  */
-const findPonchoColorByHex = value => ponchoColorDefinitionsList.find(f => {
+const ponchoColorByHex = value => ponchoColorDefinitionsList.find(f => {
     const colorToFind = cleanUpHex(value);
     const colorToCompare = cleanUpHex(f.color);
     if(colorToFind == colorToCompare){
@@ -363,8 +379,11 @@ const findPonchoColorByHex = value => ponchoColorDefinitionsList.find(f => {
     return false;
 });
 
-
-/* module.exports REMOVED */
+if (typeof exports !== "undefined") {
+    module.exports = {
+        ponchoColorDefinitionsList,
+        ponchoColorDefinitions, ponchoColor, ponchoColorByHex, cleanUpHex};
+}
 
 /**
  * Fetch data
@@ -376,17 +395,19 @@ const findPonchoColorByHex = value => ponchoColorDefinitionsList.find(f => {
  * });
  * ```
  */
-async function fetch_json(url, method="GET"){
-    const response = await fetch(
-        url,
-        {
-            method: method, 
-            headers: {
-                "Accept": "application/json",
-                "Content-Type": "application/json"
-            }
-        }
-    );
+async function fetch_json(uri, options={}) {
+
+    let defaultOptions = {
+        method: "GET",
+        headers: {
+            "Accept": "application/json",
+            "Content-Type": "application/json"
+        },
+        redirect: "follow"
+    };
+    let opts = Object.assign({}, defaultOptions, options);
+    const response = await fetch(uri, opts);
+
     if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
     }
@@ -436,935 +457,1744 @@ const slugify = (string) =>{
                 + "rrsssssttuuuuuuuuuwxyyzzz------";
     const p = new RegExp(a.split("").join("|"), "g");
 
-    return string.toString().toLowerCase()
-        .replace(/\s+/g, "-")
-        .replace(p, c => b.charAt(a.indexOf(c)))
-        .replace(/&/g, "-and-")
-        .replace(/[^\w\-]+/g, "")
-        .replace(/\-\-+/g, "-")
-        .replace(/^-+/, "")
-        .replace(/-+$/, "");
-};
+    return string.toString().toLowerCase()
+        .replace(/\s+/g, "-")
+        .replace(p, c => b.charAt(a.indexOf(c)))
+        .replace(/&/g, "-and-")
+        .replace(/[^\w\-]+/g, "")
+        .replace(/\-\-+/g, "-")
+        .replace(/^-+/, "")
+        .replace(/-+$/, "");
+};
+
+
+if (typeof exports !== "undefined") {
+    module.exports = {slugify, replaceSpecialChars};
+}
+
+/**
+ * Impide que se impriman etiquetas HTML.
+ * 
+ * @summary Impide que se impriman etiquetas HTML exceptuando aquellas
+ * asignadas en el parámetro exclude.
+ * @param {string} str Cadena de texto a remplazar.
+ * @param {object} exclude Etiquetas que deben preservarse.
+ * @example
+ * // returns &lt;h1&gt;Hello world!&lt;/h1&gt; <a href="#">Link</a>
+ * secureHTML('<h1>Hello world!</h1> <a href="#">Link</a>', ["a"])
+ * 
+ * @returns {string} Texto remplazado.
+ */
+const secureHTML = (str, exclude=[]) => {
+    if(exclude.some(e => e === "*")){
+        return str;
+    }
+
+    let replaceString = str.toString()
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+
+    // let replaceString = str.toString()
+    //     .replace(/<(?=[a-zA-Z])([^<>]*)>/gm, "&lt;$1&gt;")
+    //     .replace(/<\/(?=[a-zA-Z])([^<>]*)>/gm, "&lt;/$1&gt;");
+
+
+    if(exclude.length > 0){
+        const regexStart = new RegExp(
+            "&lt;(" + exclude.join("|") + ")(.*?)&gt;", "g");
+        const regexEnd = new RegExp(
+            "&lt;\/(" + exclude.join("|") + ")(.*?)&gt;", "g");
+
+        return replaceString
+            .replace(regexStart, "<$1$2>")
+            .replace(regexEnd, "</$1>");
+    }
+    return replaceString;
+};
+
+
+
+if (typeof exports !== "undefined") {
+    module.exports = {secureHTML};
+}
+
+
+function flattenNestedObjects(entries) {
+    return entries.map(entry => {
+        return flattenObject(entry, "");
+    });
+}
+
+function flattenObject(obj, prefix) {
+    const flattened = {};
+    for (const key in obj) {
+        const value = obj[key];
+        const newKey = (prefix ? `${prefix}__${key}` : key);
+
+        if (typeof value === "object" && value !== null) {
+            Object.assign(flattened, flattenObject(value, newKey));
+        } else {
+            flattened[newKey] = value;
+        }
+    }
+    return flattened;
+}
+
+/**
+ * 
+ */
+ponchoTableLegacyPatch = () => {
+    document
+        .querySelectorAll("select[id=ponchoTableFiltro]")
+        .forEach(element => {
+            // const node = element.closest(".form-group");
+            const node = element.parentElement;
+            const newElement = document.createElement("div");
+            newElement.id = "ponchoTableFiltro";
+            newElement.classList.add("row");
+            node.parentElement.appendChild(newElement);
+            node.remove();
+    });
+};
+
+
+function ponchoTable(opt) {
+    ponchoTableLegacyPatch();
+    return ponchoTableDependant(opt);
+}
+
+
+/**
+ * Agenda
+ *
+ * @summary Agenda de eventos basada en PonchoTable donde se agrupan las
+ * entradas por fecha de inicio, fecha de fin, y categoría.
+ * @author Agustín Bouillet <bouilleta@jefatura.gob.ar>
+ * @requires jQuery, dataTables
+ * @see https://github.com/argob/poncho/tree/master/src/js/poncho-table
+ *
+ *
+ * MIT License
+ *
+ * Copyright (c) 2024 Argentina.gob.ar
+ *
+ * Permission is hereby granted, free of charge, to any person
+ * obtaining a copy of this software and associated documentation
+ * files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rightsto use, copy, modify, merge,
+ * publish, distribute, sublicense, and/or sell copies of the Software,
+ * and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
+ * BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
+ * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+class PonchoAgenda {
+
+    DATE_REGEX = /^([1-9]|0[1-9]|[1-2][0-9]|3[0-1])\/([1-9]|0[1-9]|1[0-2])\/([1-9][0-9]{3})$/;
+
+    constructor(options={}){
+        options.headers = this._refactorHeaders(options);
+        options.headersOrder = this._refactorHeadersOrder(options);
+
+        // Global Options
+        this.opts = Object.assign({}, this.defaults, options);
+
+        this.categoryTitleClassList = this.opts.categoryTitleClassList;
+        this.itemContClassList = this.opts.itemContClassList;
+        this.itemClassList = this.opts.itemClassList;
+        this.groupCategory = this.opts.groupCategory;
+        this.dateSeparator = this.opts.dateSeparator;
+        this.startDateId = this.opts.startDateId;
+        this.endDateId = this.opts.endDateId;
+        this.timeId = this.opts.timeId;
+
+        this.descriptionId = this.opts.descriptionId;
+        this.criteriaOneId = this.opts.criteriaOneId;
+        this.criteriaTwoId = this.opts.criteriaTwoId;
+        this.criteriaThreeId = this.opts.criteriaThreeId;
+    }
+
+
+    /**
+     * Opciones por defecto
+     */
+    defaults = {
+        allowedTags: [
+            "strong","span", "dl", "dt", "dd", "img", "em","button", "button",
+            "p", "div", "h3", "ul", "li", "time", "a", "h1"],
+
+        criteriaOneId: "destinatarios",
+        criteriaThreeId: "destacado",
+        criteriaTwoId: "url",
+        descriptionId: "descripcion",
+        categoryTitleClassList: ["h6", "text-secondary"],
+        itemContClassList: ["list-unstyled"],
+        itemClassList: ["m-b-2"],
+        dateSeparator: "/",
+        filterStatus: {
+            header: "Estado",
+            nextDates: "Próximas",
+            pastDates: "Anteriores",
+        },
+        endDateId: "hasta",
+        groupCategory: "filtro-ministerio",
+        rangeLabel: "Fechas",
+        startDateId: "desde",
+        timeId: "horario",
+    };
+
+
+    /**
+     * Agrega los indices range y filtro-status al al array si no existieran.
+     *
+     * @param {object} options Opciones para ponchoTabla y Agenda
+     * @returns {object}
+     */
+    _refactorHeadersOrder = options => {
+        if(options.hasOwnProperty("headersOrder") &&
+                options.headersOrder.length > 0){
+            let order = options.headersOrder;
+            for(const i of ["range", "filtro-status"]){
+                if(!options.headersOrder.includes(i)){
+                    options.headersOrder.push(i);
+                }
+            }
+            return order;
+        }
+        return [];
+    };
+
+    /**
+     * Mapea los headers.
+     *
+     * @return {string} key Key del item.
+     */
+    _header = (key) => {
+        return (this.opts.headers.hasOwnProperty(key) ?
+                this.opts.headers[key] : key);
+    };
+
+    /**
+     * Refactor de headers
+     *
+     * @summary Agrega los headers de range y filterheader a los
+     * asignados en el JSON.
+     * @param {object} options Opciones para ponchoTabla y Agenda
+     * @returns {object}
+     */
+    _refactorHeaders = options => {
+        let labelStatus = this.defaults.filterStatus.header;
+        if(options?.filterStatus?.header){
+            labelStatus = options.filterStatus.header;
+        }
+
+        let rangeLabel = this.defaults.rangeLabel;
+        if(options?.rangeLabel){
+            rangeLabel = options.rangeLabel;
+        }
+
+        const headers = {
+            ...{ "range": rangeLabel},
+            ...options.headers,
+            ...{"filtro-status": labelStatus}
+        };
+
+        return headers;
+    }
+
+
+    /**
+     * Showdown habilitado.
+     *
+     * Verifica si la librería _showdown_ está disponible.
+     * @returns {boolean}
+     */
+    _isMarkdownEnable = () => {
+        if(typeof showdown !== "undefined" &&
+            showdown.hasOwnProperty("Converter")){
+                return true;
+        }
+        return false;
+    };
+
+
+    /**
+     * Opciones para markdown
+     * @returns {object}
+     */
+    _markdownOptions = () => {
+        if(this._isMarkdownEnable()){
+            if(this.opts.hasOwnProperty("markdownOptions") &&
+                typeof this.opts.markdownOptions === "object"){
+                return this.opts.markdownOptions;
+            }
+        }
+        return {};
+    };
+
+
+    /**
+     * Convierte un string a markdown
+     *
+     * @param {string} str Cadena de texto a convertir
+     * @returns {string}
+     */
+    _markdownConverter = str => {
+        if(this._isMarkdownEnable()){
+            const converter = new showdown.Converter(this._markdownOptions());
+            return converter.makeHtml(str);
+        }
+        return str;
+    };
+
+
+    /**
+     * Fecha pasada
+     *
+     * @param {string} fecha Fecha a evaluar
+     * @returns {boolean}
+     */
+    _isPastDate = fecha => {
+        if(!this._isValidDateFormat(fecha)){
+            console.error(`La fecha no tiene un formato válido: ${fecha}`);
+            return false;
+        }
+
+        const dateToEvaluate = this._dateParser(fecha).date.getTime();
+        const current = this._currentDate().date.getTime();
+        return current > dateToEvaluate;
+    }
+
+
+    /**
+     * Formato para fecha y hora
+     *
+     * @param {objecct} date Fecha como objeto {day, month, year}
+     * @param {object} time Tiempo como objeto {hours, minutes, seconds}
+     * @returns {string}
+     */
+    _dateTimeFormat = (date, time=false) => {
+        const {day, month, year} = date;
+        const dateFormat = [day, month, year].join(this.dateSeparator);
+        let timeFormat = "";
+        if(time){
+            timeFormat = [hours, minutes].join(":");
+        }
+        return dateFormat + timeFormat;
+    };
+
+
+    /**
+     * Fecha al momento de ejecutarse el script.
+     *
+     * @returns {object} Retorna un objeto con: el día, mes, año y el
+     * objeto Date en fecha.
+     */
+    _currentDate = () => {
+        const today = new Date();
+        const year = today.getFullYear();
+        const month = today.getMonth() + 1;
+        const day = today.getDate();
+        const format = [
+            this._pad(day),
+            this._pad(month),
+            year].join(this.dateSeparator);
+
+        return {...this._dateParser(format), ...{format}};
+    }
+
+    /**
+     * Rellena con ceros a la izquierda
+     *
+     * @param {string|int} num Numero a rellenar con ceros.
+     * @param {int} counter Cantidad total de caracteres.
+     * @returns {string}
+     */
+    _pad = (num, counter=2) => num.toString().padStart(counter, "0");
+
+
+    /**
+     * Parsea una fecha.
+     *
+     * @param {string} date Fecha en formato dd/mm/yyyy.
+     * @param {string} time Tiempo en formato hh:mm:ss
+     * @example
+     * // {
+     * //     day: '09',
+     * //     month: '05',
+     * //     year: '2012',
+     * //     hours: '00',
+     * //     minutes: '00',
+     * //     date: Wed May 09 2012 00:00:00 GMT-0300...
+     * // }
+     * this._dateParser("09/05/2012")
+     * @returns {object|boolean}
+     */
+    _dateParser = (date, time="00:00:00") => {
+        if(!this._isValidDateFormat(date)){
+            console.error(`Formato de fecha incorrecto: ${date}`);
+            return;
+        }
+        const regex = this.DATE_REGEX;
+        const result = regex.exec(date);
+        const [, day, month, year] = result;
+        const objectDate = new Date(`${year}-${month}-${day} ${time}`);
+
+        return {
+            day: this._pad(day),
+            month: this._pad(month),
+            year,
+            hours: this._pad(objectDate.getHours()),
+            minutes: this._pad(objectDate.getMinutes()),
+            "date": objectDate
+        }
+    }
+
+
+    /**
+     * Valida el formato de la fecha.
+     * @summary El formato de fecha aceptado es: dd/mm/yyyy.
+     * Al momento de escribir este documento, no hay otro habilitado.
+     * @example
+     * // true
+     * this._isValidDateFormat("09/05/2012")
+     *
+     * // false
+     * this._isValidDateFormat("09/10/15")
+     * @param {string} str Fecha en formato dd/mm/yyyy.
+     * @returns {boolean}
+     */
+    _isValidDateFormat = str => {
+        const regex = this.DATE_REGEX;
+        const result = regex.exec(str);
+
+        return (result !== null ? true : false);
+    }
+
+
+    /**
+     * Agrupa contenidos por fecha y la categoría asignada.
+     *
+     * @param {object} datos JSON a procesar
+     * @returns {object}
+     */
+    _groupByFingerprintAndCategory = (datos) => {
+        const agrupados = {};
+
+        for (const dato of datos) {
+            const categoria = dato[this.groupCategory];
+            const {fingerprint} = dato;
+            if (!agrupados[fingerprint]) {
+                agrupados[fingerprint] = {};
+            }
+            if (!agrupados[fingerprint][categoria]) {
+                agrupados[fingerprint][categoria] = [];
+            }
+            agrupados[fingerprint][categoria].push(dato);
+        }
+
+        return agrupados;
+    }
+
+
+    /**
+     * Rearmo el JSON para agregar filtros.
+     *
+     * @param {object} jsonData
+     * @returns {object}
+     */
+    _refactorEntries = jsonData => {
+        if(!jsonData){
+            console.error("No se puede recorrer el script")
+        }
+
+        let entries = [];
+        jsonData.forEach(element => {
+            let desde = element[this.startDateId];
+            let hasta = element[this.endDateId];
+            // Si la columna `hasta` viene vacía le copio los datos de `desde`.
+            hasta = (hasta.trim() === "" ? desde : hasta);
+
+            const {pastDates, nextDates} = this.opts.filterStatus;
+            const estado = (this._isPastDate(hasta) ? pastDates : nextDates);
+            // dates
+            const startDate = this._dateParser(desde);
+            const endDate = this._dateParser(hasta);
+            const startDateTime = startDate.date.getTime();
+            const endDateTime = endDate.date.getTime();
+            const fingerprint = [startDateTime, endDateTime].join("_");
+
+            let range = this._dateTimeFormat(startDate);
+            if(startDateTime != endDateTime){
+                range = `Del ${this._dateTimeFormat(startDate)} al `
+                    + `${this._dateTimeFormat(endDate)}`;
+            }
+
+            // refactor entry
+            const entry = {
+                ...element,
+                ...{
+                    "range": range,
+                    "filtro-status": estado,
+                    fingerprint,
+                    desde,
+                    hasta,
+                }
+            };
+            entries.push(entry);
+        });
+
+        return entries;
+    };
+
+
+    /**
+     * Compone el template para el item de la agenda
+     *
+     * @param {string} description Descriptión del item de la agenda.
+     * @param {string} date Fecha formato dd/mm/yyyy
+     * @param {string} time Horario en formato hh:mm:ss
+     * @returns {object}
+     */
+    itemTemplate = (description, destinatarios, url,
+            destacados, date, time) => {
+        const itemContainer = document.createElement("dl");
+                
+        // time
+        let timeElement;
+        if(time){
+            const datetime = this._dateParser(date, time);
+            timeElement = document.createElement("time");
+            timeElement.setAttribute("datetime", datetime.date.toISOString());
+            timeElement.textContent = `${datetime.hours}:`
+                + `${datetime.minutes}hs.`;
+        } else {
+            timeElement = document.createElement("span");
+            timeElement.textContent = "--:--";
+        }
+
+        const data = [
+            // Térm, definition, screenreader, dtoff, className
+            [
+                "Descripción",
+                this._markdownConverter(description),
+                true, true, "description"],
+            [
+                this._header(this.criteriaOneId),
+                this._markdownConverter(destinatarios),
+                false, true, "criteria-one"],
+            [
+                this._header(this.criteriaThreeId),
+                this._markdownConverter(destacados),
+                false, true, "criteria-three"],
+            [
+                this._header(this.criteriaTwoId),
+                this._markdownConverter(url),
+                false, true, "criteria-two"],
+            [
+                this._header(this.timeId),
+                timeElement.outerHTML,
+                false, true, "time"],
+        ];
+
+        data.forEach( elem => {
+            const [term, definition, srOnly, dtOff, className] = elem;
+            if(!definition){
+                return;
+            }
+
+            const dt = document.createElement("dt");
+            dt.textContent = term;
+            dt.classList.add("agenda-item__dt", `agenda-item__dt-${className}`);
+            if(srOnly){
+                dt.classList.add("sr-only");
+            }
+            
+            const dd = document.createElement("dd");
+            dd.textContent = definition;
+            dd.classList.add("agenda-item__dd", `agenda-item__dd-${className}`);
+
+            if(dtOff){
+                itemContainer.appendChild(dt);
+            }
+            itemContainer.appendChild(dd);
+        });
+
+        if(this.itemClassList.some(f=>f)){
+            itemContainer.classList.add("agenda-item", ...this.itemClassList);
+        }
+
+        return itemContainer;
+    };
+
+
+    /**
+     * Reagrupa las entradas dejando, por fecha, las entradas de la categoría.
+     *
+     * @param {object} entries
+     * @returns {object}
+     */
+    _groupedEntries = entries => {
+        let collect = [];
+            // Nivel mismas fechas
+            Object.values(entries).forEach(ele => {
+            var entry;
+
+            // Nivel ministerio
+            // Cada iteración es un ministerio.
+            Object.values(ele).forEach((element) => {
+                var block = "";
+                var title = "";
+
+                const itemsContainer = document.createElement("div");
+                if(this.itemContClassList.some(f=>f)){
+                    itemsContainer.classList.add(...this.itemContClassList);
+                }
+
+                // Nivel items por ministerio
+                element.forEach(a => {
+                    entry = a;
+                    if(title != entry[this.groupCategory]){
+                        title = entry[this.groupCategory];
+
+                        const titleElement = document.createElement("p");
+                        if(this.categoryTitleClassList.some(f=>f)){
+                            titleElement.classList.add(
+                                ...this.categoryTitleClassList);
+                            titleElement.textContent = title;
+                            itemsContainer.appendChild(titleElement);
+                        }
+                    }
+
+                    const item = this.itemTemplate(
+                        a.descripcion, a.destinatarios, a.url,
+                        a.destacados, a.desde, a.horario);
+                    itemsContainer.appendChild(item);
+                });
+
+                block += itemsContainer.outerHTML;
+                delete entry.fingerprint;
+                let customData={};
+
+                customData[this.descriptionId] = block;
+                collect.push( {...entry, ...customData} );
+            });
+        });
+
+        return collect;
+    };
+
+
+    /**
+     * Valida si poncho tabla está importado
+     * @returns {boolean}
+     */
+    _ponchoTableExists = () => {
+        if(typeof ponchoTable !== "undefined"){
+            return true;
+        }
+        return false;
+    };
+
+
+    /**
+     * Imprime la tabla ponchoTable
+     *
+     * @returns {undefined}
+     */
+    render = () => {
+        if(!this.opts.hasOwnProperty("jsonData")){
+            console.error(
+                "¡Hay un error en los datos pasados "
+                + "a la función `PonchoAgenda`!");
+            return;
+        }
+
+        const refactorEntries = this._refactorEntries(this.opts.jsonData);
+        const groupedByDateAndCategory = 
+                this._groupByFingerprintAndCategory(refactorEntries);
+        this.opts.jsonData = this._groupedEntries(groupedByDateAndCategory);
+
+        if(this._ponchoTableExists()){
+            ponchoTable( this.opts );
+        }
+    };
+};
+
+
+if (typeof exports !== "undefined") {
+    module.exports = PonchoAgenda;
+}
+
+/**
+ * PONCHO TABLE
+ *
+ * @summary PonchoTable con filtros dependientes
+ *
+ * @author Agustín Bouillet <bouilleta@jefatura.gob.ar>
+ * @requires jQuery
+ * @see https://github.com/argob/poncho/blob/master/src/demo/poncho-maps/readme-poncho-maps.md
+ * @see https://datatables.net
+ *
+ *
+ * MIT License
+ *
+ * Copyright (c) 2022 Argentina.gob.ar
+ *
+ * Permission is hereby granted, free of charge, to any person
+ * obtaining a copy of this software and associated documentation
+ * files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rightsto use, copy, modify, merge,
+ * publish, distribute, sublicense, and/or sell copies of the Software,
+ * and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
+ * BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
+ * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+const ponchoTableDependant = opt => {
+    var gapi_data;
+    var filtersList = [];
+    var wizard = (opt.hasOwnProperty("wizard") && opt.wizard ?
+            true : false);
+    var emptyLabel = (opt.hasOwnProperty("emptyLabel") && opt.emptyLabel ?
+            opt.emptyLabel : "Todos");
+    var filtro = {};
+    var orderFilter = (opt.hasOwnProperty("orderFilter") && opt.orderFilter ?
+            true : false);
+    var asFilter = {};
+    var allowedTags = ["*"];
+    let markdownOptions = {
+        "tables": true,
+        "simpleLineBreaks": true,
+        "extensions": [
+            "details",
+            "images",
+            "alerts",
+            "numbers",
+            "ejes",
+            "button",
+            "target",
+            "bootstrap-tables",
+            "video"
+        ]
+    };
+
+    // Loader
+    document.querySelector("#ponchoTable").classList.add("state-loading");
+
+    if (jQuery.fn.DataTable.isDataTable("#ponchoTable")) {
+        jQuery("#ponchoTable").DataTable().destroy();
+    }
+
+
+    /**
+     * Ordena alfanuméricamente
+     * @example
+     * // ["Arroz", "zorro"]
+     * ["zorro", "Arroz"].sort(_sortAlphaNumeric)
+     * @return {object}
+     */
+    const sortAlphaNumeric = (a, b) => {
+        return a.toString().localeCompare(b.toString(), "es", {numeric: true});
+    };
+
+
+    /**
+     * De acuerdo a las opciones del usuario, ordena el listado o lo deja
+     * en la secuencia en la que llega.
+     *
+     * @summary Alias de sortAlphaNumeric
+     * @param {object} a
+     * @param {object} b
+     * @returns {object}
+     */
+    const _sortAlphaNumeric = (a, b) => (orderFilter ?
+        sortAlphaNumeric(a, b) : null);
+
+
+    /**
+     * Resultados únicos
+     *
+     * @param {object} list Array del que se quiere obtener
+     * resultados únicos.
+     * @returns {object}
+     */
+    const distinct = list => [... new Set(list)];
+
+
+    /**
+     * Select option
+     *
+     * @summary Crea un tag _option_ para un _select_.
+     * @param {integer} parent Índice según el listado de filtros.
+     * @param {string} label Valor para el label o texto visible.
+     * @param {string} value Valor para el attributo _value_.
+     * @param {boolean} selected Si el item debe mostrarse seleccionado.
+     * @return {object}
+     */
+    const _optionSelect = (parent=0, label, value, selected=false) => {
+            var select_option = document.createElement("option");
+            select_option.value = value.toString().trim();
+            select_option.dataset.column = parent;
+            select_option.textContent = label.toString().trim();
+            if(selected){
+                select_option.setAttribute("selected", "selected");
+            }
+            return select_option;
+    };
+
+
+    /**
+     * Prepara el término para ser buscado por REGEX
+     *
+     * @summary Escapa caracteres especiales utilizados en la sintáxis
+     * de expresiones regulares.
+     * @see replaceSpecialChars() en poncho.min.js
+     * @param {string} term Término a buscar.
+     * @example
+     * // return Simbrón \(3\.180\)
+     * _searchTerm("Simbrón (3.180)")
+     * @return {string}
+     */
+    const _searchTerm = (term="") => {
+        return term.toString().replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    };
+
+
+    /**
+     * Evita un valor negativo
+     */
+    const _parentElement = value => (value <= 0 ? 0 : value);
+
+
+    /**
+     * Retorna los valores de los filtros
+     */
+    const _filterValues = () => {
+        return [...document.querySelectorAll("[data-filter]")]
+            .map(e => e.value);
+    };
+
+
+    /**
+     * Showdown habilitado.
+     *
+     * Verifica si la librería _showdown_ está disponible.
+     * @returns {boolean}
+     */
+    const _isMarkdownEnable = () => {
+        if(typeof showdown !== "undefined" &&
+            showdown.hasOwnProperty("Converter")){
+                return true;
+        }
+        return false;
+    };
+
+
+    /**
+     * Verifica si las extensiones showdown están definidas.
+     *
+     * @param {object} extensions
+     * @returns {boolean}
+     */
+    const _isShowdownExtensionEnable = () => {
+        const markdownOptions = _markdownOptions();
+        const r = markdownOptions.extensions.every(e => {
+            try {
+                showdown.extension(e);
+                return true;
+            } catch (error) {
+                return false;
+            }
+        });
+        return r;
+    };
+
+
+    /**
+     * Opciones para el componente showdonwjs
+     *
+     * @summary Si el usuario asigno opciones y extensiones, las usa; de otro
+     * modo, usa las que están por defecto.
+     * @returns {object}
+     */
+    const _markdownOptions = () => {
+        if(opt.hasOwnProperty("markdownOptions") &&
+                opt.markdownOptions === "object"){
+            return opt.markdownOptions;
+        }
+        return markdownOptions;
+    };
+
+
+    /**
+     * Convierte un string con sintaxis markdown
+     * @param {stirng} str Cadena de texto a convertir
+     * @returns {string}
+     */
+    const _markdownConvert = str => {
+        if( typeof str !== "string" ){
+            return;
+        }
+        if( !_isMarkdownEnable() ){
+            return str;
+        }
+        
+        let converter;
+        if(_isShowdownExtensionEnable()){
+            converter = new showdown.Converter( _markdownOptions() );
+            return converter.makeHtml(str);
+        }
+
+        converter = new showdown.Converter();
+        return converter.makeHtml(str);
+    };
+
+
+    /**
+     * Botón poncho
+     *
+     * @summary Imprime un botón bootstrap.
+     * @param {string} label Label para el botón.
+     * @param {string} value Href para el botón
+     * @return {undefined}
+     */
+    const button = (label, value) => {
+        const btn = document.createElement("a");
+        btn.setAttribute("aria-label", label);
+        btn.classList.add(
+            "btn", "btn-primary", "btn-sm", "margin-btn");
+        btn.target = "_blank";
+        btn.href = value;
+        btn.textContent = label;
+        btn.setAttribute("rel", "noopener noreferrer");
+        return btn.outerHTML;
+    };
+
+
+    /**
+     * Formato de fecha
+     *
+     * @summary Agrega una etiqueta datetime para mejorar la indexación
+     * y el ordenamiento.
+     * @return {undefined}
+     */
+    const tdDate = value => {
+        const dateSplit = value.split("/");
+        const finalDateIso = new Date(
+            dateSplit[2], dateSplit[1] - 1, dateSplit[0]
+        );
+
+        const datetime = finalDateIso.toISOString().split("T")[0];
+
+        const hiddenSpan = document.createElement("span");
+        hiddenSpan.style.display = "none";
+        hiddenSpan.textContent = datetime;
+
+        const time = document.createElement("time");
+        time.setAttribute("datetime", datetime);
+        time.textContent = value;
+
+        return hiddenSpan.outerHTML + time.outerHTML;
+    };
+
+
+    /**
+     * Imprime los filtros
+     *
+     * @param {object} gapi_data Objeto con la información separada del
+     * documento Google Sheet
+     */
+    const _createFilters = gapi_data => {
+        // Contenedor
+        const tableFiltroCont = document.querySelector("#ponchoTableFiltro");
+        tableFiltroCont.innerHTML = "";
+
+        // Imprime cada uno de los filtros
+        Object.keys(filtro).forEach((f, key) => {
+            const columna = filtro[f][0].columna ? filtro[f][0].columna : 0;
+            const list_filter = filtro[f]
+                .map(e => e.value)
+                .sort(_sortAlphaNumeric);
+
+            const tplCol = document.createElement("div");
+
+            if(opt.hasOwnProperty("filterClassList")){
+                const classList = (typeof opt.filterClassList === "string" ?
+                        opt.filterClassList.split(" ") : opt.filterClassList);
+                tplCol.classList.add(...classList);
+            } else {
+                const cols = Math.floor(12 / Object.keys(filtro).length);
+                tplCol.classList.add("col-sm-12", `col-md-${cols}`);
+            }
+            tplCol.dataset.index = key;
+            tplCol.dataset.filterName = f;
+
+            // If wizzard
+            if(wizard && key > 0){
+                tplCol.style.display = "none";
+            }
+
+            const tplForm = document.createElement("div");
+            tplForm.className = "form-group";
+
+            const formLabel = document.createElement("label");
+            formLabel.setAttribute("for", f);
+            formLabel.textContent = gapi_data.headers[`filtro-${f}`];
+
+            const select = document.createElement("select");
+            select.classList.add("form-control");
+            select.dataset.filter = 1;
+            select.name = f;
+            select.id = f;
+            select.appendChild(_optionSelect(columna, emptyLabel, "", true));
+            list_filter.forEach(item => {
+                if(!item){
+                    return;
+                }
+                select.appendChild(_optionSelect(columna, item, item, false));
+            });
+
+            tplForm.appendChild(formLabel);
+            tplForm.appendChild(select);
+            tplCol.appendChild(tplForm);
+            tableFiltroCont.appendChild(tplCol);
+        // }
+        });
+    };
+
+
+    /**
+     * Imprime la tabla
+     *
+     * @param {object} gapi_data Objeto con la información separada del
+     * documento Google Sheet
+     */
+    const _createTable = gapi_data => {
+        // Table thead > th
+        const thead = document.querySelector("#ponchoTable thead");
+        thead.innerHTML = "";
+
+        const theadTr = document.createElement("tr");
+        Object.keys(gapi_data.headers).forEach((header, key) => {
+            const th = document.createElement("th");
+            th.textContent = gapi_data.headers[header];
+            th.setAttribute("scope", "col");
+            theadTr.appendChild(th);
+        });
+        thead.appendChild(theadTr);
+
+        // Table caption
+        const tableCaption = document.querySelector("#ponchoTable caption");
+        tableCaption.innerHTML = "";
+        tableCaption.textContent = opt.tituloTabla;
+
+        // Tbody instance
+        const tableTbody = document.querySelector("#ponchoTable tbody");
+        tableTbody.innerHTML = "";
+
+        // CONTENIDO FILAS
+        gapi_data.entries.forEach((entry, key) => {
+
+            if(!Object.values(entry).some(f => String(f).trim())){
+                return;
+            }
+
+            // si se desea modificar la entrada desde opciones
+            entry = (typeof opt.customEntry === "function" &&
+                opt.customEntry !== null ? opt.customEntry(entry) : entry);
+
+            // Inserta el row.
+            const tbodyRow = tableTbody.insertRow();
+            tbodyRow.id = "id_" + key;
+
+            // Recorro cada uno de los títulos
+            Object.keys(gapi_data.headers).forEach(header => {
+                let filas = entry[header];
+
+                if (header.startsWith("btn-") && filas != "") {
+                    const label = header.replace("btn-", "").replace("-", " ");
+                    filas = button(label, filas);
+                } else if (header.startsWith("fecha-") && filas != "") {
+                    filas = tdDate(filas);
+                }
+
+                const cell = tbodyRow.insertCell();
+                cell.dataset.title = gapi_data.headers[header];
+                if (filas == ""){
+                    cell.className = "hidden-xs";
+                }
+
+                // Si showdown está incluido lo uso
+                // @todo Usar showdown fuera de la función. Usarlo en options.
+                let allowed_tags = (opt.hasOwnProperty("allowedTags") ?
+                        opt.allowedTags : allowedTags);
+
+                // Las etiquetas `<a>` y `<time>` junto con `<span>`, están
+                // permitidas si existen los prefijos _btn-_ y _fecha-_
+                // respectivamente.
+                if(header.startsWith("btn-") && filas != ""){
+                    allowed_tags = [...allowed_tags, "a"];
+                } else if(header.startsWith("fecha-") && filas != ""){
+                    allowed_tags = [...allowed_tags, "span", "time"];
+                }
+
+                const cleannedText = secureHTML(filas, allowed_tags);
+                if(_isMarkdownEnable()){
+                    cell.innerHTML = _markdownConvert(cleannedText);
+                } else {
+                    cell.innerHTML = cleannedText;
+                }
+            });
+        });
+    };
+
+
+    /**
+     * Matriz filtro
+     *
+     * @summary Reune los filtros y por cada uno de ellos guarda los
+     * datos —únicos—, de esa entrada.
+     * @param {object} gapi_data Objeto con la información separada del
+     * documento Google Sheet
+     * @example
+     * {
+     *    nombre_filtro : [
+     *        {
+     *            columna: 0,
+     *            value: "elemento"
+     *        },
+     *        ...
+     *    ]
+     * }
+     * @return {object}
+     */
+    const flterMatrix = (gapi_data, filtersList) => {
+        let filters = {};
+        filtersList.forEach((filter, key) => {
+            let entiresByFilter = [];
+            if(asFilter.hasOwnProperty(filtersList[key])){
+                entiresByFilter = asFilter[filtersList[key]];
+            } else {
+                entiresByFilter = gapi_data.entries.map(entry => entry[filter]);
+            }
+
+            const uniqueEntries = distinct(entiresByFilter);
+            uniqueEntries.sort(_sortAlphaNumeric);
+            filter = filter.replace("filtro-", "");
+            filters[filter] = [];
+            uniqueEntries.forEach(entry => {
+                filters[filter].push({"columna": key, "value": entry});
+            });
+        });
+        return filters;
+    };
+
+
+    /* HELPERS FILTRO DEPENDIENTE */
+    /**
+     * Valida los parents
+     *
+     * @param {integer} parent Índice (filtro) seleccionado.
+     * @return {boolean}
+     */
+    const _validateSteps = (parent, entry, label, values) => {
+        // Verifico que por cada entrada el valor(label), se
+        // encuentre en cada uno de los parents.
+        // El bucle termina cuando llega al índice seleccionado.
+        const range = [...Array(_parentElement(parent + 1)).keys()];
+        const results = range.map(i => {
+            // Chequeo si el valor del select es igual al parent o
+            // si en su defecto, está vacío.
+            if(
+                (
+                (entry[filtersList[_parentElement(parent-1)]] ==
+                values[_parentElement(parent-1)]) &&
+                (entry[filtersList[_parentElement(parent)]] == label)
+                ) ||  values[_parentElement(parent-1)] == "")
+            {
+                return true;
+            }
+            return false;
+        });
+        return results.every(e => e);
+    };
+
+
+    /**
+     * Trae todos los elementos de un filtro en base a su parent.
+     *
+     * @param {integer} parent Indice de filtro seleccionado.
+     * @param {integer} children Indice del hijo del seleccionado.
+     * @param {string} label value del filtro seleccionado.
+     * @return {object} Listado de elementos únicos para el select.
+     */
+    const _allFromParent = (parent, children, label) => {
+        const filterList = gapi_data.entries.flatMap(e => {
+            const evaluatedEntry = e[filtersList[_parentElement(children)]];
+            if(e[filtersList[_parentElement(parent)]] == label || label == ""){
+                if(_isCustomFilter(children, filtro)){
+                    const customFilters = _customFilter(children, filtro)
+                        .filter(e => {
+                            return _toCompareString(evaluatedEntry)
+                                .includes(_toCompareString(e));
+                    });
+                    return customFilters;
+                }
+                return evaluatedEntry;
+            }
+            return false;
+
+        }).filter(f => f);
+
+        const uniqueList = distinct(filterList);
+        uniqueList.sort(_sortAlphaNumeric);
+        return uniqueList;
+    };
+
+
+    /**
+     * Prepara un string para una comparación case sensitive y sin
+     * caracteres especiales.
+     * @param {string} value Valor a comparar.
+     * @returns {boolean}
+     */
+    const _toCompareString = value => replaceSpecialChars(value.toLowerCase());
+
+
+    /**
+     * Lista los valores que deben ir en un filtro según su parent.
+     *
+     * @param {integer} parent Indice de filtro seleccionado.
+     * @param {string} label value del filtro seleccionado.
+     * @param {integer} children Indice del hijo del seleccionado.
+     */
+    const _filterOptionList = (parent, children, label) => {
+        children = (children == filtersList.length ? children - 1 : children);
+        const values = _filterValues();
+
+        // Recorro todas las entradas del JSON
+        const items = gapi_data.entries.flatMap(entry => {
+            const range = _validateSteps(parent, entry, label, values);
+            if(
+                (entry[filtersList[_parentElement(children - 1)]] == label) &&
+                (range)){
+                    const evaluatedEntry = entry[filtersList[_parentElement(children)]];
+                    if(_isCustomFilter(children, filtro)){
+                        const customFilters = _customFilter(children, filtro)
+                            .filter(e => {
+                                return _toCompareString(evaluatedEntry)
+                                    .includes(_toCompareString(e));
+                            });
+                        return customFilters;
+                    } else {
+                        return evaluatedEntry;
+                    }
+
+            }
+            return;
+        }).filter(f => f);
+
+        const uniqueList = distinct(items);
+        uniqueList.sort(_sortAlphaNumeric);
+        return uniqueList;
+    };
+
+
+    /**
+     * Tiene filtros personalizados
+     * @param {integer} key Indice de filtro
+     * @returns {boolean}
+     */
+    const _isCustomFilter = key => {
+        const filtersKeys = Object.keys(filtro);
+        if(asFilter.hasOwnProperty(`filtro-${filtersKeys[key]}`)){
+            return true
+        }
+        return false;
+    };
+
+
+    /**
+     * Listado de filtros personalizado
+     * @param {integer} key Indice de filtro
+     * @returns {object}
+     */
+    const _customFilter = key => {
+        const filtersKeys = Object.keys(filtro);
+        if(asFilter.hasOwnProperty(`filtro-${filtersKeys[key]}`)){
+            return asFilter[`filtro-${filtersKeys[key]}`];
+        }
+        return [];
+    };
+
+
+    /**
+     * Filtra select hijos en base a un item del padre.
+     *
+     * @param {integer} filterIndex Índice de filtro o número de filtro.
+     * @param {string} label Label del indice seleccionado
+     * @return {void}
+     */
+    const _dependantFilters = (filterIndex, label) => {
+        const filtros = Object.keys(filtro);
+        const filterValues = _filterValues();
+        // Redibujo los _option_ por cada `select` (filtro).
+        // Hago un `for()` iniciando en el hijo de filterIndex.
+        for(let i = filterIndex + 1; i <= filtros.length; i++){
+            if(filtros.length == i ){
+                break;
+            }
+            let itemList = _filterOptionList(filterIndex, i, label);
+            if(itemList.length == 0){
+                itemList = _allFromParent(filterIndex, i, label);
+            }
+            const select = document.querySelector(`#${filtros[i]}`);
+            select.innerHTML = "";
+
+            select.appendChild(_optionSelect(i, emptyLabel, "", true));
+            itemList.forEach(e => {
+                if(!e.trim()){
+                    return;
+                }
+                // Mantengo el filtro del hijo si existe en el
+                // listado filtrado.
+                let checked = (filterValues[i] == e ? true : false);
+                select.appendChild(_optionSelect(i, e, e, checked));
+            });
+        }
+    };
+
+
+    /**
+     * Asigna selectores al contenedor de los filtros.
+     * @returns {undefined}
+     */
+    const _filtersContainerClassList = () =>{
+        if(opt.hasOwnProperty("filterContClassList") && opt.filterContClassList){
+            const fc = document.getElementById("ponchoTableFiltroCont");
+            fc.removeAttribute("class");
+            fc.classList.add(...opt.filterContClassList);
+        }
+    };
+
+
+    /**
+     * Asigna selectores al contenedor del buscador.
+     * @returns {undefined}
+     */
+    const _searchContainerClassList = () =>{
+        if(opt.hasOwnProperty("searchContClassList") && opt.searchContClassList){
+            const element = document.getElementById("ponchoTableSearchCont");
+            element.removeAttribute("class");
+            element.classList.add(...opt.searchContClassList)
+        }
+    };
+
+
+    /**
+     * Si la URL tiene un valor por _hash_ lo obtiene considerandolo su id.
+     * @returns {void}
+     */
+    const hasHash = () => {
+        let hash = window.location.hash.replace("#", "");
+        return hash || false;
+    };
+
+
+    /**
+     * Visualización de la tabla
+     *
+     * @param {boolean} visibility Oculta y muestra la tabla.
+     * @returns {undefined}
+     */
+    _hideTable = (visibility=true) => {
+        const display = (visibility ? "none" : "block");
+        const reverseDisplay = (visibility ? "block" : "none");
+        document
+            .querySelectorAll(
+                `[data-visible-as-table="true"],#ponchoTable_wrapper`)
+            .forEach(element => element.style.display = display);
+
+        document
+            .querySelectorAll(`[data-visible-as-table="false"]`)
+            .forEach(element => element.style.display = reverseDisplay);
+    };
+
+
+    /**
+     * Inicializa DataTable() y modifica elementos para adaptarlos a
+     * GoogleSheets y requerimientos de ArGob.
+     */
+    const initDataTable = () => {
+        const searchType = jQuery.fn.DataTable.ext.type.search;
+        searchType.string = data => {
+            return (!data ?
+                "" :
+                (typeof data === "string" ?
+                    replaceSpecialChars(data) :
+                    data));
+        };
+
+        searchType.html = data => {
+            return (!data ?
+                "" :
+                (typeof data === "string" ?
+                    replaceSpecialChars(data.replace( /<.*?>/g, "")) :
+                    data));
+        };
+
+        /**
+         * Instacia DataTable()
+         */
+        let tabla = jQuery("#ponchoTable").DataTable({
+            "initComplete" : (settings, json) => {
+                if(wizard){
+                    _hideTable();
+                }
+            },
+            "lengthChange": false,
+            "autoWidth": false,
+            "pageLength": opt.cantidadItems,
+            "columnDefs": [
+                { "type": "html-num", "targets": opt.tipoNumero },
+                { "targets": opt.ocultarColumnas, "visible": false }
+            ],
+            "ordering": opt.orden,
+            "order": [
+                [opt.ordenColumna - 1, opt.ordenTipo]
+            ],
+            "dom": "<\"row\"<\"col-sm-6\"l><\"col-sm-6\"f>>" +
+                "<\"row\"<\"col-sm-12\"i>>" +
+                "<\"row\"<\"col-sm-12\"tr>>" +
+                "<\"row\"<\"col-md-offset-3 col-md-6 "
+                + "col-sm-offset-2 col-sm-8\"p>>",
+            "language": {
+                "sProcessing": "Procesando...",
+                "sLengthMenu": "Mostrar _MENU_ registros",
+                "sZeroRecords": "No se encontraron resultados",
+                "sEmptyTable": "Ningún dato disponible en esta tabla",
+                "sInfo": "_TOTAL_ resultados",
+                "sInfoEmpty": "No hay resultados",
+                //"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
+                "sInfoFiltered": "",
+                "sInfoPostFix": "",
+                "sSearch": "Buscar:",
+                "sUrl": "",
+                "sInfoThousands": ".",
+                "sLoadingRecords": "Cargando...",
+                "oPaginate": {
+                    "sFirst": "<<",
+                    "sLast": ">>",
+                    "sNext": ">",
+                    "sPrevious": "<"
+                },
+                "oAria": {
+                    "sSortAscending":
+                        ": Activar para ordenar la columna "
+                        + "de manera ascendente",
+                    "sSortDescending":
+                        ": Activar para ordenar la columna de "
+                        + "manera descendente",
+                    "paginate": {
+                        "first": "Ir a la primera página",
+                        "previous": "Ir a la página anterior",
+                        "next": "Ir a la página siguiente",
+                        "last": "Ir a la última página"
+                    }
+                }
+            }
+        });
+
+        /**
+         * Buscador por palabra
+         * @summary Ejecuta la búsqueda en cada keyup.
+         */
+        jQuery("#ponchoTableSearch").keyup(function() {
+            tabla
+                .search(jQuery.fn.DataTable.ext.type.search.string(this.value))
+                .draw();
+        });
+
+
+        // REMUEVE LOS FILTROS
+        jQuery("#ponchoTable_filter").parent().parent().remove();
+
+        // MUESTRA FILTRO PERSONALIZADO
+        const ponchoTableOption = 
+            document.querySelectorAll("#ponchoTableFiltro option");
+        if (ponchoTableOption.length > 1) {
+            document
+                .querySelector("#ponchoTableFiltroCont")
+                .style.display = "block";
+        }
+
+
+        /**
+         * Valida si un componente select tiene options con value.
+         *
+         * @summary El objeto de éste método es evitar traer selects que tengan
+         * options vacíos.
+         * @param {string} selector Selector del elemento select
+         * @returns {boolean}
+         */
+        const _selectHasValues = selector => {
+            const options = document.querySelectorAll(`${selector} option`);
+            const result = Object.values(options).map(m => m.value).some(s => s);
+            return result;
+        }
+
+
+        /**
+         * Modo wizard para los filtros.
+         *
+         * @param {object} filters Listado de filtros.
+         * @param {interger} column Indice de columna.
+         * @param {string} valFilter Value del select
+         * @returns {undefined}
+         */
+        const _wizardFilters = (filters, column=0, valFilter="") => {
+            let tableStatus = false;
+
+            filters.forEach((filter, key) => {
+                const selectHasValues = _selectHasValues(`#${filter}`);
+                let displayStatus = "none";
+
+                if(selectHasValues && valFilter && key <= column + 1){
+                    displayStatus = "block";
+
+                } else if(selectHasValues && !valFilter &&  key <= column + 1){
+                    const nextFilter = document
+                        .querySelectorAll(`#${filters[column + 1]}`)
+                    nextFilter.forEach(element => element.innerHTML = "");
+                    displayStatus = "block";
+                    tableStatus = false;
+                }
+
+                const currentFilter = document
+                    .querySelectorAll(`[data-filter-name="${filter}"]`)
+                currentFilter
+                    .forEach(element => element.style.display = displayStatus);
+            });
+
+            if(
+                _selectHasValues(`#${filters[column]}`) &&
+                valFilter &&
+                !_selectHasValues(`#${filters[column + 1]}`)
+            ){
+                tableStatus = true;
+            }
+
+
+            if(tableStatus){
+                _hideTable(false);
+            } else {
+                _hideTable();
+            }
+        };
+
+
+        /**
+         * Filtro en el change de cada select (filtro).
+         *
+         * @summary Por por cada interacción con un filtro, obtiene el índice de
+         * columna y lo pasa con el valor del select a _dependantFilters(). Ésta
+         * funciión redibuja los filtros en de forma dependiente según el valor
+         * de la elección.
+         * @see replaceSpecialChars() on poncho.min.js
+         * @return {undefined}
+         */
+        jQuery("select[data-filter]").change(function() {
+            const column = jQuery(this).find("option:selected").data("column");
+            const valFilter = jQuery(this).find("option:selected").val();
+
+            _dependantFilters(column, valFilter);
+
+            // Restablece los datos en la tabla
+            tabla.columns().search("").columns().search("").draw();
+
+            const filters = Object.keys(filtro);
+            const filterValues = _filterValues();
+            const filterIndex = filter => {
+                return Object
+                        .keys(gapi_data.headers)
+                        .indexOf(`filtro-${filter}`);
+            };
 
+            filterValues.forEach((f, k) => {
+                const columnIndex = filterIndex(filters[k]);
+                const term = _searchTerm(filterValues[k]);
+                const cleanTerm = _searchTerm(
+                    replaceSpecialChars(filterValues[k]));
 
-/* module.exports REMOVED */
+                if(_isCustomFilter(k, filtro)){
+                    tabla.columns(columnIndex)
+                        .search(_toCompareString(filterValues[k]));
+                } else {
+                    tabla
+                        .columns(columnIndex)
+                        .search(
+                            (filterValues[k] ? `^(${term}|${cleanTerm})$` : ""),
+                            true, false, true
+                        );
+                }
+            });
+            tabla.draw();
+            if(wizard){
+                _wizardFilters(filters, column, valFilter);
+            }
+        });
 
-/**
- * Impide que se impriman etiquetas HTML.
- * 
- * @summary Impide que se impriman etiquetas HTML exceptuando aquellas
- * asignadas en el parámetro exclude.
- * @param {string} str Cadena de texto a remplazar.
- * @param {object} exclude Etiquetas que deben preservarse.
- * @example
- * // returns &lt;h1&gt;Hello world!&lt;/h1&gt; <a href="#">Link</a>
- * secureHTML('<h1>Hello world!</h1> <a href="#">Link</a>', ["a"])
- * 
- * @returns {string} Texto remplazado.
- */
-const secureHTML = (str, exclude=[]) => {
-    if(exclude.some(e => e === "*")){
-        return str;
-    }
 
-    let replaceString = str.toString()
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;");
+        // Si está habilitada la búsqueda por hash.
+        if(opt.hasOwnProperty("hash") && opt.hash){
+            const term = hasHash();
+            const searchTerm = (term ? decodeURIComponent(term) : "");
+            const element = document.querySelectorAll("#ponchoTableSearch");
+            element.forEach(ele => {
+                ele.value = searchTerm;
+                tabla
+                    .search(jQuery.fn.DataTable.ext.type.search.string(searchTerm))
+                    .draw();
+            });
+        }
+    } // end initDataTable
 
-    // let replaceString = str.toString()
-    //     .replace(/<(?=[a-zA-Z])([^<>]*)>/gm, "&lt;$1&gt;")
-    //     .replace(/<\/(?=[a-zA-Z])([^<>]*)>/gm, "&lt;/$1&gt;");
 
+    /**
+     * Permite definir el orden de los headers.
+     * @param {*} headers {object}
+     * @param {*} order
+     * @returns
+     */
+    const _headersOrder = (headers) => {
+        if(opt.hasOwnProperty("headersOrder") && opt.headersOrder.length > 0){
+            let refactorHeaders = {};
+            for(i of opt.headersOrder){
+                if( headers.hasOwnProperty(i) ){
+                    refactorHeaders[i] = headers[i];
+                }
+            }
+            return refactorHeaders;
+        }
+        return headers;
+    };
 
-    if(exclude.length > 0){
-        const regexStart = new RegExp(
-            "&lt;(" + exclude.join("|") + ")(.*?)&gt;", "g");
-        const regexEnd = new RegExp(
-            "&lt;\/(" + exclude.join("|") + ")(.*?)&gt;", "g");
 
-        return replaceString
-            .replace(regexStart, "<$1$2>")
-            .replace(regexEnd, "</$1>");
-    }
-    return replaceString;
-};
+    /**
+     * Imprime DataTable
+     *
+     * @param {object} data JSON data
+     */
+    const render = data => {
+        // Defino la variable global
+        gapi_data = data;
+        // Defino las entradas
+        gapi_data.entries = (
+            typeof opt.refactorEntries === "function" &&
+            opt.refactorEntries !== null ?
+            opt.refactorEntries(gapi_data.entries) : gapi_data.entries
+        );
+        // Defino los headers que se van a utilizar
+        gapi_data.headers = (opt.hasOwnProperty("headers") && opt.headers ?
+                opt.headers : gapi_data.headers);
 
+        gapi_data.headers = _headersOrder(gapi_data.headers, opt.headersOrder);
 
+        // Listado de filtros
+        filtersList = Object
+                .keys(gapi_data.headers)
+                .filter(e => e.startsWith("filtro-"));
 
-/* module.exports REMOVED */
+        asFilter = (opt.asFilter ? opt.asFilter(gapi_data.entries) : {});
+        filtro = flterMatrix(gapi_data, filtersList);
 
-/**
- * 
- */
-ponchoTableLegacyPatch = () => {
-    document
-        .querySelectorAll("select[id=ponchoTableFiltro]")
-        .forEach(element => {
-            // const node = element.closest(".form-group");
-            const node = element.parentElement;
-            // Creo un contenedor
-            const newElement = document.createElement("div");
-            newElement.id = "ponchoTableFiltro";
-            newElement.classList.add("row");
-            node.parentElement.appendChild(newElement);
-            // Borro el viejo elemento
-            node.remove();
-    });
-};
+        _filtersContainerClassList();
+        _searchContainerClassList();
+        _createTable(gapi_data);
+        _createFilters(gapi_data);
 
-function ponchoTable(opt) {
-    ponchoTableLegacyPatch();
-    return ponchoTableDependant(opt);
-}
+        document.querySelector("#ponchoTableSearchCont")
+            .style.display = "block";
+        document.querySelector("#ponchoTable")
+            .classList.remove("state-loading");
 
+        initDataTable();
+    };
 
-/**
- * PONCHO TABLE
- *
- * @summary PonchoTable con filtros dependientes
- *
- * @author Agustín Bouillet <bouilleta@jefatura.gob.ar>
- * @requires jQuery
- * @see https://github.com/argob/poncho/blob/master/src/demo/poncho-maps/readme-poncho-maps.md
- * @see https://datatables.net
- *
- *
- * MIT License
- *
- * Copyright (c) 2022 Argentina.gob.ar
- *
- * Permission is hereby granted, free of charge, to any person
- * obtaining a copy of this software and associated documentation
- * files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rightsto use, copy, modify, merge,
- * publish, distribute, sublicense, and/or sell copies of the Software,
- * and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- * 
- * The above copyright notice and this permission notice shall be
- * included in all copies or substantial portions of the Software.
- * 
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
- * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
- * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
- * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
- * BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
- * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-const ponchoTableDependant = opt => {
-  var gapi_data;
-  var filtersList = [];
-  var filtro = {};
-  var orderFilter = (opt.hasOwnProperty("orderFilter") && opt.orderFilter ? 
-        true : false);
-  var asFilter = {};
-  var allowedTags = ["*"];
-  let markdownOptions = {
-      "tables": true,
-      "simpleLineBreaks": true,
-      "extensions": [
-          'details', 
-          'images', 
-          'alerts', 
-          'numbers', 
-          'ejes', 
-          'button', 
-          'target',
-          'bootstrap-tables', 
-          'video'
-      ]
-  };
-
-  // Loader
-  document.querySelector("#ponchoTable").classList.add("state-loading");
-  
-  if (jQuery.fn.DataTable.isDataTable("#ponchoTable")) {
-      jQuery("#ponchoTable").DataTable().destroy();
-  }
 
-  /**
-   * Ordena alfanuméricamente
-   * @example
-   * // ["Arroz", "zorro"]
-   * ["zorro", "Arroz"].sort(_sortAlphaNumeric)
-   * @return {object}
-   */
-  const sortAlphaNumeric = (a, b) => {
-      return a.toString().localeCompare(b.toString(), "es", {numeric: true});
-  };
-
-  /**
-   * De acuerdo a las opciones del usuario, ordena el listado o lo deja
-   * en la secuencia en la que llega.
-   * 
-   * @summary Alias de sortAlphaNumeric
-   * @param {object} a 
-   * @param {object} b 
-   * @returns {object}
-   */
-  const _sortAlphaNumeric = (a, b) => (orderFilter ? 
-      sortAlphaNumeric(a, b) : null);
-
-  /**
-   * Resultados únicos
-   * 
-   * @param {object} list Array del que se quiere obtener 
-   * resultados únicos.
-   * @returns {object}
-   */
-  const distinct = list => [... new Set(list)];
-  
-  /**
-   * Select option
-   * 
-   * @summary Crea un tag _option_ para un _select_. 
-   * @param {integer} parent Índice según el listado de filtros.
-   * @param {string} label Valor para el label o texto visible.
-   * @param {string} value Valor para el attributo _value_.
-   * @param {boolean} selected Si el item debe mostrarse seleccionado.
-   * @return {object}
-   */
-  const _optionSelect = (parent=0, label, value, selected=false) => {
-        var select_option = document.createElement("option");
-        select_option.value = value.toString().trim();
-        select_option.dataset.column = parent;
-        select_option.textContent = label.toString().trim();
-        if(selected){
-            select_option.setAttribute("selected", "selected");
-        }
-        return select_option;
-  };
-
-  /**
-   * Prepara el término para ser buscado por REGEX
-   *
-   * @summary Escapa caracteres especiales utilizados en la sintáxis
-   * de expresiones regulares.
-   * @see replaceSpecialChars() en poncho.min.js
-   * @param {string} term Término a buscar.
-   * @example
-   * // return Simbrón \(3\.180\)
-   * _searchTerm("Simbrón (3.180)")
-   * @return {string}
-   */
-  const _searchTerm = term => {
-      return term.toString().replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  };
-
-  /**
-   * Evita un valor negativo
-   */
-  const _parentElement = value => (value <= 0 ? 0 : value);
-
-  /**
-   * Retorna los valores de los filtros
-   */
-  const _filterValues = () => {
-      return [...document.querySelectorAll("[data-filter]")].map(e => e.value);
-  };
-
-  /**
-   * Showdown habilitado.
-   * 
-   * Verifica si la librería _showdown_ está disponible.
-   * @returns {boolean}
-   */
-  const _isMarkdownEnable = () => {
-      if(typeof showdown !== "undefined" && 
-          showdown.hasOwnProperty("Converter")){
-              return true;
-      }
-      return false;
-  }; 
-
-  /**
-   * Verifica si las extensiones showdown están definidas.
-   * 
-   * @param {object} extensions 
-   * @returns {boolean}
-   */
-  const _isShowdownExtensionEnable = extensions => 
-      extensions.every(e => {
-          try {
-              showdown.extension(e);
-              return true;
-          } catch (error) {
-              return false;
-          }
-  });
+    /**
+     * Obtiene el sheet e inicializa la tabla y filtros.
+     *
+     * @param {string} url URL del dataset JSON
+     */
+    const getSheetValues = url => {
+        jQuery.getJSON(url, function(data){
+            const gapi = new GapiSheetData();
+            gapi_data = gapi.json_data(data);
 
-  /**
-   * Botón poncho
-   *
-   * @summary Imprime un botón bootstrap.
-   * @param {string} label Label para el botón.
-   * @param {string} value Href para el botón
-   * @return {undefined}
-   */ 
-  const button = (label, value) => {
-      const btn = document.createElement("a");
-      btn.setAttribute("aria-label", label);
-      btn.classList.add(
-          "btn", "btn-primary", "btn-sm", "margin-btn");
-      btn.target = "_blank";
-      btn.href = value;
-      btn.textContent = label;
-      btn.setAttribute("rel", "noopener noreferrer");
-      return btn.outerHTML;
-  };
-
-  /**
-  * Formato de fecha
-  *
-  * @summary Agrega una etiqueta datetime para mejorar la indexación
-  * y el ordenamiento.
-  * @return {undefined}
-  */ 
-  const tdDate = value => {
-      const dateSplit = value.split("/");
-      const finalDateIso = new Date(
-          dateSplit[2], dateSplit[1] - 1, dateSplit[0]
-      );
-
-      const hiddenSpan = document.createElement("span");
-      hiddenSpan.style.display = "none";
-      hiddenSpan.textContent = finalDateIso.toISOString().split('T')[0];
-      return hiddenSpan.outerHTML + value;
-  };
-
-  /**
-   * Imprime los filtros
-   *
-   * @param {object} gapi_data Objeto con la información separada del
-   * documento Google Sheet
-   */
-  const _createFilters = gapi_data => {
-      // Contenedor
-      const tableFiltroCont = document.querySelector("#ponchoTableFiltro");
-      tableFiltroCont.innerHTML = "";
-
-      // Imprime cada uno de los filtros
-      for (f in filtro){
-          const columna = filtro[f][0].columna ? filtro[f][0].columna : 0;
-          const list_filter = filtro[f]
-              .map(e => e.value)
-              .sort(_sortAlphaNumeric);
-
-          const tplCol = document.createElement("div");
-
-          if(opt.hasOwnProperty("filterClassList")){
-              const classList = (typeof opt.filterClassList === "string" ? 
-                    opt.filterClassList.split(" ") : opt.filterClassList);
-              tplCol.classList.add(...classList);     
-          } else {
-              const cols = Math.floor(12 / Object.keys(filtro).length);
-              tplCol.classList.add("col-sm-12", `col-md-${cols}`);     
-          }
-
-          const tplForm = document.createElement("div");
-          tplForm.className = "form-group";
-
-          const formLabel = document.createElement("label");
-          formLabel.setAttribute("for", f);
-          formLabel.textContent = gapi_data.headers[`filtro-${f}`];
-
-          const select = document.createElement("select");
-          select.classList.add("form-control");
-          select.dataset.filter = 1;
-          select.name = f;
-          select.id = f;
-          select.appendChild(_optionSelect(columna, "Todos", "", true));
-          list_filter.forEach(item => {
-              if(!item){
-                  return;
-              }
-              select.appendChild(_optionSelect(columna, item, item, false));
-          });
-
-          tplForm.appendChild(formLabel);
-          tplForm.appendChild(select);
-          tplCol.appendChild(tplForm);
-          tableFiltroCont.appendChild(tplCol);
-      }
-  };
-
-  /**
-   * Imprime la tabla
-   *
-   * @param {object} gapi_data Objeto con la información separada del
-   * documento Google Sheet
-   */
-  const _createTable = gapi_data => {
-      // Table thead > th
-      const thead = document.querySelector("#ponchoTable thead");
-      thead.innerHTML = "";
-
-      const theadTr = document.createElement("tr"); 
-      Object.keys(gapi_data.headers).forEach((header, key) => {
-          const th = document.createElement("th");
-          th.textContent = gapi_data.headers[header];
-          th.setAttribute("scope", "col");
-          theadTr.appendChild(th);
-      }); 
-      thead.appendChild(theadTr);
-
-      // Table caption
-      const tableCaption = document.querySelector("#ponchoTable caption");
-      tableCaption.innerHTML = "";
-      tableCaption.textContent = opt.tituloTabla;
-
-      // Tbody instance
-      const tableTbody = document.querySelector("#ponchoTable tbody");
-      tableTbody.innerHTML = "";
-
-      // CONTENIDO FILAS
-      gapi_data.entries.forEach((entry, key) => {
-
-          if(!Object.values(entry).some(f => String(f).trim())){
-              return;
-          }
-
-          // si se desea modificar la entrada desde opciones
-          entry = (typeof opt.customEntry === "function" && 
-              opt.customEntry !== null ? opt.customEntry(entry) : entry);
-
-          // Inserta el row.
-          const tbodyRow = tableTbody.insertRow();
-          tbodyRow.id = "id_" + key;
-
-          // Verifico sin las extensiones showdown existen
-          let showdownOptions;
-          if(_isMarkdownEnable()){
-              const registeredOptions = (opt.hasOwnProperty("markdownOptions") ? 
-                    opt.markdownOptions : markdownOptions);
-              showdownOptions = (_isShowdownExtensionEnable(
-                    registeredOptions.extensions) ? registeredOptions : {});
-          }
-
-          // Recorro cada uno de los títulos
-          Object.keys(gapi_data.headers).forEach(header => {
-              filas = entry[header];
-
-              if (header.startsWith("btn-") && filas != "") {
-                  filas = button(
-                      header.replace("btn-", "").replace("-", " "), filas
-                  );
-              } else if (header.startsWith("fecha-") && filas != "") {
-                  filas = tdDate(filas);
-              }
-
-              const cell = tbodyRow.insertCell();
-              cell.dataset.title = gapi_data.headers[header];
-              if (filas == ""){
-                  cell.className = "hidden-xs";
-              }
-
-              // Si showdown está incluido lo uso
-              // @todo Usar showdown fuera de la función. Usarlo en options.
-              let allowed_tags = (opt.hasOwnProperty("allowedTags") ? 
-                    opt.allowedTags : allowedTags);
-              
-              // Anchor como filtro está permitido por defecto.
-              allowed_tags = (  header.startsWith("btn-") && filas != "" ? 
-                    [...allowed_tags, "a"] : allowed_tags);
-              
-              const cleannedText = secureHTML(filas, allowed_tags);
-              if(_isMarkdownEnable()){
-                  const converter = new showdown.Converter(showdownOptions);
-                  cell.innerHTML = converter.makeHtml(cleannedText);
-              } else {
-                  cell.innerHTML = cleannedText;
-              }
-          });
-      });
-  };
-
-  /**
-   * Matriz filtro
-   * 
-   * @summary Reune los filtros y por cada uno de ellos guarda los
-   * datos —únicos—, de esa entrada.
-   * @param {object} gapi_data Objeto con la información separada del
-   * documento Google Sheet
-   * @example
-   * {
-   *    nombre_filtro : [
-   *        {
-   *            columna: 0,
-   *            value: "elemento"
-   *        },
-   *        ...
-   *    ]
-   * }
-   * @return {object}
-   */
-  const flterMatrix = (gapi_data, filtersList) => {
-      let filters = {};
-      filtersList.forEach((filter, key) => {
-          let entiresByFilter = [];
-          if(asFilter.hasOwnProperty(filtersList[key])){
-              entiresByFilter = asFilter[filtersList[key]];
-          } else {
-              entiresByFilter = gapi_data.entries.map(entry => entry[filter]);
-          }
-
-          const uniqueEntries = distinct(entiresByFilter);
-          uniqueEntries.sort(_sortAlphaNumeric);
-          filter = filter.replace("filtro-", "");
-          filters[filter] = [];
-          uniqueEntries.forEach(entry => {
-              filters[filter].push({"columna": key, "value": entry});
-          });
-      });
-      return filters;
-  };
-
-  /* HELPERS FILTRO DEPENDIENTE */
-  /**
-   * Valida los parents
-   * 
-   * @param {integer} parent Índice (filtro) seleccionado.
-   * @return {boolean}
-   */ 
-  const _validateSteps = (parent, entry, label, values) => {
-      // Verifico que por cada entrada el valor(label), se 
-      // encuentre en cada uno de los parents.
-      // El bucle termina cuando llega al índice seleccionado.
-      const range = [...Array(_parentElement(parent + 1)).keys()];
-      const results = range.map(i => {
-          // Chequeo si el valor del select es igual al parent o
-          // si en su defecto, está vacío.
-          if(
-            (
-              (entry[filtersList[_parentElement(parent-1)]] == 
-              values[_parentElement(parent-1)]) && 
-              (entry[filtersList[_parentElement(parent)]] == label)
-            ) ||  values[_parentElement(parent-1)] == "")
-          {
-              return true;
-          }
-          return false;
-      });
-      return results.every(e => e);
-  };
-
-  /**
-   * Trae todos los elementos de un filtro en base a su parent.
-   *
-   * @param {integer} parent Indice de filtro seleccionado.
-   * @param {integer} children Indice del hijo del seleccionado.
-   * @param {string} label value del filtro seleccionado.
-   * @return {object} Listado de elementos únicos para el select.
-   */ 
-  const _allFromParent = (parent, children, label) => {
-      const filterList = gapi_data.entries.flatMap(e => {
-          const evaluatedEntry = e[filtersList[_parentElement(children)]];
-          if(e[filtersList[_parentElement(parent)]] == label || label == ""){
-              if(_isCustomFilter(children, filtro)){
-                  const customFilters = _customFilter(children, filtro)
-                      .filter(e => {
-                          return _toCompareString(evaluatedEntry)
-                              .includes(_toCompareString(e));
-                  });
-                  return customFilters;
-              } 
-              return evaluatedEntry;
-          } 
-          return false;
-
-      }).filter(f => f);
-
-      const uniqueList = distinct(filterList);
-      uniqueList.sort(_sortAlphaNumeric);
-      return uniqueList;
-  };
-
-  /**
-   * Prepara un string para una comparación case sensitive y sin
-   * caracteres especiales.
-   * @param {string} value Valor a comparar. 
-   * @returns {boolean}
-   */
-  const _toCompareString = value => replaceSpecialChars(value.toLowerCase());
-
-  /**
-   * Lista los valores que deben ir en un filtro según su parent.
-   * 
-   * @param {integer} parent Indice de filtro seleccionado.
-   * @param {string} label value del filtro seleccionado.
-   * @param {integer} children Indice del hijo del seleccionado.
-   */
-  const _filterOptionList = (parent, children, label) => {
-      children = (children == filtersList.length ? children - 1 : children);
-      const values = _filterValues();
-
-      // Recorro todas las entradas del JSON
-      const items = gapi_data.entries.flatMap(entry => {
-          const range = _validateSteps(parent, entry, label, values);
-          if(
-              (entry[filtersList[_parentElement(children - 1)]] == label) && 
-              (range)){
-                const evaluatedEntry = entry[filtersList[_parentElement(children)]];
-                if(_isCustomFilter(children, filtro)){
-                    const customFilters = _customFilter(children, filtro)
-                        .filter(e => {
-                            return _toCompareString(evaluatedEntry)
-                                  .includes(_toCompareString(e));
-                        });
-                    return customFilters;
-                } else {
-                    return evaluatedEntry;
-                }
+            render(gapi_data);
+        }); // end async
+    };
+
+
+    /**
+     * Obtiene el sheet por número de hoja y nombre del spread.
+     *
+     * @param {integer} sheetNumber Número de hoja sin iniciar en 0.
+     */
+    const getSheetName = sheetNumber => {
+        const gapi = new GapiSheetData();
+        const uriApi = [
+            "https://sheets.googleapis.com/v4/spreadsheets/",
+            opt.idSpread, "/?alt=json&key=",
+            gapi.gapi_key].join("");
+
+        jQuery.getJSON(uriApi, function function_name(response) {
+            var sheetName = response.sheets[sheetNumber - 1].properties.title;
+            const uriSheet = gapi.url(sheetName, opt.idSpread);
+            getSheetValues(uriSheet);
+        });
+    };
 
-          }
-          return;
-      }).filter(f => f);
-
-      const uniqueList = distinct(items);
-      uniqueList.sort(_sortAlphaNumeric);
-      return uniqueList;
-  };
-
-  /**
-   * Tiene filtros personalizados
-   * @param {integer} key Indice de filtro
-   * @returns {boolean}
-   */
-  const _isCustomFilter = key => {
-      const filtersKeys = Object.keys(filtro);
-      if(asFilter.hasOwnProperty(`filtro-${filtersKeys[key]}`)){
-          return true   
-      }
-      return false;
-  };
-
-  /**
-   * Listado de filtros personalizado
-   * @param {integer} key Indice de filtro
-   * @returns {object}
-   */
-  const _customFilter = key => {
-      const filtersKeys = Object.keys(filtro);
-      if(asFilter.hasOwnProperty(`filtro-${filtersKeys[key]}`)){
-          return asFilter[`filtro-${filtersKeys[key]}`];   
-      }
-      return [];
-  };
-
-  /**
-   * Filtra select hijos en base a un item del padre.
-   * 
-   * @param {integer} filterIndex Índice de filtro o número de filtro.
-   * @param {string} label Label del indice seleccionado
-   * @return {void}
-   */
-  const _dependantFilters = (filterIndex, label) => {
-      const filtros = Object.keys(filtro);
-      const filterValues = _filterValues();
-      // Redibujo los _option_ por cada `select` (filtro).
-      // Hago un `for()` iniciando en el hijo de filterIndex.
-      for(let i = filterIndex + 1; i <= filtros.length; i++){
-          if(filtros.length == i ){ 
-              break; 
-          }
-          let itemList = _filterOptionList(filterIndex, i, label);
-          if(itemList.length == 0){
-              itemList = _allFromParent(filterIndex, i, label);
-          }
-          const select = document.querySelector(`#${filtros[i]}`);
-          select.innerHTML = "";
-
-          select.appendChild(_optionSelect(i, "Todos", "", true));
-          itemList.forEach(e => {
-              if(!e.trim()){
-                  return;
-              }
-              // Mantengo el filtro del hijo si existe en el 
-              // listado filtrado.
-              let checked = (filterValues[i] == e ? true : false);
-              select.appendChild(_optionSelect(i, e, e, checked));
-          });
-      }
-  };
-
-  /**
-   * Asigna selectores al contenedor de los filtros.
-   * @returns {undefined}
-   */
-  const _filtersContainerClassList = () =>{
-      if(opt.hasOwnProperty("filterContClassList") && opt.filterContClassList){
-          const fc = document.getElementById("ponchoTableFiltroCont");
-          fc.removeAttribute("class");
-          fc.classList.add(...opt.filterContClassList);
-      }
-  };
-
-  /**
-   * Asigna selectores al contenedor del buscador.
-   * @returns {undefined}
-   */
-  const _searchContainerClassList = () =>{
-    if(opt.hasOwnProperty("searchContClassList") && opt.searchContClassList){
-        const element = document.getElementById("ponchoTableSearchCont");
-        element.removeAttribute("class");
-        element.classList.add(...opt.searchContClassList)
+    // Según el caso en optiones.
+    if (opt.jsonData){
+        const headers = Object.fromEntries(
+            Object.keys(opt.jsonData[0]).map(e => [e,e])
+            );
+
+        const data = {entries: opt.jsonData, headers};
+        render(data);
+    } else if (opt.jsonUrl) {
+        getSheetValues(opt.jsonUrl);
+    } else if(opt.hojaNombre && opt.idSpread){
+        const url = new GapiSheetData().url(opt.hojaNombre, opt.idSpread);
+        getSheetValues(url);
+    } else if(opt.hojaNumero && opt.idSpread){
+        getSheetName(opt.hojaNumero);
+    } else {
+        throw "¡Error! No hay datos suficientes para crear la tabla.";
     }
-  };
-
-  /**
-   * Si la URL tiene un valor por _hash_ lo obtiene considerandolo su id.
-   * @returns {void}
-   */
-  const hasHash = () => {
-      let hash = window.location.hash.replace("#", "");
-      return hash || false;
-  };
-
-  /**
-   * Inicializa DataTable() y modifica elementos para adaptarlos a 
-   * GoogleSheets y requerimientos de ArGob.
-   */
-  const initDataTable = () => {
-      const searchType = jQuery.fn.DataTable.ext.type.search;
-      searchType.string = data => {
-        return (!data ?
-            "" :
-            (typeof data === "string" ?
-                replaceSpecialChars(data) :
-                data));
-      };
-
-      searchType.html = data => {
-        return (!data ?
-            "" :
-            (typeof data === "string" ?
-                replaceSpecialChars(data.replace( /<.*?>/g, "")) :
-                data));
-      };
-
-      /**
-       * Instacia DataTable()
-       */ 
-      let tabla = jQuery("#ponchoTable").DataTable({
-          "lengthChange": false,
-          "autoWidth": false,
-          "pageLength": opt.cantidadItems,
-          "columnDefs": [
-              { "type": "html-num", "targets": opt.tipoNumero },
-              { "targets": opt.ocultarColumnas, "visible": false }
-          ],
-          "ordering": opt.orden,
-          "order": [
-              [opt.ordenColumna - 1, opt.ordenTipo]
-          ],
-          "dom": "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
-              "<'row'<'col-sm-12'i>>" +
-              "<'row'<'col-sm-12'tr>>" +
-              "<'row'<'col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8'p>>",
-          "language": {
-              "sProcessing": "Procesando...",
-              "sLengthMenu": "Mostrar _MENU_ registros",
-              "sZeroRecords": "No se encontraron resultados",
-              "sEmptyTable": "Ningún dato disponible en esta tabla",
-              "sInfo": "_TOTAL_ resultados",
-              "sInfoEmpty": "No hay resultados",
-              //"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
-              "sInfoFiltered": "",
-              "sInfoPostFix": "",
-              "sSearch": "Buscar:",
-              "sUrl": "",
-              "sInfoThousands": ".",
-              "sLoadingRecords": "Cargando...",
-
-              "oPaginate": {
-                  "sFirst": "<<",
-                  "sLast": ">>",
-                  "sNext": ">",
-                  "sPrevious": "<"
-              },
-              "oAria": {
-                  "sSortAscending": 
-                      ": Activar para ordenar la columna de manera ascendente",
-                  "sSortDescending": 
-                      ": Activar para ordenar la columna de manera descendente",
-                  "paginate": {
-                      "first": 'Ir a la primera página',
-                      "previous": 'Ir a la página anterior',
-                      "next": 'Ir a la página siguiente',
-                      "last": 'Ir a la última página'
-                  }
-              }
-          }
-      });
-
-      /**
-       * Buscador por palabra
-       * @summary Ejecuta la búsqueda en cada keyup.
-       */
-      jQuery("#ponchoTableSearch").keyup(function() {
-          tabla
-              .search(jQuery.fn.DataTable.ext.type.search.string(this.value))
-              .draw();
-      });
-
-      // REMUEVE LOS FILTROS
-      jQuery("#ponchoTable_filter").parent().parent().remove();
-
-      // MUESTRA FILTRO PERSONALIZADO
-      const ponchoTableOption = document.querySelectorAll("#ponchoTableFiltro option");
-      if (ponchoTableOption.length > 1) {
-          document.querySelector("#ponchoTableFiltroCont").style.display = "block";
-      }
-
-      /**
-       * Filtro en el change de cada select (filtro).
-       * 
-       * @summary Por por cada interacción con un filtro, obtiene el índice de
-       * columna y lo pasa con el valor del select a _dependantFilters(). Ésta
-       * funciión redibuja los filtros en de forma dependiente según el valor
-       * de la elección.
-       * @see replaceSpecialChars() on poncho.min.js
-       * @return {undefined}
-       */ 
-      jQuery("select[data-filter]").change(function() {
-          const column = jQuery(this).find("option:selected").data("column");
-          const valFilter = jQuery(this).find("option:selected").val();
-
-          _dependantFilters(column, valFilter);
-
-          // Restablece los datos en la tabla
-          tabla.columns().search("").columns().search("").draw();
-
-          const filters = Object.keys(filtro);
-          const filterValues = _filterValues();
-          const filterIndex = filter => {
-              return Object
-                    .keys(gapi_data.headers)
-                    .indexOf(`filtro-${filter}`);
-          };
-
-          filterValues.forEach((f, k) => {
-              const columnIndex = filterIndex(filters[k]);
-              const term = _searchTerm(filterValues[k]);
-              const cleanTerm = _searchTerm(
-                  replaceSpecialChars(filterValues[k]));
-              if(_isCustomFilter(k, filtro)){
-                  tabla.columns(columnIndex)
-                      .search(_toCompareString(filterValues[k]));
-              } else {
-                  tabla
-                      .columns(columnIndex)
-                      .search(
-                          (filterValues[k] ? `^(${term}|${cleanTerm})$` : ""), 
-                          true, false, true  
-                      );
-              }
-          });
-          tabla.draw();
-      });
-
-      // Si está habilitada la búsqueda por hash.
-      if(opt.hasOwnProperty("hash") && opt.hash){
-          const term = hasHash();
-          const searchTerm = (term ? decodeURIComponent(term) : "");          
-          const element = document.querySelector("#ponchoTableSearch");
-          element.value = searchTerm;
-          tabla
-              .search(jQuery.fn.DataTable.ext.type.search.string(searchTerm))
-              .draw();
-
-      }
-  } // end initDataTable
-
-  /**
-   * Imprime DataTable
-   * 
-   * @param {object} data JSON data
-   */
-  const render = data => {
-      // Defino la variable global
-      gapi_data = data;
-      // Defino las entradas
-      gapi_data.entries = (
-          typeof opt.refactorEntries === "function" && 
-          opt.refactorEntries !== null ? 
-          opt.refactorEntries(gapi_data.entries) : gapi_data.entries
-      );
-      // Defino los headers que se van a utilizar
-      gapi_data.headers = (opt.hasOwnProperty("headers") && opt.headers ?
-            opt.headers : gapi_data.headers);
-      // Listado de filtros
-      filtersList = Object
-            .keys(gapi_data.headers)
-            .filter(e => e.startsWith("filtro-"));
-
-      asFilter = (opt.asFilter ? opt.asFilter(gapi_data.entries) : {});
-      filtro = flterMatrix(gapi_data, filtersList);
-
-      _filtersContainerClassList();
-      _searchContainerClassList();
-      _createTable(gapi_data);
-      _createFilters(gapi_data); 
-
-      document.querySelector("#ponchoTableSearchCont")
-          .style.display = "block";
-      document.querySelector("#ponchoTable")
-          .classList.remove("state-loading");
-      initDataTable();
-  };
-
-  /**
-   * Obtiene el sheet e inicializa la tabla y filtros.
-   * 
-   * @param {string} url URL del dataset JSON
-   */
-  const getSheetValues = url => {
-      jQuery.getJSON(url, function(data){
-          const gapi = new GapiSheetData();
-          gapi_data = gapi.json_data(data);
-          
-          render(gapi_data);
-      }); // end async
-  };
-
-  /**
-   * Obtiene el sheet por número de hoja y nombre del spread.
-   * 
-   * @param {integer} sheetNumber Número de hoja sin iniciar en 0.
-   */
-  const getSheetName = sheetNumber => {
-      const gapi = new GapiSheetData();
-      const uriApi = [
-          'https://sheets.googleapis.com/v4/spreadsheets/',
-          opt.idSpread, '/?alt=json&key=',
-          gapi.gapi_key].join("");
-
-      jQuery.getJSON(uriApi, function function_name(response) {
-          var sheetName = response.sheets[sheetNumber - 1].properties.title;
-          const uriSheet = gapi.url(sheetName, opt.idSpread);
-          getSheetValues(uriSheet);
-      });
-  };
-
-  // Según el caso en optiones.
-  if (opt.jsonData){
-      const headers = Object.fromEntries(
-          Object.keys(opt.jsonData[0]).map(e => [e,e])
-      );
-      const data = {entries: opt.jsonData, headers: headers};
-      render(data);
-  } else if (opt.jsonUrl) {
-      getSheetValues(opt.jsonUrl);
-  } else if(opt.hojaNombre && opt.idSpread){
-      const url = new GapiSheetData().url(opt.hojaNombre, opt.idSpread);
-      getSheetValues(url);
-  } else if(opt.hojaNumero && opt.idSpread){
-      getSheetName(opt.hojaNumero);
-  } else {
-      throw "¡Error! No hay datos suficientes para crear la tabla.";
-  }
 
 };
 
@@ -2878,6 +3708,14 @@ function ponchoChart(opt) {
  */
 const gapi_legacy = (response) => {
 
+  if (!response || !response.values || response.values.length === 0) {
+    throw new TypeError("Invalid response format");
+  }
+
+  if (!Array.isArray(response.values) || !Array.isArray(response.values[0])) {
+    throw new TypeError("Invalid response format: values should be arrays");
+  }
+
   const keys = response.values[0];
   const regex = / |\/|_/ig;
   let entry = [];
@@ -2897,7 +3735,9 @@ const gapi_legacy = (response) => {
 };
 
 
-/* module.exports REMOVED */
+if (typeof exports !== "undefined") {
+  module.exports = gapi_legacy;
+}
 
 /**
  * PONCHO MAP
@@ -2944,6 +3784,7 @@ class PonchoMap {
             no_info: false,
             title: false,
             id: "id",
+            id_mixing: [],
             template: false,
             template_structure: {
                 // lead: [],
@@ -2959,11 +3800,27 @@ class PonchoMap {
                 definition_tag: "dd",
                 term_classlist: ["h6", "m-b-0"],
                 term_tag: "dt",
-                title_classlist: ["h4","text-primary","m-t-0"]
+                title_classlist: ["h4","pm-color-primary","m-t-0"]
             },
+            fit_bounds_onevent: true,
             allowed_tags: [],
             template_innerhtml: false,
             template_markdown: false,
+            theme_ui: false,
+            theme_map: false,
+            theme_tool: true,
+            map_opacity: 1,
+            map_background: "#DDD",
+            theme: "default",
+            default_themes: [
+                ["default", "Original"], 
+                ["contrast", "Alto contraste"],
+                ["dark", "Oscuro"],
+                ["grayscale", "Gris"],
+                // ["sepia", "Sepia"],
+                // ["blue", "Azul"],
+                ["relax", "Relax"]
+            ],
             markdown_options: {
                 extensions :[
                     "details",
@@ -2994,28 +3851,38 @@ class PonchoMap {
             map_anchor_zoom: 16,
             map_zoom: 4,
             min_zoom: 2,
+            map_init_options: {
+                // zoomSnap: .2,
+                // zoomControl: false,
+                // scrollWheelZoom: false,
+                // touchZoom: false,
+                // doubleClickZoom: false,
+                // scrollWheelZoom: false,
+                // boxZoom: false,
+                // dragging:false
+            },
             reset_zoom: true,
             latitud: "latitud",
             longitud: "longitud",
             marker: "azul",
             tooltip: false,
             tooltip_options:{
-                // permanent: false,
+                permanent: false,
                 className: "leaflet-tooltip-own",
                 direction: "auto",
-                // offset: [15,0], 
-                // sticky: true,sdf
-                // opacity: 1,
+                offset: [13,-18], 
+                sticky: false,
+                opacity: 1,
             },
             marker_cluster_options: {
-                spiderfyOnMaxZoom: false,
+                spiderfyOnMaxZoom: true,
                 showCoverageOnHover: false,
                 zoomToBoundsOnClick: true,
-                maxClusterRadius: 45,
-                spiderfyDistanceMultiplier: 3,
+                maxClusterRadius: 30,
+                spiderfyDistanceMultiplier: 0.5,
                 spiderLegPolylineOptions: {
                     weight: 1,
-                    color: "#666",
+                    color: "#666666",
                     opacity: 0.5,
                     "fill-opacity": 0.5
                 }
@@ -3045,7 +3912,9 @@ class PonchoMap {
         this.header_icons = opts.header_icons;
         this.hash = opts.hash;
         this.scroll = opts.scroll;
+        this.fit_bounds_onevent = opts.fit_bounds_onevent;
         this.map_view = opts.map_view;
+        this.map_init_options = opts.map_init_options;
         this.anchor_delay = opts.anchor_delay;
         this.map_zoom = opts.map_zoom;
         this.min_zoom = opts.min_zoom;
@@ -3055,7 +3924,16 @@ class PonchoMap {
         this.marker_cluster_options = opts.marker_cluster_options;
         this.marker_color = opts.marker;
         this.id = opts.id;
+        this.id_mixing = opts.id_mixing;
         this.title = opts.title;
+        this.map_background = opts.map_background;
+        this.theme = opts.theme;
+        this.theme_tool = opts.theme_tool;
+        this.default_themes = opts.default_themes;
+        this.temes_not_visibles = [["transparent", "Transparent"]];
+        this.theme_ui = opts.theme_ui;
+        this.theme_map = opts.theme_map;
+        this.map_opacity = opts.map_opacity;
         this.latitude = opts.latitud;
         this.longitude = opts.longitud;
         this.slider = opts.slider;
@@ -3067,6 +3945,7 @@ class PonchoMap {
         this.scope_sufix = `--${this.scope}`;
         this.content_selector = (opts.content_selector ? 
             opts.content_selector : `.js-content${this.scope_sufix}`);
+        this.content_outside = (this.content_selector !== `.js-content${this.scope_sufix}` ? true : false);
         this.data = this.formatInput(data);
         this.geometryTypes = [
             "Point",
@@ -3087,9 +3966,13 @@ class PonchoMap {
         this.geojson;
 
         // OSM
-        this.map = new L.map(this.map_selector, {renderer:L.svg()}
+        this.map = new L.map(this.map_selector, {
+            renderer: L.svg(),
+            ...this.map_init_options
+        }
         ).setView(this.map_view, this.map_zoom);
-        this.titleLayer = new L.tileLayer("https://mapa-ign.argentina.gob.ar/osm/{z}/{x}/{-y}.png",{ 
+        this.titleLayer = new L.tileLayer("https://mapa-ign.argentina.gob.ar/osm/{z}/{x}/{-y}.png",
+        { 
             attribution: ("Contribuidores: "
                 + "<a href=\"https://www.ign.gob.ar/AreaServicios/Argenmap/Introduccion\" " 
                 + "target=\"_blank\">"
@@ -3102,6 +3985,243 @@ class PonchoMap {
         this.ponchoLoaderTimeout;
     }
 
+
+    //
+    // TEMA PARA EL MAPA
+    //
+
+    /**
+     * Modifica la opacidad del mapa
+     * @param {double|string} value Número _(double)_, o porcentaje de valor
+     * @example
+     * mapOpacity(0.5)
+     * mapOpacity("50%")
+     * @returns {undefined}  
+     */
+    mapOpacity = (value=false) => {
+        const opacity = (value ? value : this.map_opacity);
+        document
+            .querySelectorAll(
+                `${this.scope_selector} .leaflet-pane .leaflet-tile-pane`)
+            .forEach(e => e.style.opacity=opacity);
+    }
+
+
+    /**
+     * Define el color de fondo para el mapa. 
+     * @param {string} value Color en hexadecimal o cualquier sistema de color
+     * aceptado por html.
+     * @example
+     * // #ffcc00
+     * // Se representará como: style="background-color:#ffcc00;"
+     * mapBackgroundColor("#ffcc00")
+     * @returns {undefined} 
+     */
+    mapBackgroundColor = (value=false) => {
+        const color = (value ? value : this.map_background);
+        document
+            .querySelectorAll(`${this.scope_selector} .leaflet-container`)
+            .forEach(e => e.style.backgroundColor = color);
+    };
+
+
+    /**
+     * Crea el menú para cambiar de temas
+     * @returns {undefined} 
+     */
+    _menuTheme = () => {
+        if(!this.theme_tool){
+            return;
+        }
+        document
+        .querySelectorAll(`#themes-tool${this.scope_sufix}`)
+        .forEach(ele => ele.remove());
+
+        const navContainer = document.createElement("ul");
+        navContainer.classList.add(
+            "pm-list-unstyled", "pm-list",
+            "pm-tools",
+            `js-themes-tool${this.scope_sufix}`
+        );
+
+
+        const item = document.createElement("li");
+        item.setAttribute("tabindex", "-1");
+        item.dataset.toggle="true";
+
+        const icon = document.createElement("i");
+        icon.setAttribute("aria-hidden", "true");
+        icon.classList.add("pmi", "pmi-adjust");
+
+        const button = document.createElement("button");
+        button.title = "Cambiar tema";
+        button.tabIndex = "0";
+        button.classList.add("pm-btn", "pm-btn-rounded-circle");
+        button.appendChild(icon);
+        button.setAttribute("role", "button");
+        button.setAttribute("aria-label", "Abre el panel de temas");
+
+        const list = document.createElement("ul");
+        list.classList.add(
+            "pm-container", "pm-list", "pm-list-unstyled", 
+            "pm-p-1", "pm-caret", "pm-caret-b", "pm-toggle");
+
+        // Botón para restablecer el mapa
+        const restart = document.createElement("button");
+        restart.textContent = "Restablecer";
+        restart.classList.add("pm-item-link", "js-reset-theme");
+        const li = document.createElement("li");
+        li.classList.add("pm-item-separator");
+        li.appendChild(restart);
+        list.appendChild(li);
+
+        this.default_themes.map(m => m[0]).forEach((value, key)  => {
+            const buttonTheme = document.createElement("button");
+            buttonTheme.dataset.theme = value;
+            buttonTheme.textContent = this.default_themes[key][1];
+            buttonTheme.classList.add("js-set-theme", "pm-item-link");
+            
+            const li = document.createElement("li");
+            li.appendChild(buttonTheme);
+
+            list.appendChild(li);
+        });
+
+        item.appendChild(button);
+        item.appendChild(list);
+        navContainer.appendChild(item)
+
+        const element = document.querySelectorAll(this.scope_selector);
+        element.forEach(e => e.appendChild(navContainer));
+
+        // listeners
+        document
+            .querySelectorAll(".js-reset-theme")
+            .forEach(ele => ele.addEventListener(
+                "click", () => {
+                    localStorage.removeItem("mapTheme");
+                    this._removeThemes();
+                    this._setThemes();
+                })
+            );
+
+        document
+            .querySelectorAll(".js-set-theme")
+            .forEach(ele => ele.addEventListener(
+                "click", () => {
+                    const th = ele.dataset.theme;
+                    this.useTheme(th);
+                    localStorage.setItem("mapTheme", th);
+                })
+            );
+    };
+
+
+    /**
+     * Compone los estilos según la elección del usuario.
+     * @param {string} theme Nombre del tema 
+     * @param {object} prefix Lista de prefijos. ui o map 
+     * @returns {object} Array con los estilos definidos.
+     */
+    _setThemeStyles = (theme=false, prefix=["ui", "map"]) => prefix.map(m => {
+        return (["ui", "map"].includes(m) ? `${m}-${theme}` : false);
+    });
+
+
+    /**
+     * Remueve los estilos de tema
+     * @param {object} prefix Lista de prefijos. ui o map 
+     * @returns {undefined}
+     */
+    _removeThemes = (prefix=["ui", "map"]) => {
+        const element = document.querySelectorAll(this.scope_selector);
+        element.forEach(ele => {
+            [
+                ...this.default_themes,
+                ...this.temes_not_visibles
+            ].map(m => m[0]).forEach(th => {
+                ele.classList.remove(...this._setThemeStyles(th, prefix));
+            });
+        });
+    };
+
+
+    /**
+     * Agrega un tema en el mapa e interfase.
+     * @param {string} theme Nombre del tema
+     * @param {object} prefix Lista de prefijos. ui o map 
+     * @returns {undefined}
+     */
+    _setTheme = (theme, prefix)  => {
+        const element = document.querySelectorAll(this.scope_selector);
+        this._removeThemes(prefix);
+        element.forEach(ele => {
+            ele.classList.add( ...this._setThemeStyles(theme, prefix) ); 
+        });
+    }
+
+
+    /**
+     * Permite setear un tema completo
+     * @param {string} theme Nombre del tema
+     * @returns {undefined}
+     */
+    useTheme = (theme = false) => {
+        const useTheme = (theme ? theme : this.theme);
+        this._setTheme(useTheme, ["ui", "map"]);
+    }
+
+
+    /**
+     * Setea un tema para el mapa
+     * @param {string} theme Nombre del tema
+     * @returns {undefined}
+     */
+    useMapTheme = theme => this._setTheme(theme, ["map"]);
+
+
+    /**
+     * Setea un tema para el mapa
+     * @param {string} theme Nombre del tema
+     * @returns {undefined}
+     */
+    useUiTheme = theme => this._setTheme(theme, ["ui"]);
+
+
+    /**
+     * Setea el tema elegido por el usuario o el que lleva por defecto.
+     * @returns {undefined}
+     */
+    _setThemes = () => {
+        if(localStorage.hasOwnProperty("mapTheme")){
+            this._setTheme(localStorage.getItem("mapTheme"), ["ui", "map"]);
+            return;
+        }
+
+        if(!this.theme_ui && !this.theme_map){
+            this.useTheme();
+            return;
+        }
+
+        if(this.theme_ui){
+            this._setTheme(this.theme_ui, ["ui"]);
+        }
+
+        if(this.theme_map){
+            this._setTheme(this.theme_map, ["map"]);
+        }
+    }
+
+
+    /**
+     * Alias de sluglify
+     * 
+     * @param {string} val Texto a formatear 
+     * @returns {string}
+     */
+    _slugify = val => slugify(val);
+
+
     /**
      * Es un geoJSON
      * 
@@ -3117,6 +4237,7 @@ class PonchoMap {
         return false;
     };
 
+
     /**
      * JSON input
      * 
@@ -3126,6 +4247,7 @@ class PonchoMap {
         return this.data.features;
     }
 
+
     /**
      * Retrona las entradas en formato geoJSON
      */
@@ -3185,7 +4307,7 @@ class PonchoMap {
         );
 
         const title = document.createElement("h2");
-        title.classList.add("h6", "title", "sr-only");
+        title.classList.add("h6", "title", "pm-visually-hidden");
         title.textContent = "¡Se produjo un error!";
 
         container.appendChild(mapIcon);
@@ -3282,6 +4404,42 @@ class PonchoMap {
     };
 
 
+    /**
+     * El indice id_mixing ¿Está siendo usado?
+     * @returns {boolean}
+     */
+    _isIdMixing = () => (Array.isArray(this.id_mixing) && 
+            this.id_mixing > 0 || typeof this.id_mixing === 'function');
+
+
+    /**
+     * Array con valores a concatenar en el id.
+     * 
+     * @summary Dependiendo de la opción que haya elegido el usario, retorna
+     * una array de valors pasado por funcion o _array object_.
+     * @param {object} entry Objeto con una entrada del geoJson
+     * @returns {object} Array con los valores a concatenar.
+     */
+    _idMixing = entry => {
+        if(!this._isIdMixing()){
+            return;
+        }
+
+        if(typeof this.id_mixing === "function"){
+            return this.id_mixing(this, entry).join('');
+        } 
+        
+        const values = this.id_mixing.map(val => {
+            if(entry.properties[val]){
+                return entry.properties[val].toString();
+            } 
+            return val;
+        });
+
+        return this._slugify(values.join("-"));
+    }
+
+
     /**
      * Crea una entrada ID autonumerada si no posee una.
      * 
@@ -3293,21 +4451,30 @@ class PonchoMap {
      * @return {object}
      */
     _setIdIfNotExists = (entries) => {
-        const has_id = entries.features
-                .filter((_,k) => k===0)
-                .every(e => e.properties.hasOwnProperty("id"));
-
-        if(!has_id){
-            const new_entries = entries.features.map(
-                (v,k) => {
-                    const auto_id = k + 1;
-                    const use_title = (this.title && v.properties[this.title] ? 
-                            `-${slugify(v.properties[this.title])}` : "");
-                    v.properties.id = auto_id + use_title;
-                    return v;
-                });
-            entries.features = new_entries;
+        const hasId = entries.features
+            .filter((_, k) => k === 0)
+            .every(e => e.properties.hasOwnProperty("id"));
+
+        // Si no se configuró id_mixing y el json tiene id.
+        if(!this._isIdMixing() && hasId){
+            return entries;
         }
+ 
+        const newEntries = entries.features.map((entry, k) => {
+            if(this._isIdMixing()){
+                // Procesa la opción de id_mixing
+                entry.properties.id = this._idMixing(entry);
+            } else {
+                // Genera un ID automático
+                const autoId = k + 1;
+                const useTitle = (this.title && entry.properties[this.title] ? 
+                        this._slugify(entry.properties[this.title]) : "");
+                entry.properties.id = [autoId, useTitle].filter(f=>f).join('-');
+            }
+            
+            return entry;
+        }); 
+        entries.features = newEntries;
         return entries;
     };
 
@@ -3319,9 +4486,16 @@ class PonchoMap {
      * @return {undefined}
      */
     addHash = (value) => {
-        if(!this.hash || this.no_info){
-            return null;
+
+        if (typeof value !== "string" && !value) {
+            console.error('Invalid value provided to update hash');
+            return;
+        }
+
+        if (!this.hash || this.no_info) {
+            return;
         }
+        
         window.location.hash = `#${value}`;
     };
 
@@ -3333,9 +4507,16 @@ class PonchoMap {
      * @return {object}
      */
     entry = (id) => {
-        return this.entries.find(e => e.properties[this.id] == id);
+        return this.entries.find(e => {
+            if(e?.properties && e.properties[this.id] === id && 
+               e.properties?.["pm-interactive"] !== "n"){
+                return true;
+            }
+            return false;
+        });
     }
 
+
     /**
      * Busca un término en un listado de entradas.
      * 
@@ -3355,6 +4536,7 @@ class PonchoMap {
         return entries;
     };
 
+    
     /**
      * Busca un término en cada uno de los indices de una entrada.
      */
@@ -3597,7 +4779,7 @@ class PonchoMap {
      * Crea el bloque html para el slider.
      */
     _renderSlider = () => {
-        if(!this.render_slider){
+        if(!this.render_slider || this.content_outside){
             return;
         } else if(this.no_info){
             return;
@@ -3612,7 +4794,7 @@ class PonchoMap {
         close_button.title = "Cerrar panel";
         close_button.setAttribute("role", "button");
         close_button.setAttribute("aria-label", "Cerrar panel de información");
-        close_button.innerHTML = "<span class=\"sr-only\">Cerrar</span>✕";
+        close_button.innerHTML = "<span class=\"pm-visually-hidden\">Cerrar</span>✕";
 
         const anchor = document.createElement("a");
 
@@ -3632,7 +4814,7 @@ class PonchoMap {
         container.setAttribute("role", "region");
         container.setAttribute("aria-live", "polite");
         container.setAttribute("aria-label", "Panel de información");
-        container.classList.add("slider",`js-slider${this.scope_sufix}`);
+        container.classList.add("pm-container", "slider",`js-slider${this.scope_sufix}`);
         container.id = `slider${this.scope_sufix}`;
         container.appendChild(close_button);
         container.appendChild(anchor);
@@ -3643,14 +4825,26 @@ class PonchoMap {
     };
 
 
+    _removeTooltips = () => {
+        let _this = this;
+        this.map.eachLayer(function(layer) {
+            if(layer.options.pane === "tooltipPane") {
+                layer.removeFrom(_this.map);
+            }
+        });
+    }
+
+
     /**
      * Proyecta el slider y hace zoom en el marker.
      */
-    _showSlider = (layer, feature) => {
+    _showSlider = layer => {
+        this._removeTooltips();
+
         if(layer.hasOwnProperty("_latlng")){
             this.map.setView(layer._latlng, this.map_anchor_zoom);
-        } else {
-            this.map.fitBounds(layer.getBounds());
+        } else if(this.fit_bounds_onevent) {
+            this.map.fitBounds(layer.getBounds().pad(0.005));
         }
         layer.fireEvent("click");
     };
@@ -3665,7 +4859,7 @@ class PonchoMap {
                 layer.openPopup();
             });
         } else {
-            this.map.fitBounds(layer.getBounds());
+            this.map.fitBounds(layer.getBounds().pad(0.005));
             layer.openPopup();
         }
     };
@@ -3703,26 +4897,33 @@ class PonchoMap {
 
     /**
      * Muestra un marker
+     * 
      * @param {string|integer} id Valor identificador del marker. 
+     * @returns {undefined}
      */
-    gotoEntry = (id) => {
+    gotoEntry = id => {
         const entry = this.entry(id);
         const setAction = (layer, id, entry) => {
+
             if(!layer.options.hasOwnProperty("id")){
                 return;
             }
+            
             if(layer.options.id == id){
                 this._setSelectedMarker(id, layer);
+
                 if(this.hash){
                     this.addHash(id);
                 }
-                if(this.slider && this.hash){
+
+                if(this.slider){
                     this._showSlider(layer, entry);
                 } else {
                     this._showPopup(layer);
                 }
             }
         };
+
         this.markers.eachLayer(layer => setAction(layer, id, entry));
         this.map.eachLayer(layer => {
             if(layer.hasOwnProperty("feature") && 
@@ -3739,20 +4940,22 @@ class PonchoMap {
      * que evaluar el tipo de objeto geoJSON.
      * @param {object} layer 
      */
-    _setClickeable = (layer) => {
+    _setClickeable = layer => {
         layer.on("keypress click", (e) => {
             document
                 .querySelectorAll(".marker--active")
                 .forEach(e => e.classList.remove("marker--active"));
                 
-            ["_icon", "_path"].forEach(ele => {
+            
+                ["_icon", "_path"].forEach(ele => {
                 if(!e.sourceTarget.hasOwnProperty(ele)){
                     return;
                 }
                 e.sourceTarget[ele].classList.add("marker--active");
             });
+
             const content = this.entries.find(e => {
-                return e.properties[this.id]==layer.options.id;
+                return (e?.properties && e.properties[this.id]===layer.options.id);
             });
             this.setContent(content.properties);
         });
@@ -3764,7 +4967,7 @@ class PonchoMap {
      * @param {object} layer Objeto Feature GeoJSON. 
      * @returns {boolean}
      */
-    isFeature = (layer) => {
+    isFeature = layer => {
         if(!layer.hasOwnProperty("feature")){
             return false;
         }
@@ -3784,6 +4987,8 @@ class PonchoMap {
                 layer.feature.geometry.type == "Point" ||
                 layer.feature.geometry.type == "MultiPoint"){
                 return;
+            } else if(layer?.feature?.properties["pm-interactive"] == "n"){
+                return;
             }
             this._setClickeable(layer);
         });
@@ -4034,6 +5239,10 @@ class PonchoMap {
             key = false, css = "small", style = false 
         } = this.template_structure.lead;
 
+        if(!entry[key].trim()){
+            return;
+        }
+
         const p = document.createElement("p");
         p.textContent = entry[key];
         // Style definitions
@@ -4182,7 +5391,7 @@ class PonchoMap {
      */
     fitBounds = () => {
         try {
-            this.map.fitBounds(this.geojson.getBounds());
+            this.map.fitBounds(this.geojson.getBounds().pad(0.005));
         } catch (error) {
             console.error(error);
         }
@@ -4198,6 +5407,9 @@ class PonchoMap {
             return;
         }
         // función a evaluar. Busca y remueve un botón de reset si existiera.
+        // if( document.querySelector(`.leaflet-control-zoom-reset`) ){
+        //     return;
+        // }
         document.querySelectorAll(
             `.js-reset-view${this.scope_sufix}`).forEach(e => e.remove());
         
@@ -4206,7 +5418,7 @@ class PonchoMap {
             .forEach(ele => {
 
             const icon = document.createElement("i");
-            icon.classList.add("fa", "fa-expand");
+            icon.classList.add("pmi", "pmi-expand");
             icon.setAttribute("aria-hidden","true");
 
             const button = document.createElement("a");
@@ -4416,15 +5628,23 @@ class PonchoMap {
             ele[key].setAttribute(
                 "aria-label", ele?.feature?.properties?.[this.title]
             );
-            ele[key].setAttribute("role", "button");
+            
             ele[key].setAttribute("tabindex", 0);
             ele[key].dataset.entryId = ele?.feature?.properties?.[this.id];
+            
+            if(ele?.feature?.properties?.["pm-interactive"] == "n"){
+                ele[key].dataset.interactive = "n";
+                ele[key].setAttribute("role", "graphics-symbol");
+            } else {
+                ele[key].setAttribute("role", "button");
+            }
             ele[key].dataset.leafletId = ele._leaflet_id;
         };
 
         this.map.eachLayer(e => setAttributes(e, "_path"));
     };
 
+
     /**
      * Anclas de salto
      * 
@@ -4449,11 +5669,22 @@ class PonchoMap {
                     ["role", "region"],
                 ]   
             ],
+            [
+                `.js-themes-tool${this.scope_sufix}`,
+                `themes-tool${this.scope_sufix}`,
+                [
+                    ["aria-label", "Herramienta para cambiar de tema visual"],
+                    ["role", "region"],
+                ]   
+            ],
         ];
         anchors.forEach(anchor => {
-            const element = document.querySelector(anchor[0]);
-            element.id = anchor[1];
-            anchor[2].forEach(e => element.setAttribute(e[0], e[1]));
+            const element = document.querySelectorAll(anchor[0]);
+            element.forEach( ele => {
+                ele.id = anchor[1]
+                anchor[2].forEach(e => ele.setAttribute(e[0], e[1]));
+            } );
+            
         });
         return anchors;
     };
@@ -4477,7 +5708,7 @@ class PonchoMap {
      */
     _accesibleMenu = () => {
         // Remuevo instancias anteriores si existieran.
-        document.querySelectorAll(`${this.scope_selector} .accesible-nav`)
+        document.querySelectorAll(`${this.scope_selector} .pm-accesible-nav`)
             .forEach(e => e.remove());
 
         // Anclas que se deben crear.
@@ -4497,7 +5728,11 @@ class PonchoMap {
             {
                 text: "Ir al panel de zoom",
                 anchor: `#${anchors[1][1]}` 
-            }
+            },
+            {
+                text: "Cambiar de tema",
+                anchor: `#${anchors[2][1]}` 
+            },
         ]
         values = [
             ...values,
@@ -4509,21 +5744,24 @@ class PonchoMap {
         // Imprimo los enlaces
         const icon = document.createElement("i");
         icon.classList.add(
-            "icono-arg-sitios-accesibles", 
+            "pmi", 
+            "pmi-universal-access", 
             "accesible-nav__icon"
         );
         icon.setAttribute("aria-hidden", "true");
 
         const nav = document.createElement("div");
-        nav.classList.add("accesible-nav", "top");
-        nav.id = `accesible-nav${this.scope_sufix}`;
+        nav.classList.add("pm-accesible-nav", "top", "pm-list");
+        nav.id = `pm-accesible-nav${this.scope_sufix}`;
         nav.setAttribute("aria-label", "Menú para el mapa");
         nav.setAttribute("role", "navigation");
         nav.tabIndex=0;
 
         const ul = document.createElement("ul");
+        ul.classList.add("pm-list-unstyled");
         values.forEach((link, index) => {
             const a = document.createElement("a");
+            a.classList.add("pm-item-link", "pm-accesible")
             a.textContent = link.text;
             a.tabIndex = 0;
             a.href = link.anchor;
@@ -4542,11 +5780,12 @@ class PonchoMap {
         // enlace de retorno
         const back_to_nav = document.createElement("a");
         back_to_nav.textContent = "Ir a la navegación del mapa";
-        back_to_nav.href = `#accesible-nav${this.scope_sufix}`;
+        back_to_nav.classList.add("pm-item-link", "pm-accesible");
+        back_to_nav.href = `#pm-accesible-nav${this.scope_sufix}`;
         back_to_nav.id = `accesible-return-nav${this.scope_sufix}`;
 
         const return_nav = document.createElement("div");
-        return_nav.classList.add("accesible-nav", "bottom");
+        return_nav.classList.add("pm-accesible-nav", "bottom");
         return_nav.appendChild(icon.cloneNode(true));
         return_nav.appendChild(back_to_nav);
 
@@ -4600,7 +5839,8 @@ class PonchoMap {
     render = () => {
         this._hiddenSearchInput();
         this._resetViewButton();
-
+        this._setThemes();
+        
         this.titleLayer.addTo(this.map);
         this.markersMap(this.entries);
         this._selectedMarker();
@@ -4623,6 +5863,8 @@ class PonchoMap {
         setTimeout(this.gotoHashedEntry, this.anchor_delay);
         this._setFetureAttributes();
         this._accesibleMenu();
+        this.mapOpacity();
+        this.mapBackgroundColor();
     };
 };
 // end class
@@ -4924,12 +6166,13 @@ class PonchoMapFilter extends PonchoMap {
 
         const poncho_map_height = filter_container.offsetParent.offsetHeight;
         // Valor tomado de la hoja de estilos
-        const container_position_distance = this._cssVarComputedDistance() * 2;
+        const container_position_distance = this._cssVarComputedDistance() * 3;
         const filters_height = poncho_map_height
             - filter_container.offsetTop
             - filter_button.offsetHeight
             - container_position_distance;
 
+
         const pos = document
             .querySelector(`.js-poncho-map-filters${this.scope_sufix}`);
         pos.style.maxHeight = `${filters_height}px`;
@@ -5026,19 +6269,33 @@ class PonchoMapFilter extends PonchoMap {
      * o, si se desean todos los checkbox desmarcados.
      *   ["tipo", false]
      */
-    _fieldsToUse = (fields_items) => {
+    _fieldsToUse = (fieldsItems) => {
         const {
-            fields: opt_fields = false, 
-            field: opt_field = false} = fields_items;
-        if(!opt_fields && !opt_field){
+            type = "checkbox",
+            fields: optFields = false, 
+            field: optField = false} = fieldsItems;
+
+        if(!optFields && !optField){
             this.errorMessage(
                 "Filters requiere el uso del atributo `field` o `fields`.",
                 "warning"
             );
         }
-        const fields_to_use = (opt_fields ? opt_fields : 
-            this._setFilter(opt_field));
-        return fields_to_use
+        // Evito que a los radio se les asigne un valor checked.
+        if (optField && type === "radio"){
+            optField[1] = false;
+        }
+
+        let fieldsToUse = (optFields ? optFields : this._setFilter(optField));
+        // Hasta que se defina su uso, todos los radio tienen un item `Todos`.
+        if(type === "radio" && optFields === false){
+            const f = fieldsToUse.map(m => m[1]);
+            fieldsToUse = [
+                [fieldsToUse[0][0], "Todos", f, "checked"], ...fieldsToUse
+            ];
+        }
+        
+        return fieldsToUse;
     };
 
 
@@ -5057,8 +6314,9 @@ class PonchoMapFilter extends PonchoMap {
             const field = fields_to_use[key];
             const input = document.createElement("input");
             input.type = (this.valid_fields.includes(fields_items.type) ?
-            fields_items.type : "checkbox");
+                fields_items.type : "checkbox");
             input.id = `id__${field[0]}__${group}__${key}`;
+            
             if(fields_items.type == "radio"){
                 input.name = `${field[0]}__${group}`;
             } else {
@@ -5099,15 +6357,15 @@ class PonchoMapFilter extends PonchoMap {
     _filterButton = () => {
         const filter_icon = document.createElement("i");
         filter_icon.setAttribute("aria-hidden", "true");
-        filter_icon.classList.add("fa", "fa-filter");
+        filter_icon.classList.add("pmi", "pmi-filter");
 
         const button_text = document.createElement("span");
         button_text.textContent = "Abre o cierra el filtro de búsqueda";
-        button_text.classList.add("sr-only");
+        button_text.classList.add("pm-visually-hidden");
 
         const button = document.createElement("button");
         button.classList.add(
-            "btn","btn-secondary","btn-filter",
+            "pm-btn", "pm-btn-rounded-circle", "pm-my-1",
             `js-close-filter${this.scope_sufix}`
         );
         button.id = `filtrar-busqueda${this.scope_sufix}`
@@ -5134,7 +6392,7 @@ class PonchoMapFilter extends PonchoMap {
 
 
     /**
-     * Medida definida en la variable CSS --slider-distance
+     * Medida definida en la variable CSS --pm-slider-distance
      * 
      * @summary Esta medida puede ser variable según el estilo que se
      * quiera dar al mapa el diseñador. 
@@ -5143,7 +6401,7 @@ class PonchoMapFilter extends PonchoMap {
     _cssVarComputedDistance = () => {
         const container = document.querySelector(".poncho-map");
         const computedDistance = getComputedStyle(container)
-                .getPropertyValue('--slider-distance');
+                .getPropertyValue('--pm-slider-distance');
         const distance = parseInt(
             computedDistance.toString().replace(/[^0-9]*/gm, ""));
         return distance || 0;
@@ -5181,7 +6439,7 @@ class PonchoMapFilter extends PonchoMap {
         close_button.title = "Cerrar panel";
         close_button.setAttribute("role", "button");
         close_button.setAttribute("aria-label", "Cerrar panel de filtros");
-        close_button.innerHTML = "<span class=\"sr-only\">Cerrar </span>✕";
+        close_button.innerHTML = "<span class=\"pm-visually-hidden\">Cerrar </span>✕";
 
 
         const form = document.createElement("form");
@@ -5191,7 +6449,10 @@ class PonchoMapFilter extends PonchoMap {
 
         const container = document.createElement("div");
         container.classList.add(
-            `js-poncho-map-filters${this.scope_sufix}`,"poncho-map-filters"
+            `js-poncho-map-filters${this.scope_sufix}`,
+            "pm-container",
+            "poncho-map-filters",
+            "pm-caret", "pm-caret-t",
         );
         container.setAttribute("role", "region");
         container.setAttribute("aria-live", "polite");
@@ -5206,7 +6467,6 @@ class PonchoMapFilter extends PonchoMap {
         const controlZoomSize = this._controlZoomSize();
         const styleTop = controlZoomSize.controlHeight 
                 + controlZoomSize.controlTop 
-                + cssVarComputedDistance 
                 + "px";
 
         container.appendChild(form); 
@@ -5252,18 +6512,18 @@ class PonchoMapFilter extends PonchoMap {
      * Crea los checkbox para los filtros.
      */
     _createFilters = (data) => {
-      // debugger
         const form_filters = document
             .querySelector(`.js-filters${this.scope_sufix}`);
 
         data.forEach((item, group) => {
             let legend = document.createElement("legend");
             legend.textContent = item.legend;
-            legend.classList.add("m-b-1", "text-primary", "h6")
+            legend.classList.add("m-b-1", "color-primary", "h6")
 
             let fieldset = document.createElement("fieldset");
             fieldset.appendChild(legend);
-            if(item.hasOwnProperty("check_uncheck_all") && item.check_uncheck_all){
+            if(item.hasOwnProperty("check_uncheck_all") && 
+                    item.check_uncheck_all && item?.type != "radio"){
                 fieldset.appendChild(this._checkUncheckButtons(item));
             }
             fieldset.appendChild(this._fields(item, group));
@@ -5414,7 +6674,7 @@ class PonchoMapFilter extends PonchoMap {
             i.setAttribute("aria-hidden", "true");
 
             const span = document.createElement("span");
-            span.className = "sr-only";
+            span.className = "pm-visually-hidden";
             span.style.fontWeight = "400";
             span.textContent = `${field[1]} elemento${plurals}.`;
 
@@ -5508,6 +6768,7 @@ class PonchoMapFilter extends PonchoMap {
         this._helpText(feed);
         this._resetSearch();
         this._clickToggleFilter();
+        
         if(this.slider){
             this._renderSlider();
             this._clickeableMarkers();
@@ -5518,6 +6779,7 @@ class PonchoMapFilter extends PonchoMap {
         if(this.hash){
             this._urlHash();
         }
+        
         this._setFetureAttributes();
         this._accesibleMenu();
     };
@@ -5596,6 +6858,9 @@ class PonchoMapFilter extends PonchoMap {
         this._hiddenSearchInput();
         this._resetViewButton(); 
 
+        this._menuTheme();
+        this._setThemes();
+
         if(this.filters.length > 0){
             this._filterButton();
             this._filterContainer();
@@ -5619,6 +6884,8 @@ class PonchoMapFilter extends PonchoMap {
         if(this.filters_visible){
             this._filterContainerHeight();
         }
+        this.mapOpacity();
+        this.mapBackgroundColor();
     };
 };
 // end of class
@@ -5890,6 +7157,342 @@ class PonchoMapSearch {
     }
 };
 
+/**
+ * PONCHO MAP FILTRO POR PROVINCIAS
+ *
+ * @summary Assets para configrar poncho map con un geoJSON de provincias.
+ *
+ * @author Agustín Bouillet <bouilleta@jefatura.gob.ar>
+ *
+ *
+ *
+ * MIT License
+ *
+ * Copyright (c) 2023 Argentina.gob.ar
+ *
+ * Permission is hereby granted, free of charge, to any person
+ * obtaining a copy of this software and associated documentation
+ * files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rightsto use, copy, modify, merge,
+ * publish, distribute, sublicense, and/or sell copies of the Software,
+ * and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
+ * BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
+ * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+const PONCHOMAP_GEOJSON_PROVINCES = "/profiles/argentinagobar/"
+        + "themes/contrib/poncho/resources/jsons/"
+        + "geo-provincias-argentinas.json";
+
+
+/**
+ * Junta el geoJSON con el JSON de Google Sheet
+ *
+ * @summary Este objeto no puede estar dentro de la clase porque no se puede
+ * utiliar `this` antes de `super()` en ES6.
+ *
+ * @param {object} geoProvinces GeoJSON
+ * @param {object} entries JSON con entradas por provincia.
+ * @returns {object}
+ */
+const ponchoMapProvinceMergeData = (geoProvinces={}, entries={},
+                                    provinceIndex="provincia") => {
+
+    if(!geoProvinces.hasOwnProperty("features")){
+        throw new Error("Invalid data format");
+    }
+
+    geoProvinces.features.forEach((feature, key) => {
+        const jsonEntry = entries.find(entry =>
+            (entry[provinceIndex] == feature.properties.fna ||
+            entry[provinceIndex] == feature.properties.nam)
+        );
+        // Si no existe la provincia en el JSON, borra el feature.
+        if(!jsonEntry && feature.properties.fna){
+            delete geoProvinces.features[key];
+            return;
+        }
+        // Si hay definido un key _color_, usa el color en el fill.
+        if(jsonEntry?.color && !feature.properties["pm-type"]){
+            geoProvinces
+                .features[key]
+                .properties.stroke = ponchoColor(jsonEntry.color);
+        }
+        // Remuevo la propiedad interactive del json para que no se interponga
+        // con el valor del geoJSON.
+        if(feature.properties["pm-interactive"] === "n" && 
+                    jsonEntry?.["pm-interactive"] !== "n"){
+            delete jsonEntry["pm-interactive"];
+        }
+
+        Object.assign(geoProvinces.features[key].properties, jsonEntry);
+    });
+    return geoProvinces;
+};
+
+
+/**
+ * Remueve estilos toggle del select y el contenedor del mapa
+ * 
+ * @summary Este objeto no puede estar dentro de la clase porque no se puede
+ * utiliar `this` antes de `super()` en ES6.
+ * @returns {undefined}
+ */
+const ponchoMapProvinceCssStyles = flag => {
+    if(flag){
+        return;
+    }
+    const s = document.querySelectorAll(
+        ".poncho-map-province__toggle-map,"
+        + ".poncho-map-province__toggle-element"
+    );
+    s.forEach(element => {
+        element.classList.remove(
+            "poncho-map-province__toggle-map",
+            "poncho-map-province__toggle-element"
+        ); 
+    });
+};
+
+
+class PonchoMapProvinces extends PonchoMapFilter {
+    constructor(geoProvinces, entries, options){
+
+        const defaultOptions = {
+            initial_entry: false,
+            random_entry: false,
+            overlay_image: true,
+            overlay_image_bounds: [
+                [-20.56830872133435, -44.91768177759874],
+                [-55.861359445914566, -75.2246121480093]
+            ],
+            overlay_image_opacity: 0.8,
+            overlay_image_url: "https://www.argentina.gob.ar/"
+                + "sites/default/files/map-shadow.png",
+            hide_select: true,
+            province_index: "provincia",
+            fit_bounds: true,
+            // Sobreescribo opciones de PonchoMap
+            map_view:[-40.47815508388363,-60.0045383246273],
+            map_init_options: {
+                zoomSnap: 0.2,
+                zoomControl: true,
+                doubleClickZoom: false,
+                scrollWheelZoom: false,
+                boxZoom: false
+            },
+            map_zoom: 4.4,
+            tooltip_options: {
+                permanent: false,
+                className: "leaflet-tooltip-own",
+                direction: "auto",
+                offset: [0, -3],
+                sticky: true,
+                opacity: 1,
+            },
+            tooltip: true,
+            slider: true
+        };
+        // Merge options
+        let opts = Object.assign({}, defaultOptions, options);
+
+        ponchoMapProvinceCssStyles(opts.hide_select);
+
+        // PonchoMapFilter instance
+        const mergedJSONs = ponchoMapProvinceMergeData(
+            geoProvinces, entries, opts.province_index
+        );
+
+        super(mergedJSONs, opts);
+
+        this.initialEntry = opts.initial_entry;
+        this.randomEntry = opts.random_entry;
+        this.overlayImage = opts.overlay_image;
+        this.overlayImageUrl = opts.overlay_image_url;
+        this.overlayImageBounds = opts.overlay_image_bounds;
+        this.overlayImageOpacity = opts.overlay_image_opacity;
+        this.mapView = opts.map_view;
+        this.hideSelect = opts.hide_select;
+        this.fitToBounds = opts.fit_bounds
+    }
+
+
+    /**
+     * Ordena un array por uno de sus keys.
+     * @param {object} obj Objeto a ordenar.
+     * @param {integer} key Posición del array.
+     * @param {object} obj Objeto ordenado.
+     */
+    sortObject = (obj, key=0) => obj.sort((a, b) => {
+        const valA = a[key].toUpperCase();
+        const valB = b[key].toUpperCase();
+        if (valA > valB) {
+            return 1;
+        }
+        if (valA < valB) {
+            return -1;
+        }
+        return 0;
+    });
+
+
+    /**
+     * Retorna un valor aleatório.
+     * @param {object} list Listado de provincias
+     * @returns {object}
+     */
+    _randomEntry = list => {
+        return list[Math.floor(Math.random()*list.length)][0];
+    };
+
+
+    /**
+     * Retorna un array con clave y valor de provincias argentinas
+     * @param {object} geoJSON Objeto geoJSON con los features por provincia
+     * @param {string} idKey Key del propertie que se usa como id.
+     * @returns {object}
+     */
+    _provincesFromGeoJSON = (geoJSON, idKey) => {
+        let prov = {};
+        geoJSON.features.map(p => {
+            const {
+                name=false,
+                "pm-interactive":pmInteractive=false} = p.properties;
+
+            if(pmInteractive === "n" || !name){
+                return false;
+            }
+            prov[p.properties[idKey]] = name;
+        }).filter(f => f);
+
+        let provincesToList = this.sortObject( Object.entries(prov), 1);
+        return provincesToList;
+    };
+
+
+    /**
+     * Imprime la región según las opciones de precedencia.
+     * @param {string} prov Id de provincia
+     * @returns {undefined}
+     */
+    _selectedEntry = prov => {
+        const hash = window.location.hash.replace("#", "");
+        let selected = "";
+        if(hash){
+            selected = hash;
+        } else if(this.initialEntry){
+            selected = this.initialEntry;
+        } else if(this.randomEntry){
+            selected = this._randomEntry(prov);
+        }
+        return selected;
+    }
+
+
+    /**
+     * Crea los options para el select de provincias
+     * @param {object} map 
+     * @returns {object}
+     */
+    _setSelectProvinces = map => {
+        const hash = window.location.hash.replace("#", "");
+        const prov = this._provincesFromGeoJSON(map.geoJSON, map.id);
+        const selected = this._selectedEntry(prov);
+
+        // Creo los options
+        const selectProvinces = document.getElementById("id_provincia");
+        const optionsSelect = [["", "Seleccione una provincia"], ...prov];
+        optionsSelect.forEach(province => {
+            const option = document.createElement("option");
+
+            if(province[0] === selected){
+                option.setAttribute("selected", "selected");
+            }
+            option.value = province[0];
+            option.textContent = province[1];
+            selectProvinces.appendChild(option);
+        });
+        return {object: selectProvinces, selected: selected};         
+    };
+
+
+    /**
+     * Selected option cuando selecciono un polígono
+     * @param {object} map Objeto return ponchoMap 
+     */
+    _selectedPolygon = map => {
+        map.map.eachLayer(layer => {
+            layer.on("keypress click", (e) => {
+                if( e?.target?.feature?.properties ){
+                    const {id} = e.target.feature.properties;
+                    document.getElementById("id_provincia").value = id;
+                }
+            });
+        })
+    }
+
+
+    /**
+     * Crea el listener para la interacción del select con el mapa.
+     * @param {object} map 
+     */
+    _selectProvinces = map => {
+        this._selectedPolygon(map);
+
+        // Arma el select con las provincias
+        const selectProvinces = this._setSelectProvinces(map);
+
+        if(selectProvinces.selected){
+            map.gotoEntry(selectProvinces.selected)
+        }
+
+        // cambia los datos de la provincia 
+        selectProvinces.object.addEventListener("change", e => {
+            map.gotoEntry(e.target.value);
+            e.value = selectProvinces.selected
+        });
+    };
+
+
+    /**
+     * Implementa una imagen sobre el mapa
+     * @returns {undefined}
+     */
+    _overlayImage = () => {
+        if(!this.overlayImage){
+            return;
+        }
+        L.imageOverlay(
+            this.overlayImageUrl, this.overlayImageBounds, 
+            {opacity: this.overlayImageOpacity}
+        ).addTo(this.map);
+    }
+
+
+    /**
+     * imprime el mapa
+     */ 
+    renderProvinceMap = () =>{
+        this._overlayImage();
+        this.render(); // Imprime PonchoMapsFilter
+        if(this.fitToBounds){
+            this.fitBounds();
+        }
+        this._selectProvinces(this);
+    };
+}
+// end class
+
 /**
  * Helpers para manejar los json provenientes de Google Sheets.
  * 
@@ -5998,7 +7601,9 @@ class GapiSheetData {
 
 
 
-/* module.exports REMOVED */
+if (typeof exports !== "undefined") {
+    module.exports = GapiSheetData;
+}
 
 /**
  * TRANSLATE
@@ -6034,10 +7639,9 @@ class GapiSheetData {
  */
 class TranslateHTML {
     ATTRIBUTES = [
-        "title", "placeholder", "alt", "value", "href", "src", "lang"
+        "title", "placeholder", "alt", "value", "href", "src", "html.lang"
     ];
 
-
     /**
      * @param {object} dictionary Objeto con diccionario de terminos 
      * a traducir.
@@ -6045,11 +7649,33 @@ class TranslateHTML {
      * a traducir.
      */
     constructor(dictionary = [], attributes = []) {
-        this.dictionary = dictionary;
+        this.dictionary = this.sortByLength(dictionary);
         this.attributes = (attributes.length ? attributes : this.ATTRIBUTES);
     }
 
 
+    /**
+     * Ordena los términos
+     * 
+     * @summary Ordena el diccionario de mayor a menor según el total de 
+     * caracteres de cada término.
+     * @param {object} obj Listado a ordenar
+     * @returns {object} Listado ordenado
+     */
+    sortByLength = obj => {
+        obj.sort((a, b) => {
+            if (a[0].length > b[0].length) {
+                return -1;
+            } else if (a[0].length < b[0].length) {
+                return 1;
+            } else {
+                return a[0] - b[0];
+            }
+        });
+        return obj;
+    };
+
+
     /**
      * Traduce atributos html
      * 
@@ -6064,13 +7690,21 @@ class TranslateHTML {
      */
     translateAttributes = (dictionary=false) => {
         const dict = (dictionary ? dictionary : this.dictionary);
-        this.attributes.forEach((item) =>
-            dict.forEach((translate) =>
+        this.attributes.forEach((item) => {
+
+            const attrDef = item.split(".").slice(-2);
+            const tag = (attrDef.length === 2 ? attrDef[0] : "");
+            const attr = (attrDef.length === 2 ? attrDef[1] : attrDef[0]);
+
+            dict.forEach(translate => {
+                
+                console.log(`${tag}[${attr}='${translate[0]}']`, translate[1])
+                
                 document
-                    .querySelectorAll(`[${item}='${translate[0]}']`)
-                    .forEach((t) => (t[item] = translate[1]))
-            )
-        );
+                    .querySelectorAll(`${tag}[${attr}='${translate[0]}']`)
+                    .forEach(t => (t[attr] = translate[1]));
+            });
+        });
     };