UNPKG

ar-poncho

Version:

Base de html y css para la creación de sitios pertenecientes a la Administración Pública Nacional de la República Argentina.

1,657 lines (1,619 loc) 52.7 kB
@charset "UTF-8"; /* Libraries */ /* Resources */ /** * COLORES PONCHO * Versión 2 * * @summary Listado de colores disponibles para representar texto y elementos * visuales dentro del sitio web www.argentina.gob.ar. * * Copyright (c) 2024 Argentina.gob.ar */ /* Foco o alerta */ /* Foco o alerta */ /* Foco o alerta */ /* Color principal */ /* Enlace */ /* Elementos básicos */ /* Color principal */ /* Atención o peligro */ /* Color principal */ /* Color principal */ /* Color amarillo oficial para la bandera Argentina */ /* Color celeste oficial para la bandera Argentina */ /* Color marrón oficial para la bandera Argentina */ /* Elementos básicos */ /* Atención o peligro */ /* Elementos básicos */ /* Azul principal para aplicaciones MiArgentina */ /* Elementos básicos */ /* Color principal */ /* Color principal */ /* Atención o peligro */ /* Foco o alerta */ /** * Listado de variables de color */ /** * Variables tonales :root, html. * * @summary Crea las variables de estilo --color: [hex], * para html,root: {...} */ :root, html { --arg-primary-50:#E3E7ED; --arg-primary-100:#C8D0DA; --arg-primary-200:#ACB8C8; --arg-primary-300:#91A1B5; --arg-primary-400:#7589A3; --arg-primary-500:#5A7290; --arg-primary-600:#3E5A7E; --arg-primary-700:#354B6E; --arg-primary-800:#2C3C5F; --arg-primary-900:#232D4F; --arg-verde-50:#F1F5D7; --arg-verde-100:#DEE8A3; --arg-verde-200:#CCDB6E; --arg-verde-300:#B9CE39; --arg-verde-400:#93B727; --arg-verde-500:#6EA015; --arg-verde-600:#4E8F24; --arg-verde-700:#2E7D33; --arg-verde-800:#27692A; --arg-verde-900:#1F5421; --arg-amarillo-50:#FFFAE8; --arg-amarillo-100:#FFF1C0; --arg-amarillo-200:#FFE997; --arg-amarillo-300:#FFE06E; --arg-amarillo-400:#FFD745; --arg-amarillo-500:#FFCE1C; --arg-amarillo-600:#D8AE18; --arg-amarillo-700:#B18F15; --arg-amarillo-800:#8A6F12; --arg-amarillo-900:#634F0E; --arg-fucsia-50:#FCDDE6; --arg-fucsia-100:#F8B6C9; --arg-fucsia-200:#F48EAB; --arg-fucsia-300:#F16798; --arg-fucsia-400:#ED3F85; --arg-fucsia-500:#EC407A; --arg-fucsia-600:#D72C6B; --arg-fucsia-700:#C2185B; --arg-fucsia-800:#9A144A; --arg-fucsia-900:#721038; --arg-violeta-50:#E9E6F2; --arg-violeta-100:#D3CEE5; --arg-violeta-200:#BEB5D8; --arg-violeta-300:#A89DCB; --arg-violeta-400:#9284BE; --arg-violeta-500:#8561B2; --arg-violeta-600:#773EA5; --arg-violeta-700:#6A1B99; --arg-violeta-800:#4B0F7A; --arg-violeta-900:#2C035C; --arg-negro-25:#FFFFFF; --arg-negro-50:#F0F0F0; --arg-negro-75:#F2F2F2; --arg-negro-100:#E9E9E9; --arg-negro-150:#DEE2E6; --arg-negro-200:#DDDDDD; --arg-negro-300:#838383; --arg-negro-500:#555555; --arg-negro-600:#444444; --arg-negro-900:#141414; --arg-turquesa-50:#DCF1F0; --arg-turquesa-100:#C0E5E3; --arg-turquesa-200:#A4D9D7; --arg-turquesa-300:#88CECB; --arg-turquesa-400:#6CC3BE; --arg-turquesa-500:#50B7B2; --arg-turquesa-600:#459E99; --arg-turquesa-700:#3B8681; --arg-turquesa-800:#306D69; --arg-turquesa-900:#255450; --arg-azul-50:#CDEBFA; --arg-azul-100:#9AD7F5; --arg-azul-200:#68C3EF; --arg-azul-300:#35AFEA; --arg-azul-400:#039BE5; --arg-azul-500:#0581C6; --arg-azul-600:#0767A7; --arg-azul-700:#084E87; --arg-azul-800:#0A3468; --arg-azul-900:#0C1A49; --arg-rojo-50:#FCDDDC; --arg-rojo-100:#F9BBB9; --arg-rojo-200:#F69896; --arg-rojo-300:#F27673; --arg-rojo-400:#EF5350; --arg-rojo-500:#E14543; --arg-rojo-600:#D43635; --arg-rojo-700:#C62828; --arg-rojo-800:#A12222; --arg-rojo-900:#7C1C1C; --arg-naranja-50:#FDE7BF; --arg-naranja-100:#FBCE80; --arg-naranja-200:#F9B640; --arg-naranja-300:#F79D00; --arg-naranja-400:#F38500; --arg-naranja-500:#EF6C00; --arg-naranja-600:#CE5701; --arg-naranja-700:#AE4203; --arg-naranja-800:#8D2D04; --arg-naranja-900:#6C1805; --arg-blanco-150:#FFFFFF; --arg-ocre-50:#FAF8ED; --arg-ocre-100:#F4F0DB; --arg-ocre-200:#EAE1B7; --arg-ocre-300:#E9CE8C; --arg-ocre-400:#E7BA61; --arg-ocre-500:#C98941; --arg-ocre-600:#AA5821; --arg-ocre-700:#8C2701; --arg-ocre-800:#6F2001; --arg-ocre-900:#511901; --arg-morado-150:#3A3796; --miarg-azul-150:#3526C3; --miarg-celeste-150:#2CB9EE; --miarg-amarillo-claro-150:#ffe9b8; --miarg-rosa-claro-150:#EECCCF; --miarg-verde-claro-150:#CFEEDC; --miarg-azul-oscuro-150:#222C50; --miarg-gris-150:#7E848E; --miarg-celeste-claro-150:#BEE6F6; --bandera-amarillo-150:#FCBF49; --bandera-celeste-150:#75AADB; --bandera-marron-150:#843511; --gna-verde-jade-150:#006666; --gna-verde-aloe-150:#4FBB73; --gna-verde-cemento-150:#B4BEBA; --amarillo:#E7BA61; --amarillo-intenso:#E7BA61; --arandano:#C2185B; --arg-amarillo:#E7BA61; --arg-amarillo-dark:#AA5821; --arg-amarillo-half:#F3DDB0; --arg-amarillo-light:#EAE1B7; --arg-arandano:#C2185B; --arg-arandano-dark:#721038; --arg-arandano-half:#E18CAD; --arg-arandano-light:#EC407A; --arg-arandano-lighter:#FCDDE6; --arg-arena:#EAE1B7; --arg-arena-dark:#E7BA61; --arg-arena-half:#F5F0DB; --arg-arena-light:#FAF8ED; --arg-azul:#232D4F; --arg-azul-half:#9296A7; --arg-azul-lighter:#C8D0DA; --arg-azul-morado:#3A3796; --arg-blanco:#FFFFFF; --arg-cielo:#039BE5; --arg-default:#838383; --arg-enlace:#0767A7; --arg-enlace-dark:#084E87; --arg-enlace-light:#0581C6; --arg-escarapela:#68C3EF; --arg-eucalipto:#306D69; --arg-eucalipto-dark:#255450; --arg-eucalipto-lighter:#A4D9D7; --arg-fucsia:#EC407A; --arg-fucsia-dark:#9A144A; --arg-fucsia-light:#F16798; --arg-gray-background:#FFFFFF; --arg-gray-border:#DEE2E6; --arg-gray-dark:#444444; --arg-gray-hover:#E9E9E9; --arg-gray-hover-light:#F0F0F0; --arg-gray-light:#DDDDDD; --arg-gris-intermedio:#555555; --arg-gris-niebla:#F2F2F2; --arg-info:#5A7290; --arg-info-lighter:#E3E7ED; --arg-lavanda:#9284BE; --arg-lima:#B9CE39; --arg-lima-dark:#6EA015; --arg-lima-light:#DEE8A3; --arg-maiz:#FFCE1C; --arg-maiz-dark:#B18F15; --arg-maiz-light:#FFE997; --arg-mandarina:#F79D00; --arg-mandarina-dark:#CE5701; --arg-mandarina-light:#FBCE80; --arg-marron-claro:#8D2D04; --arg-marron-claro-dark:#6C1805; --arg-marron-claro-light:#CE5701; --arg-marron-oscuro:#511901; --arg-naranja:#EF6C00; --arg-naranja-dark:#6C1805; --arg-naranja-light:#EF6C00; --arg-negro:#141414; --arg-negro-light:#DDDDDD; --arg-negro-lighter:#F0F0F0; --arg-palta:#50B7B2; --arg-palta-half:#A8DBD9; --arg-palta-lighter:#C0E5E3; --arg-primary:#232D4F; --arg-primary-light:#E3E7ED; --arg-rojo:#C62828; --arg-rojo-dark:#7C1C1C; --arg-rojo-light:#E14543; --arg-rojo-lighter:#FCDDDC; --arg-rosado:#F48EAB; --arg-rosado-dark:#ED3F85; --arg-rosado-half:#FAC7D5; --arg-rosado-light:#FCDDE6; --arg-secundario:#3E5A7E; --arg-tomate:#EF5350; --arg-tomate-dark:#C62828; --arg-tomate-light:#F69896; --arg-uva:#6A1B99; --arg-verde:#2E7D33; --arg-verde-azulado:#3B8681; --arg-verde-dark:#1F5421; --arg-verde-half:#96BE99; --arg-verde-light:#6EA015; --arg-verdin:#6EA015; --arg-verdin-dark:#2E7D33; --arg-verdin-light:#B9CE39; --arg-white:#FFFFFF; --azul:#232D4F; --azul-marino:#232D4F; --bandera-amarillo:#FCBF49; --bandera-celeste:#75AADB; --bandera-marron:#843511; --black:#141414; --celeste:#039BE5; --celeste-argentina:#68C3EF; --celesteargentina:#68C3EF; --cereza:#EC407A; --cielo:#039BE5; --complementary:#EF5350; --danger:#C62828; --default:#838383; --escarapela:#68C3EF; --fucsia:#EC407A; --gna-verde-aloe:#4FBB73; --gna-verde-cemento:#B4BEBA; --gna-verde-jade:#006666; --gray:#555555; --gray-background:#FFFFFF; --gray-base:#141414; --gray-border:#DEE2E6; --gray-dark:#444444; --gray-hover:#E9E9E9; --gray-hover-light:#F0F0F0; --gray-light:#DDDDDD; --gray-lighter:#F2F2F2; --gris:#555555; --gris-area:#555555; --grisintermedio:#555555; --info:#5A7290; --lavanda:#9284BE; --lima:#B9CE39; --limon:#B9CE39; --maiz:#FFCE1C; --mandarina:#F79D00; --marron-claro:#8D2D04; --miarg-amarillo-claro:#ffe9b8; --miarg-azul:#3526C3; --miarg-azul-half:#6B66CC; --miarg-celeste:#2CB9EE; --miarg-celeste-claro:#BEE6F6; --miarg-gris:#7E848E; --miarg-oscuro:#222C50; --miarg-rosa-claro:#EECCCF; --miarg-verde-claro:#CFEEDC; --naranja:#EF6C00; --naranjaoscuro:#EF6C00; --negro:#141414; --palta:#50B7B2; --primary:#232D4F; --primary-alt:#232D4F; --primary-light:#E3E7ED; --rojo:#C62828; --secondary:#3E5A7E; --secundario:#3E5A7E; --success:#2E7D33; --tomate:#EF5350; --uva:#6A1B99; --verde:#2E7D33; --verde-aloe:#4FBB73; --verde-azulado:#3B8681; --verde-cemento:#B4BEBA; --verde-jade:#006666; --verdeazulado:#3B8681; --verdecemento:#B4BEBA; --verdejade:#006666; --verdin:#6EA015; --warning:#E7BA61; --white:#FFFFFF; } .poncho-map { --pm-slider-width: 330px; --pm-tools-width: 300px; --pm-color-primary: var(--primary, #0072bb); --pm-map-background:white; --pm-color-base: var(--black, #333); --pm-content-padding: 15px; --pm-hover-background: #ddd; --pm-hover-color: var(--pm-color-base); --pm-link: var(--arg-enlace, #0767A7); --pm-active-color: white; --pm-active-background: var(--pm-color-primary); --pm-active-visited-color: var(--arg-uva, blueviolet); --pm-slider-background: rgba(255, 255, 255, 1); --pm-slider-border-color: #ddd; --pm-slider-border-width: 1px; --pm-slider-shadow: 0 0 10px rgba(0, 0, 0, 0.2); --pm-slider-distance: 10px; --pm-slider-radius: 22px; --pm-slider-media-mobile-height: 100%; --pm-tooltip: #333; --pm-tooltip-color: white; --pm-slider-modal-color: var(--black); --pm-active-marker-color: var(--arg-maiz, gold); --pm-active-marker-color-darker: var(--arg-naranja, orange); --pm-accesible-background: #eaeaea; --pm-loader-background: var(--pm-map-background); --pm-loader-spinner-color: var(--pm-color-primary); --pm-loader-spinner-background: #ccc; --pm-loader-spinner-size: 80px; --pm-loader-spinner-weight: 4px; --pm-scrollbar-handle: #444; --pm-scrollbar-background: #ddd; } @keyframes pm-slidein-mobile { 0% { right: var(--pm-slider-distance); bottom: calc(-1 * var(--pm-slider-media-mobile-height)); opacity: 0; } 100% { bottom: var(--pm-slider-distance); opacity: 1; right: var(--pm-slider-distance); } } @keyframes pm-slidein { 0% { right: calc(-1 * var(--pm-slider-width)); opacity: 0; box-shadow: none; } 100% { right: var(--pm-slider-distance); opacity: 1; } } /* Mensajes de error y warning */ .poncho-map--message { padding: 15px; font-size: smaller; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border-left: 6px solid #444; margin: 1em 0; color: #444; background-color: #f4f4f0; } .poncho-map--message code { background-color: rgba(0, 0, 0, 0.1); color: #9A144A; } .poncho-map--message.danger { border-left-color: var(--arg-rojo-700, #C62828); } .poncho-map--message.warning { border-left-color: var(--arg-naranja-200, #F9B640); color: rgba(0, 0, 0, 0.8); } .poncho-map--message .console-message-container { margin-top: 1.5em; padding: 0 10px; border: 1px solid #ddd; border-radius: 6px; } .poncho-map--message .console-message-container details { border: none; } .poncho-map--message .console { background: #444; overflow: clip; border-radius: 4px; padding: 10px; margin-bottom: 10px; } .poncho-map--message .console > code { display: block; overflow: auto; text-wrap: wrap; font-size: small; background: transparent; color: #ffce1c; } @keyframes pm-loader-rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .poncho-map { /* loader */ } .poncho-map__loader { width: 100%; height: 100%; background: var(--pm-loader-background); position: absolute; left: 0; top: 0; z-index: 9999; padding: 1em; } .poncho-map__loader .loader { position: absolute; top: 50%; left: 50%; margin: -40px; width: var(--pm-loader-spinner-size); height: var(--pm-loader-spinner-size); border: var(--pm-loader-spinner-weight) solid var(--pm-loader-spinner-background); border-bottom-color: var(--pm-loader-spinner-color); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: pm-loader-rotation 1s linear infinite; } .poncho-map { background-color: var(--pm-map-background) !important; overflow: hidden; position: relative; width: 100%; /* SCROLLBARS */ } .poncho-map * { scrollbar-color: var(--pm-scrollbar-handle) var(--pm-scrollbar-background); scrollbar-width: thin; } .poncho-map { /* HEADER */ } .poncho-map .pm-header { margin-bottom: 1em; padding: 0; border: none; } .poncho-map { /* FUCUSABLE */ } .poncho-map *:focus-visible, .poncho-map .focus-element:focus-visible { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; box-sizing: border-box; outline: 3px solid var(--cielo, #039be5); } .poncho-map .pm-color-primary { color: var(--pm-color-primary); } .poncho-map .pm-container { box-shadow: var(--pm-slider-shadow); background-color: var(--pm-slider-background); color: var(--pm-color-base); -webkit-border-radius: var(--pm-slider-radius); -moz-border-radius: var(--pm-slider-radius); border-radius: var(--pm-slider-radius); transform-style: preserve-3d; border: var(--pm-slider-border-width) solid var(--pm-slider-border-color); padding: 0; margin: unset; inset-inline-start: unset; } .poncho-map .pm-container article { border: none; margin: 0; padding: 0; } .poncho-map .pm-container article header { border: none; margin: 0; padding: 0; } .poncho-map .pm-term-icon-helper { display: flex; width: 100%; gap: 4px; align-items: center; line-height: inherit; } .poncho-map .pm-term-icon-helper > :nth-child(1) { flex-basis: 1.3em; flex-shrink: 0; text-align: center; } .poncho-map .pm-form-control { color: var(--pm-color-base); font-size: 0.88em; height: 38px; padding: 6px 12px; border: solid var(--pm-slider-border-width) var(--pm-slider-border-color); border-radius: 6px; box-shadow: none; background: var(--pm-slider-background); width: calc(100% - var(--pm-slider-border-width) * 2); box-sizing: border-box; } .poncho-map .pm-tools { position: absolute; bottom: var(--pm-slider-distance); left: var(--pm-slider-distance); z-index: 998; } .poncho-map .pm-tools:has([data-toggle=true]):has(:focus) { z-index: 1000; } .poncho-map .pm-toggle { display: none; position: absolute; width: var(--pm-tools-width); bottom: 49px; } .poncho-map [data-toggle=true]:focus, .poncho-map [data-toggle=true]:focus > .pm-toggle, .poncho-map [data-toggle=true]:focus-within > .pm-toggle { display: block; } .poncho-map .pm-list li { margin: 0 0 1px 0; padding: 0; } .poncho-map .pm-item-separator:after { content: ""; width: 100%; display: block; height: 0; border-bottom: var(--pm-slider-border-width, 1px) solid var(--pm-slider-border-color); margin: calc(var(--pm-slider-distance) / 2) 0; } .poncho-map .pm-item-link { text-decoration: none; text-align: left; cursor: pointer; display: block; background: transparent; border: none; width: 100%; color: var(--pm-color-base); margin-bottom: 2px; padding: calc(var(--pm-slider-distance) / 3 * 2) var(--pm-slider-distance); -webkit-border-radius: calc(var(--pm-slider-radius) - var(--pm-slider-distance)); -moz-border-radius: calc(var(--pm-slider-radius) - var(--pm-slider-distance)); border-radius: calc(var(--pm-slider-radius) - var(--pm-slider-distance)); transition: background 0.15s; } .poncho-map .pm-item-link:hover, .poncho-map .pm-item-link:focus { background-color: var(--pm-hover-background); color: var(--pm-hover-color); transition: background 0.15s; } .poncho-map .pm-item-link { text-decoration: none; } .poncho-map .pm-item-link.pm-accesible { color: #eaeaea !important; } .poncho-map .pm-item-link.pm-accesible:focus, .poncho-map .pm-item-link.pm-accesible:hover { color: #111 !important; box-shadow: none !important; background: var(--pm-accesible-background); } .poncho-map .pm-caret:after, .poncho-map .pm-caret:before { content: " "; width: 0; height: 0; z-index: 990; position: absolute; } .poncho-map .pm-caret:after { border-left: 8px solid rgba(0, 0, 0, 0); border-right: 8px solid rgba(0, 0, 0, 0); border-bottom: 9px solid var(--pm-slider-background); } .poncho-map .pm-caret:before { border-left: 10px solid rgba(0, 0, 0, 0); border-right: 10px solid rgba(0, 0, 0, 0); border-bottom: 11px solid var(--pm-slider-border-color); transform: translateZ(-1px); -moz-transform: translateZ(-1px); } .poncho-map .pm-caret-t:after { top: -7px; left: 11px; } .poncho-map .pm-caret-t:before { top: calc(-7.75px - var(--pm-slider-border-width)); left: 9px; transform: translateZ(-1px); -moz-transform: translateZ(-1px); } .poncho-map .pm-caret-b:after { bottom: -7px; left: 11px; transform: rotate(180.1deg); -moz-transform: rotate(180.1deg); } .poncho-map .pm-caret-b:before { bottom: calc(-7.75px - var(--pm-slider-border-width)); left: 9px; transform: translateZ(-1px) rotate(180.1deg); -moz-transform: translateZ(-1px) rotate(180.1deg); /*Fix en el rotate*/ } .poncho-map .pm-slider.pm-slider--in { right: var(--pm-slider-distance); animation-duration: 0.3s; animation-name: pm-slidein; } .poncho-map .pm-slider img { max-width: 100%; } .poncho-map .pm-slider { z-index: 1000; position: absolute; top: var(--pm-slider-distance); right: calc(-1 * var(--pm-slider-width)); width: var(--pm-slider-width); height: calc(100% - var(--pm-slider-distance) - var(--pm-slider-distance)); } .poncho-map .pm-slider .pm-content-container { height: calc(100% - var(--pm-slider-radius)); padding-top: calc(var(--pm-content-padding) * 2 + 10px); padding-bottom: 0; display: flex; flex-direction: column; } .poncho-map .pm-slider .pm-content-container:has(.pm-open-map) { height: 100%; } .poncho-map .pm-slider .pm-content { inline-size: min-content; color: var(--pm-color-base); background-color: transparent; height: 100%; width: 100%; overflow-y: auto; overflow-x: hidden; padding-right: var(--pm-content-padding); padding-left: var(--pm-content-padding); box-shadow: 0 -10px 20px var(--pm-slider-background) inset; word-break: break-word; } .poncho-map .pm-slider .pm-content:has(.pm-open-map) { height: calc(100% - 20px); } .poncho-map .pm-slider .pm-content:after { content: ""; background: var(--pm-slider-background); background: -moz-linear-gradient(0deg, var(--pm-slider-background) 30%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(0deg, var(--pm-slider-background) 30%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(0deg, var(--pm-slider-background) 30%, rgba(255, 255, 255, 0) 100%); position: absolute; left: var(--pm-content-padding); width: calc(100% - var(--pm-content-padding) * 2); height: calc(var(--pm-content-padding) * 2); bottom: var(--pm-content-padding); } .poncho-map .filter-container { position: absolute; top: var(--pm-slider-distance); left: var(--pm-slider-distance); z-index: 999; max-height: calc(100% - 80px); } .poncho-map .filter-container .js-filters { overflow: auto; } .poncho-map .filter-container .poncho-map-filters { max-height: calc(100% - 158px); min-height: 150px; display: none; position: relative; z-index: 998; width: var(--pm-tools-width); padding-right: 0; padding-left: 0; padding-top: calc(var(--pm-content-padding) * 2 + 10px); padding-bottom: var(--pm-content-padding); box-shadow: var(--pm-slider-shadow); color: var(--pm-color-base); } .poncho-map .filter-container .poncho-map-filters.filter--in { display: block; } .poncho-map .filter-container .poncho-map-filters .pm-filters-content { padding-right: var(--pm-content-padding); padding-left: var(--pm-content-padding); box-sizing: border-box; } .poncho-map .filter-container .poncho-map-filters .field-list { min-height: 40px; max-height: calc(100% - 110px); overflow: auto; width: calc(100% - 15px); } .poncho-map .filter-container .poncho-map-filters legend { color: var(--pm-color-primary); margin-bottom: 0.75em; opacity: 1; } .poncho-map .filter-container .poncho-map-filters fieldset { border: none; } .poncho-map .filter-container .poncho-map-filters label { font-weight: 400; } .poncho-map .filter-container .poncho-map-filters input[type=checkbox], .poncho-map .filter-container .poncho-map-filters input[type=radio] { accent-color: var(--pm-link) !important; } .poncho-map .filter-container .poncho-map-filters input[type=checkbox]:indeterminate { opacity: 0.7; } .poncho-map .filter-container .poncho-map-filters .form-check { display: flex; align-items: baseline; gap: 0.5rem; padding-left: 1px; } .poncho-map .filter-container .poncho-map-filters .form-check .form-check-label { color: var(--pm-color-base) !important; } .poncho-map .pm-btn-close { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; aspect-ratio: 1/1; position: absolute; background-image: none; width: auto; height: auto; top: 7px; right: 7px; background-color: rgba(0, 0, 0, 0.1); color: var(--pm-color-base); } .poncho-map .pm-btn-rounded-circle { aspect-ratio: 1/1; width: 40px; height: 40px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .poncho-map .pm-btn-xs { font-size: 14px; padding: 1px 5px; } .poncho-map .btn { font-size: 16px; font-weight: 600; margin-bottom: 10px; text-transform: inherit; vertical-align: top; white-space: normal; word-break: initial; text-decoration: none; letter-spacing: inherit; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; line-height: 1.42857143; } .poncho-map .pm-btn { background: var(--pm-slider-background, white); box-shadow: var(--pm-slider-shadow); line-height: 35px; color: var(--pm-color-base); text-align: center; border: var(--pm-slider-border-width) solid var(--pm-slider-border-color); display: flex; text-align: center; } .poncho-map .pm-btn:focus { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .poncho-map .pm-btn:hover { background-color: var(--pm-hover-background); color: var(--pm-hover-color); } .poncho-map { /* Botones menú filter */ } .poncho-map .select-items { border-bottom: 1px solid var(--pm-slider-border-color); margin-bottom: 0.5rem; } .pm-list-unstyled { margin: 0; padding: 0; list-style: none; } .pm-mb-1 { margin-bottom: var(--pm-slider-distance); } .pm-mb-2 { margin-bottom: calc(var(--pm-slider-distance) * 2); } .pm-mb-3 { margin-bottom: calc(var(--pm-slider-distance) * 3); } .pm-mt-1 { margin-top: var(--pm-slider-distance); } .pm-mt-2 { margin-top: calc(var(--pm-slider-distance) * 2); } .pm-mt-3 { margin-top: calc(var(--pm-slider-distance) * 3); } .pm-my-1 { margin-bottom: var(--pm-slider-distance); margin-top: var(--pm-slider-distance); } .pm-my-2 { margin-bottom: calc(var(--pm-slider-distance) * 2); margin-top: calc(var(--pm-slider-distance) * 2); } .pm-my-3 { margin-bottom: calc(var(--pm-slider-distance) * 3); margin-top: calc(var(--pm-slider-distance) * 3); } .pm-p-1 { padding: var(--pm-slider-distance) !important; } .pm-p-2 { padding: calc(var(--pm-slider-distance) * 2) !important; } .pm-p-3 { padding: calc(var(--pm-slider-distance) * 3) !important; } .pm-pb-1 { padding-bottom: var(--pm-slider-distance) !important; } .pm-pb-2 { padding-bottom: calc(var(--pm-slider-distance) * 2) !important; } .pm-pb-3 { padding-bottom: calc(var(--pm-slider-distance) * 3) !important; } .pm-visually-hidden { width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .pm-visually-hidden:not(caption) { position: absolute !important; } .poncho-map .pm-accesible-nav { position: absolute; left: -999em; line-height: 1.5em; z-index: 2000; min-height: 2em; border: 2.5px solid #eaeaea; background: #111; padding: var(--pm-slider-distance); -webkit-border-radius: var(--pm-slider-radius); -moz-border-radius: var(--pm-slider-radius); border-radius: var(--pm-slider-radius); box-shadow: var(--pm-slider-shadow); } .poncho-map .pm-accesible-nav.top:focus-within { top: var(--pm-slider-distance); left: var(--pm-slider-distance); } .poncho-map .pm-accesible-nav.bottom:focus-within { bottom: var(--pm-slider-distance); left: var(--pm-slider-distance); } .poncho-map .pm-accesible-nav .accesible-nav__icon { font-size: 1.25em; background-color: #37bbed; margin-bottom: 4px; } .poncho-map .leaflet-container { background-color: var(--pm-map-background); } .poncho-map { /* Tooltip Leaflet personalizado */ } .poncho-map .leaflet-left .leaflet-control { margin-left: var(--pm-slider-distance); } .poncho-map .leaflet-top .leaflet-control { margin-top: var(--pm-slider-distance); } .poncho-map { /* Tooltip */ } .poncho-map .leaflet-tooltip-left:before { right: 0; margin-right: -12px; border-left-color: var(--pm-tooltip, white); } .poncho-map .leaflet-tooltip-right:before { left: 0; margin-left: -12px; border-right-color: var(--pm-tooltip, white); } .poncho-map .leaflet-tooltip-own { padding: 3px 9px; background-color: var(--pm-tooltip, white); border: 0px solid var(--pm-tooltip-color, black); color: var(--pm-tooltip-color, black); white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: 6px; pointer-events: none; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); transition: opacity 0.2s; font-size: 0.75rem; font-weight: normal; } .poncho-map { /* leaflet popup */ } .poncho-map .leaflet-popup p:first-child { margin-block-start: 0; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; } .poncho-map .leaflet-popup .leaflet-popup-content-wrapper { border-radius: var(--pm-slider-radius); } .poncho-map .leaflet-popup .leaflet-popup-tip-container { margin-top: calc(var(--pm-slider-border-width) * -1) !important; } .poncho-map .leaflet-popup .leaflet-popup-content-wrapper, .poncho-map .leaflet-popup .leaflet-popup-tip { background: var(--pm-slider-background); color: var(--pm-color-base); border: var(--pm-slider-border-width) solid var(--pm-slider-border-color); } .poncho-map .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content, .poncho-map .leaflet-popup .leaflet-popup-tip .leaflet-popup-content { width: calc(100% - 26px); inline-size: min-content; } .poncho-map .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content .btn.btn-info, .poncho-map .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content .btn.btn-success, .poncho-map .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content .btn.btn-warning, .poncho-map .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content .btn.btn-primary, .poncho-map .leaflet-popup .leaflet-popup-tip .leaflet-popup-content .btn.btn-info, .poncho-map .leaflet-popup .leaflet-popup-tip .leaflet-popup-content .btn.btn-success, .poncho-map .leaflet-popup .leaflet-popup-tip .leaflet-popup-content .btn.btn-warning, .poncho-map .leaflet-popup .leaflet-popup-tip .leaflet-popup-content .btn.btn-primary { color: white; } .poncho-map .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content .info-container, .poncho-map .leaflet-popup .leaflet-popup-tip .leaflet-popup-content .info-container { max-height: 800px; overflow-y: auto; width: 100%; } .poncho-map { /* leaflet controls*/ } .poncho-map .leaflet-marker-icon.leaflet-div-icon { background-color: transparent; border: none; } .poncho-map .leaflet-control-zoom.leaflet-bar { -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; overflow: hidden; box-shadow: var(--pm-slider-shadow); border: var(--pm-slider-border-width) solid var(--pm-slider-border-color); } .poncho-map .leaflet-control-zoom.leaflet-control a { width: 38px; height: 38px; line-height: 38px; color: var(--pm-color-base); transition: background 0.15s; text-decoration: none; } .poncho-map .leaflet-control-zoom.leaflet-control a:hover { color: var(--pm-hover-color); background: var(--pm-hover-background); transition: background 0.15s; } .poncho-map .leaflet-control-zoom-in, .poncho-map .leaflet-control-zoom-out { font: 400 18px "Lucida Console", Monaco, monospace; text-indent: 1px; } .poncho-map .leaflet-control-zoom-out { font-size: 22px; } .poncho-map .leaflet-touch .leaflet-control-zoom-in { font-size: 22px; } .poncho-map .leaflet-touch .leaflet-control-zoom-out { font-size: 24px; } .poncho-map .leaflet-touch a.leaflet-control-zoom-out { line-height: 32px; } .poncho-map .leaflet-touch a.leaflet-control-zoom-in, .poncho-map .leaflet-touch a.leaflet-control-zoom-reset, .poncho-map .leaflet-touch a.leaflet-control-zoom-out { background-color: var(--pm-slider-background); color: var(--pm-color-base); border-width: var(--pm-slider-border-width); border-color: var(--pm-slider-border-color); } .poncho-map .leaflet-container a.leaflet-popup-close-button.leaflet-popup-close-button { top: 10px; right: 10px; color: var(--pm-color-base); } /** * smartphones, iPhone, portrait 480x320 phones */ @media (max-width: 575.98px) { .poncho-map:has(.pm-slider:is(.pm-slider--in)) { position: relative; -webkit-border-radius: calc(var(--pm-slider-radius) + var(--pm-slider-distance)); -moz-border-radius: calc(var(--pm-slider-radius) + var(--pm-slider-distance)); border-radius: calc(var(--pm-slider-radius) + var(--pm-slider-distance)); transition: 0.4s; } .poncho-map:has(.pm-slider:is(.pm-slider--in)) .leaflet-control-attribution { opacity: 0.5; display: none; } .poncho-map:has(.pm-slider:is(.pm-slider--in)) .pm-backdrop { position: absolute; background: rgba(0, 0, 0, 0.75); height: 100%; width: 100%; left: 0; top: 0; z-index: 1000; backdrop-filter: blur(5px); transition: 0.25s ease-in-out; } .poncho-map .pm-slider { height: calc(var(--pm-slider-media-mobile-height) - var(--pm-slider-distance) * 2); top: auto; bottom: calc(-1 * var(--pm-slider-media-mobile-height)); right: var(--pm-slider-distance); max-width: 100%; width: calc(100% - var(--pm-slider-distance) * 2); } .poncho-map .pm-slider.pm-slider--in { animation-name: pm-slidein-mobile; bottom: var(--pm-slider-distance); } .poncho-map .poncho-map-filters { width: calc(100% - var(--pm-slider-distance) * 2); } } input[type=search].js-poncho-map-search__input::-webkit-search-cancel-button { -webkit-appearance: none; height: 20px; width: 20px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='10' fill='whitesmoke'/><polygon points='15.35 6.03 13.97 4.65 10 8.63 6.03 4.65 4.65 6.03 8.63 10 4.65 13.97 6.03 15.35 10 11.38 13.97 15.35 15.35 13.97 11.38 10 15.35 6.03' fill='black'/></svg>"); } /* BRUTAL MODIFIERS :) */ .poncho-map .small { font-size: 75%; } .poncho-map .d-block { display: block; } .poncho-map .d-none { display: none; } .poncho-map .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .poncho-map .leaflet-control-attribution { opacity: 0.9; } .poncho-map .leaflet-tile-pane img { border-radius: 0px !important; border: none !important; } @media (max-width: 575.98px) { .poncho-map .leaflet-control-attribution { position: absolute !important; left: -9999em !important; top: -9999em !important; } } .poncho-map { /* MAP THEMES */ } .poncho-map.map-black .leaflet-tile-pane { filter: sepia(0.5) saturate(0.3) brightness(0.95); transition: filter 0.1s; } .poncho-map.map-dark .leaflet-tile-pane { filter: sepia(0.19) brightness(0.75) contrast(1.2) invert(1) grayscale(1) saturate(1.4) opacity(1); transition: filter 0.1s; } .poncho-map.map-grayscale .leaflet-tile-pane { filter: grayscale(1) brightness(1) saturate(0.9) contrast(1.05); transition: filter 0.1s; } .poncho-map.map-relax .leaflet-tile-pane { filter: grayscale(0.75); transition: filter 0.1s; } .poncho-map.map-contrast .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(2); transition: filter 0.1s; } .poncho-map.map-transparent { --pm-map-background: transparent; } .poncho-map.map-transparent .leaflet-tile-pane { opacity: 0 !important; } .poncho-map { /* UI THEMES */ } .poncho-map.ui-dark { --pm-color-primary: var(--arg-cielo, skyblue); --pm-color-base: #eaeaea; --pm-slider-background: #343232; --pm-slider-border-color: color-mix(in srgb, #626161 40%, white); --pm-slider-border-width: 1px; --pm-scrollbar-handle: #eaeaea; --pm-scrollbar-background: rgb(0, 0, 0, 0.15); --pm-hover-background: #252424; --pm-hover-color: white; --pm-active-color: #343232; --pm-active-visited-color: violet; --pm-active-background: var(--pm-color-primary); } .poncho-map.ui-contrast { --pm-color-primary:var(--arg-azul-200, skyblue); --pm-color-base: white; --pm-slider-background: #222; --pm-slider-border-color: white; --pm-slider-border-width: 2.5px; --pm-active-color: var(--pm-slider-background); --pm-active-visited-color: red; --pm-hover-background: var(--pm-color-base); --pm-hover-color: var(--pm-slider-background); --pm-active-color: #111; --pm-active-background: var(--pm-color-primary); } .poncho-map.ui-relax { --pm-color-primary: color-mix(in srgb, var(--primary) 80%, black); --pm-color-base: #5a5a5a; --pm-slider-background: color-mix( in srgb, var(--verde-cemento) 15%, white ); --pm-slider-border: 1px solid #ddd; --pm-slider-border-color: color-mix( in srgb, var(--verde-cemento) 80%, white ); } .poncho-map { /* THEME NAV ACTIVE STATE */ } .poncho-map.map-default.ui-default [data-theme=default], .poncho-map.map-relax.ui-relax [data-theme=relax], .poncho-map.map-grayscale.ui-grayscale [data-theme=grayscale], .poncho-map.ui-contrast.map-contrast [data-theme=contrast], .poncho-map.map-dark.ui-dark [data-theme=dark], .poncho-map.layer-osm [data-theme=layer-osm], .poncho-map.layer-satelital [data-theme=layer-satelital] { background: var(--pm-active-background); color: var(--pm-active-color); } .poncho-map .pm-item-link[aria-hidden=true], .poncho-map .pm-item-link:disabled { opacity: 0.45; cursor: not-allowed !important; pointer-events: none; font-style: italic; } .poncho-map.ui-dark .content-container, .poncho-map.ui-contrast .content-container, .poncho-map.ui-dark .content-container > *, .poncho-map.ui-contrast .content-container > * { color: inherit; } .poncho-map.ui-dark .text-arandano, .poncho-map.ui-contrast .text-arandano { color: var(--arg-fucsia-300) !important; filter: saturate(1.5); } .poncho-map.ui-contrast .btn-primary, .poncho-map.ui-dark .btn-primary { background: var(--arg-escarapela); color: black; } .poncho-map.ui-contrast summary, .poncho-map.ui-dark summary { color: var(--pm-color-base) !important; } .poncho-map.ui-dark .pm-color-primary, .poncho-map.ui-dark .text-primary, .poncho-map.ui-contrast .pm-color-primary, .poncho-map.ui-contrast .text-primary { color: var(--arg-escarapela) !important; } .poncho-map.ui-contrast summary:before, .poncho-map.ui-dark summary:before { border-color: white; } .poncho-map.ui-dark .text-success, .poncho-map.ui-contrast .text-success { color: var(--arg-verde-300) !important; } .poncho-map.ui-dark .text-uva, .poncho-map.ui-contrast .text-uva { color: var(--arg-violeta-300) !important; } .poncho-map.ui-dark .text-muted, .poncho-map.ui-contrast .text-muted { color: var(--arg-negro-200) !important; } .poncho-map.poncho-map.ui-contrast a, .poncho-map.poncho-map.ui-dark a { color: var(--arg-azul-100, #9ad7f5) !important; } .poncho-map.poncho-map.ui-dark a:visited, .poncho-map.poncho-map.ui-contrast a:visited { color: #D3CEE5 !important; } .poncho-map * > .pmi { margin: 0; transform: translate(auto 50%) !important; } .poncho-map *:hover > .pmi { background-color: var(--pm-hover-color); } .poncho-map .pmi { --pmi-filter: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTMuOSA1NC45QzEwLjUgNDAuOSAyNC41IDMyIDQwIDMySDQ3MmMxNS41IDAgMjkuNSA4LjkgMzYuMSAyMi45czQuNiAzMC41LTUuMiA0Mi41TDMyMCAzMjAuOVY0NDhjMCAxMi4xLTYuOCAyMy4yLTE3LjcgMjguNnMtMjMuOCA0LjMtMzMuNS0zbC02NC00OGMtOC4xLTYtMTIuOC0xNS41LTEyLjgtMjUuNlYzMjAuOUw5IDk3LjNDLS43IDg1LjQtMi44IDY4LjggMy45IDU0Ljl6Ii8+PC9zdmc+'); --pmi-adjust: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTQ0OCAyNTZjMC0xMDYtODYtMTkyLTE5Mi0xOTJWNDQ4YzEwNiAwIDE5Mi04NiAxOTItMTkyek0wIDI1NmEyNTYgMjU2IDAgMSAxIDUxMiAwQTI1NiAyNTYgMCAxIDEgMCAyNTZ6Ii8+PC9zdmc+'); --pmi-expand: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTM0NCAwSDQ4OGMxMy4zIDAgMjQgMTAuNyAyNCAyNFYxNjhjMCA5LjctNS44IDE4LjUtMTQuOCAyMi4ycy0xOS4zIDEuNy0yNi4yLTUuMmwtMzktMzktODcgODdjLTkuNCA5LjQtMjQuNiA5LjQtMzMuOSAwbC0zMi0zMmMtOS40LTkuNC05LjQtMjQuNiAwLTMzLjlsODctODdMMzI3IDQxYy02LjktNi45LTguOS0xNy4yLTUuMi0yNi4yUzMzNC4zIDAgMzQ0IDB6TTE2OCA1MTJIMjRjLTEzLjMgMC0yNC0xMC43LTI0LTI0VjM0NGMwLTkuNyA1LjgtMTguNSAxNC44LTIyLjJzMTkuMy0xLjcgMjYuMiA1LjJsMzkgMzkgODctODdjOS40LTkuNCAyNC42LTkuNCAzMy45IDBsMzIgMzJjOS40IDkuNCA5LjQgMjQuNiAwIDMzLjlsLTg3IDg3IDM5IDM5YzYuOSA2LjkgOC45IDE3LjIgNS4yIDI2LjJzLTEyLjUgMTQuOC0yMi4yIDE0Ljh6Ii8+PC9zdmc+'); --pmi-universal-access: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTAgMjU2YTI1NiAyNTYgMCAxIDEgNTEyIDBBMjU2IDI1NiAwIDEgMSAwIDI1NnptMTYxLjUtODYuMWMtMTIuMi01LjItMjYuMyAuNC0zMS41IDEyLjZzLjQgMjYuMyAxMi42IDMxLjVsMTEuOSA1LjFjMTcuMyA3LjQgMzUuMiAxMi45IDUzLjYgMTYuM3Y1MC4xYzAgNC4zLS43IDguNi0yLjEgMTIuNmwtMjguNyA4Ni4xYy00LjIgMTIuNiAyLjYgMjYuMiAxNS4yIDMwLjRzMjYuMi0yLjYgMzAuNC0xNS4ybDI0LjQtNzMuMmMxLjMtMy44IDQuOC02LjQgOC44LTYuNHM3LjYgMi42IDguOCA2LjRsMjQuNCA3My4yYzQuMiAxMi42IDE3LjggMTkuNCAzMC40IDE1LjJzMTkuNC0xNy44IDE1LjItMzAuNGwtMjguNy04Ni4xYy0xLjQtNC4xLTIuMS04LjMtMi4xLTEyLjZWMjM1LjVjMTguNC0zLjUgMzYuMy04LjkgNTMuNi0xNi4zbDExLjktNS4xYzEyLjItNS4yIDE3LjgtMTkuMyAxMi42LTMxLjVzLTE5LjMtMTcuOC0zMS41LTEyLjZMMzM4LjcgMTc1Yy0yNi4xIDExLjItNTQuMiAxNy04Mi43IDE3cy01Ni41LTUuOC04Mi43LTE3bC0xMS45LTUuMXpNMjU2IDE2MGE0MCA0MCAwIDEgMCAwLTgwIDQwIDQwIDAgMSAwIDAgODB6Ii8+PC9zdmc+'); --pmi-close: url('data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBhcmlhLWhpZGRlbj0idHJ1ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgNi40MUwxNy41OSA1IDEyIDEwLjU5IDYuNDEgNSA1IDYuNDEgMTAuNTkgMTIgNSAxNy41OSA2LjQxIDE5IDEyIDEzLjQxIDE3LjU5IDE5IDE5IDE3LjU5IDEzLjQxIDEyeiI+PC9wYXRoPjwvc3ZnPg=='); display: inline-block; width: 1em; height: 1em; margin: auto; line-height: 1.5em; vertical-align: -15%; -webkit-mask-origin: fill-box; -webkit-mask-repeat: no-repeat !important; -webkit-mask-size: contain; mask-repeat: no-repeat !important; mask-size: contain; mask-origin: fill-box; background-color: var(--pm-color-base, #5a5a5a); } .poncho-map .pmi:hover { background-color: var(--pm-hover-color); } .poncho-map .pmi.pmi-filter { -webkit-mask-image: var(--pmi-filter); mask-image: var(--pmi-filter); } .poncho-map .pmi.pmi-adjust { -webkit-mask-image: var(--pmi-adjust); mask-image: var(--pmi-adjust); } .poncho-map .pmi.pmi-expand { -webkit-mask-image: var(--pmi-expand); mask-image: var(--pmi-expand); } .poncho-map .pmi.pmi-universal-access { -webkit-mask-image: var(--pmi-universal-access); mask-image: var(--pmi-universal-access); } .poncho-map .pmi.pmi-close { -webkit-mask-image: var(--pmi-close); mask-image: var(--pmi-close); } .poncho-map { /* Marker activo/seleccionado */ } .poncho-map .marker--active { --color: 247, 149, 37; position: relative; background: transparent; filter: drop-shadow(1px -1px 2px var(--pm-active-marker-color)) drop-shadow(-1px -1px 2px var(--pm-active-marker-color)) drop-shadow(0 -2px 4px color-mix(in srgb, var(--pm-active-marker-color) 50%, var(--pm-active-marker-color-darker) 50%)); } .poncho-map path.marker--active { -webkit-filter: brightness(0.7) saturate(1.15) !important; filter: brightness(0.7) saturate(1.15) !important; transition: filter 0.15s; } .poncho-map path:hover, .poncho-map path:focus { filter: brightness(0.8) saturate(1.15) !important; transition: filter 0.15s; } .poncho-map path[data-interactive=n], .poncho-map path[data-interactive=n]:hover, .poncho-map path[data-interactive=n]:focus { background: inherit; filter: brightness(1) saturate(1) !important; outline: none !important; cursor: auto; } .poncho-map { /** * Estilos para los markers basados en <div> */ } .poncho-map__div-icon { background-color: transparent; height: 38px; width: 38px; position: relative; display: block; margin: auto; text-align: center; border-radius: 50%; } .poncho-map__div-icon > i { font-size: 1.7em; position: absolute; margin: auto; top: 50%; right: 50%; transform: translate(50%, -50%); opacity: 0.9; transition: 0.2s; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); } .poncho-map__div-icon:hover > i { opacity: 1; transition: 0.2s; } .poncho-map footer { box-sizing: border-box; margin: 0; padding: 0; border: none; background: transparent; color: inherit; font-size: 1rem; line-height: normal; text-align: left; text-decoration: none; display: block; min-width: 0; min-height: 0; } .poncho-map .pm-open-map { min-height: auto; position: relative; padding: 4px; left: 1px; width: calc(100% - 2px); margin: 0; border: none; color: var(--pm-color-base); bottom: 1px; z-index: 999; font-size: 0.75rem; background: var(--pm-slider-background); border-radius: 0; border-bottom-left-radius: max(var(--pm-slider-radius) / 2, var(--pm-slider-radius) - var(--pm-content-padding) + 13px) !important; border-bottom-right-radius: max(var(--pm-slider-radius) / 2, var(--pm-slider-radius) - var(--pm-content-padding) + 13px) !important; } .poncho-map .pm-open-map > details > summary:focus-within, .poncho-map .pm-open-map > details > summary:focus { outline: none !important; box-shadow: none !important; } .poncho-map .pm-open-map > details { --summary-padding-t: 4px; --summary-padding-b: 4px; border-color: var(--pm-slider-border-color) transparent transparent !important; border-style: solid; border-width: var(--pm-slider-border-width); border-radius: 0; padding-top: 0; padding-bottom: 0; } .poncho-map .pm-open-map > details > summary:before { background-color: transparent; } .poncho-map .pm-open-map > details:focus, .poncho-map .pm-open-map > details:focus-within { -webkit-border-radius: max(var(--pm-slider-radius) / 2, var(--pm-slider-radius) - var(--pm-content-padding) - 2px) !important; -moz-border-radius: max(var(--pm-slider-radius) / 2, var(--pm-slider-radius) - var(--pm-content-padding) - 2px) !important; border-radius: max(var(--pm-slider-radius) / 2, var(--pm-slider-radius) - var(--pm-content-padding) - 2px) !important; box-shadow: 0 1px calc(var(--pm-content-padding) / 2) rgba(0, 0, 0, 0.3); outline: 2px solid var(--cielo, #039be5); outline-style: solid; } .poncho-map .pm-open-map > details[open] { border: var(--pm-slider-border-width) solid var(--pm-slider-border-color) !important; border-radius: max(var(--pm-slider-radius) / 2, var(--pm-slider-radius) - var(--pm-content-padding) + 8px) !important; box-shadow: 0 1px calc(var(--pm-content-padding) / 2) rgba(0, 0, 0, 0.3); } .poncho-map .pm-open-map > details > summary { color: var(--pm-color-base) !important; font-weight: 600; padding-left: var(--pm-content-padding); padding-right: var(--pm-content-padding); } .poncho-map .pm-open-map details[open] summary ~ * { padding: 0 calc(var(--pm-content-padding) / 2); } .poncho-map .pm-open-map ul > li > a { margin-bottom: 2px; border-radius: calc(var(--pm-slider-radius) - var(--pm-slider-distance)); display: block; transition: 0.3s; padding: calc(var(--pm-content-padding) / 2) calc(var(--pm-content-padding) / 2); color: var(--pm-color-base); text-decoration: none; } .poncho-map .pm-open-map ul > li > a:hover, .poncho-map .pm-open-map ul > li > a:focus { background-color: var(--pm-hover-background); color: var(--pm-hover-color); transition: background 0.15s; } .poncho-map { --pm-cluster-pattern-small: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd0cmFuc3BhcmVudCcgLz4KICA8cGF0aCBkPSdNLTEsMSBsMiwtMgogICAgICAgICAgIE0wLDEwIGwxMCwtMTAKICAgICAgICAgICBNOSwxMSBsMiwtMicgc3Ryb2tlPScjMDAwJyBzdHJva2Utd2lkdGg9JzMnIC8+Cjwvc3ZnPg=="); --pm-cluster-pattern-medium: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgogIDxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzQnIGZpbGw9J3RyYW5zcGFyZW50JyAvPgogIDxyZWN0IHg9JzInIHk9JzInIHdpZHRoPScyJyBoZWlnaHQ9JzInIC8+Cjwvc3ZnPg=="); --pm-cluster-pattern-large: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnPgogIDxyZWN0IHdpZHRoPSc4JyBoZWlnaHQ9JzgnIGZpbGw9J3RyYW5zcGFyZW50Jy8+CiAgPHBhdGggZD0nTTAgMEw4IDhaTTggMEwwIDhaJyBzdHJva2Utd2lkdGg9JzEnIHN0cm9rZT0nIzAwMCcvPgo8L3N2Zz4K"); } .poncho-map .marker-cluster-small { background-color: color-mix(in srgb, var(--arg-lima) 40%, transparent 100%); } .poncho-map .marker-cluster-small div { background-color: var(--arg-lima); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15); } .poncho-map .marker-cluster-small div:before { position: absolute; top: 1px; left: 1px; width: calc(100% - 2px); height: calc(100% - 2px); border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.5); background-image: var(--pm-cluster-pattern-small); background-repeat: repeat; background-size: 5px; background-position-x: -3px; opacity: 0.2; content: ""; } .poncho-map .marker-cluster-medium { background-color: color-mix(in srgb, var(--arg-maiz) 60%, transparent 100%); } .poncho-map .marker-cluster-medium div { background-color: var(--arg-maiz); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15); } .poncho-map .marker-cluster-medium div:before { position: absolute; top: 1px; left: 1px; width: calc(100% - 2px); height: calc(100% - 2px); border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.5); background-image: var(--pm-cluster-pattern-medium); background-repeat: repeat; background-size: 4px; background-position-x: 0; opacity: 0.3; content: ""; } .poncho-map .marker-cluster-large { background-color: color-mix(in srgb, var(--arg-naranja) 70%, transparent 100%); } .poncho-map .marker-cluster-large div { background-color: var(--arg-naranja); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15); } .poncho-map .marker-cluster-large div:before { position: absolute; top: 1px; left: 1px; width: calc(100% - 2px); height: calc(100% - 2px); border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.5); background-image: var(--pm-cluster-pattern-large); background-repeat: repeat; background-size: 6px; background-position-x: -3px; opacity: 0.2; content: ""; } .poncho-map { /* IE 6-8 fallback colors */ } .poncho-map .leaflet-oldie .marker-cluster-small { background-color: rgb(181, 226, 140); } .poncho-map .leaflet-oldie .marker-cluster-small div { background-color: rgb(110, 204, 57); } .poncho-map .leaflet-oldie .marker-cluster-medium { background-color: rgb(241, 211, 87); } .poncho-map .leaflet-oldie .marker-cluster-medium div { background-color: rgb(240, 194, 12); } .poncho-map .leaflet-oldie .marker-cluster-large { background-color: rgb(253, 156, 115); } .poncho-map .leaflet-oldie .marker-cluster-large div { background-color: rgb(241, 128, 23); } .poncho-map .marker-cluster { background-clip: padding-box; border-radius: 20px; } .poncho-map .marker-cluster div { position: relative; width: 30px; height: 30px; margin: 5px 0 0 5px; border-radius: 15px; font: 500 12px "Roboto", "Helvetica Neue", Helvetica, "Noto Sans", Arial, sans-serif; font-weight: bold !important; letter-spacing: -0.25pt; text-align: center; color: black; text-shadow: 0 0 3px rgba(255, 255, 255, 0.25); } .poncho-map .marker-cluster div:after { content: " "; width: calc(100% + 2px); background: transparent; border: none; height: calc(100% + 2px); position: absolute; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); } .poncho-map .marker-cluster span { line-height: 30px; color: black; } .poncho-map { container-type: inline-size; container-name: canvasWidthSize; } @container canvasWidthSize (min-width: 0) { .slider-large .pm-slider { --pm-slider-width: calc(100% - 20px); } } @container canvasWidthSize (min-width: 576px) { .slider-large .pm-slider { --pm-slider-width: calc(50% - 20px); } } @container canvasWidthSize (min-width: 0) { .slider-default .pm-slider {