/* ========================================
   DONDE VACUNARME - ESTILOS MOBILE
   ======================================== */

@media (max-width: 768px) {
	/* Botón buscar puntos de vacunación */
	#btn-buscar-manual,
	.btnpuntos {
		text-align: center !important;
		margin-left: 46px !important;
		border: none !important;
		color: #ffffff !important;
		border-radius: 100px !important;
		padding: 16px 44px !important;
		font-family: 'Inter', sans-serif !important;
		font-size: 14px !important;
		font-weight: 700 !important;
		line-height: 1.2 !important;
		letter-spacing: 0 !important;
		width: 100% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		cursor: pointer !important;
		transition: all 0.2s ease !important;
	}

	/* Botón activo (habilitado) - Estilos desde Figma */
	#btn-buscar-manual:not(:disabled),
	.btnpuntos:not(:disabled) {
		background-color: #ff4e00 !important;
		box-shadow: 0px 126px 35px 0px rgba(0,0,0,0),
		            0px 81px 32px 0px rgba(0,0,0,0.01),
		            0px 45px 27px 0px rgba(0,0,0,0.05),
		            0px 20px 20px 0px rgba(0,0,0,0.09),
		            0px 5px 11px 0px rgba(0,0,0,0.1),
		            0px 0px 0px 0px rgba(0,0,0,0.1) !important;
	}

	/* Botón deshabilitado - Estilos grises */
	#btn-buscar-manual:disabled,
	.btnpuntos:disabled {
		background-color: #c6c5c5 !important;
		opacity: 1 !important;
		cursor: not-allowed !important;
		box-shadow: none !important;
	}

	/* Hover solo cuando está activo */
	#btn-buscar-manual:not(:disabled):hover,
	.btnpuntos:not(:disabled):hover {
		background-color: #e64500 !important;
	}

	/* Texto advertencia - Estilos mobile */
	.donde-vacunarme .textadvertencia {
		background-color: #F0EFED !important;
		padding: 18px 24px !important;
		border-radius: 12px !important;
		max-width: 92% !important;
		margin: 16px auto 2.5rem auto !important;
		font-size: 14px !important;
		line-height: 1.6 !important;
		text-align: left !important;
	}

	/* Título "Encuentra tu punto" - Subir en mobile */
	.donde-vacunarme .titlepuntovacunas {
		margin-top: -20px !important;
		margin-bottom: 0 !important;
	}

	.donde-vacunarme #location-selection {
		margin-top: 20px !important;
	}

	/* Filtro mobile */
	#filtro-mobile {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		max-height: 100%;
		background-color: white;
		z-index: 10000;
		padding: 1em 1em 2em;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.15);
		overflow-y: auto;
		display: none; /* por defecto oculto */
		transition: transform 0.3s ease;
	}

	body.filtro-abierto {
		overflow: hidden;
	}

	body.filtro-abierto #direccion-mobile,
	body.filtro-abierto #filtros-activos-mobile {
		display: none !important;
	}

	/* Vacunacion wrapper - Estilos mobile */
	.donde-vacunarme .vacunacion-wrapper {
		padding: 0em 0em !important;
	}

	/* Ocultar botón Atrás mobile cuando está en modo mapa */
	.mostrar-mapa .mobile-back-container {
		display: none !important;
	}

	/* Dirección mobile cuando está en modo mapa */
	.mostrar-mapa .direccion-mobile {
		position: fixed;
		top: 177px;
		left: 0;
		right: 0;
		margin: 0 auto;
		max-width: 100%;
		width: 96%;
		z-index: 9999;
		background-color: white;
		padding: 8px 18px;
		font-size: 16px;
		font-family: inherit;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.13);
		border-radius: 6px;
		display: flex;
		align-items: center;
		gap: 8px;
		border: none;
	}

	/* Dirección mobile - Estilos generales */
	.direccion-mobile {
		display: flex;
		align-items: center;
		border: 1px solid #ccc;
		border-radius: 10px;
		padding: 10px 14px;
		font-size: 14px;
		background-color: white;
		font-family: inherit;
		margin-top: 19px;
		margin-bottom: 1em;
		margin-left: 1em;
		margin-right: 1em;
	}

	.direccion-mobile {
		position: relative;
		transition: top 0.3s ease;
	}

	.flecha-icon {
		width: 16px;
		height: 16px;
		margin-right: 10px;
		cursor: pointer;
	}

	/* Barra de filtros mobile — alineada bajo el header fijo */
	.barra-filtros-mobile {
		position: -webkit-sticky;
		position: sticky;
		top: var(--donde-barra-sticky-top, calc(72px + env(safe-area-inset-top, 0px)));
		z-index: 999;
		left: 0;
		right: 0;
		margin: 0;
		padding: 1em 0;
		background-color: #ffece3;
		display: flex;
		justify-content: space-around;
		border-bottom: 1px solid #ddd;
		width: calc(100% + 1rem);
		margin-left: -0.5rem;
		margin-right: -0.5rem;
	}

	/* Modo mapa - Estilos mobile */
	.mostrar-mapa .columna-izquierda {
		display: none;
	}

	.mostrar-mapa #direccion-usuario {
		display: block;
	}

	.boton-filtro,
	.boton-mapa {
		background: none;
		border: none;
		display: flex;
		align-items: center;
		gap: 6px;
		color: #FF4E00;
		font-weight: bold;
		font-size: 15px;
		cursor: pointer;
		padding: 0;
	}

	.icono-btn {
		width: 18px;
		height: 18px;
	}

	/* Filtro mobile container */
	.filtro-mobile-container {
		position: fixed;
		top: 144px;
		left: 0;
		width: 100%;
		height: 84%;
		background: white;
		z-index: 9992;
		display: none;
		flex-direction: column;
		border-radius: 20px 20px 0 0;
		padding: 1.5em 1.2em;
		box-sizing: border-box;
		font-family: inherit;
	}

	.filtro-mobile-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cerrar-filtros-mobile {
		background: none;
		border: none;
		font-size: 20px;
		color: #FF4500;
		margin-left: auto;
		cursor: pointer;
	}

	.textfiltro {
		font-family: 'Mukta', sans-serif;
		font-weight: 600;
		font-size: 18px;
		line-height: 21px;
		letter-spacing: -0.32px;
		color: #000000;
	}

	.textfiltro1 {
		font-family: 'Mukta', sans-serif;
		font-weight: 600;
		font-size: 16px;
		line-height: 21px;
		letter-spacing: -0.32px;
		color: #000000;
	}

	.filtro-mobile-body {
		flex-grow: 1;
		overflow-y: auto;
		margin: 1em 0;
	}

	.filtro-mobile-footer {
		background-color: #461104;
		border-top: 1px solid #ddd;
		padding: 1em;
		display: flex;
		gap: 1em;
		justify-content: space-between;
	}

	.btn-aplicar {
		background-color: #FF4500;
		color: white;
		padding: 0.8em;
		border: none;
		border-radius: 20px;
		font-weight: bold;
		width: 100%;
		margin-bottom: 0.5em;
	}

	.btn-resetear {
		background-color: transparent;
		color: white;
		padding: 0.8em;
		border: 1px solid white;
		border-radius: 20px;
		font-weight: bold;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5em;
	}

	/* Map overlay blocker */
	.map-overlay-blocker {
		position: absolute;
		top: 177px;
		left: 0;
		right: 0;
		height: 60px;
		z-index: 9998;
		background: transparent;
		pointer-events: all;
	}

	.mostrar-mapa .map-overlay-blocker {
		display: block;
	}

	.map-overlay-blocker:not(.mostrar-mapa) {
		display: none;
	}

	.mostrar-mapa .hide-when-map {
		display: none !important;
	}

	.mostrar-mapa .columna-derecha {
		display: flex;
		height: 100vh;
		margin-top: -20px;
	}

	.mostrar-mapa #map {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 729px;
		z-index: 1;
	}

	.mostrar-mapa #contador-puntos {
		display: none !important;
	}

	.mostrar-mapa .barra-filtros-mobile {
		position: -webkit-sticky;
		position: sticky;
		top: var(--donde-barra-sticky-top, calc(72px + env(safe-area-inset-top, 0px)));
		z-index: 999;
		left: 0;
		right: 0;
		margin: 0;
		padding: 1em 0;
		background-color: #ffece3;
		display: flex;
		justify-content: space-around;
		border-bottom: 1px solid #ddd;
		width: calc(100% + 1rem);
		margin-left: -0.5rem;
		margin-right: -0.5rem;
	}

	.mostrar-mapa #direccion-mobile.visible {
		display: flex;
	}

	.mostrar-mapa .filtros-vacunacion,
	.mostrar-mapa #filtros-activos {
		display: flex !important;
	}

	.filtros-activos-container {
		position: relative;
		z-index: 10;
		margin-bottom: 1em;
	}

	#filtros-activos.visible {
		display: flex !important;
		flex-wrap: wrap;
		gap: 0.5em;
		margin-top: 1em;
	}

	.chip-filtro {
		margin-top: 20px;
		margin-left: 10px;
	}

	.columna-izquierda,
	.columna-derecha {
		width: 100%;
	}

	.columna-derecha {
		display: none;
	}

	/* Texto advertencia - Estilos generales */
	.textadvertencia div {
		margin: 0;
		padding: 0;
	}
}

