/* Mapa de talleres — identidad del Gremio sobre el fondo oscuro de la web:
   granate del logotipo en las chinchetas, oro de los oficios para los acentos, Special Elite en los títulos y Poppins. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Special+Elite&display=swap');

.gasm {
	--gasm-fondo: #111013;
	--gasm-panel: #19171a;
	--gasm-linea: #2f2a2f;
	--gasm-texto: #f3eee8;
	--gasm-suave: #b7aeb1;
	--gasm-oro: #df953a;
	--gasm-granate: #850b30;
	--gasm-granate-vivo: #b0174a;
	--gasm-alto: 80vh;
	color-scheme: dark;
	background: var(--gasm-fondo);
	color: var(--gasm-texto);
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--gasm-linea);
	min-height: 360px;
}
.gasm *, .gasm *::before, .gasm *::after { box-sizing: border-box; }
.gasm.gasm-cargando { min-height: var(--gasm-alto); background: var(--gasm-fondo) linear-gradient(90deg, transparent, rgba(223,149,58,.06), transparent) 0 0 / 200% 100%; animation: gasm-carga 1.4s linear infinite; }
@keyframes gasm-carga { to { background-position: -200% 0; } }

.gasm-cab { padding: 18px 22px 14px; border-bottom: 1px solid var(--gasm-linea); }
.gasm-ante { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gasm-oro); }
.gasm .gasm-titulo { margin: 4px 0 0; font-family: "Special Elite", "Courier New", monospace; font-weight: 400; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.15; color: var(--gasm-texto); text-wrap: balance; }

.gasm-cuerpo { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); height: var(--gasm-alto); }
.gasm-mapa { order: 2; min-height: 320px; background: #2a2629; }
.gasm-panel { order: 1; display: flex; flex-direction: column; min-height: 0; background: var(--gasm-panel); border-right: 1px solid var(--gasm-linea); }

.gasm-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 20px; background: var(--gasm-panel); border-bottom: 1px solid var(--gasm-linea); }
.gasm-campo { display: flex; align-items: center; gap: 8px; margin: 0; flex: none; }
.gasm-buscar { flex: 1 1 260px; max-width: 380px; }
.gasm-etq { flex: none; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gasm-suave); }
.gasm-sep { flex: none; width: 1px; height: 26px; background: var(--gasm-linea); margin: 0 4px; }
.gasm input[type="search"], .gasm select {
	width: 100%; font: inherit; font-size: 14.5px; color: var(--gasm-texto); background: var(--gasm-fondo);
	border: 1px solid #3d363c; border-radius: 8px; padding: 9px 11px; min-height: 42px; margin: 0; box-shadow: none;
}
.gasm input:focus-visible, .gasm select:focus-visible, .gasm button:focus-visible, .gasm a:focus-visible { outline: 2px solid var(--gasm-oro); outline-offset: 2px; }
.gasm-chk { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 38px; padding: 0 14px; border: 1px solid #3d363c; border-radius: 999px; font-size: 14px; color: var(--gasm-texto); cursor: pointer; margin: 0; white-space: nowrap; }
.gasm-chk:has(input:checked) { border-color: var(--gasm-oro); background: rgba(223,149,58,.12); }
.gasm-chk input { width: 17px; height: 17px; margin: 0; accent-color: var(--gasm-oro); }

.gasm-cuenta { margin: 0; padding: 10px 16px 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gasm-oro); }
.gasm-lista { list-style: none; margin: 0; padding: 0 8px 8px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.gasm-lista li { margin: 0; }
.gasm-lista button {
	display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; font: inherit; color: inherit;
	background: transparent; border: 0; border-radius: 10px; padding: 8px; cursor: pointer;
}
.gasm-lista button:hover { background: rgba(255,255,255,.05); }
.gasm-lista button[aria-current] { background: rgba(133,11,48,.35); box-shadow: inset 3px 0 0 var(--gasm-oro); }
.gasm-lista img, .gasm .gasm-ini { width: 46px; height: 46px; flex: none; border-radius: 8px; object-fit: cover; background: #2a2629; }
.gasm .gasm-ini { display: grid; place-items: center; font-family: "Special Elite", monospace; font-size: 16px; color: var(--gasm-oro); }
.gasm-txt { display: grid; gap: 1px; min-width: 0; }
.gasm-txt strong { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.gasm-txt small { font-size: 12.5px; color: var(--gasm-oro); line-height: 1.35; }
.gasm-txt .gasm-lu { color: var(--gasm-suave); }
.gasm-vacio { padding: 14px 8px; color: var(--gasm-suave); }
.gasm-nota { margin: 0; padding: 10px 16px 14px; font-size: 12.5px; color: var(--gasm-suave); border-top: 1px solid var(--gasm-linea); }
.gasm-nota a { color: var(--gasm-oro); }
.gasm-error { padding: 24px; margin: 0; }

/* Chinchetas */
.gasm-pin span { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--gasm-granate, #850b30); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.45); transition: transform .15s; }
.gasm-pin.es-maestro span { border-color: #df953a; background: #850b30; }
.gasm-pin.es-aprox span { border-color: rgba(255,255,255,.55); box-shadow: 0 0 0 3px rgba(133,11,48,.3), 0 2px 6px rgba(0,0,0,.45); } /* solo la calle: borde más suave */
.gasm-pin:hover span, .gasm-pin:focus span { transform: scale(1.2); }
.gasm-grupo { background: transparent; }
.gasm-grupo span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #850b30; color: #fff; font: 600 14px/1 "Poppins", sans-serif; border: 3px solid rgba(223,149,58,.85); box-shadow: 0 0 0 5px rgba(133,11,48,.28); }

/* Ficha emergente */
.gasm-popup .leaflet-popup-content-wrapper { background: #19171a; color: #f3eee8; border-radius: 12px; border: 1px solid #3d363c; box-shadow: 0 8px 26px rgba(0,0,0,.5); }
.gasm-popup .leaflet-popup-tip { background: #19171a; }
.gasm-popup .leaflet-popup-content { margin: 14px 14px 12px; font-family: "Poppins", system-ui, sans-serif; font-size: 13.5px; line-height: 1.45; }
.gasm-popup a.leaflet-popup-close-button { color: #b7aeb1; }
.gasm-ficha { display: flex; gap: 12px; align-items: flex-start; }
.gasm-ficha img, .gasm-popup .gasm-ini { width: 64px; height: 64px; flex: none; border-radius: 8px; object-fit: cover; background: #2a2629; display: grid; place-items: center; font-family: "Special Elite", monospace; color: #df953a; }
.gasm-popup h3 { margin: 0 0 3px; font-family: "Special Elite", "Courier New", monospace; font-weight: 400; font-size: 17px; line-height: 1.2; color: #f3eee8; }
.gasm-popup p { margin: 0 0 2px; }
.gasm-maestro { display: inline-block; font-size: 11.5px; font-weight: 600; color: #19171a; background: #df953a; border-radius: 99px; padding: 1px 8px; margin-bottom: 4px !important; }
.gasm-of { color: #df953a; }
.gasm-dir { color: #b7aeb1; font-size: 12.5px; }
.gasm-acc { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0 !important; }
.gasm-btn { display: inline-flex; align-items: center; gap: 5px; font: 500 13px/1 "Poppins", sans-serif; padding: 8px 13px; border-radius: 99px; border: 1.5px solid #df953a; color: #df953a !important; text-decoration: none !important; }
.gasm-btn.lleno { background: #df953a; color: #19171a !important; }
.gasm-btn:hover { filter: brightness(1.1); }

.gasm .leaflet-control-attribution { background: rgba(17,16,19,.75); color: #b7aeb1; font-size: 10.5px; }
.gasm .leaflet-control-attribution a { color: #df953a; }
.gasm .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 860px) {
	.gasm-filtros { padding: 10px 14px; }
	.gasm-buscar { flex-basis: 100%; max-width: none; }
	.gasm-sep, .gasm-etq { display: none; }
	.gasm-filtros .gasm-campo:not(.gasm-buscar) { flex: 1 1 140px; min-width: 0; }
	.gasm .gasm-filtros select { width: 100% !important; max-width: none; }
	.gasm-cuerpo { grid-template-columns: minmax(0, 1fr); height: auto; }
	.gasm-mapa { order: 1; height: 58vh; }
	.gasm-panel { order: 2; border-right: 0; border-top: 1px solid var(--gasm-linea); }
	.gasm-lista { max-height: 60vh; }
}
@media (prefers-reduced-motion: reduce) { .gasm-pin span, .gasm.gasm-cargando { transition: none; animation: none; } }

/* El tema (Ohio) da estilo propio a los desplegables: flecha repetida y lista en blanco. Aquí manda el mapa. */
.gasm .gasm-filtros select {
	-webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
	background-color: var(--gasm-fondo) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23df953a' stroke-width='2'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 12px 8px !important;
	width: auto !important; max-width: 240px; min-height: 0 !important; height: 38px !important; padding: 0 36px 0 14px !important; line-height: 36px !important;
	border: 1px solid #3d363c !important; border-radius: 999px !important; color: var(--gasm-texto) !important; box-shadow: none !important;
}
.gasm .gasm-filtros input[type="search"] { width: 100% !important; min-height: 0 !important; height: 38px !important; padding: 0 16px !important; border: 1px solid #3d363c !important; border-radius: 999px !important; background: var(--gasm-fondo) !important; color: var(--gasm-texto) !important; box-shadow: none !important; }
.gasm .gasm-filtros select:focus, .gasm .gasm-filtros input[type="search"]:focus { border-color: var(--gasm-oro) !important; outline: none; }
.gasm .gasm-filtros select option { background: #19171a; color: #f3eee8; }
.gasm .gasm-filtros select option:checked { background: #850b30; color: #fff; }

/* Recuento de la zona visible y botón para volver a ver todo */
.gasm-cuenta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.gasm .gasm-todo { font: 600 11.5px/1 "Poppins", sans-serif; letter-spacing: .04em; text-transform: none; color: var(--gasm-oro) !important; background: transparent !important; border: 1px solid rgba(223,149,58,.6) !important; border-radius: 99px; padding: 5px 10px; cursor: pointer; }
.gasm .gasm-todo:hover { background: rgba(223,149,58,.12) !important; }

/* Móvil: los desplegables ocupan su mitad de la fila (va al final para ganar a la regla de escritorio de arriba) */
@media (max-width: 860px) {
	.gasm .gasm-filtros select { width: 100% !important; max-width: none !important; min-width: 0 !important; }
}