@charset "utf-8";
/* CSS Document */

        :root {
            --primary-color: #00B19F; /* Azul institucional Banco Bica */
            --accent-color: #8DD200;  /* Amarillo/Oro de acento */
            --text-color: #333333;
            --text-light: #666666;
            --bg-light: #f4f7fa;
            --card-bg: #ffffff;
            --border-color: #e1e8ed;
            --radius: 30px;
            --transition: all 0.3s ease;
			--text-7xl:4.5rem;
        }


        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family:'montserrat light',  sans-serif;
        }

        body {
            background-color: var(--bg-light);
            color: var(--text-color);
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /*header {
            background-color: var(--primary-color);
            color: white;
            padding: 20px;
            text-align: center;
            border-bottom: 4px solid var(--accent-color);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        header h1 {
            font-size: var(--text-7xl);
            margin-bottom: 5px;
        }

        header p {
            font-size: 14px;
            color: rgba(255,255,255,0.8);
        }
*/
        .main-container {
            display: flex;
            max-width: 1400px;
            width: 100%;
            margin: 30px auto;
            padding: 0 0px;
            gap: 10px;
            flex: 1;
        }

        /* SIDEBAR DE FILTROS */
        .filters-sidebar {
            width: 260px;
            background: var(--card-bg);
            border-radius: var(--radius);
            padding: 25px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
            height: fit-content;
            position: sticky;
            top: 30px;
        }

        .sidebar-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid var(--bg-light);
            padding-bottom: 10px;
        }

        .btn-clear-all {
            background: none;
            border: none;
            color: var(--text-light);
            font-size: 12px;
            cursor: pointer;
            text-decoration: underline;
        }

        .btn-clear-all:hover {
            color: var(--primary-color);
        }

        .filter-group {
            margin-bottom: 25px;
        }

        .filter-group-title {
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-light);
            margin-bottom: 12px;
        }

        .search-box {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 14px;
            margin-bottom: 15px;
            outline: none;
            transition: var(--transition);
        }

        .search-box:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(0, 56, 116, 0.1);
        }

        .checkbox-list {
            max-height: 240px;
            overflow-y: auto;
            padding-right: 5px;
        }

        /* Custom Scrollbar */
        .checkbox-list::-webkit-scrollbar {
            width: 6px;
        }
        .checkbox-list::-webkit-scrollbar-track {
            background: var(--bg-light);
            border-radius: 4px;
        }
        .checkbox-list::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 4px;
        }

        .checkbox-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            cursor: pointer;
            font-size: 14px;
            user-select: none;
        }

        .checkbox-item input {
            margin-right: 10px;
            width: 20px;
            height: 20px;
            accent-color: var(--primary-color);
            cursor: pointer;
        }

        .checkbox-item:hover {
            color: var(--primary-color);
        }

        .count-badge {
            margin-left: auto;
            font-size: 11px;
            background-color: var(--bg-light);
            padding: 2px 6px;
            border-radius: 10px;
            color: var(--text-light);
        }

        /* CONTENIDO PRINCIPAL */
        .content-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* Barra de Estado de Filtros */
        .active-filters-bar {
            background: var(--card-bg);
            padding: 15px 20px;
            border-radius: var(--radius);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
        }

        .active-filters-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-light);
        }

        .filter-chip {
            background-color: #eef3f8;
            color: var(--primary-color);
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 13px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-weight: 500;
        }

        .filter-chip span {
            cursor: pointer;
            font-weight: bold;
            color: var(--text-light);
        }
        .filter-chip span:hover {
            color: #ff3b30;
        }

        .results-count {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-light);
            margin-left: auto;
        }

        /* GRID DE COMERCIOS */
        .commerce-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 10px;
        }

        .commerce-card {
            background: var(--card-bg);
            border-radius: var(--radius);
            border: 1px solid var(--border-color);
            padding: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.03);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .commerce-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
            border-color: rgba(0, 56, 116, 0.2);
        }

        .card-tag {
            position: absolute;
            top: 15px;
            right: 15px;
            background-color: #e6f0fa;
            color: var(--primary-color);
            font-size: 11px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 20px;
            text-transform: uppercase;
        }

        .card-body {
            margin-top: 15px;
        }

        .commerce-name {
            font-size: 22px!important;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 8px;
            padding-right: 80px;
        }

        .commerce-location {
            font-size: 15px;
            color: var(--text-light);
            display: flex;
            align-items: center;
            gap: 4px;
            margin-bottom: 15px;
        }

        .commerce-location::before {
            content: "📍";
            font-size: 12px;
        }

		.commerce-details {
			font-size: 12px;
			color: var(--text-light);
			margin-top: 10px;
			background-color: #f8fafc; /* Fondo grisáceo muy sutil */
			padding: 8px 12px;
			border-radius: 6px;			
			line-height: 1.4;
			font-style: normal;
		}

        .promo-badge {
			/*background: var(--primary-color);*/
			/*padding: 12px 12px;*/
			border-radius: 5px;
			font-size: 18px;
			font-weight: 600;
			color: var(--text-light);
			text-align: center;

        }
		/* BADGE PROMO MODO */
		.modo-badge {
			position: absolute;
			top: 12px;
			left: 12px; /* Se ubica arriba a la izquierda (el de rubro suele estar a la derecha) */
			background-color: #85C802; /* El celeste característico de MODO */
			color: #ffffff;
			font-size: 11px;
			font-weight: bold;
			padding: 4px 8px;
			border-radius: 20px;
			box-shadow: 0 2px 4px rgba(0,0,0,0.1);
			display: flex;
			align-items: center;
			gap: 4px;
			z-index: 2;
		}

        .no-results {
            grid-column: 1 / -1;
            background: var(--card-bg);
            text-align: center;
            padding: 50px;
            border-radius: var(--radius);
            color: var(--text-light);
            font-size: 16px;
            border: 1px dashed var(--border-color);
        }

        /* BOTÓN MÓVIL */
        .mobile-filter-trigger {
            display: none;
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 14px;
            border-radius: var(--radius);
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            margin-bottom: 15px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        /* RESPONSIVE */
        @media (max-width: 992px) {
            .main-container {
                flex-direction: column;
                margin: 15px auto;
            }

            .mobile-filter-trigger {
                display: flex;
            }

            .filters-sidebar {
                width: 100%;
                position: fixed;
                top: 0;
                left: -100%;
                height: 100%;
                z-index: 1000;
                transition: left 0.3s ease;
                border-radius: 0;
                max-width: 320px;
                box-shadow: 5px 0 25px rgba(0,0,0,0.15);
            }

            .filters-sidebar.active {
                left: 0;
            }

            .sidebar-overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.4);
                z-index: 999;
            }

            .sidebar-overlay.active {
                display: block;
            }

            .sidebar-title .close-sidebar {
                display: block !important;
            }
        }

        .sidebar-title .close-sidebar {
            display: none;
            font-size: 24px;
            cursor: pointer;
            line-height: 1;
        }
		/* Contenedor de la imagen dentro de la tarjeta */
		.card-image-container {
			width: 100%;
			height: 140px; /* Altura fija ideal para logos de comercios */
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ffffff; /* Fondo blanco para resaltar el logo */
			/*border-radius: 8px;
			/*border: 1px solid var(--border-color);
			/*padding: 10px;
			/*margin-top: 15px; /* Espacio respecto al borde superior */
			overflow: hidden;
		}

		/* Comportamiento de la imagen del logo */
		.card-image-container img {
			max-width: 100%;
			max-height: 100%;
			object-fit: contain; /* Clave: evita que el logo se deforme o estire */
		}

		/* Ajuste estético para el cuerpo de la tarjeta */
		.commerce-card {
			justify-content: flex-start; /* Alinea los elementos hacia arriba */
			gap: 6px; /* Espaciado uniforme interno */
		}		
		/* Etiqueta destacada para Promo Especial opcional */
		.special-promo-badge {
			/*background: linear-gradient(45deg, #fffdf5 0%, #f9f9f9 100%);*/
			/*	border: 1.5px solid var(--primary-color);*/
				padding-bottom: 12px;
				border-radius: 6px;
				font-size: 21px;
				font-weight: 700;
				color: #00b19f;
				margin-bottom: 0px;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 6px;
				animation: pulse-subtle 2s infinite;
		}

		/* Pequeña animación opcional para llamar la atención del usuario */
		@keyframes pulse-subtle {
			0% { transform: scale(1); }
			50% { transform: scale(1.05); }
			100% { transform: scale(1); }
		}