ar-poncho 2.0.320 → 2.0.321

package/dist/js/poncho.js

@@ -1,526 +1,1562 @@
 /**
- * Definición de colores Poncho
+ * Listado de colores colores www.argentina.gob.ar
+ *
+ * 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.
+ */
+const ponchoColorDefinitionsList = [{"name": "www.argentina.gob.ar", "space": "arg", "hidden_space": false, "description": "", "data": [{"scope": "arg", "name": "Azul principal", "group": "primary", "color": {"900": "#232D4F", "800": "#2C3C5F", "700": "#354B6E", "600": "#3E5A7E", "500": "#5A7290", "400": "#7589A3", "300": "#91A1B5", "200": "#ACB8C8", "100": "#C8D0DA", "50": "#E3E7ED"}, "instance": [{"name": "Azul", "code": "arg-azul", "description": "Color principal", "scope": "arg", "related_color": "900", "parent_group": "primary", "color": "#232D4F", "variant": [{"variant": "half", "color": "#9296A7", "name": "Azul medio tono", "code": "arg-azul-half"}, {"variant": "lighter", "color": "#C8D0DA", "name": "Azul muy claro", "code": "arg-azul-lighter"}], "alias": [{"code": "arg-azul", "exclude": false}, {"code": "primary", "exclude": true}, {"code": "azul", "exclude": true}, {"code": "azul-marino", "exclude": true}, {"code": "primary-alt", "exclude": true}]}, {"name": "Secundario", "code": "arg-secundario", "description": "", "scope": "arg", "related_color": "600", "parent_group": "primary", "color": "#3E5A7E", "variant": [], "alias": [{"code": "arg-secundario", "exclude": false}, {"code": "secondary", "exclude": true}, {"code": "secundario", "exclude": true}]}, {"name": "Primary light", "code": "arg-primary-light", "description": "", "scope": "arg", "related_color": "50", "parent_group": "primary", "color": "#E3E7ED", "variant": [], "alias": [{"code": "arg-primary-light", "exclude": false}, {"code": "primary-light", "exclude": true}]}, {"name": "Info", "code": "arg-info", "description": "", "scope": "arg", "related_color": "500", "parent_group": "primary", "color": "#5A7290", "variant": [{"variant": "lighter", "color": "#E3E7ED", "name": "Info muy claro", "code": "arg-info-lighter"}], "alias": [{"code": "arg-info", "exclude": false}, {"code": "info", "exclude": true}]}]}, {"scope": "arg", "name": "Verde", "group": "verde", "color": {"50": "#F1F5D7", "100": "#DEE8A3", "200": "#CCDB6E", "300": "#B9CE39", "400": "#93B727", "500": "#6EA015", "600": "#4E8F24", "700": "#2E7D33", "800": "#27692A", "900": "#1F5421"}, "instance": [{"name": "Verde", "code": "arg-verde", "description": "", "scope": "arg", "related_color": "700", "parent_group": "verde", "color": "#2E7D33", "variant": [{"variant": "light", "color": "#6EA015", "name": "Verde claro", "code": "arg-verde-light"}, {"variant": "half", "color": "#96BE99", "name": "Verde medio tono", "code": "arg-verde-half"}, {"variant": "dark", "color": "#1F5421", "name": "Verde oscuro", "code": "arg-verde-dark"}], "alias": [{"code": "arg-verde", "exclude": false}, {"code": "success", "exclude": true}, {"code": "verde", "exclude": true}]}, {"name": "Verd\u00edn", "code": "arg-verdin", "description": "", "scope": "arg", "related_color": "500", "parent_group": "verde", "color": "#6EA015", "variant": [{"variant": "light", "color": "#B9CE39", "name": "Verd\u00edn claro", "code": "arg-verdin-light"}, {"variant": "dark", "color": "#2E7D33", "name": "Verd\u00edn oscuro", "code": "arg-verdin-dark"}], "alias": [{"code": "arg-verdin", "exclude": false}, {"code": "verdin", "exclude": true}]}, {"name": "Lima", "code": "arg-lima", "description": "", "scope": "arg", "related_color": "300", "parent_group": "verde", "color": "#B9CE39", "variant": [{"variant": "light", "color": "#DEE8A3", "name": "Lima claro", "code": "arg-lima-light"}, {"variant": "dark", "color": "#6EA015", "name": "Lima oscuro", "code": "arg-lima-dark"}], "alias": [{"code": "arg-lima", "exclude": false}, {"code": "limon", "exclude": true}, {"code": "lima", "exclude": true}]}]}, {"scope": "arg", "name": "Amarillo", "group": "amarillo", "color": {"50": "#FFFAE8", "100": "#FFF1C0", "200": "#FFE997", "300": "#FFE06E", "400": "#FFD745", "500": "#FFCE1C", "600": "#D8AE18", "700": "#B18F15", "800": "#8A6F12", "900": "#634F0E"}, "instance": [{"name": "Ma\u00edz", "code": "arg-maiz", "description": "", "scope": "arg", "related_color": "500", "parent_group": "amarillo", "color": "#FFCE1C", "variant": [{"variant": "light", "color": "#FFE997", "name": "Ma\u00edz claro", "code": "arg-maiz-light"}, {"variant": "dark", "color": "#B18F15", "name": "Ma\u00edz oscuro", "code": "arg-maiz-dark"}], "alias": [{"code": "arg-maiz", "exclude": false}, {"code": "maiz", "exclude": true}]}]}, {"scope": "arg", "name": "Fucsia", "group": "fucsia", "color": {"50": "#FCDDE6", "100": "#F8B6C9", "200": "#F48EAB", "300": "#F16798", "400": "#ED3F85", "500": "#EC407A", "600": "#D72C6B", "700": "#C2185B", "800": "#9A144A", "900": "#721038"}, "instance": [{"name": "Ar\u00e1ndano", "code": "arg-arandano", "description": "", "scope": "arg", "related_color": "700", "parent_group": "fucsia", "color": "#C2185B", "variant": [{"variant": "light", "color": "#EC407A", "name": "Ar\u00e1ndano claro", "code": "arg-arandano-light"}, {"variant": "dark", "color": "#721038", "name": "Ar\u00e1ndano oscuro", "code": "arg-arandano-dark"}, {"variant": "half", "color": "#E18CAD", "name": "Ar\u00e1ndano medio tono", "code": "arg-arandano-half"}, {"variant": "lighter", "color": "#FCDDE6", "name": "Ar\u00e1ndano muy claro", "code": "arg-arandano-lighter"}], "alias": [{"code": "arg-arandano", "exclude": false}, {"code": "arandano", "exclude": true}]}, {"name": "Fucsia", "code": "arg-fucsia", "description": "", "scope": "arg", "related_color": "500", "parent_group": "fucsia", "color": "#EC407A", "variant": [{"variant": "light", "color": "#F16798", "name": "Fucsia claro", "code": "arg-fucsia-light"}, {"variant": "dark", "color": "#9A144A", "name": "Fucsia oscuro", "code": "arg-fucsia-dark"}], "alias": [{"code": "arg-fucsia", "exclude": false}, {"code": "cereza", "exclude": true}, {"code": "fucsia", "exclude": true}]}, {"name": "Rosado", "code": "arg-rosado", "description": "", "scope": "arg", "related_color": "200", "parent_group": "fucsia", "color": "#F48EAB", "variant": [{"variant": "light", "color": "#FCDDE6", "name": "Rosado claro", "code": "arg-rosado-light"}, {"variant": "dark", "color": "#ED3F85", "name": "Rosado oscuro", "code": "arg-rosado-dark"}, {"variant": "half", "color": "#FAC7D5", "name": "Rosado medio tono", "code": "arg-rosado-half"}], "alias": [{"code": "arg-rosado", "exclude": false}]}]}, {"scope": "arg", "name": "Violeta", "group": "violeta", "color": {"50": "#E9E6F2", "100": "#D3CEE5", "200": "#BEB5D8", "300": "#A89DCB", "400": "#9284BE", "500": "#8561B2", "700": "#6A1B99", "800": "#4B0F7A", "900": "#2C035C", "600": "#773EA5"}, "instance": [{"name": "Lavanda", "code": "arg-lavanda", "description": "", "scope": "arg", "related_color": "400", "parent_group": "violeta", "color": "#9284BE", "variant": [], "alias": [{"code": "arg-lavanda", "exclude": false}, {"code": "lavanda", "exclude": true}]}, {"name": "Uva", "code": "arg-uva", "description": "", "scope": "arg", "related_color": "700", "parent_group": "violeta", "color": "#6A1B99", "variant": [], "alias": [{"code": "arg-uva", "exclude": false}, {"code": "uva", "exclude": true}]}]}, {"scope": "arg", "name": "Negro", "group": "negro", "color": {"50": "#F0F0F0", "100": "#E9E9E9", "200": "#DDDDDD", "300": "#838383", "150": "#DEE2E6", "75": "#F2F2F2", "500": "#555555", "600": "#444444", "900": "#141414", "25": "#FFFFFF"}, "instance": [{"name": "Negro", "code": "arg-negro", "description": "Elementos b\u00e1sicos", "scope": "arg", "related_color": "900", "parent_group": "negro", "color": "#141414", "variant": [{"variant": "lighter", "color": "#F0F0F0", "name": "Negro muy claro", "code": "arg-negro-lighter"}, {"variant": "light", "color": "#DDDDDD", "name": "Gris", "code": "arg-negro-light"}], "alias": [{"code": "arg-negro", "exclude": false}, {"code": "negro", "exclude": true}, {"code": "black", "exclude": true}, {"code": "gray-base", "exclude": true}]}, {"name": "Default", "code": "arg-default", "description": "", "scope": "arg", "related_color": "300", "parent_group": "negro", "color": "#838383", "variant": [], "alias": [{"code": "arg-default", "exclude": false}, {"code": "default", "exclude": true}]}, {"name": "Gray light", "code": "arg-gray-light", "description": "", "scope": "arg", "related_color": "200", "parent_group": "negro", "color": "#DDDDDD", "variant": [], "alias": [{"code": "arg-gray-light", "exclude": false}, {"code": "gray-light", "exclude": true}]}, {"name": "Gray hover", "code": "arg-gray-hover", "description": "", "scope": "arg", "related_color": "100", "parent_group": "negro", "color": "#E9E9E9", "variant": [], "alias": [{"code": "arg-gray-hover", "exclude": false}, {"code": "gray-hover", "exclude": true}]}, {"name": "Gray hover light", "code": "arg-gray-hover-light", "description": "", "scope": "arg", "related_color": "50", "parent_group": "negro", "color": "#F0F0F0", "variant": [], "alias": [{"code": "arg-gray-hover-light", "exclude": false}, {"code": "gray-hover-light", "exclude": true}]}, {"name": "Gris intermedio", "code": "arg-gris-intermedio", "description": "", "scope": "arg", "related_color": "500", "parent_group": "negro", "color": "#555555", "variant": [], "alias": [{"code": "arg-gris-intermedio", "exclude": false}, {"code": "gray", "exclude": true}, {"code": "grisintermedio", "exclude": true}, {"code": "gris-area", "exclude": true}, {"code": "gris", "exclude": false}]}, {"name": "Gray dark", "code": "arg-gray-dark", "description": "", "scope": "arg", "related_color": "600", "parent_group": "negro", "color": "#444444", "variant": [], "alias": [{"code": "arg-gray-dark", "exclude": false}, {"code": "gray-dark", "exclude": true}]}, {"name": "Gray border", "code": "arg-gray-border", "description": "", "scope": "arg", "related_color": "150", "parent_group": "negro", "color": "#DEE2E6", "variant": [], "alias": [{"code": "arg-gray-border", "exclude": false}, {"code": "gray-border", "exclude": true}]}, {"name": "Gris niebla", "code": "arg-gris-niebla", "description": "", "scope": "arg", "related_color": "75", "parent_group": "negro", "color": "#F2F2F2", "variant": [], "alias": [{"code": "arg-gris-niebla", "exclude": false}, {"code": "gray-lighter", "exclude": true}]}, {"name": "Gray background", "code": "arg-gray-background", "description": "", "scope": "arg", "related_color": "25", "parent_group": "negro", "color": "#FFFFFF", "variant": [], "alias": [{"code": "arg-gray-background", "exclude": false}, {"code": "gray-background", "exclude": true}]}]}, {"scope": "arg", "name": "Turquesa", "group": "turquesa", "color": {"50": "#DCF1F0", "100": "#C0E5E3", "200": "#A4D9D7", "300": "#88CECB", "400": "#6CC3BE", "500": "#50B7B2", "600": "#459E99", "700": "#3B8681", "800": "#306D69", "900": "#255450"}, "instance": [{"name": "Palta", "code": "arg-palta", "description": "", "scope": "arg", "related_color": "500", "parent_group": "turquesa", "color": "#50B7B2", "variant": [{"variant": "half", "color": "#A8DBD9", "name": "Palta medio tono", "code": "arg-palta-half"}, {"variant": "lighter", "color": "#C0E5E3", "name": "Palta muy claro", "code": "arg-palta-lighter"}], "alias": [{"code": "arg-palta", "exclude": false}, {"code": "palta", "exclude": true}]}, {"name": "Verde azulado", "code": "arg-verde-azulado", "description": "", "scope": "arg", "related_color": "700", "parent_group": "turquesa", "color": "#3B8681", "variant": [], "alias": [{"code": "arg-verde-azulado", "exclude": false}, {"code": "verde-azulado", "exclude": true}, {"code": "verdeazulado", "exclude": true}]}, {"name": "Eucalipto", "code": "arg-eucalipto", "description": "", "scope": "arg", "related_color": "800", "parent_group": "turquesa", "color": "#306D69", "variant": [{"variant": "lighter", "color": "#A4D9D7", "name": "Eucalipto muy claro", "code": "arg-eucalipto-lighter"}, {"variant": "dark", "color": "#255450", "name": "Eucalipto oscuro", "code": "arg-eucalipto-dark"}], "alias": [{"code": "arg-eucalipto", "exclude": false}]}]}, {"scope": "arg", "name": "Azul", "group": "azul", "color": {"50": "#CDEBFA", "100": "#9AD7F5", "200": "#68C3EF", "300": "#35AFEA", "400": "#039BE5", "500": "#0581C6", "600": "#0767A7", "700": "#084E87", "800": "#0A3468", "900": "#0C1A49"}, "instance": [{"name": "Cielo", "code": "arg-cielo", "description": "", "scope": "arg", "related_color": "400", "parent_group": "azul", "color": "#039BE5", "variant": [], "alias": [{"code": "arg-cielo", "exclude": false}, {"code": "cielo", "exclude": true}, {"code": "celeste", "exclude": true}]}, {"name": "Escarapela", "code": "arg-escarapela", "description": "", "scope": "arg", "related_color": "200", "parent_group": "azul", "color": "#68C3EF", "variant": [], "alias": [{"code": "arg-escarapela", "exclude": false}, {"code": "escarapela", "exclude": true}, {"code": "celesteargentina", "exclude": true}, {"code": "celeste-argentina", "exclude": false}]}]}, {"scope": "arg", "name": "Rojo", "group": "rojo", "color": {"50": "#FCDDDC", "100": "#F9BBB9", "200": "#F69896", "300": "#F27673", "400": "#EF5350", "500": "#E14543", "600": "#D43635", "700": "#C62828", "800": "#A12222", "900": "#7C1C1C"}, "instance": [{"name": "Rojo", "code": "arg-rojo", "description": "Atenci\u00f3n o peligro", "scope": "arg", "related_color": "700", "parent_group": "rojo", "color": "#C62828", "variant": [{"variant": "light", "color": "#E14543", "name": "Rojo claro", "code": "arg-rojo-light"}, {"variant": "dark", "color": "#7C1C1C", "name": "Rojo oscuro", "code": "arg-rojo-dark"}, {"variant": "lighter", "color": "#FCDDDC", "name": "Rojo muy claro", "code": "arg-rojo-lighter"}], "alias": [{"code": "arg-rojo", "exclude": false}, {"code": "danger", "exclude": true}, {"code": "rojo", "exclude": true}]}, {"name": "Tomate", "code": "arg-tomate", "description": "", "scope": "arg", "related_color": "400", "parent_group": "rojo", "color": "#EF5350", "variant": [{"variant": "light", "color": "#F69896", "name": "Tomate claro", "code": "arg-tomate-light"}, {"variant": "dark", "color": "#C62828", "name": "Tomate oscuro", "code": "arg-tomate-dark"}], "alias": [{"code": "arg-tomate", "exclude": false}, {"code": "complementary", "exclude": true}, {"code": "tomate", "exclude": true}]}]}, {"scope": "arg", "name": "Naranja", "group": "naranja", "color": {"50": "#FDE7BF", "100": "#FBCE80", "200": "#F9B640", "300": "#F79D00", "400": "#F38500", "500": "#EF6C00", "600": "#CE5701", "700": "#AE4203", "800": "#8D2D04", "900": "#6C1805"}, "instance": [{"name": "Marr\u00f3n claro", "code": "arg-marron-claro", "description": "", "scope": "arg", "related_color": "800", "parent_group": "naranja", "color": "#8D2D04", "variant": [{"variant": "light", "color": "#CE5701", "name": "Marr\u00f3n claro claro", "code": "arg-marron-claro-light"}, {"variant": "dark", "color": "#6C1805", "name": "Marr\u00f3n claro oscuro", "code": "arg-marron-claro-dark"}], "alias": [{"code": "arg-marron-claro", "exclude": false}, {"code": "marron-claro", "exclude": true}]}, {"name": "Naranja", "code": "arg-naranja", "description": "", "scope": "arg", "related_color": "500", "parent_group": "naranja", "color": "#EF6C00", "variant": [{"variant": "light", "color": "#EF6C00", "name": "Naranja claro", "code": "arg-naranja-light"}, {"variant": "dark", "color": "#6C1805", "name": "Naranja oscuro", "code": "arg-naranja-dark"}], "alias": [{"code": "arg-naranja", "exclude": false}, {"code": "naranjaoscuro", "exclude": true}, {"code": "naranja", "exclude": true}]}, {"name": "Mandarina", "code": "arg-mandarina", "description": "", "scope": "arg", "related_color": "300", "parent_group": "naranja", "color": "#F79D00", "variant": [{"variant": "light", "color": "#FBCE80", "name": "Mandarina claro", "code": "arg-mandarina-light"}, {"variant": "dark", "color": "#CE5701", "name": "Mandarina oscuro", "code": "arg-mandarina-dark"}], "alias": [{"code": "arg-mandarina", "exclude": false}, {"code": "mandarina", "exclude": true}]}]}, {"scope": "arg", "name": "Blanco", "group": "blanco", "color": {"150": "#FFFFFF"}, "instance": [{"name": "Blanco", "code": "arg-white", "description": "", "scope": "arg", "related_color": "150", "parent_group": "blanco", "color": "#FFFFFF", "variant": [], "alias": [{"code": "arg-white", "exclude": false}, {"code": "white", "exclude": true}]}]}, {"scope": "arg", "name": "Ocre", "group": "ocre", "color": {"50": "#FAF8ED", "100": "#F4F0DB", "200": "#EAE1B7", "300": "#E9CE8C", "400": "#E7BA61", "500": "#C98941", "600": "#AA5821", "700": "#8C2701", "800": "#6F2001", "900": "#511901"}, "instance": [{"name": "Arena", "code": "arg-arena", "description": "", "scope": "arg", "related_color": "200", "parent_group": "ocre", "color": "#EAE1B7", "variant": [{"variant": "light", "color": "#FAF8ED", "name": "Arena claro", "code": "arg-arena-light"}, {"variant": "dark", "color": "#E7BA61", "name": "Arena oscuro", "code": "arg-arena-dark"}, {"variant": "half", "color": "#F5F0DB", "name": "Arena medio tono", "code": "arg-arena-half"}], "alias": [{"code": "arg-arena", "exclude": false}]}, {"name": "Amarillo", "code": "arg-amarillo", "description": "Foco o alerta", "scope": "arg", "related_color": "400", "parent_group": "ocre", "color": "#E7BA61", "variant": [{"variant": "light", "color": "#EAE1B7", "name": "Amarillo claro", "code": "arg-amarillo-light"}, {"variant": "dark", "color": "#AA5821", "name": "Amarillo oscuro", "code": "arg-amarillo-dark"}, {"variant": "half", "color": "#F3DDB0", "name": "Amarillo medio tono", "code": "arg-amarillo-half"}], "alias": [{"code": "arg-amarillo", "exclude": false}, {"code": "warning", "exclude": true}, {"code": "amarillo", "exclude": true}, {"code": "amarillo-intenso", "exclude": true}]}, {"name": "Marr\u00f3n oscuro", "code": "arg-marron-oscuro", "description": "", "scope": "arg", "related_color": "900", "parent_group": "ocre", "color": "#511901", "variant": [], "alias": [{"code": "arg-marron-oscuro", "exclude": false}]}]}, {"scope": "arg", "name": "Morado", "group": "morado", "color": {"150": "#3A3796"}, "instance": [{"name": "Azul morado", "code": "arg-azul-morado", "description": "", "scope": "arg", "related_color": "150", "parent_group": "morado", "color": "#3A3796", "variant": [], "alias": [{"code": "arg-azul-morado", "exclude": false}]}]}]}, {"name": "MiArgentina", "space": "miarg", "hidden_space": false, "description": "", "data": [{"scope": "miarg", "name": "Azul MiArgentina", "group": "azul", "color": {"150": "#3526C3"}, "instance": [{"name": "Azul MiArgentina", "code": "miarg-azul", "description": "Azul principal para aplicaciones MiArgentina", "scope": "miarg", "related_color": "150", "parent_group": "azul", "color": "#3526C3", "variant": [{"variant": "half", "color": "#6B66CC", "name": "Azul MiArgentina medio tono", "code": "miarg-azul-half"}], "alias": [{"code": "miarg-azul", "exclude": false}]}]}, {"scope": "miarg", "name": "Celeste MiArgentina", "group": "celeste", "color": {"150": "#2CB9EE"}, "instance": [{"name": "Celeste MiArgentina", "code": "miarg-celeste", "description": "", "scope": "miarg", "related_color": "150", "parent_group": "celeste", "color": "#2CB9EE", "variant": [], "alias": [{"code": "miarg-celeste", "exclude": false}]}]}, {"scope": "miarg", "name": "Amarillo claro MiArgentina", "group": "amarillo-claro", "color": {"150": "#ffe9b8"}, "instance": [{"name": "Amarillo claro MiArgentina", "code": "miarg-amarillo-claro", "description": "", "scope": "miarg", "related_color": "150", "parent_group": "amarillo-claro", "color": "#ffe9b8", "variant": [], "alias": [{"code": "miarg-amarillo-claro", "exclude": false}]}]}, {"scope": "miarg", "name": "Rosa claro MiArgentina", "group": "rosa-claro", "color": {"150": "#EECCCF"}, "instance": [{"name": "Rosa claro MiArgentina", "code": "miarg-rosa-claro", "description": "", "scope": "miarg", "related_color": "150", "parent_group": "rosa-claro", "color": "#EECCCF", "variant": [], "alias": [{"code": "miarg-rosa-claro", "exclude": false}]}]}, {"scope": "miarg", "name": "Verde claro MiArgentina", "group": "verde-claro", "color": {"150": "#CFEEDC"}, "instance": [{"name": "Verde claro MiArgentina", "code": "miarg-verde-claro", "description": "", "scope": "miarg", "related_color": "150", "parent_group": "verde-claro", "color": "#CFEEDC", "variant": [], "alias": [{"code": "miarg-verde-claro", "exclude": false}]}]}, {"scope": "miarg", "name": "Azul oscuro MiArgentina", "group": "azul-oscuro", "color": {"150": "#222C50"}, "instance": [{"name": "Azul oscuro MiArgentina", "code": "miarg-oscuro", "description": "", "scope": "miarg", "related_color": "150", "parent_group": "azul-oscuro", "color": "#222C50", "variant": [], "alias": [{"code": "miarg-oscuro", "exclude": false}]}]}, {"scope": "miarg", "name": "Gris MiArgentina", "group": "gris", "color": {"150": "#7E848E"}, "instance": [{"name": "Gris MiArgentina", "code": "miarg-gris", "description": "", "scope": "miarg", "related_color": "150", "parent_group": "gris", "color": "#7E848E", "variant": [], "alias": [{"code": "miarg-gris", "exclude": false}]}]}, {"scope": "miarg", "name": "Celeste claro MiArgentina", "group": "celeste-claro", "color": {"150": "#BEE6F6"}, "instance": [{"name": "Celeste claro MiArgentina", "code": "miarg-celeste-claro", "description": "", "scope": "miarg", "related_color": "150", "parent_group": "celeste-claro", "color": "#BEE6F6", "variant": [], "alias": [{"code": "miarg-celeste-claro", "exclude": false}]}]}]}, {"name": "Colores de la bandera de la Rep\u00fablica Argentina", "space": "bandera", "hidden_space": false, "description": "De acuerdo al <a href=\"https://www.argentina.gob.ar/normativa/nacional/decreto-1650-2010-175328\">Decreto  1650/2010</a>, que establece las medidas, caracter\u00edsticas de la tela, colores y accesorios de la Bandera Argentina.", "data": [{"scope": "bandera", "name": "Amarillo", "group": "amarillo", "color": {"150": "#FCBF49"}, "instance": [{"name": "Amarillo Bandera", "code": "bandera-amarillo", "description": "Color amarillo oficial para la bandera Argentina", "scope": "bandera", "related_color": "150", "parent_group": "amarillo", "color": "#FCBF49", "variant": [], "alias": [{"code": "bandera-amarillo", "exclude": false}]}]}, {"scope": "bandera", "name": "Celeste", "group": "celeste", "color": {"150": "#75AADB"}, "instance": [{"name": "Celeste Bandera", "code": "bandera-celeste", "description": "Color celeste oficial para la bandera Argentina", "scope": "bandera", "related_color": "150", "parent_group": "celeste", "color": "#75AADB", "variant": [], "alias": [{"code": "bandera-celeste", "exclude": false}]}]}, {"scope": "bandera", "name": "Marr\u00f3n", "group": "marron", "color": {"150": "#843511"}, "instance": [{"name": "Marr\u00f3n Bandera", "code": "bandera-marron", "description": "Color marr\u00f3n oficial para la bandera Argentina", "scope": "bandera", "related_color": "150", "parent_group": "marron", "color": "#843511", "variant": [], "alias": [{"code": "bandera-marron", "exclude": false}]}]}]}, {"name": "Gendarmer\u00eda Nacional", "space": "gna", "hidden_space": false, "description": "", "data": [{"scope": "gna", "name": "Verde jade", "group": "verde-jade", "color": {"150": "#006666"}, "instance": [{"name": "Verde oscuro Gendarmer\u00eda", "code": "gna-verde-jade", "description": "", "scope": "gna", "related_color": "150", "parent_group": "verde-jade", "color": "#006666", "variant": [], "alias": [{"code": "gna-verde-jade", "exclude": false}, {"code": "verde-jade", "exclude": true}, {"code": "verdejade", "exclude": true}]}]}, {"scope": "gna", "name": "Verde aloe", "group": "verde-aloe", "color": {"150": "#4FBB73"}, "instance": [{"name": "Verde claro Gendarmer\u00eda", "code": "gna-verde-aloe", "description": "", "scope": "gna", "related_color": "150", "parent_group": "verde-aloe", "color": "#4FBB73", "variant": [], "alias": [{"code": "gna-verde-aloe", "exclude": false}, {"code": "verde-aloe", "exclude": true}]}]}, {"scope": "gna", "name": "Verde cemento", "group": "verde-cemento", "color": {"150": "#B4BEBA"}, "instance": [{"name": "Gris Gendarmer\u00eda", "code": "gna-verde-cemento", "description": "", "scope": "gna", "related_color": "150", "parent_group": "verde-cemento", "color": "#B4BEBA", "variant": [], "alias": [{"code": "gna-verde-cemento", "exclude": false}, {"code": "verde-cemento", "exclude": true}, {"code": "verdecemento", "exclude": true}]}]}]}];
+
+if (typeof exports !== "undefined") {
+    module.exports = {
+        ponchoColorDefinitionsList,
+    };
+}
+
+
+/**
+ * Configuración de colores www.argentina.gob.ar
+ *
+ * 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 Color { //jslint-ignore-line
+    constructor(colorDefinitions){
+        if(!this.isValidColorDefinitionList(colorDefinitions)){
+            console.error("No se pasado por argumento el listado de color");
+            return;
+        }
+        this.definitions = colorDefinitions;
+    }
+
+
+    /**
+     * Remueve acentos y caracteres especiales.
+     *
+     * @param {string} data Cadena de texto a limpiar.
+     * @example
+     * // returns Accion Murcielago arbol nino
+     * removeAccents("Acción Murciélago árbol niño")
+     * @returns {string} Cadena de texto sin acentos.
+     */
+    replaceSpecialChars = (data) => {
+        if(typeof data !== "string" || data.trim().length === 0){
+            console.warn("replaceSpecialChars: Debe pasar una cadena de texto.");
+            return "";
+        }
+
+        const search = "àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìıİłḿñńǹňôöòóœøōõőṕ"
+                + "ŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż";
+        const replace = "aaaaaaaaaacccddeeeeeeeegghiiiiiiiilmnnnnooooooooop"
+                + "rrsssssttuuuuuuuuuwxyyzzz";
+
+        const a = search + search.toUpperCase();
+        const b = replace + replace.toUpperCase();
+        const p = new RegExp(a.split("").join("|"), "g");
+        return data.toString().replace(p, c => b.charAt(a.indexOf(c)));
+    };
+
+
+    /**
+     *
+     * @param {array} definitions
+     * @returns {boolean}
+     */
+    isValidColorDefinitionList(definitions){
+        return (
+            Array.isArray(definitions) &&
+            definitions.length > 0 &&
+            definitions[0].hasOwnProperty('space')
+        );
+    }
+
+
+    /**
+     * Listado de colores
+     * @returns {object}
+     */
+    get list(){
+        let result = this.definitions
+        .flatMap( m => m.data.flatMap(i => i.instance.map(x => x)) );
+
+        return result || [];
+    }
+
+
+    /**
+     * Buscador de colores.
+     *
+     * @param {string} value Color a buscar.
+     * @returns {object}
+     */
+    findColor = value => {
+        if(typeof value !== "string" || value.trim().length === 0){
+            console.error(
+                "findColor:",
+                "El valor a buscar debe ser una cadena de texto.");
+            return [];
+        }
+        let searchTerm = value.toLowerCase();
+        let searchList = [
+            ...this.variables.map(([code, color]) => [code, color]),
+            ...this.colors];
+
+        let searchResults = searchList.filter( function(item){
+            if( item[0].includes( searchTerm ) ){
+                return item;
+            }
+        }).map(([code, color]) => [code, color]);
+
+        return searchResults;
+    }
+
+
+    /**
+     *
+     * @param {*} colorDefinitions
+     * @returns
+     */
+    get variables(){
+        let collect = [];
+
+        this.list.flatMap(m => {
+            const {alias, color, description, code, variant=[], name} = m;
+
+            alias.forEach(function(a){
+                collect.push( [a.code, color, description, code, name] );
+
+                variant.forEach(function(value){
+                    if(!a.exclude){
+                        collect.push( [`${a.code}-${value.variant}`, value.color, "", code, value.name] );
+                    }
+                });
+            })
+        });
+        return collect.sort();
+    };
+
+
+    get spaces(){
+        return this.definitions.map(m => m.space).sort();
+    }
+
+
+    groupsBySpace = space => {
+        if (typeof space !== 'string') {
+            throw new TypeError('groupsBySpace: El argumetno debe ser un string');
+        }
+        const spaceToLower = space.toLocaleLowerCase();
+        const data = this.definitions
+            .find(f => f.space == spaceToLower)?.data?.map(m => m.group);
+
+        const result = data ? data.sort() : [];
+        return result;
+    }
+
+
+    /**
+     * Colores poncho a hexa
+     *
+     * @see https://argob.github.io/poncho/identidad/colores/
+     * @param {string} color Nombre de color Poncho.
+     * @example
+     * // returns "#2897d4"
+     * getColor("celeste")
+     * @returns {string} Color en formato hexadecimal.
+     */
+    ponchoColor = color => {
+        const defaultColor = "#999999";
+        const self = this;
+
+        if (typeof color !== "string") {
+            console.warn(
+                `Invalid color provided. Using default: ${defaultColor}`
+            );
+            return defaultColor;
+        }
+
+        const searchTerm = self.replaceSpecialChars(color).toLowerCase();
+
+        const definition = (this.variables.find(v => v[0] === searchTerm) ||
+            this.colors.find(c => c[0] === searchTerm));
+
+        return (definition ? definition[1] : defaultColor);
+    };
+
+
+    /**
+     * Listado de colores 
+     * @returns 
+     */
+    get colors(){
+        const colorList = this.definitions
+            .map(space => space.data)
+            .flatMap(function(spaceGroups){
+
+                return spaceGroups.flatMap(function(groupColor){
+                    const {color, group, scope} = groupColor;
+                    return Object.entries(color).map(function(colorValues){
+                        const [label, value] = colorValues;
+                        return [`${scope}-${group}-${label}`, value]
+                    });
+                });
+        });
+
+        return colorList || [];
+    }
+
+
+    /**
+     * Definición por color
+     *
+     * @see colorDefinitionsList
+     * @param {string} color Nombre del cólor a buscar.
+     * @returns {string|boolean}
+     */
+    colorDefinitions = (ponchoColor) => {
+        if(typeof ponchoColor == undefined || !ponchoColor.trim()){
+            return;
+        }
+
+        const lowerCasePonchoColor = this.replaceSpecialChars(ponchoColor).toLowerCase();
+        let result;
+        let gSpace = "";
+
+        // Iteración por espacios (space)
+        for(let i = 0; i <= this.definitions.length - 1; i += 1){
+            const {data, space} = this.definitions[i];
+            gSpace = space;
+
+            // Itero por cada grupo de color dentro de data
+            for(let y = 0; y <= data.length - 1; y += 1) {
+                const {instance} = data[y];
+
+                // Itero sobre las instancias de color
+                for(let x = 0; x <= instance.length - 1; x += 1) {
+                    const {alias, variant} = instance[x];
+                    debugger
+                    if ( alias.some(s => s.code == lowerCasePonchoColor) ) {
+                        result = instance[x];
+                        break;
+                    }
+                    else if( variant.some(s => s.code == lowerCasePonchoColor) ){
+                        result = instance[x];
+                        break;
+                    }
+                }
+                if (result) break;
+            }
+        }
+
+        return result;
+    };
+
+
+    /**
+     * Grupo de color
+     * @param {string} name Nombre del grupo
+     * @returns
+     */
+    colorGroup = (themeSpace, spaceGroup) => {
+        if(typeof spaceGroup == undefined || !spaceGroup?.trim()){
+            return;
+        }
+
+        let result;
+        for(let i = 0; i <= this.definitions.length -1; i += 1){
+            const {data, space} = this.definitions[i];
+            result = data.find(obj => (obj.group==spaceGroup && space==themeSpace));
+            if (result) break;
+        }
+        return result;
+    };
+
+
+    /**
+     * Espacio de color
+     * @param {string} name Nombre del espacio
+     * @returns
+     */
+    colorSpace = (space) => {
+        if(typeof space == undefined || !space?.trim()){
+            return;
+        }
+
+        return this.definitions.find(obj => obj.space==space);
+    };
+
+
+    /**
+     * Retorna el código de color poncho por hexadecimal.
+     * @param {string} value Valor hexadecimal a buscar
+     * @see colorDefinitionsList
+     * @example
+     * // {
+     * //    "description": "",
+     * //    "name": "Mandarina",
+     * //    "color": "#f79525",
+     * //    "code": "mandarina",
+     * //    "alias": [
+     * //        "mandarina"
+     * //    ]
+     * // }
+     * findByHex("#f79525");
+     * @returns {object} Objecto con la defición del color
+     */
+    colorByHex = (hexColor) => {
+        if(!this.isValidHex(hexColor)){
+            return;
+        }
+
+        var result = [];
+        const targetColor = this.cleanHex(hexColor);
+
+        for(let i = 0; i <= this.definitions.length -1; i += 1){
+            let {data} = this.definitions[i];
+
+            for(let entry of data){
+                const {instance} = entry;
+                for(let item of instance){
+                    const {color} = item;
+                    if( this.cleanHex(color) == targetColor ){
+                        result.push(item);
+                    }
+                }
+            }
+        }
+        return result;
+    };
+
+
+    /**
+     * Hace un refactor del número hexa
+     *
+     * @param {string} value Valor hexadecimal
+     * @returns {string}
+     */
+    cleanHex = value => {
+        let hex = value
+            .toString()
+            .replace("#", "")
+            .trim()
+            .toUpperCase();
+
+        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}`;
+    };
+
+
+    /**
+     * Valida un color hexadecimal
+     * @param {string} hexColor Color hexadecimal
+     * @returns {boolean}
+     */
+    isValidHex = (hexColor) => {
+        if (hexColor === null || hexColor === undefined) {
+            return false;
+        }
+
+        if (typeof hexColor !== 'string') {
+            return false;
+        }
+
+        const regx = new RegExp(/^#?([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})$/);
+        if (!regx.test(hexColor)) {
+            console.warn("Invalid hex color format:", hexColor);
+            return false;
+        }
+        return true;
+    };
+
+
+    /**
+     * Converson de HEX a RGB.
+     * @param {string} hexColor Color hexadecimal
+     * @returns {object}
+     */
+    hexToRgb = hexColor => {
+        if (!this.isValidHex(hexColor)) {
+            return;
+        }
+
+        const hex = this.cleanHex(hexColor);
+        const cleanedHex = (hex.startsWith("#") ? hex.slice(1) : hex);
+
+        const red = parseInt(cleanedHex.slice(0, 2), 16);
+        const green = parseInt(cleanedHex.slice(2, 4), 16);
+        const blue = parseInt(cleanedHex.slice(4, 6), 16);
+
+        return [red, green, blue];
+    }
+
+
+    /**
+     * Imprime el nombre de un color
+     * 
+     * @param  {array} args Array list [arg, arg, arg]
+     * @param  {array} options object Objeto con opciones para los switch.
+     * @example
+     * // maíz - azul a verde
+     * colorName(
+     *     ["arg-maiz", "arg-azul", "arg-verde"], 
+     *     {
+     *         switchLastConnector: {'i': "a", "o": "a"}, 
+     *         defaultLastConnector: "a", 
+     *         listConnector: " - "
+     *     }
+     * )
+     * @returns {string}
+     */
+    colorName = (args, options={}) => {
+        if(typeof args == "undefined"){
+            return
+        }
+
+        if(args.length < 1){
+            console.error("Error.", "Debe pasar al menos un argumento.");
+            return;
+        }
+
+        if(typeof args == "string"){
+            args = [args];
+        }
+
+        if(!args.every(e => typeof e === "string")){
+            console.error("Error.", "Solo se admiten cadenas de texto");
+            return;
+        }
+
+        // Options
+        const defaultConnectorSwitch = {"i": "e", "o": "u"};
+        const defaultConnector = "y";
+        const defaultListConnector = ", ";
+
+        const optionConnectorSwitch = (typeof options == "object" && 
+            options.hasOwnProperty('switchLastConnector') ? 
+            options.switchLastConnector : defaultConnectorSwitch);
+        const optionDefaultConnector = (typeof options == "object" && 
+            options.hasOwnProperty('defaultLastConnector') ? 
+            options.defaultLastConnector : defaultConnector);
+        const optionDefaultListConnector = (typeof options == "object" && 
+            options.hasOwnProperty('listConnector') ? 
+            options.listConnector : defaultListConnector);
+
+
+        const getColorName = (arg) => {
+            const result = this.variables.find(f => (f[0] == arg)); 
+            return typeof result != "undefined" ? result[4] : arg;
+        };
+
+        if (args.length === 1) {
+            return getColorName(args.join(""));
+        }
+
+        const totalArgs = args.length;
+        const lastArg = args.pop(totalArgs - 1);
+        const firstCharName = Array.from( getColorName(lastArg) )[0].toLowerCase();
+        const connector = (optionConnectorSwitch[firstCharName] || 
+                optionDefaultConnector);
+    
+        const result = `${args.map(m => getColorName(m)).join(optionDefaultListConnector)} ${connector}` 
+                + ` ${getColorName(lastArg)}`; 
+    
+        return result.toLowerCase();
+    };
+}
+
+
+if (typeof exports !== "undefined") {
+    module.exports = {Color};
+}
+
+/**
+ * Configuración de colores www.argentina.gob.ar
+ * 
+ * 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.
+ */
+
+/**
+ * Códigos de color válidos para utilizar en ilustraciones. 
+ */
+const illustrationColors = [
+    "arg-azul",
+    "arg-arena",
+    "arg-amarillo",
+    "arg-palta",
+    "arg-verde",
+    "arg-arandano",
+    "arg-rosado",
+    "miarg-azul",
+];
+
+const headersBackground = {
+    solid: [
+        "bg-arg-azul",
+        "bg-arg-rojo",
+        "bg-arg-info",
+        "bg-arg-eucalipto",
+        "bg-arg-palta",
+        "bg-arg-arandano",
+        "bg-arg-negro-light"
+    ],
+    mixed: [
+        "bg-mix-azul-info",
+        "bg-mix-info-azul",
+        "bg-mix-palta-azul",
+        "bg-mix-azul-palta"
+    ]
+};
+
+/**
+ * Variaciones de color
+ */
+const colorVariations = {
+    high: [
+        'arg-azul', 'arg-eucalipto', 'arg-verde', 'arg-naranja', 'arg-rojo', 
+        'arg-arandano', 'arg-uva', 'arg-cielo', 'arg-palta', 'arg-verdin', 
+        'arg-amarillo', 'arg-tomate', 'arg-fucsia', 'arg-lavanda', 'arg-negro'
+    ],
+    medium: [
+        "arg-info","arg-verde-azulado","arg-verdin","arg-amarillo","arg-tomate",
+        "arg-fucsia","arg-lavanda","arg-palta","arg-lima","arg-maiz",
+        "arg-gris-intermedio"
+    ]
+};
+
+
+// @legacy Creo ponchoColor y color como una variable global.
+var ponchoColor;
+var color;
+if (typeof Color !== 'undefined') {
+    color = new Color(ponchoColorDefinitionsList);
+    ponchoColor = color.ponchoColor;
+}
+
+
+if (typeof exports !== "undefined") {
+    module.exports = {
+        colorVariations, illustrationColors, headersBackground, color
+    };
+}
+
+/**
+ * Fetch data
+ * 
+ * @example
+ * ```js
+ * (async() => {
+ *     const data = await fetch_json("https://som.url.com");
+ * });
+ * ```
+ */
+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}`);
+    }
+    return await response.json();
+};
+
+/**
+ * Remueve acentos y caracteres especiales.
+ * 
+ * @param {string} data Cadena de texto a limpiar. 
+ * @example
+ * // returns Accion Murcielago arbol nino
+ * removeAccents("Acción Murciélago árbol niño")
+ * @returns {string} Cadena de texto sin acentos.
+ */
+const replaceSpecialChars = (data) => {
+    if(typeof data !== "string" || data.trim().length === 0){
+        console.warn("replaceSpecialChars: Debe pasar una cadena de texto.");
+        return "";
+    }
+
+    const search = "àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìıİłḿñńǹňôöòóœøōõőṕ"
+            + "ŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż";
+    const replace = "aaaaaaaaaacccddeeeeeeeegghiiiiiiiilmnnnnooooooooop"
+            + "rrsssssttuuuuuuuuuwxyyzzz";
+
+    const a = search + search.toUpperCase();
+    const b = replace + replace.toUpperCase();
+    const p = new RegExp(a.split("").join("|"), "g");  
+    return data.toString().replace(p, c => b.charAt(a.indexOf(c)));
+};
+
+
+/**
+ * Slugify
+ * 
+ * @param {string} string Cadena de texto a convertir.
+ * @example
+ * // returns el-murcielago-remolon-parece-un-nino
+ * slugify("El murciélago remolón parece un niño")
+ * @returns {string} Cadena de texto en formato slug.
+ */
+const slugify = (str) =>{
+    if(typeof str !== "string" || str.trim().length === 0){
+        console.warn("slugify: Debe pasar una cadena de texto.");
+        return str;
+    }
+    const a = "àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìıİłḿñńǹňôöòóœøōõőṕ"
+                + "ŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;";
+    const b = "aaaaaaaaaacccddeeeeeeeegghiiiiiiiilmnnnnooooooooop"
+                + "rrsssssttuuuuuuuuuwxyyzzz------";
+    const p = new RegExp(a.split("").join("|"), "g");
+
+    return str.toString().toLowerCase()
+        .replace(/\s+/g, "-")
+        .replace(p, c => b.charAt(a.indexOf(c)))
+        .replace(/&/g, "-and-")
+        .replace(/[^\w\-]+/g, "")
+        .replace(/\-\-+/g, "-")
+        .replace(/^-+/, "")
+        .replace(/-+$/, "");
+};
+
+
+/**
+ * Palabras en title-case.
+ * @param {string} str Cadena a transformar
+ * @param {boolean} allWords True title-case a todas las palabras
+ * @returns {string}
+ */
+const toTitleCase = (str, allWords=true) => {
+    if(typeof str !== "string" || str.trim().length === 0){
+        console.warn("[toTitleCase] Debe ingresar una cadena de texto.");
+        return str;
+    }
+    const titleCase = w => w[0].toUpperCase() + w.substring(1).toLowerCase();
+    str = str.replace(/(^\s+|\s+$)/g, "");
+    
+    if(!allWords){
+        return titleCase(str);
+    }
+    const words = str.split(/\s+/);
+    return words.map(w => titleCase(w)).join(" ");
+}
+
+
+if (typeof exports !== "undefined") {
+    module.exports = {slugify, replaceSpecialChars, toTitleCase};
+}
+
+/**
+ * HTML utilities
+ * 
+ * @summary Validadores y herramientas para manipulación de código HTML.
+ * 
+ * ADVERTENCIA
+ * 
+ * Estas funciones JavaScript no fueron realizadas con el propósito de 
+ * proporcionar seguridad contra ataques externos en aplicaciones. Para 
+ * proteger aplicaciones web construidas con JavaScript, es crucial 
+ * implementar medidas de seguridad adicionales como validación de datos en 
+ * el lado del servidor, protección contra inyección de código (XSS) y el 
+ * uso de bibliotecas y frameworks que promuevan prácticas de 
+ * seguridad sólidas.
+ * 
+ * Si no está seguro de cómo utilizarla y los posibles riesgos que corre al 
+ * exponerla en su sitio web, tome el recaudo de asesorarse con 
+ * un especialista.
+ * 
+ * 
+ * 
+ * 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.
+ */
+
+
+/**
+ * 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(typeof str !== "string" || str.trim().length === 0){
+        console.error("secureHTML:", "Solo admite cadenas de texto.");
+        return str;
+    }
+
+    if(!Array.isArray(exclude)){
+        console.error(
+            "secureHTML:", "El segundo argumento debe ser un Array.");
+        return;
+    }
+
+    if(exclude.some(e => e === "*")){
+        return str;
+    }
+
+    let replaceString = str.toString()
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&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};
+}
+
+
+/**
+ * HEAD STYLE
+ * 
+ * @summary Permite agregar definiciones css dentro del head.
+ * 
+ * @author Agustín Bouillet <bouilleta@jefatura.gob.ar>
+ * @param {string} id Nombre único para identificar las asignaciones css
+ * @param {string} styleDefinitions Definiciones CSS
+ * @param {string} mediaType Definición para media query
+ * @example
+ * //<style id="custom-id">div {border: 2px solid red}</div>
+ * headStyle("custom-id", `div { border: 2px solid red}`);
+ * 
+ * //<style id="custom-id" media="all and (max-width: 500px)">
+ * //    div {border: 2px solid red}
+ * //</div>
+ * headStyle(
+ *     "custom-id", 
+ *     `div { border: 2px solid red}`,
+ *     "all and (max-width: 500px)"
+ * );
+ * @returns {undefined}
+ * 
+ * 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 ponchoColorDefinitionsList = [
-    {
-        description: "",
-        name: "Azul",
-        color: "#0072BB",
-        code: "primary",
-        alias: [
-            "azul",
-            "primary"
-        ]
-    },
-    {
-        description: "Acción principal o exitosa",
-        name: "Verde",
-        color: "#2E7D33",
-        code: "success",
-        alias: [
-            "verde",
-            "success"
-        ]
-    },
-    {
-        description: "Atención o peligro",
-        name: "Rojo",
-        color: "#C62828",
-        code: "danger",
-        alias: [
-            "rojo",
-            "danger"
-        ]
-    },
-    {
-        description: "Foco o alerta",
-        name: "Amarillo",
-        color: "#F9A822",
-        code: "warning",
-        alias: [
-            "amarillo",
-            "warning"
-        ]
-    },
-    {
-        description: "",
-        name: "Celeste",
-        color: "#2897D4",
-        code: "info",
-        alias: [
-            "celeste",
-            "info"
-        ]
-    },
-    {
-        description: "Elementos básicos",
-        name: "Negro",
-        color: "#333333",
-        code: "black",
-        alias: [
-            "negro",
-            "black"
-        ]
-    },
-    {
-        description: "Enlace visitado",
-        name: "Uva",
-        color: "#6A1B99",
-        code: "uva",
-        alias: [
-            "uva"
-        ]
-    },
-    {
-        description: "Texto secundario (subtitulos)",
-        name: "Gris",
-        color: "#525252",
-        code: "muted",
-        alias: [
-            "gris",
-            "muted"
-        ]
-    },
-    {
-        description: "Gris área",
-        name: "Gris intermedio",
-        color: "#F2F2F2",
-        code: "gray",
-        alias: [
-            "grisintermedio",
-            "gris-area",
-            "gray"
-        ]
-    },
-    {
-        description: "Fondo footer/header",
-        name: "Celeste Argentina",
-        color: "#37BBED",
-        code: "celeste-argentina",
-        alias: [
-            "celesteargentina",
-            "celeste-argentina"
-        ]
-    },
-    {
-        description: "",
-        name: "Fucsia",
-        color: "#EC407A",
-        code: "fucsia",
-        alias: [
-            "fucsia"
-        ]
-    },
-    {
-        description: "",
-        name: "Arándano",
-        color: "#C2185B",
-        code: "arandano",
-        alias: [
-            "arandano"
-        ]
-    },
-    {
-        description: "",
-        name: "Cielo",
-        color: "#039BE5",
-        code: "cielo",
-        alias: [
-            "cielo"
-        ]
-    },
-    {
-        description: "",
-        name: "Verdin",
-        color: "#6EA100",
-        code: "verdin",
-        alias: [
-            "verdin"
-        ]
-    },
-    {
-        description: "",
-        name: "Lima",
-        color: "#CDDC39",
-        code: "lima",
-        alias: [
-            "lima"
-        ]
-    },
-    {
-        description: "",
-        name: "Maiz",
-        color: "#FFCE00",
-        code: "maiz",
-        alias: [
-            "maiz",
-            "maíz"
-        ]
-    },
-    {
-        description: "",
-        name: "Tomate",
-        color: "#EF5350",
-        code: "tomate",
-        alias: [
-            "tomate"
-        ]
-    },
-    {
-        description: "",
-        name: "Naranja oscuro",
-        color: "#EF6C00",
-        code: "naranja",
-        alias: [
-            "naranjaoscuro",
-            "naranja"
-        ]
-    },
-    {
-        description: "",
-        name: "Verde azulado",
-        color: "#008388",
-        code: "verde-azulado",
-        alias: [
-            "verdeazulado",
-            "verde-azulado"
-        ]
-    },
-    {
-        description: "",
-        name: "Escarapela",
-        color: "#2CB9EE",
-        code: "escarapela",
-        alias: [
-            "escarapela"
-        ]
-    },
-    {
-        description: "",
-        name: "Lavanda",
-        color: "#9284BE",
-        code: "lavanda",
-        alias: [
-            "lavanda"
-        ]
-    },
-    {
-        description: "",
-        name: "Mandarina",
-        color: "#F79525",
-        code: "mandarina",
-        alias: [
-            "mandarina"
-        ]
-    },
-    {
-        description: "",
-        name: "Palta",
-        color: "#50B7B2",
-        code: "palta",
-        alias: [
-            "palta"
-        ]
-    },
-    {
-        description: "",
-        name: "Cereza",
-        color: "#ED3D8F",
-        code: "cereza",
-        alias: [
-            "cereza"
-        ]
-    },
-    {
-        description: "",
-        name: "Limón",
-        color: "#D7DF23",
-        code: "limon",
-        alias: [
-            "limon"
-        ]
-    },
-    {
-        description: "",
-        name: "Verde Jade",
-        color: "#006666",
-        code: "verde-jade",
-        alias: [
-            "verdejade",
-            "verde-jade"
-        ]
-    },
-    {
-        description: "",
-        name: "Verde Aloe",
-        color: "#4FBB73",
-        code: "verde-aloe",
-        alias: [
-            "verdealoe",
-            "verde-aloe"
-        ]
-    },
-    {
-        description: "",
-        name: "Verde Cemento",
-        color: "#B4BEBA",
-        code: "verde-cemento",
-        alias: [
-            "verdecemento",
-            "verde-cemento"
-        ]
+const headStyle = (id, styleDefinitions, mediaType) => {
+    if (typeof id !== "string" || id.trim() === "") {
+        console.warn("No se ha provisto un _id_ válido. Se usará: "
+            + "'argob-custom-css'.");
+        id = "argob-custom-css";
+    }
+
+    if (typeof styleDefinitions !== "string" || styleDefinitions.trim() == ""){
+        console.warn("No se ha provisto definición de estilos. "
+            + "Se pasa por alto la petición.");
+        return;
+    }
+
+    const styleExists = document.getElementById(id);
+    if (styleExists !== null) {
+        if (styleExists.textContent.trim() === styleDefinitions.trim()) {
+            console.warn("[addHeadStyle] Una definición de estilos "
+                + "con las mismas definiciones ya existe.");
+            return;
+            
+        } else {
+            styleExists.remove();
+            console.warn("[addHeadStyle] Un estilo con el mismo _id_ "
+                + "existe, pero tiene definiciones distintas. Se pisa.");
+        }
+    }
+
+    document.querySelectorAll("head").forEach(h => {
+        const tag = document.createElement("style");
+        tag.setAttribute("rel", "stylesheet");
+        tag.id = id;
+        if(typeof mediaType === "string" && mediaType.trim() !== ""){
+            tag.setAttribute("media", mediaType);
+        }
+
+        tag.textContent = styleDefinitions;
+
+        h.appendChild(tag);
+    });
+};
+
+
+/**
+ * Copia texto en el portapapeles (clipboard)
+ * 
+ * @param {string} selector Selector html, ej: .class o #id
+ * @param {function} callback Función de retorno.
+ * @returns {void}
+ */
+function copyToClipboard(selector, callback) {
+    if(typeof selector !== "string" || selector == ""){
+        return;
+    }
+
+    const copyText = document.querySelector(selector);
+    if(!copyText){
+        console.error("[copyToClipboard] No se puede encontrar el elemento.");
+        return;
+    }
+    const str = copyText.textContent;
+    navigator.clipboard.writeText(str)
+        .then(function(){
+            if(typeof callback === "function"){
+                callback(copyText);
+            }
+        }, function(){
+            console.error("[copyToClipboard] No se puede copiar el texto.");
+        });
+}
+
+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;
+}
+
+
+if (typeof exports !== "undefined") {
+    module.exports = {flattenObject, flattenNestedObjects};
+}
+
+/**
+ * 
+ */
+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;
     }
