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,351 lines (1,317 loc) 40.3 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 */ /* Elementos básicos */ /* 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-cielo:#039BE5; --arg-default:#838383; --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-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: 326px; --pm-tools-width: 250px; --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-active-color: white; --pm-active-background: var(--pm-color-primary); --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: 16px; --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: 0.25em 0.75em; border-radius: 8px; margin: 1em 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); color: black; } .poncho-map--message__icon { color: var(--gray-lighter); line-height: 1; font-size: 4rem; display: block; text-align: center; padding: 1rem; opacity: 0.5; } .poncho-map--message.danger { padding: 1rem; background: var(--default, gray); color: var(--white, white); } .poncho-map--message.danger .title { color: white !important; } .poncho-map--message.danger pre { color: rgba(255, 255, 255, 0.9); } .poncho-map--message.warning { background: var(--maiz, gold); color: rgba(0, 0, 0, 0.8); } .poncho-map--message.warning .title { color: rgba(0, 0, 0, 0.8) !important; } .poncho-map--message.warning pre { color: black; } .poncho-map--message pre { background: rgba(0, 0, 0, 0.1); border: none; } .poncho-map { /* loader */ } @keyframes pm-loader-rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .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); 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 */ /* HEADER */ /* FUCUSABLE */ } .poncho-map * { scrollbar-color: var(--pm-scrollbar-handle) var(--pm-scrollbar-background); scrollbar-width: thin; } .poncho-map .pm-header { margin-bottom: 1em; padding: 0; border: none; } .poncho-map *:focus, .poncho-map .focus-element:focus { border-radius: 3px; box-sizing: border-box; box-shadow: 0 0 8px var(--cielo, #039be5) !important; outline: 3px solid var(--cielo, #039be5) !important; } .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); border-radius: var(--pm-slider-radius); transform-style: preserve-3d; border: var(--pm-slider-border-width) solid var(--pm-slider-border-color) article; border-border: none; border-margin: 0; border-padding: 0; } .poncho-map .pm-container article header { border: none; margin: 0; padding: 0; } .poncho-map .pm-tools { position: absolute; bottom: var(--pm-slider-distance); left: var(--pm-slider-distance); z-index: 900; } .poncho-map .pm-toggle { display: none; position: absolute; width: var(--pm-tools-width); bottom: 49px; } .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); border-radius: calc(var(--pm-slider-radius) - var(--pm-slider-distance)); transition: background 0.15s; text-decoration: none; } .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.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 .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 .slider.slider--in { right: var(--pm-slider-distance); animation-duration: 0.3s; animation-name: pm-slidein; } .poncho-map .slider img { max-width: 100%; } .poncho-map .slider .pm-content-container { height: 100%; padding-right: var(--pm-content-padding); padding-left: var(--pm-content-padding); padding-top: calc(var(--pm-content-padding) * 3); padding-bottom: calc(var(--pm-content-padding) * 2); } .poncho-map .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; box-shadow: 0 -10px 20px var(--pm-slider-background) inset; word-break: break-word; } .poncho-map .slider .pm-content:has(.pm-open-map) { height: calc(100% - 20px); } .poncho-map .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: var(--pm-content-padding); padding-left: var(--pm-content-padding); padding-top: calc(var(--pm-content-padding) * 2); 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 .field-list { min-height: 40px; max-height: calc(100% - 110px); overflow: auto; width: calc(100% - 30px); } .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 .form-check { display: flex; align-items: baseline; } .poncho-map .filter-container .poncho-map-filters .form-check .form-check-label { color: var(--pm-color-base) !important; } .poncho-map { /* Botones menú filter */ } .poncho-map .btn-close { border-radius: 50%; aspect-ratio: 1/1; position: absolute; background-image: none; width: auto; height: auto; top: 0.75rem; right: 0.75rem; background-color: transparent; color: var(--pm-color-base); } .poncho-map .pm-btn-rounded-circle { aspect-ratio: 1/1; width: 40px; height: 40px; border-radius: 50%; } .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); } .poncho-map .pm-btn:focus { border-radius: 50%; } .poncho-map .pm-btn:hover { background-color: var(--pm-hover-background); color: var(--pm-hover-color); } .poncho-map .select-items { padding: 0 0 0.75em; } .poncho-map .select-items__button { font-size: 0.75rem; border-radius: 9px; padding: 1px 0.75em; margin: 0 2px; background-color: var(--pm-active-background); color: var(--pm-active-color); transition: 0.15s; border: var(--pm-slider-border-width) solid var(--pm-slider-border-color); } .poncho-map .select-items__button:hover { background-color: var(--pm-hover-background); color: var(--pm-hover-color); transition: 0.15s; box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); } .poncho-map .select-items__button:first-of-type { margin-left: 0; } .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; } .poncho-map .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; } .poncho-map .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); 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 { /* Tooltip Leaflet personalizado */ /* Tooltip */ /* leaflet popup */ /* leaflet controls*/ } .poncho-map .leaflet-container { background-color: var(--pm-map-background); } .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 .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 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-marker-icon.leaflet-div-icon { background-color: transparent; border: none; } .poncho-map .leaflet-control-zoom.leaflet-bar { border-radius: 20px; 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: 5px; right: 5px; color: var(--pm-color-base); } /** * smartphones, iPhone, portrait 480x320 phones */ @media (max-width: 575.98px) { .poncho-map:has(.slider:is(.slider--in)) { position: relative; border-radius: calc(var(--pm-slider-radius) + var(--pm-slider-distance)); transition: 0.4s; } .poncho-map:has(.slider:is(.slider--in)) .leaflet-control-attribution { opacity: 0.5; display: none; } .poncho-map:has(.slider:is(.slider--in))::before { content: ""; width: 100%; height: 100%; left: 0; top: 0; position: absolute; z-index: 1000; background: var(--pm-slider-modal-color); opacity: 0.75; transition: 0.5s; } .poncho-map .slider { height: calc(var(--pm-slider-media-mobile-height) - var(--pm-slider-distance) - var(--pm-slider-distance)); 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) - var(--pm-slider-distance)); } .poncho-map .slider.slider--in { animation-name: pm-slidein-mobile; bottom: var(--pm-slider-distance); } .poncho-map .poncho-map-filters { width: calc(100% - var(--pm-slider-distance) - var(--pm-slider-distance)); } } 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 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .poncho-map.hide-attribution .leaflet-control-attribution { position: absolute !important; left: -9999em !important; top: -9999em !important; } .poncho-map .leaflet-control-attribution { opacity: 0.8; } .poncho-map .leaflet-control-attribution .leaflet-attribution-flag { display: none !important; } .poncho-map .leaflet-tile-pane img { border-radius: 0px !important; border: none !important; } @media (max-width: 575.98px) { .poncho-map .leaflet-control-attribution { display: none !important; } } .poncho-map { /* MAP THEMES */ /* UI THEMES */ /* THEME NAV ACTIVE STATE */ } .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-sepia .leaflet-tile-pane { filter: sepia(0.5) saturate(0.24) contrast(1); transition: filter 0.1s; } .poncho-map.map-blue .leaflet-tile-pane { filter: sepia(1) hue-rotate(326deg) invert(1) brightness(8) saturate(0.45) grayscale(0.5) opacity(0.75); 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-dark, .poncho-map.ui-blue { --pm-color-primary: var(--celeste-argentina, skyblue); --pm-color-base: #eaeaea; --pm-slider-background: #343232; --pm-slider-border-color: #626161; --pm-slider-border-color: color-mix(in srgb, #626161 80%, white); --pm-slider-border-width: 1px; --pm-scrollbar-handle: #eaeaea; --pm-scrollbar-background: rgb(0, 0, 0, .15); --pm-hover-background: #252424; --pm-hover-color: white; --pm-active-color: #343232; --pm-active-background: var(--pm-color-primary); } .poncho-map.ui-contrast { --pm-color-primary: #68CEF3; --pm-color-base: #eaeaea; --pm-slider-background: #222; --pm-slider-border-color: white; --pm-slider-border-width: 2.5px; --pm-active-color: var(--pm-slider-background); --pm-hover-background: var(--pm-color-base); --pm-hover-color: var(--pm-slider-background); --pm-active-color: #343232; --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.map-default.ui-default [data-theme=default], .poncho-map.map-sepia.ui-sepia [data-theme=sepia], .poncho-map.map-relax.ui-relax [data-theme=relax], .poncho-map.map-grayscale.ui-grayscale [data-theme=grayscale], .poncho-map.map-blue.ui-blue [data-theme=blue], .poncho-map.ui-contrast.map-contrast [data-theme=contrast], .poncho-map.map-dark.ui-dark [data-theme=dark] { background: var(--pm-active-background); color: var(--pm-active-color); } .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: #9AD7F5 !important; } .poncho-map.poncho-map.ui-dark a:visited, .poncho-map.poncho-map.ui-contrast a:visited { color: #BEB5D8 !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;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M3.9 54.9C10.5 40.9 24.5 32 40 32H472c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9V448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6V320.9L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z"/></svg>'); --pmi-adjust: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M448 256c0-106-86-192-192-192V448c106 0 192-86 192-192zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"/></svg>'); --pmi-expand: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z"/></svg>'); --pmi-universal-access: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm161.5-86.1c-12.2-5.2-26.3 .4-31.5 12.6s.4 26.3 12.6 31.5l11.9 5.1c17.3 7.4 35.2 12.9 53.6 16.3v50.1c0 4.3-.7 8.6-2.1 12.6l-28.7 86.1c-4.2 12.6 2.6 26.2 15.2 30.4s26.2-2.6 30.4-15.2l24.4-73.2c1.3-3.8 4.8-6.4 8.8-6.4s7.6 2.6 8.8 6.4l24.4 73.2c4.2 12.6 17.8 19.4 30.4 15.2s19.4-17.8 15.2-30.4l-28.7-86.1c-1.4-4.1-2.1-8.3-2.1-12.6V235.5c18.4-3.5 36.3-8.9 53.6-16.3l11.9-5.1c12.2-5.2 17.8-19.3 12.6-31.5s-19.3-17.8-31.5-12.6L338.7 175c-26.1 11.2-54.2 17-82.7 17s-56.5-5.8-82.7-17l-11.9-5.1zM256 160a40 40 0 1 0 0-80 40 40 0 1 0 0 80z"/></svg>'); display: inline-block; width: 1em; height: 1em; 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 { /* Marker activo/seleccionado */ /** * Estilos para los markers basados en <div> */ } .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__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; } footer.pm-open-map { padding: 0; margin: 0; border: none; position: absolute; color: var(--pm-color-base); bottom: calc(var(--pm-content-padding) / 2); z-index: 999; left: calc(var(--pm-content-padding) / 2); font-size: 0.75rem; width: calc(100% - var(--pm-content-padding)); background: var(--pm-slider-background); } footer.pm-open-map > details { border-color: var(--pm-slider-border-color) transparent transparent !important; border-style: solid; border-width: var(--pm-slider-border-width); border-radius: 0; } footer.pm-open-map > details > summary:focus, footer.pm-open-map > details:focus-within { 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; } footer.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) - 2px) !important; box-shadow: 0 1px calc(var(--pm-content-padding) / 2) rgba(0, 0, 0, 0.3); } footer.pm-open-map > details > summary { color: var(--pm-color-base) !important; font-weight: 600; } footer.pm-open-map details[open] summary ~ * { padding: 0 calc(var(--pm-content-padding) / 2); } footer.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; } footer.pm-open-map ul > li > a:hover, footer.pm-open-map ul > li > a:focus { background-color: var(--pm-hover-background); color: var(--pm-hover-color); transition: background 0.15s; }