/* Estilos para pantallas de 900px - Filtro mobile */
@media (max-width: 900px) {
	.filtro-mobile-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background: #fff;
		z-index: 9992;
		display: none;
		flex-direction: column;
		border-radius: 24px 24px 0 0;
		padding: 0.6em 1.2em 0 1.2em;
		box-sizing: border-box;
		font-family: 'Inter', 'Mukta', sans-serif;
		box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
		max-height: 90vh;
	}

	.filtro-mobile-header {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-bottom: 0.2em;
	}

	.filtro-mobile-body {
		padding-bottom: 65px;
		overflow: visible;
	}

	.filtro-grupo {
		margin-bottom: 0.4em;
	}

	.filtro-grupo label {
		display: flex;
		align-items: center;
		gap: 0.4em;
		font-size: 0.9em;
		color: #333;
		cursor: pointer;
		padding: 0.15em 0;
	}

	.filtro-mobile-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background: #461104;
		padding: 0.5em;
		display: flex;
		flex-direction: column;
		gap: 0.3em;
		border-radius: 0;
	}
}

/* Estilos para pantallas de 430px */
@media screen and (max-width: 430px) {
	.mostrar-mapa #map {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 810px;
		padding: 0 !important;
		z-index: 1;
	}
}

/* Estilos específicos para pantallas de 365px hacia abajo */
@media (max-width: 365px) {
	/* Contenedor del botón */
	.btn-container-center {
		margin-left: -26px !important;
	}

	/* Contenedor de filtros mobile */
	.filtro-mobile-container {
		position: fixed !important;
		top: 76px !important;
	}
}

/* Estilos específicos para pantallas de 375px */
@media (max-width: 375px) and (min-width: 366px) {
	/* Contenedor de filtros mobile */
	.filtro-mobile-container {
		position: fixed !important;
		top: 65px !important;
	}
}