-];
 
 
-/**
- * Variaciones de color
- */
-const colorVariations = {
-    high: [
-        "primary","verde-jade","success","naranja","danger","arandano",
-        "uva","celeste-argentina","palta","verdin","warning","tomate",
-        "fucsia","lavanda","black"
-    ],
-    medium: [
-        "info","verde-azulado","verdin","warning","tomate","fucsia",
-        "lavanda","palta","lima","maiz","muted"
-    ]
-};
+    /**
+     * 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;
+    };
 
 
-/**
- * Definición por color
- * 
- * @see ponchoColorDefinitionsList
- * @param {string} color Nombre del cólor a buscar. 
- * @returns {string|boolean}
- */
-const ponchoColorDefinitions = color => {
-    const result = ponchoColorDefinitionsList.find(
-        f => f.alias.some(s => typeof color != undefined && s == color)
-    );
-    return result || false;
-};
+    /**
+     * 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");
 
 
-/**
- * Colores poncho a hexa
- * 
- * @see https://argob.github.io/poncho/identidad/colores/
- * @param {string} color Nombre de color Poncho.
- * @example
- * // returns "#2897d4"
- * getColor("celeste")
- * @returns {string} Color en formato hexadecimal.
- */
-const ponchoColor = color => ponchoColorDefinitions(color)?.color || color;
+    /**
+     * 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
+        }
+    }
 
-/**
- * Hace un refactor del número hexa
- * 
- * @param {string} value Valor hexadecimal 
- * @returns {string}
- */
-const cleanUpHex = value => {
-    let hex = value
-            .toString()
-            .replace("#", "")
-            .trim()
-            .toUpperCase();
 
-    if (hex.length < 3 || hex.length > 6){
-        return false;
-    } else if(hex.length == 3){
-        hex = Array.from(hex).map(a => a.repeat(2)).join("");
+    /**
+     * 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);
     }
-    return `#${hex}`;
-};
 
 
-/**
- * Retorna el código de color poncho por hexadecimal.
- * @param {string} value Valor hexadecimal a buscar 
- * @see ponchoColorDefinitionsList
- * @example
- * // {
- * //    "description": "",
- * //    "name": "Mandarina",
- * //    "color": "#f79525",
- * //    "code": "mandarina",
- * //    "alias": [
- * //        "mandarina"
- * //    ]
- * // }
- * findByHex("#f79525");
- * @returns {object} Objecto con la defición del color
- */
-const ponchoColorByHex = value => ponchoColorDefinitionsList.find(f => {
-    const colorToFind = cleanUpHex(value);
-    const colorToCompare = cleanUpHex(f.color);
-    if(colorToFind == colorToCompare){
-        return true;
+    /**
+     * 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;
     }
-    return false;
-});
 
 
-/* module.exports REMOVED */
+    /**
+     * Rearmo el JSON para agregar filtros.
+     *
+     * @param {object} jsonData
+     * @returns {object}
+     */
+    _refactorEntries = jsonData => {
+        if(!jsonData){
+            console.error("No se puede recorrer el script")
+        }
 
-/**
- * Fetch data
- * 
- * @example
- * ```js
- * (async() => {
- *     const data = await fetch_json("https://som.url.com");
- * });
- * ```
- */
-async function fetch_json(uri, options={}) {
+        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)}`;
+            }
 
-    let defaultOptions = {
-        method: "GET",
-        headers: {
-            "Accept": "application/json",
-            "Content-Type": "application/json"
-        },
-        redirect: "follow"
+            // refactor entry
+            const entry = {
+                ...element,
+                ...{
+                    "range": range,
+                    "filtro-status": estado,
+                    fingerprint,
+                    desde,
+                    hasta,
+                }
+            };
+            entries.push(entry);
+        });
+
+        return entries;
     };
-    let opts = Object.assign({}, defaultOptions, options);
-    const response = await fetch(uri, opts);
 
-    if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-    }
-    return await response.json();
-};
 
-/**
- * Remueve acentos y caracteres especiales.
- * 
- * @param {string} data Cadena de texto a limpiar. 
- * @example
- * // returns Accion murcielago arbol nino
- * removeAccents("Acción Murciélago árbol niño")
- * @returns {string} Cadena de texto sin acentos.
- */
-const replaceSpecialChars = (data) => {
-    if(!data){
-        return "";
-    }
-    const search = "àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìıİłḿñńǹňôöòóœøōõőṕ"
-    + "ŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż";
-    const replace = "aaaaaaaaaacccddeeeeeeeegghiiiiiiiilmnnnnooooooooop"
-    + "rrsssssttuuuuuuuuuwxyyzzz";
-    const a = search + search.toUpperCase();
-    const b = replace + replace.toUpperCase();
-    const p = new RegExp(a.split("").join("|"), "g");  
-    return data.toString().replace(p, c => b.charAt(a.indexOf(c)))
-};
+    /**
+     * 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"],
+        ];
 
-/**
- * Slugify
- * 
- * @param {string} string Cadena de texto a convertir.
- * @example
- * // returns el-murcielago-remolon-parece-un-nino
- * slugify("El murciélago remolón parece un niño")
- * @returns {string} Cadena de texto en formato slug.
- */
-const slugify = (string) =>{
-    if(!string){
-        return string;
-    }
-    const a = "àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìıİłḿñńǹňôöòóœøōõőṕ"
-                + "ŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;";
-    const b = "aaaaaaaaaacccddeeeeeeeegghiiiiiiiilmnnnnooooooooop"
-                + "rrsssssttuuuuuuuuuwxyyzzz------";
-    const p = new RegExp(a.split("").join("|"), "g");
+        data.forEach( elem => {
+            const [term, definition, srOnly, dtOff, className] = elem;
+            if(!definition){
+                return;
+            }
 
-    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(/-+$/, "");
-};
+            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);
+        });
 
-/* module.exports REMOVED */
+        if(this.itemClassList.some(f=>f)){
+            itemContainer.classList.add("agenda-item", ...this.itemClassList);
+        }
 
-/**
- * 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;
-    }
+        return itemContainer;
+    };
 
-    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;");
+    /**
+     * 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);
+                });
 
-    if(exclude.length > 0){
-        const regexStart = new RegExp(
-            "&lt;(" + exclude.join("|") + ")(.*?)&gt;", "g");
-        const regexEnd = new RegExp(
-            "&lt;\/(" + exclude.join("|") + ")(.*?)&gt;", "g");
+                block += itemsContainer.outerHTML;
+                delete entry.fingerprint;
+                let customData={};
 
-        return replaceString
-            .replace(regexStart, "<$1$2>")
-            .replace(regexEnd, "</$1>");
-    }
-    return replaceString;
-};
+                customData[this.descriptionId] = block;
+                collect.push( {...entry, ...customData} );
+            });
+        });
 
+        return collect;
+    };
 
 
-/* module.exports REMOVED */
+    /**
+     * Valida si poncho tabla está importado
+     * @returns {boolean}
+     */
+    _ponchoTableExists = () => {
+        if(typeof ponchoTable !== "undefined"){
+            return true;
+        }
+        return false;
+    };
 
-/**
- * 
- */
-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();
-    });
+
+    /**
+     * 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 );
+        }
+    };
 };
 
 
-function ponchoTable(opt) {
-    ponchoTableLegacyPatch();
-    return ponchoTableDependant(opt);
+if (typeof exports !== "undefined") {
+    module.exports = PonchoAgenda;
 }
 
-
 /**
  * PONCHO TABLE
  *
@@ -543,10 +1579,10 @@ function ponchoTable(opt) {
  * 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
@@ -559,34 +1595,47 @@ function ponchoTable(opt) {
 const ponchoTableDependant = opt => {
     var gapi_data;
     var filtersList = [];
-    var wizard = (opt.hasOwnProperty("wizard") && opt.wizard ? 
+    var wizard = (opt.hasOwnProperty("wizard") && opt.wizard ?
             true : false);
-    var emptyLabel = (opt.hasOwnProperty("emptyLabel") && opt.emptyLabel ? 
+    var emptyLabel = (opt.hasOwnProperty("emptyLabel") && opt.emptyLabel ?
             opt.emptyLabel : "Todos");
     var filtro = {};
-    var orderFilter = (opt.hasOwnProperty("orderFilter") && opt.orderFilter ? 
-            true : false);
+    var orderFilter = (opt.hasOwnProperty("orderFilter") && opt.orderFilter ?
+            opt.orderFilter : false);
     var asFilter = {};
     var allowedTags = ["*"];
+    var pushState = (opt.hasOwnProperty("pushState") && 
+        opt.pushState == true ? true : false);
+    var copyResults = (opt.hasOwnProperty("copyResults") && 
+        opt.copyResults == true ? true : false);
+
+    // urlParams dependiente de las opciones copyResults o pushState
+    var urlParams = false;
+    if(opt.hasOwnProperty("urlParams") && opt.urlParams == true){
+        urlParams = true;
+    } else if( copyResults == true || pushState == true){
+        urlParams = true;
+    }
+
     let markdownOptions = {
         "tables": true,
         "simpleLineBreaks": true,
         "extensions": [
-            'details', 
-            'images', 
-            'alerts', 
-            'numbers', 
-            'ejes', 
-            'button', 
-            'target',
-            'bootstrap-tables', 
-            'video'
+            "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();
     }
@@ -604,33 +1653,98 @@ const ponchoTableDependant = opt => {
     };
 
 
+    /**
+     * Objeto agrupando filtros descendentes y ascendentes.
+     * 
+     * @param {object} data Array con la configuración realizada por el 
+     * usuario en `orderFilter`.
+     * @example
+     * // {
+     * //     asc: ["filtro-estado", "filtro-categoria"], 
+     * //     desc: ["filtro-ubicacion"]
+     * // }
+     * [["filtro-ubicacion", "desc"],[ "filtro-estado"], "filtro-categoria"]
+     * @returns {object}
+     */
+    const _getOrderType = (data) => {
+        if (!Array.isArray(data)) {
+            return { asc: [], desc: [] };
+        }
+
+        return data.reduce((acc, item) => {
+            const [field, order="asc"] = (Array.isArray(item) ? 
+                    item : [item, 'asc']);
+
+                    const orderToLower = order.toLowerCase();
+            const validKey = (["asc", "desc"].includes(orderToLower) ? 
+                    orderToLower : "asc");
+
+            acc[validKey].push(field);
+            return acc;
+        }, {asc: [], desc: []});
+    };
+
+
     /**
      * De acuerdo a las opciones del usuario, ordena el listado o lo deja
      * en la secuencia en la que llega.
+     *
+     * @summary Si `orderFilter` es _boolean_ y es true, entonces todos usan sort.
+     * Si `orderFilter` es array filtro según la disponibilidad del filtro.
      * 
-     * @summary Alias de sortAlphaNumeric
-     * @param {object} a 
-     * @param {object} b 
+     * @see sortAlphaNumeric()
+     * @param {object} data Array con el contenido de cada filtro.
+     * @param {string} filter Nombre del filtro.  
      * @returns {object}
      */
-    const _sortAlphaNumeric = (a, b) => (orderFilter ? 
-        sortAlphaNumeric(a, b) : null);
+    const _sortAlphaNumeric = (data, filter) => {
+        // filter debe ser string
+        if(typeof filter !== "string"){
+            console.error(
+                "Error:", 
+                `_filter_ debe ser string. Recibió: ${typeof filter}`);
+            return;
+        }
+        // data debe ser array
+        if(!Array.isArray(data)){
+            console.error(
+                "Error:", 
+                `_data_ debe ser object. Recibió: ${typeof data}`);
+            return;
+        }
+
+        // Validación
+        if(typeof orderFilter === "boolean" && orderFilter){
+            return data.sort(sortAlphaNumeric);
+        } 
+
+        const orderType = _getOrderType(orderFilter);
+        const {asc, desc} = orderType;
+
+        if(Array.isArray(orderFilter) && asc.includes(filter)){
+            return data.sort(sortAlphaNumeric);
+        } else if(desc.includes(filter)){
+            return data.sort(sortAlphaNumeric).reverse();
+        }
+
+        return data;
+    };
 
 
     /**
      * Resultados únicos
-     * 
-     * @param {object} list Array del que se quiere obtener 
+     *
+     * @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_. 
+     *
+     * @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_.
@@ -676,79 +1790,128 @@ const ponchoTableDependant = opt => {
      * Retorna los valores de los filtros
      */
     const _filterValues = () => {
-        return [...document.querySelectorAll("[data-filter]")].map(e => e.value);
+        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" && 
+        if(typeof showdown !== "undefined" &&
             showdown.hasOwnProperty("Converter")){
                 return true;
         }
         return false;
-    }; 
+    };
+
 
     /**
      * Verifica si las extensiones showdown están definidas.
-     * 
-     * @param {object} extensions 
+     *
+     * @param {object} extensions
      * @returns {boolean}
      */
-    const _isShowdownExtensionEnable = extensions => 
-        extensions.every(e => {
+    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
+     * @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.target = "_blank";
         btn.textContent = label;
+        btn.title = "Abre en una nueva ventana";
+        btn.setAttribute("aria-label", 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 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;
@@ -765,32 +1928,32 @@ const ponchoTableDependant = opt => {
      */
     const _createFilters = gapi_data => {
         // Contenedor
-        const tableFiltroCont = document.querySelector("#ponchoTableFiltro");
-        tableFiltroCont.innerHTML = "";
+        document
+            .querySelectorAll("#ponchoTableFiltro")
+            .forEach(e => e.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);
+            let toSort = filtro[f].map(e => e.value)
+            let list_filter = _sortAlphaNumeric(toSort, f);
 
             const tplCol = document.createElement("div");
 
             if(opt.hasOwnProperty("filterClassList")){
-                const classList = (typeof opt.filterClassList === "string" ? 
+                const classList = (typeof opt.filterClassList === "string" ?
                         opt.filterClassList.split(" ") : opt.filterClassList);
-                tplCol.classList.add(...classList);     
+                tplCol.classList.add(...classList);
             } else {
                 const cols = Math.floor(12 / Object.keys(filtro).length);
-                tplCol.classList.add("col-sm-12", `col-md-${cols}`); 
+                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";   
+                tplCol.style.display = "none";
             }
 
             const tplForm = document.createElement("div");
@@ -816,8 +1979,8 @@ const ponchoTableDependant = opt => {
             tplForm.appendChild(formLabel);
             tplForm.appendChild(select);
             tplCol.appendChild(tplForm);
+            const tableFiltroCont = document.querySelector("#ponchoTableFiltro");
             tableFiltroCont.appendChild(tplCol);
-        // }
         });
     };
 
@@ -833,13 +1996,13 @@ const ponchoTableDependant = opt => {
         const thead = document.querySelector("#ponchoTable thead");
         thead.innerHTML = "";
 
-        const theadTr = document.createElement("tr"); 
+        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
@@ -859,26 +2022,17 @@ const ponchoTableDependant = opt => {
             }
 
             // si se desea modificar la entrada desde opciones
-            entry = (typeof opt.customEntry === "function" && 
+            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 => {
                 let filas = entry[header];
-                
+
                 if (header.startsWith("btn-") && filas != "") {
                     const label = header.replace("btn-", "").replace("-", " ");
                     filas = button(label, filas);
@@ -894,22 +2048,21 @@ const ponchoTableDependant = opt => {
 
                 // Si showdown está incluido lo uso
                 // @todo Usar showdown fuera de la función. Usarlo en options.
-                let allowed_tags = (opt.hasOwnProperty("allowedTags") ? 
+                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-_ 
+
+                // 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()){
-                    const converter = new showdown.Converter(showdownOptions);
-                    cell.innerHTML = converter.makeHtml(cleannedText);
+                    cell.innerHTML = _markdownConvert(cleannedText);
                 } else {
                     cell.innerHTML = cleannedText;
                 }
@@ -920,7 +2073,7 @@ const ponchoTableDependant = opt => {
 
     /**
      * 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
@@ -947,8 +2100,10 @@ const ponchoTableDependant = opt => {
                 entiresByFilter = gapi_data.entries.map(entry => entry[filter]);
             }
 
-            const uniqueEntries = distinct(entiresByFilter);
-            uniqueEntries.sort(_sortAlphaNumeric);
+            const uniqueEntries = _sortAlphaNumeric(
+                distinct(entiresByFilter), filter
+            );
+
             filter = filter.replace("filtro-", "");
             filters[filter] = [];
             uniqueEntries.forEach(entry => {
@@ -962,12 +2117,12 @@ const ponchoTableDependant = opt => {
     /* 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 
+        // 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()];
@@ -976,8 +2131,8 @@ const ponchoTableDependant = opt => {
             // si en su defecto, está vacío.
             if(
                 (
-                (entry[filtersList[_parentElement(parent-1)]] == 
-                values[_parentElement(parent-1)]) && 
+                (entry[filtersList[_parentElement(parent-1)]] ==
+                values[_parentElement(parent-1)]) &&
                 (entry[filtersList[_parentElement(parent)]] == label)
                 ) ||  values[_parentElement(parent-1)] == "")
             {
@@ -996,7 +2151,7 @@ const ponchoTableDependant = opt => {
      * @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)]];
@@ -1008,23 +2163,24 @@ const ponchoTableDependant = opt => {
                                 .includes(_toCompareString(e));
                     });
                     return customFilters;
-                } 
+                }
                 return evaluatedEntry;
-            } 
+            }
             return false;
 
         }).filter(f => f);
 
-        const uniqueList = distinct(filterList);
-        uniqueList.sort(_sortAlphaNumeric);
+        const uniqueList =  _sortAlphaNumeric( 
+            distinct(filterList), filtersList[children] 
+        );
         return uniqueList;
     };
 
-    
+
     /**
      * Prepara un string para una comparación case sensitive y sin
      * caracteres especiales.
-     * @param {string} value Valor a comparar. 
+     * @param {string} value Valor a comparar.
      * @returns {boolean}
      */
     const _toCompareString = value => replaceSpecialChars(value.toLowerCase());
@@ -1032,7 +2188,7 @@ const ponchoTableDependant = opt => {
 
     /**
      * 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.
@@ -1045,7 +2201,7 @@ const ponchoTableDependant = opt => {
         const items = gapi_data.entries.flatMap(entry => {
             const range = _validateSteps(parent, entry, label, values);
             if(
-                (entry[filtersList[_parentElement(children - 1)]] == label) && 
+                (entry[filtersList[_parentElement(children - 1)]] == label) &&
                 (range)){
                     const evaluatedEntry = entry[filtersList[_parentElement(children)]];
                     if(_isCustomFilter(children, filtro)){
@@ -1063,8 +2219,9 @@ const ponchoTableDependant = opt => {
             return;
         }).filter(f => f);
 
-        const uniqueList = distinct(items);
-        uniqueList.sort(_sortAlphaNumeric);
+        const uniqueList = _sortAlphaNumeric( 
+            distinct(items), filtersList[children] 
+        );
         return uniqueList;
     };
 
@@ -1077,7 +2234,7 @@ const ponchoTableDependant = opt => {
     const _isCustomFilter = key => {
         const filtersKeys = Object.keys(filtro);
         if(asFilter.hasOwnProperty(`filtro-${filtersKeys[key]}`)){
-            return true   
+            return true
         }
         return false;
     };
@@ -1091,7 +2248,7 @@ const ponchoTableDependant = opt => {
     const _customFilter = key => {
         const filtersKeys = Object.keys(filtro);
         if(asFilter.hasOwnProperty(`filtro-${filtersKeys[key]}`)){
-            return asFilter[`filtro-${filtersKeys[key]}`];   
+            return asFilter[`filtro-${filtersKeys[key]}`];
         }
         return [];
     };
@@ -1099,7 +2256,7 @@ const ponchoTableDependant = opt => {
 
     /**
      * 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}
@@ -1110,8 +2267,8 @@ const ponchoTableDependant = opt => {
         // 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; 
+            if(filtros.length == i ){
+                break;
             }
             let itemList = _filterOptionList(filterIndex, i, label);
             if(itemList.length == 0){
@@ -1125,7 +2282,7 @@ const ponchoTableDependant = opt => {
                 if(!e.trim()){
                     return;
                 }
-                // Mantengo el filtro del hijo si existe en el 
+                // 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));
@@ -1133,6 +2290,7 @@ const ponchoTableDependant = opt => {
         }
     };
 
+
     /**
      * Asigna selectores al contenedor de los filtros.
      * @returns {undefined}
@@ -1163,34 +2321,364 @@ const ponchoTableDependant = opt => {
      * 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;
-    };
+    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);
+    };
+
+
+    /**
+     * Tipo de tabla responsive.
+     * 
+     * @param {string} type Uno de los tres tipo de columna.
+     * @returns {string|undefined}
+     */
+    _responsiveType = function(type){
+        if(typeof type !== "string"){
+            console.error("El tipo de columna responsive debe ser un string.");
+            return;
+        }
+        const typeToLower = type.toLowerCase();
+        const types = ["none", "column", "inline"];
+        if(!types.includes(typeToLower)){
+            console.error("El tipo de columna responsive es inválido.");
+            return;
+        }
+
+        return typeToLower;
+    }
+
+
+    /**
+     * Valida las columnas para la tabla responsive
+     * 
+     * @param {object} cols Array con los números de columna válidos.
+     * @returns {object|undefined}
+     */
+    _responsiveColumns = function(cols){
+        if(!Array.isArray(cols)){
+            console.error("Las columnas ocultas deben ");
+            return;
+        }
+
+        if(!cols.every(e => typeof e === "number")){
+            console.error("Solo son válidos los númerso enteros para columnas");
+            return;
+        }
+
+        let sanitizedArray = [... new Set(cols)];
+        const hasZeroAsigned = sanitizedArray.indexOf(0);
+        const removedElement = (hasZeroAsigned !== -1 ? sanitizedArray.splice( 
+                hasZeroAsigned, 1) : sanitizedArray);
+
+        if(removedElement){
+            console.warn(
+                "la columna 0 no se puede asignar. Se borra la asignación.");
+        }
+        if(sanitizedArray.length < 1){
+            console.error(
+                `No hay columnas asignadas en el array: ${sanitizedArray}`);
+            return;
+        }
+
+        return sanitizedArray;
+    }
+
+
+    /**
+     * Compone el objeto para colsDefs.
+     * 
+     * @param {object} columns Array con los números de columna válidos.
+     * @param {string} type Tipo de columna válido
+     * @param {boolean} orderable Especifica si se puede ordenar por la columna.
+     * @returns {object}
+     */
+    _responsiveCols = function(columns, orderable, type="none"){
+        columns = _responsiveColumns(columns);
+
+        if(!columns){
+            return {};
+        }
+
+        return { 
+            className: _responsiveType(type),
+            orderable: (typeof orderable === "boolean" ? orderable : false),
+            targets: columns                  
+        };
+    }
+
+
+    /**
+     * Asignación de prioridades en la versión responsive.
+     * 
+     * @example 
+     * _responsivePriorities([1,2]);
+     * // [{responsivePriority: 1, targets: 2}]
+     * @param {*} priorities 
+     */
+    function _responsivePriorities(priorities){
+        if(!Array.isArray(priorities)){
+            console.error("`responsivePriorities`, debe ser un array.");
+            return [];
+        }
+        const results = priorities.map(m => {
+            const [responsivePriority=false, targets=false] = m;
+            if(typeof responsivePriority !== "number"){
+                console.error("El orden de prioridad debe ser un número.");
+                return;
+            }
+            if(typeof targets !== "number"){
+                console.warn(
+                    `La asignación de columna debe ser un número. Se 
+                    elimina el valor: "${targets}".`)
+                return {responsivePriority};
+            }
+            return {responsivePriority, targets};
+        });
+        
+        return results.filter(f => f);
+    }
+
+
+    /**
+     * Modifica el tamaño de las columnas
+     * @param {object} def Array con definiciones de ancho y target
+     * @returns {object}
+     */
+    function _columnsWidth(def){
+        if(!Array.isArray(def)){
+            console.error("`columnsWidth`, debe ser un array.");
+            return [];
+        }
+        const regex = /(?<value>[0-9]+)(?<measure>\%|px|em|rem|pt)/;
+        const results = def.map(m => {
+            const [width=false, targets=false] = m;
+            if(!regex.test(width)){
+                console.error(
+                    "El valor asignado al ancho de columna no es válido.");
+                return;
+            }
+            if(typeof targets !== "number"){
+                console.warn(
+                    `La asignación de columna debe ser un número. Se 
+                    elimina el valor: "${targets}".`)
+                return {width};
+            }
+            return {width, targets};
+        });
+
+        return results.filter(f => f);
+    }
+
+
+    /**
+     * Ejecuta un evento
+     * 
+     * @param {string} selector Selector html
+     * @param {string} value Valor para definir en el input
+     * @param {string} eventType Tipo de evento, ej: click, change, keypress
+     */
+    function _eventDispatcher(selector, value, eventType){
+        const element = document.querySelectorAll(`#${selector}`);
+        element.forEach(ele => {
+            setTimeout(function(){
+                ele.value = value;
+                const event = new Event(eventType);
+                ele.dispatchEvent(event);
+            },50)
+        });
+    }
+
+
+    /**
+     * window pushState
+     * 
+     * @param {string} url Url
+     * @returns {undefined}
+     */
+    function _pushState(url){
+        if (!pushState) {
+            console.log('sin pushstate')
+            return;
+        }
+        window.history.pushState({}, "", url);
+    }
+
+
+    /**
+     * Imprime la url
+     * @summary Imprime la url con varios métodos
+     */
+    function _shareLink(){
+        if(!urlParams){
+            return;
+        }
+
+        // @todo Permitir que se mantengan parámetros seteados previamente.
+        // const searchUrl = new URLSearchParams(window.location.search);
+        // let searchValues = Object.entries(Object.fromEntries(searchUrl));
+        
+        const url = new URL(window.location.pathname, window.location.origin);
+
+        const filters = filtersList.map(m => m.replace("filtro-", ""));
+        const inputs = [ ...filters, "ponchoTableSearch" ];
+        const inputValuesConcat = inputs.map(function(input){
+            const v = document.getElementById(input);
+            if(v){
+                return [input, v.value];
+            }
+            return [];
+        });
+
+
+
+
+        if(!inputValuesConcat.some(s => s.length > 0)){
+            return;
+        }
+
+        if(inputValuesConcat.some(e => e[1].length > 0)){
+            _sharing();
+        } else {
+            document
+                .querySelectorAll("#ponchoTableShareButton")
+                .forEach(e => e.remove());
+        }
+
+        // Agrego parámetros
+        inputValuesConcat.forEach(input => {
+            let [key, value] = input;
+            key = (key == "ponchoTableSearch" ? "buscar" : key);
+            if(value.trim() == ""){
+                return;
+            }
+            url.searchParams.append(key, value);
+        });
+
+        // Crea un tag <a/>
+        document.querySelectorAll(".js-sharelink-tag").forEach(function(e){
+            e.innerHTML = "";
+            const label = e.dataset.label;
+            const link = document.createElement("a");
+            link.href = url.href;
+
+            let refactorLabel = (label ? label : url.href);
+            link.textContent = refactorLabel;
+
+            e.appendChild(link);
+        });
+
+        // Imprime la url como texto en un attributo o en el cuerpo de la 
+        // etiqueta.
+        document.querySelectorAll(".js-sharelink-text").forEach(function(e){
+            // Si el usuario agregó el dataset attr, imprimo la url 
+            // en el attributo pasado como valor.
+            const attr = e.dataset.attr;
+            if(attr){
+                e.setAttribute(attr, url.href);
+            } else {
+                e.innerHTML = url.href;
+            }
+        }); 
+
+        _pushState(url.href);
+    }
+
+
+    /**
+     * Crea un listener para copiar a porta-papeles
+     * @returns {undefined}
+     */
+    function _copyToClipboard(){
+        if(typeof copyToClipboard != "function"){
+            return;
+        }
+        const toclipboard = document.querySelectorAll("[data-toclipboard]");
+        toclipboard.forEach(elem => {
+            const id = elem.dataset.toclipboard;
+            elem.addEventListener("click", (e) => {
+                e.preventDefault();
+                copyToClipboard(`#${id}`);
+            });
+        });
+    }
 
 
     /**
-     * Visualización de la tabla
-     * 
-     * @param {boolean} visibility Oculta y muestra la tabla.
+     * Crea un botón para compartir resultados
      * @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);
+    function _sharing(){
+        if(!copyResults){
+            return;
+        }
 
-        document
-            .querySelectorAll(`[data-visible-as-table="false"]`)
-            .forEach(element => element.style.display = reverseDisplay);
-    };
+        try {
+            document
+                .querySelectorAll("#ponchoTableShareButton")
+                .forEach(e => e.remove());
+        } catch (error) {
+            console.error("Error:", "No se encuentra el selector");
+        }
+
+        const b = document.createElement('div');
+        b.id = "ponchoTableShareButton";
+        b.innerHTML = `<div class="dropdown">
+            <button 
+                class="btn btn-sm btn-default dropdown-toggle" 
+                type="button" 
+                id="share-table-data" 
+                data-toggle="dropdown" 
+                aria-haspopup="true" 
+                aria-expanded="false">
+            Compartir resultados
+            <span class="caret"></span>
+            </button>
+            <div 
+                class="dropdown-menu p-y-1 p-x-1" 
+                aria-labelledby="share-table-data">
+                <p class="js-sharelink-tag m-b-0 small" id="foo"></p>
+                <a 
+                    href="#" data-toclipboard="foo" 
+                    class="small btn btn-sm btn-default m-b-0 m-t-1">
+                    Copiar al portapapeles</a>
+            </div>
+        </div>`;
+
+        const info = document.querySelector("#ponchoTable_info");
+        const infoContainer = info.parentElement;
+        infoContainer.classList.add("share");
+        infoContainer.appendChild(b);
+
+        headStyle(
+            "ponchoTable-share-button", 
+            `.share{display:flex;gap:1.5em;align-items:baseline}.share .dropdown-menu{min-width:250px}`);
+        _copyToClipboard();
+    }
 
 
     /**
-     * Inicializa DataTable() y modifica elementos para adaptarlos a 
+     * Inicializa DataTable() y modifica elementos para adaptarlos a
      * GoogleSheets y requerimientos de ArGob.
      */
     const initDataTable = () => {
@@ -1213,63 +2701,98 @@ const ponchoTableDependant = opt => {
 
         /**
          * Instacia DataTable()
-         */ 
-        let tabla = jQuery("#ponchoTable").DataTable({
-            "initComplete" : (settings, json) => {
+         */
+        let dataTableOptions = {
+            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 }
+            lengthChange: false,
+            autoWidth: false,
+            pageLength: opt.cantidadItems,
+            columnDefs: [
+                { 
+                    type: "html-num",
+                    targets: opt.tipoNumero
+                },
+                { 
+                    targets: opt.ocultarColumnas, 
+                    visible: false 
+                }
             ],
-            "ordering": opt.orden,
-            "order": [
+            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",
+            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": "<"
+                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'
+                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"
                     }
                 }
             }
-        });
+        };
+
+        // Ancho de columnas
+        if(typeof opt.columnsWidth !== "undefined" && opt.columnsWidth){
+            dataTableOptions.columnDefs = dataTableOptions.columnDefs.concat(
+                _columnsWidth(opt.columnsWidth));
+        }
+
+        /**
+         * Opciones responsive
+         */
+        if(typeof opt.responsiveDetailsColumns !== "undefined" && 
+                opt.responsiveDetailsColumns.length > 0){
+
+            const responsiveDetails = _responsiveCols(
+                opt.responsiveDetailsColumns, 
+                opt.responsiveDetailsOrderable, 
+                opt.responsiveDetailsType);
+
+            const priorities = _responsivePriorities(opt.responsivePriorities);
+
+            dataTableOptions.columnDefs = dataTableOptions.columnDefs.concat(
+                responsiveDetails, priorities);
+
+            dataTableOptions.responsive = true;
+        }
+
+        let tabla = jQuery("#ponchoTable").DataTable(dataTableOptions);
 
         /**
          * Buscador por palabra
@@ -1279,24 +2802,29 @@ const ponchoTableDependant = opt => {
             tabla
                 .search(jQuery.fn.DataTable.ext.type.search.string(this.value))
                 .draw();
+            _shareLink();
         });
 
+
         // REMUEVE LOS FILTROS
         jQuery("#ponchoTable_filter").parent().parent().remove();
 
         // MUESTRA FILTRO PERSONALIZADO
-        const ponchoTableOption = document.querySelectorAll("#ponchoTableFiltro option");
+        const ponchoTableOption = 
+            document.querySelectorAll("#ponchoTableFiltro option");
         if (ponchoTableOption.length > 1) {
-            document.querySelector("#ponchoTableFiltroCont").style.display = "block";
+            document
+                .querySelector("#ponchoTableFiltroCont")
+                .style.display = "block";
         }
 
 
         /**
-         * Valida si un componente select tiene options con value. 
-         * 
+         * 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 
+         * options vacíos.
+         * @param {string} selector Selector del elemento select
          * @returns {boolean}
          */
         const _selectHasValues = selector => {
@@ -1308,7 +2836,7 @@ const ponchoTableDependant = opt => {
 
         /**
          * Modo wizard para los filtros.
-         * 
+         *
          * @param {object} filters Listado de filtros.
          * @param {interger} column Indice de columna.
          * @param {string} valFilter Value del select
@@ -1324,13 +2852,13 @@ const ponchoTableDependant = opt => {
                 if(selectHasValues && valFilter && key <= column + 1){
                     displayStatus = "block";
 
-                } else if(selectHasValues && !valFilter &&  key <= column + 1) {
+                } 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}"]`)
@@ -1338,13 +2866,13 @@ const ponchoTableDependant = opt => {
                     .forEach(element => element.style.display = displayStatus);
             });
 
-            if( 
-                _selectHasValues(`#${filters[column]}`) && 
-                valFilter && 
+            if(
+                _selectHasValues(`#${filters[column]}`) &&
+                valFilter &&
                 !_selectHasValues(`#${filters[column + 1]}`)
             ){
                 tableStatus = true;
-            } 
+            }
 
 
             if(tableStatus){
@@ -1357,14 +2885,14 @@ const ponchoTableDependant = opt => {
 
         /**
          * 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();
@@ -1377,7 +2905,7 @@ const ponchoTableDependant = opt => {
             const filters = Object.keys(filtro);
             const filterValues = _filterValues();
             const filterIndex = filter => {
-                return Object 
+                return Object
                         .keys(gapi_data.headers)
                         .indexOf(`filtro-${filter}`);
             };
@@ -1387,6 +2915,7 @@ const ponchoTableDependant = opt => {
                 const term = _searchTerm(filterValues[k]);
                 const cleanTerm = _searchTerm(
                     replaceSpecialChars(filterValues[k]));
+
                 if(_isCustomFilter(k, filtro)){
                     tabla.columns(columnIndex)
                         .search(_toCompareString(filterValues[k]));
@@ -1394,22 +2923,41 @@ const ponchoTableDependant = opt => {
                     tabla
                         .columns(columnIndex)
                         .search(
-                            (filterValues[k] ? `^(${term}|${cleanTerm})$` : ""), 
-                            true, false, true  
+                            (filterValues[k] ? `^(${term}|${cleanTerm})$` : ""),
+                            true, false, true
                         );
                 }
             });
+
             tabla.draw();
-            if(wizard){     
+            window.addEventListener("popstate", (event) => {
+
+            });
+            if(wizard){
                 _wizardFilters(filters, column, valFilter);
             }
+            _shareLink();
         });
 
-        
+
+        function filterParams(filterList, str){
+            const regex = new RegExp('filter(?<index>(?:[1-9][0-9]|[1-9]))', '');
+            const regexResult = regex.exec(str);
+
+            if(regexResult === null){
+                return str;
+            }
+
+            const filters = filterList.map(m => m.replace("filtro-", ""));
+            const filter = filters[ regexResult.groups.index - 1 ];
+            return (typeof filter !== "undefined" ? filter : str);
+        }
+
+
         // Si está habilitada la búsqueda por hash.
         if(opt.hasOwnProperty("hash") && opt.hash){
             const term = hasHash();
-            const searchTerm = (term ? decodeURIComponent(term) : "");     
+            const searchTerm = (term ? decodeURIComponent(term) : "");
             const element = document.querySelectorAll("#ponchoTableSearch");
             element.forEach(ele => {
                 ele.value = searchTerm;
@@ -1418,14 +2966,53 @@ const ponchoTableDependant = opt => {
                     .draw();
             });
         }
+
+
+        // Si está seteado urlParams habilita los filtros y búsquedas por
+        // Url.
+        if(urlParams){
+            const u = new URLSearchParams(window.location.search);
+            for (const key of u.keys()){
+                let value =  u.get(key);
+                let refactorKey = filterParams(filtersList, key);
+
+                if(value.trim() == ""){
+                    return;
+                }
+
+                if(key == "buscar"){
+                    _eventDispatcher(`ponchoTableSearch`, value, "keyup");
+                } else {
+                    _eventDispatcher(refactorKey, value, "change");
+                }
+            };
+        }
     } // end initDataTable
-    
 
 
+    /**
+     * 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;
+    };
+
 
     /**
      * Imprime DataTable
-     * 
+     *
      * @param {object} data JSON data
      */
     const render = data => {
@@ -1433,13 +3020,16 @@ const ponchoTableDependant = opt => {
         gapi_data = data;
         // Defino las entradas
         gapi_data.entries = (
-            typeof opt.refactorEntries === "function" && 
-            opt.refactorEntries !== null ? 
+            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)
@@ -1451,7 +3041,7 @@ const ponchoTableDependant = opt => {
         _filtersContainerClassList();
         _searchContainerClassList();
         _createTable(gapi_data);
-        _createFilters(gapi_data); 
+        _createFilters(gapi_data);
 
         document.querySelector("#ponchoTableSearchCont")
             .style.display = "block";
@@ -1459,34 +3049,44 @@ const ponchoTableDependant = opt => {
             .classList.remove("state-loading");
 
         initDataTable();
+
+        _shareLink();
+
+        setTimeout(() => {
+            const ele = document.querySelectorAll(`[id^="dt-search-"], #ponchoTable_filter`);
+            ele.forEach(elem => {
+                elem.closest(".row").remove();
+            });
+        }, 300);
     };
 
 
     /**
      * 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=',
+            "https://sheets.googleapis.com/v4/spreadsheets/",
+            opt.idSpread, "/?alt=json&key=",
             gapi.gapi_key].join("");
 
         jQuery.getJSON(uriApi, function function_name(response) {
@@ -1500,8 +3100,9 @@ const ponchoTableDependant = opt => {
     if (opt.jsonData){
         const headers = Object.fromEntries(
             Object.keys(opt.jsonData[0]).map(e => [e,e])
-        );
-        const data = {entries: opt.jsonData, headers: headers};
+            );
+
+        const data = {entries: opt.jsonData, headers};
         render(data);
     } else if (opt.jsonUrl) {
         getSheetValues(opt.jsonUrl);
@@ -1516,7 +3117,6 @@ const ponchoTableDependant = opt => {
 
 };
 
-
 /**
  * POPOVER
  */
@@ -1562,16 +3162,21 @@ function pophidde(){
  */
 var ponchoUbicacion = function(options) {
     var urlProvincias = '/profiles/argentinagobar/themes/contrib/poncho/resources/jsons/geoprovincias.json';
+    var urlMunicipios = '/profiles/argentinagobar/themes/contrib/poncho/resources/jsons/geomunicipios.json';
     var urlLocalidades = '/profiles/argentinagobar/themes/contrib/poncho/resources/jsons/geolocalidades.json';
     var provincias;
+    var municipios;
     var localidades;
     var iProvincia = jQuery('input[name="submitted[' + options.provincia + ']"]');
+    var iMunicipio = jQuery('input[name="submitted[' + options.municipio + ']"]');
     var iLocalidad = jQuery('input[name="submitted[' + options.localidad + ']"]');
     var sProvincia;
+    var sMunicipios;
     var sLocalidades;
 
     function init() {
         urlProvincias = (options.urlProvincias ? options.urlProvincias : urlProvincias);
+        urlMunicipios = (options.urlMunicipios ? options.urlMunicipios : urlMunicipios);
         urlLocalidades = (options.urlLocalidades ? options.urlLocalidades : urlLocalidades);
 
         jQuery.getJSON(urlProvincias, function(data) {
@@ -1582,6 +3187,14 @@ var ponchoUbicacion = function(options) {
             jQuery(sProvincia).select2();
         });
 
+        jQuery.getJSON(urlMunicipios, function(data) {
+            municipios = parseJsonMunicipios(data);
+            sMunicipios = getSelectMunicipios(municipios, sProvincia.val());
+            addMunEvent();
+            iMunicipio.after(sMunicipios);
+            jQuery(sMunicipios).select2();
+        });
+
         jQuery.getJSON(urlLocalidades, function(data) {
             localidades = parseJsonLocalidades(data);
             sLocalidades = getSelectLocalidades(localidades, sProvincia.val());
@@ -1590,6 +3203,7 @@ var ponchoUbicacion = function(options) {
             jQuery(sLocalidades).select2();
         });
         iProvincia.hide();
+        iMunicipio.hide();
         iLocalidad.hide();
     }
 
@@ -1601,34 +3215,44 @@ var ponchoUbicacion = function(options) {
      */
     function parseJsonProvincias(data) {
         provincias = [];
-        data.results.forEach(function(provincia, index) {
+        data.provincias.forEach(function(provincia, index) {
             provincias.push(provincia);
         });
         return provincias;
     }
 
-
     /**
-     * 
-     * @param {*} string 
-     * @returns 
-     */
-    function capitalizeFirstLetter(string) {
-        return string.charAt(0).toUpperCase() + string.slice(1);
+    * 
+    * @param {*} data 
+    * @returns 
+    */
+    function parseJsonMunicipios(data) {
+        const groupedData = data.municipios.reduce((acc, current) => {
+            const key = `${current.nombre_completo}`;
+            current.label = key;
+            if (!acc[key]) {
+                acc[key] = current;
+            }
+            return acc;
+        }, {});
+    return Object.values(groupedData);
     }
-
-
+    
     /**
      * 
      * @param {*} data 
      * @returns 
      */
     function parseJsonLocalidades(data) {
-        localidades = [];
-        data.results.forEach(function(localidad, index) {
-            localidades.push(localidad);
-        });
-        return localidades;
+        const groupedData = data.localidades.reduce((acc, current) => {
+            const key = `${current.departamento.nombre} - ${current.nombre}`;
+            current.label = key;
+            if (!acc[key]) {
+                acc[key] = current;
+            }
+            return acc;
+        }, {});
+        return Object.values(groupedData);
     }
 
 
@@ -1638,18 +3262,39 @@ var ponchoUbicacion = function(options) {
     function addProvEvent() {
         sProvincia.on('change', function(e) {
             iProvincia.val('');
+            iMunicipio.val('');
             iLocalidad.val('');
+            sMunicipios.children('option:not(:first)').remove();
             sLocalidades.children('option:not(:first)').remove();
             if (sProvincia.val() != '') {
+                iMunicipio.val(sMunicipios.find(":selected").text());
                 iProvincia.val(sProvincia.find(":selected").text());
-                var sAux = getSelectLocalidades(localidades, sProvincia.val());
-                var sOpt = sAux.find('option');
-                sLocalidades.append(sOpt);
+
+                var sAuxM = getSelectMunicipios(municipios, sProvincia.val());
+                var sOptM = sAuxM.find('option');
+                sMunicipios.append(sOptM);
+                sMunicipios.val('');
+                
+                var sAuxL = getSelectLocalidades(localidades, sProvincia.val());
+                var sOptL = sAuxL.find('option');
+                sLocalidades.append(sOptL);
                 sLocalidades.val('');
+
             }
         });
     }
 
+    /**
+    * 
+    */
+    function addMunEvent() {
+        sMunicipios.on('change', function(e) {
+            iMunicipio.val('');
+            if (sMunicipios.val() != '') {
+                iMunicipio.val(sMunicipios.find(":selected").text());
+            }
+        });
+    }
 
     /**
      * 
@@ -1689,12 +3334,11 @@ var ponchoUbicacion = function(options) {
         jQuery.each(optionList, function(i, el) {
             let selected = '';
             if (selected_item == el.nombre) {
-                selected = 'selected="selected"';
+                selected = ' selected="selected"';
             }
+            const label = (el.label ? el.label : el.nombre);
             combo.append(
-                "<option value='" + el.id + "' " + selected + ">" +
-                el.nombre +
-                "</option>"
+                `<option value="${el.id}"${selected}>${label}</option>`
             );
         });
         return combo;
@@ -1722,6 +3366,42 @@ var ponchoUbicacion = function(options) {
         return select;
     }
 
+    /**
+    * 
+    * @param {*} municipios 
+    * @param {*} provincia
+    * @returns 
+    */
+    function getSelectMunicipios(municipios, provincia) {
+        var muniSelect = {};
+        var required = iMunicipio.prop('required');
+        var select = null;
+        
+        if (iProvincia.val()) {
+        muniSelect = municipios
+                .filter(function(municipio) {
+                    return String(municipio.provincia.id) == String(provincia);
+                })
+                .sort(function(a, b) {
+                    var nameA = a.label.toUpperCase();
+                    var nameB = b.label.toUpperCase();
+                    return nameA.localeCompare(nameB);
+                });
+        emptyOption = false;
+            select = getDropDownList(
+                'sMunicipios', 'sMunicipios',
+                muniSelect, required, emptyOption, iMunicipio.val()
+            );
+        }else {
+            select = getDropDownList(
+                'sMunicipios', 'sMunicipios',
+            [], required, true, false
+            );
+        }
+        
+    return select;
+    }
+
 
     /**
      * 
@@ -1739,17 +3419,9 @@ var ponchoUbicacion = function(options) {
                 .filter(function(localidad) {
                     return String(localidad.provincia.id) == String(provincia);
                 })
-                .map(function(a) {
-                    if (a.departamento.nombre) {
-                        a.nombre = capitalizeFirstLetter(
-                            a.departamento.nombre.toLowerCase()) + ' - ' + 
-                            capitalizeFirstLetter(a.nombre.toLowerCase());
-                    }
-                    return a;
-                })
                 .sort(function(a, b) {
-                    var nameA = a.nombre.toUpperCase();
-                    var nameB = b.nombre.toUpperCase();
+                    var nameA = a.label.toUpperCase();
+                    var nameB = b.label.toUpperCase();
                     return nameA.localeCompare(nameB);
                 });
             
@@ -2456,17 +4128,24 @@ function ponchoChart(opt) {
         jQuery.each(listado, function(row, value) {
             if (row == 0) { //construyo arrays para los dataset, recupero colores y labels
                 jQuery.each(filteredTitlePos, function(index, title) {
-                    var split = listado[row][filteredTitlePos[index]].split("-");
-                    var pos = split[0] + split[1];
+                    const regex = /(?<axis>eje-(x|y(?:[1-9]|[1-9][0-9])))-(?<color>[\w-]*?)(?:-(?<type>linea|barra))?$/;
+                    const result = regex.exec(listado[row][filteredTitlePos[index]]);
+                    if(!result){
+                        return;
+                    }
+                    
+                    const graphType = result.groups.type;
+                    const pos = result.groups.axis.replace('-', '');
+
                     valores[pos] = []; //construyo los array para los dataset
-                    colores.push(split[2]); //recupero colores
+                    colores.push( result.groups.color ); //recupero colores
 
                     if (tipoGrafico == "mixed") {
-                        if (split.length > 3){ //ingresaron un tipo de grafico
+                        if (graphType){ //ingresaron un tipo de grafico
                             //verifico que sea un tipo de grafico valido
-                            if (split[3] == "barra" || split[3] == "linea") {
+                            if (graphType == "barra" || graphType == "linea") {
                                 //recupero tipo de grafico para cada dataset   
-                                tipoGraficosMixed.push(split[3]);
+                                tipoGraficosMixed.push(graphType);
                             } else { //seteo graficos por defecto
                                 if (index == 0) {
                                     //por defecto seteo barra
@@ -2488,10 +4167,10 @@ function ponchoChart(opt) {
                             }
                         }
                     }
-
                 });
             }
 
+
             if (row == 1) {
                 jQuery.each(filteredTitlePos, function(index, title) {
                     if (tipoGrafico != "pie") {
@@ -2747,9 +4426,10 @@ function ponchoChart(opt) {
         if (tipoGrafico == "pie") {
 
             colores.forEach(function(valor, indice, array) {
+                console.log(valor)
                 codigosColores.push(ponchoColor(valor));
             });
-
+            
             graficoTorta(
                 etiquetas, datos, tipoGrafico, codigosColores, 
                 opt.idComponenteGrafico, posicionLeyendas, toltips, 
@@ -3026,6 +4706,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 = [];
@@ -3045,7 +4733,9 @@ const gapi_legacy = (response) => {
 };
 
 
-/* module.exports REMOVED */
+if (typeof exports !== "undefined") {
+  module.exports = gapi_legacy;
+}
 
 /**
  * PONCHO MAP
@@ -3279,17 +4969,20 @@ class PonchoMap {
             ...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",
-        { 
-            attribution: ("Contribuidores: "
-                + "<a href=\"https://www.ign.gob.ar/AreaServicios/Argenmap/Introduccion\" " 
-                + "target=\"_blank\">"
-                + "Instituto Geográfico Nacional</a>, "
-                + "<a href=\"https://www.openstreetmap.org/copyright\" "
-                + "target=\"_blank\">"
-                + "OpenStreetMap</a>")
-        });
-        this.markers = new L.markerClusterGroup(this.marker_cluster_options);
+        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\">"
+                    + "Instituto Geográfico Nacional</a>, "
+                    + "<a href=\"https://www.openstreetmap.org/copyright\" "
+                    + "target=\"_blank\">"
+                    + "OpenStreetMap</a>")
+            });
+        if(L.hasOwnProperty("markerClusterGroup")){
+            this.markers = new L.markerClusterGroup(this.marker_cluster_options);
+        } 
         this.ponchoLoaderTimeout;
     }
 
@@ -3521,6 +5214,15 @@ class PonchoMap {
     }
 
 
+    /**
+     * Alias de sluglify
+     * 
+     * @param {string} val Texto a formatear 
+     * @returns {string}
+     */
+    _slugify = val => slugify(val);
+
+
     /**
      * Es un geoJSON
      * 
@@ -3703,6 +5405,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.
      * 
@@ -3715,33 +5453,29 @@ class PonchoMap {
      */
     _setIdIfNotExists = (entries) => {
         const hasId = entries.features
-                .filter((_,k) => k===0)
-                .every(e => e.properties.hasOwnProperty("id"));
-
-        if(!hasId){
-            const newEntries = entries.features.map(
-                (v,k) => {
-
-                    if(this.id_mixing.length > 0){
-                        const values = this.id_mixing.map(val => {
-                            if(v.properties[val]){
-                                return slugify(v.properties[val]);
-                            } 
-                            return slugify(val);
-                        });
-                        v.properties.id = values.join("-");
-                    } else {
-                        const autoId = k + 1;
-                        const useTitle = (this.title && v.properties[this.title] ? 
-                                slugify(v.properties[this.title]) : "");
-                        v.properties.id = `${autoId}-${useTitle}`;
-                    }
-                    
-                    return v;
-                }); 
-            entries.features = newEntries;
-        }
+            .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;
     };
 
@@ -3753,9 +5487,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}`;
     };
 
@@ -3785,44 +5526,38 @@ class PonchoMap {
      */
     searchEntries = (term, dataset) => {
         dataset = (typeof dataset === "undefined" ? this.geoJSON: dataset);
-        if(!term){
+        if(typeof term !== "string" || term.trim().length === 0){
             return dataset;
         }
-        const entries = dataset.filter(e => {
-            if(this.searchEntry(term, e.properties)){
-                return e;
-            };
+        const entries = dataset.filter(entry => {
+            return (this.searchEntry(term, entry.properties));
         })
         return entries;
     };
 
-    
+
     /**
      * Busca un término en cada uno de los indices de una entrada.
      */
-    searchEntry = (search_term, data) => {
-        const search_for = [
+    searchEntry = (searchTerm, data) => {
+        const searchFor = [
             ...new Set([...[this.title], ...this.search_fields])
         ].filter(e => e);
 
-        for(const item of search_for){
-            if(!data.hasOwnProperty(item)){
-                continue;
-            }
-            const term = replaceSpecialChars(search_term)
-                    .toUpperCase();
-            const field = replaceSpecialChars(data[item])
+        const term = replaceSpecialChars(searchTerm).toUpperCase();
+        const result = searchFor.some(function(key){
+            const field = replaceSpecialChars(data[key])
                     .toString()
                     .toUpperCase();
+
             try {
-                if(field.includes(term)){
-                    return data;
-                }
+                return (field.includes(term));
             } catch (error) {
                 console.error(error);
             }
-        }
-        return null;
+        });
+
+        return (result ? data : null);
     };
 
 
@@ -4270,6 +6005,10 @@ class PonchoMap {
      * Setea los markers para ejecutarse en un evento onlick
      */   
     _urlHash = () => {
+        if(!this.hash){
+            return;
+        }
+
         const setHash = (layer) => {
             layer.on("click", () => {
                 this.addHash(layer.options.id);
@@ -4499,6 +6238,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
@@ -4763,6 +6506,7 @@ class PonchoMap {
                         properties[_this.title], _this.tooltip_options
                     );
                 }
+                
                 // Si el usuario desea utilizar popUp en vez de slider.
                 if(!_this.no_info && !_this.slider){
                     const html = (typeof _this.template == "function" ? 
@@ -5108,9 +6852,7 @@ class PonchoMap {
             this._clickToggleSlider();
         }
 
-        if(this.hash){
-            this._urlHash();
-        }
+        this._urlHash();
 
         if(this.scroll && this.hasHash()){
             this.scrollCenter();
@@ -5135,11 +6877,16 @@ class PonchoMapLoader {
 
     constructor(options){
         const defaults = {
+            selector: "",
             scope: "",
-            timeout: 50000
+            timeout: 50000,
+            cover_opacity: 1,
+            cover_style: {},
         };
         let opts = Object.assign({}, defaults, options);
         this.scope = opts.scope;
+        this.cover_opacity = opts.cover_opacity;
+        this.cover_style = opts.cover_style;
         this.timeout = opts.timeout;
         this.scope_sufix = `--${this.scope}`;
         this.scope_selector = `[data-scope="${this.scope}"]`;
@@ -5174,6 +6921,11 @@ class PonchoMapLoader {
         cover.classList.add(
             "poncho-map__loader", `js-poncho-map__loader${this.scope_sufix}`
         );
+        // Background opacity
+        Object.assign(cover.style, this.cover_style);
+        if(this.cover_opacity){
+            cover.style.backgroundColor = `color-mix(in srgb, transparent, var(--pm-loader-background) ${this.cover_opacity.toString() * 100}%)`;
+        }
         cover.appendChild(loader);
         element.appendChild(cover);  
         this.ponchoLoaderTimeout = setTimeout(this.remove, this.timeout);
@@ -5952,14 +7704,13 @@ class PonchoMapFilter extends PonchoMap {
      */
     _validateEntry = (entry, form_filters) => {
         const fields_group = (group) => form_filters.filter(e => e[0] == group);
-        // Reviso cuantos grupos tengo que validar.
         const total_groups = this.filters.length;
-        let validations = [];
-        for(let i = 0; i < total_groups; i++){
-            // por cada grupo de fields obtengo un resultado de grupo.
-            validations.push(this._validateGroup(entry, fields_group(i)));
-        }
-        return validations.every(e => e);
+
+        const validations = Array.from( {length: total_groups}, (_, i) => {
+            return this._validateGroup(entry, fields_group(i));
+        }).reduce((acc, val) => acc && val, true);
+
+        return validations;
     };
 
 
@@ -6032,10 +7783,7 @@ class PonchoMapFilter extends PonchoMap {
             this._clickToggleSlider();
         }
 
-        if(this.hash){
-            this._urlHash();
-        }
-        
+        this._urlHash();
         this._setFetureAttributes();
         this._accesibleMenu();
     };
@@ -6450,7 +8198,6 @@ const PONCHOMAP_GEOJSON_PROVINCES = "/profiles/argentinagobar/"
         + "themes/contrib/poncho/resources/jsons/"
         + "geo-provincias-argentinas.json";
 
-
 /**
  * Junta el geoJSON con el JSON de Google Sheet
  *
@@ -6500,14 +8247,28 @@ const ponchoMapProvinceMergeData = (geoProvinces={}, entries={},
 /**
  * Remueve estilos toggle del select y el contenedor del mapa
  * 
- * @summary Este objeto no puede estar dentro de la clase porque no se puede
+ * @summary 
+ * Cuando la opción sea verdadera (true en inglés), y  el viewport o 
+ * tamaño del display, sea inferior a los 992 píxeles de ancho; 
+ * el componente html, select, con el listado de provincias se mostrará, 
+ * mientras que el mapa permanecerá oculto. 
+ * 
+ * Cuando la opción sea falsa (false en inglés), tanto el componente 
+ * html, select, como el mapa estarán visibles en todo momento.
+ * 
+ * @todo 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(typeof flag !== "boolean"){
+        return
+    }
+
     if(flag){
         return;
     }
+    
     const s = document.querySelectorAll(
         ".poncho-map-province__toggle-map,"
         + ".poncho-map-province__toggle-element"
@@ -6535,7 +8296,8 @@ class PonchoMapProvinces extends PonchoMapFilter {
             overlay_image_opacity: 0.8,
             overlay_image_url: "https://www.argentina.gob.ar/"
                 + "sites/default/files/map-shadow.png",
-            hide_select: true,
+            hide_select: false,
+            toggle_select: true,
             province_index: "provincia",
             fit_bounds: true,
             // Sobreescribo opciones de PonchoMap
@@ -6561,8 +8323,8 @@ class PonchoMapProvinces extends PonchoMapFilter {
         };
         // Merge options
         let opts = Object.assign({}, defaultOptions, options);
-
-        ponchoMapProvinceCssStyles(opts.hide_select);
+        console.log(opts)
+        ponchoMapProvinceCssStyles(opts.toggle_select);
 
         // PonchoMapFilter instance
         const mergedJSONs = ponchoMapProvinceMergeData(
@@ -6578,8 +8340,10 @@ class PonchoMapProvinces extends PonchoMapFilter {
         this.overlayImageBounds = opts.overlay_image_bounds;
         this.overlayImageOpacity = opts.overlay_image_opacity;
         this.mapView = opts.map_view;
+        this.toggleSelect = opts.toggle_select;
         this.hideSelect = opts.hide_select;
         this.fitToBounds = opts.fit_bounds
+
     }
 
 
@@ -6602,6 +8366,24 @@ class PonchoMapProvinces extends PonchoMapFilter {
     });
 
 
+    /**
+     * Oculta el select
+     * @param {*} status 
+     * @returns 
+     */
+    hideSelectProvinces = status => {
+        if(typeof status != "boolean"){
+            return;
+        }
+
+        const selector = `[data-scope-related="${this.scope}"]`;
+        const obj = document.querySelectorAll(selector);
+        obj.forEach(element => {
+            element.style.display = (this.hideSelect ? "none" : "");
+        });
+    }
+
+
     /**
      * Retorna un valor aleatório.
      * @param {object} list Listado de provincias
@@ -6667,7 +8449,7 @@ class PonchoMapProvinces extends PonchoMapFilter {
 
         // Creo los options
         const selectProvinces = document.getElementById("id_provincia");
-        const optionsSelect = [["", "Seleccione una provincia"], ...prov];
+        const optionsSelect = [["", "Elegí una provincia"], ...prov];
         optionsSelect.forEach(province => {
             const option = document.createElement("option");
 
@@ -6728,6 +8510,17 @@ class PonchoMapProvinces extends PonchoMapFilter {
         if(!this.overlayImage){
             return;
         }
+console.log(this.overlayImageUrl)
+        if(typeof this.overlayImageUrl !== "string"){
+            console.error("Hubo un problema con la ruta o nombre de la imagen");
+            return;
+        }
+
+        if(typeof this.overlayImageOpacity !== "number"){
+            console.error("El valor de la opacidad debe ser un número.");
+            return;
+        }
+
         L.imageOverlay(
             this.overlayImageUrl, this.overlayImageBounds, 
             {opacity: this.overlayImageOpacity}
@@ -6739,7 +8532,9 @@ class PonchoMapProvinces extends PonchoMapFilter {
      * imprime el mapa
      */ 
     renderProvinceMap = () =>{
+        this.hideSelectProvinces(this.hideSelect);
         this._overlayImage();
+
         this.render(); // Imprime PonchoMapsFilter
         if(this.fitToBounds){
             this.fitBounds();
@@ -6857,7 +8652,9 @@ class GapiSheetData {
 
 
 
-/* module.exports REMOVED */
+if (typeof exports !== "undefined") {
+    module.exports = GapiSheetData;
+}
 
 /**
  * TRANSLATE