/* Grid de propiedades */
.apis-properties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
    position: relative;
    min-height: 200px;
}

/* Barra de resultados + ordenar por */
.apis-listing-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin: 0 0 20px;
    padding: 14px 18px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-sizing: border-box;
}

.apis-listing-toolbar-count {
    font-size: 15px;
    line-height: 1.4;
    color: #334155;
    margin: 0;
}

.apis-listing-toolbar-count-number {
    color: #0f172a;
    font-weight: 700;
}

.apis-listing-toolbar-sort {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.apis-listing-toolbar-sort-label {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
    margin: 0;
    letter-spacing: 0.01em;
}

.apis-listing-toolbar-select,
.apis-listing-toolbar .apis-listing-toolbar-select {
    min-width: 200px;
    max-width: 100%;
    padding: 8px 36px 8px 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: #0f172a;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    appearance: none;
    -webkit-appearance: none;
    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 fill='%2364748b' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.apis-listing-toolbar-select:hover,
.apis-listing-toolbar .apis-listing-toolbar-select:hover {
    border-color: #cbd5e1;
}

.apis-listing-toolbar-select:focus,
.apis-listing-toolbar .apis-listing-toolbar-select:focus {
    outline: none;
    border-color: #94a3b8;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

@media (max-width: 640px) {
    .apis-listing-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .apis-listing-toolbar-sort {
        margin-left: 0;
        justify-content: space-between;
    }

    .apis-listing-toolbar-select {
        flex: 1;
        min-width: 0;
    }
}

/* Columnas por fila (plantilla Panorama y shortcode columns="N") */
.apis-properties-grid.apis-properties-grid--cols-1 {
    grid-template-columns: 1fr;
}

.apis-properties-grid.apis-properties-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(min(100%, 560px), 1fr));
}

.apis-properties-grid.apis-properties-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(min(100%, 480px), 1fr));
}

@media (max-width: 900px) {
    .apis-properties-grid.apis-properties-grid--cols-2,
    .apis-properties-grid.apis-properties-grid--cols-3 {
        grid-template-columns: 1fr;
    }
}

/* Indicador de carga */
.apis-properties-grid.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.apis-properties-grid.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid #e5e7eb;
    border-top: 4px solid #111827;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1001;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Tarjeta de propiedad */
.apis-property-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.apis-property-card:hover {
    transform: translateY(-5px);
}

/* Link en la imagen de la propiedad */
.apis-property-image-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.apis-property-image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.apis-property-image-link:hover img {
    transform: scale(1.05);
}

/* Card clickable - cursor pointer */
.apis-property-card {
    cursor: pointer;
}

/* El boton Ver detalles debe manejar su propio click */
.apis-property-link {
    cursor: pointer;
}

/* Imagen de la propiedad */
.apis-property-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.apis-property-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tipo de operación en esquina izquierda */
.apis-property-operacion {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 0.85em;
    padding: 6px 12px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

/* Estilo para VENTA */
.apis-property-operacion.venta {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    border: 1px solid #0f172a;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}

/* Estilo para ALQUILER */
.apis-property-operacion.alquiler {
    background: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
    border: 1px solid #0f766e;
    box-shadow: 0 1px 3px rgba(15, 118, 110, 0.25);
}

/* Tipo de inmueble / Estado de ficha */
.apis-property-type {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.9em;
    z-index: 2;
}

/* Estado de ficha */
.apis-property-estado {
    background: #f59e0b !important;
    color: #78350f !important;
    font-weight: 600;
    border: 1px solid #d97706;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    font-size: 0.85em;
    padding: 6px 12px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Imagen de listado en B/N (flag persistente por ficha) */
.apis-property-card.is-grayscale-image img,
.property-card-detailed.is-grayscale-image img,
.property-card-modern.is-grayscale-image img,
.property-card-minimal.is-grayscale-image img,
.property-card-newhome.is-grayscale-image img,
.property-card-panorama.is-grayscale-image img,
.property-card-featured.is-grayscale-image img,
.property-card.is-grayscale-image img
{
    filter: grayscale(1);
}

/* Badge de estado clásico (todas las plantillas excepto Panorama) */
.property-card-detailed .property-badge-status,
.property-card-detailed .property-estado-detailed,
.property-card-newhome .property-badge-status,
.property-card-featured .property-badge-status,
.property-card-featured .property-estado-featured,
.property-card-modern .property-estado-modern,
.property-card-modern .property-badge-status,
.property-card-minimal .property-estado-minimal,
.property-card-minimal .property-badge-status
{
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.property-card-detailed .property-badge-status::before,
.property-card-detailed .property-estado-detailed::before,
.property-card-newhome .property-badge-status::before,
.property-card-featured .property-badge-status::before,
.property-card-featured .property-estado-featured::before,
.property-card-modern .property-badge-status::before,
.property-card-modern .property-estado-modern::before,
.property-card-minimal .property-badge-status::before,
.property-card-minimal .property-estado-minimal::before
{
    display: none;
    content: none;
}

/* Panorama — badge de estado tipo píldora con paleta por estado */
.property-card-panorama .property-badge-status,
.property-card-panorama .property-estado-panorama
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    padding: 0.42em 0.9em;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-sizing: border-box;
    max-width: calc(100% - 1rem);
    overflow: hidden;
    text-overflow: ellipsis;
}

.property-card-panorama .property-badge-status::before,
.property-card-panorama .property-estado-panorama::before
{
    content: "";
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
    flex-shrink: 0;
}

.property-card-panorama .property-badge-status.is-estado-disponible,
.property-card-panorama .property-badge-status.is-estado-1
{
    background: rgba(236, 253, 245, 0.96);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.4);
}

.property-card-panorama .property-badge-status.is-estado-reservado,
.property-card-panorama .property-badge-status.is-estado-5,
.property-card-panorama .property-badge-status.is-estado-11
{
    background: rgba(255, 251, 235, 0.96);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.45);
}

.property-card-panorama .property-badge-status.is-estado-vendido,
.property-card-panorama .property-badge-status.is-estado-3,
.property-card-panorama .property-badge-status.is-estado-8
{
    background: rgba(243, 244, 246, 0.96);
    color: #374151;
    border-color: rgba(107, 114, 128, 0.35);
}

.property-card-panorama .property-badge-status.is-estado-alquilado,
.property-card-panorama .property-badge-status.is-estado-2,
.property-card-panorama .property-badge-status.is-estado-7
{
    background: rgba(239, 246, 255, 0.96);
    color: #0369a1;
    border-color: rgba(56, 189, 248, 0.4);
}

.property-card-panorama .property-badge-status.is-estado-no-disponible,
.property-card-panorama .property-badge-status.is-estado-4
{
    background: rgba(254, 242, 242, 0.96);
    color: #b91c1c;
    border-color: rgba(248, 113, 113, 0.4);
}

.property-card-panorama .property-badge-status.is-estado-en-proceso,
.property-card-panorama .property-badge-status.is-estado-6,
.property-card-panorama .property-badge-status.is-estado-ofertado,
.property-card-panorama .property-badge-status.is-estado-9,
.property-card-panorama .property-badge-status.is-estado-12,
.property-card-panorama .property-badge-status.is-estado-pendiente-firma,
.property-card-panorama .property-badge-status.is-estado-13,
.property-card-panorama .property-badge-status.is-estado-contrato-arras,
.property-card-panorama .property-badge-status.is-estado-10
{
    background: rgba(238, 242, 255, 0.96);
    color: #4338ca;
    border-color: rgba(129, 140, 248, 0.4);
}

/* Contenido de la propiedad */
.apis-property-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.apis-property-title {
    margin: 10px 0;
    font-size: 1.2em;
    color: #333;
}

.apis-property-location {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 15px;
}

.apis-property-location strong {
    font-weight: 700 !important;
}

.apis-property-features {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.apis-property-feature {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
    font-size: 0.9em;
}

.apis-property-price {
    font-size: 1.3em;
    color: #2c3e50;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Estrellas para propiedades destacadas */
.property-stars {
    margin: 4px 0 8px 0;
    line-height: 1;
}
.property-stars .star.filled {
    color: #ffd700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
    font-size: 0.95rem;
}

.apis-property-link {
    display: inline-block;
    padding: 10px 20px;
    background: #111827;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    text-align: center;
    transition: background 0.3s ease, color 0.3s ease;
}

.apis-property-link:hover {
    background: #1f2937;
    color: #fff;
}

/* Mensaje de no propiedades */
.apis-no-properties {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    color: #64748b;
}

/* Extra filters (destacados y orden) */
.apis-extra-filters {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    margin: 20px 0 24px 0;
    padding: 16px 20px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    box-shadow: none;
    border-radius: 10px;
    position: relative;
}

.apis-extra-filters::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #111827;
    border-radius: 10px 10px 0 0;
}

.apis-extra-filters .apis-filter-destacados,
.apis-extra-filters .apis-filter-orden,
.apis-extra-filters .apis-filter-order-mode {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.apis-extra-filters label {
    margin: 0;
    font-weight: 600;
    color: #212529;
    font-size: 0.95rem;
    white-space: nowrap;
    min-width: fit-content;
}

.apis-extra-filters .form-select {
    min-width: 160px;
    padding: 8px 32px 8px 12px;
    border-radius: 6px;
    border: 1px solid #ced4da;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 8px center;
    background-size: 16px 12px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.apis-extra-filters .form-select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.apis-extra-filters .form-select:hover {
    border-color: #adb5bd;
}

.apis-extra-filters #apis-filter-order {
    min-width: 120px;
}

@media (max-width: 992px) {
    .apis-extra-filters {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .apis-extra-filters {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 16px;
        padding: 14px 16px;
    }
    
    .apis-extra-filters .apis-filter-destacados,
    .apis-extra-filters .apis-filter-orden,
    .apis-extra-filters .apis-filter-order-mode {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
    
    .apis-extra-filters label {
        margin-bottom: 0;
        min-width: 120px;
        flex-shrink: 0;
    }
    
    .apis-extra-filters .form-select {
        flex: 1;
        min-width: auto;
    }
}

@media (max-width: 576px) {
    .apis-extra-filters {
        padding: 12px 14px;
        gap: 14px;
        margin: 16px 0 20px 0;
    }
    
    .apis-extra-filters .apis-filter-destacados,
    .apis-extra-filters .apis-filter-orden,
    .apis-extra-filters .apis-filter-order-mode {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .apis-extra-filters label {
        margin-bottom: 4px;
        min-width: auto;
    }
    
    .apis-extra-filters .form-select {
        width: 100%;
        min-width: 100%;
        font-size: 0.9rem;
        padding: 7px 32px 7px 10px;
    }
}

/* Paginación moderna y elegante */
/*
	Variables para personalizar colores y forma sin hardcode
	Se pueden sobrescribir desde admin (inline) o temas
*/
.apis-pagination {
	/* Defaults del plugin (slate). Admin puede sobrescribir --ai-pager-* vía CSS inline. */
	--ai-pager-container-bg: #ffffff;
	--ai-pager-bg: var(--ai-pager-container-bg);
	--ai-pager-item-bg: transparent;
	--ai-pager-text: #0f172a;
	--ai-pager-border: #e5e7eb;
	--ai-pager-border-width: 1px;
	--ai-pager-radius: 8px;
	--ai-pager-gap: 6px;
	--ai-pager-min-width: 44px;
	--ai-pager-height: 44px;
	--ai-pager-container-padding: 8px;
	--ai-pager-container-radius: 10px;
	--ai-pager-hover-bg: #f8fafc;
	--ai-pager-hover-text: #0f172a;
	--ai-pager-hover-border: #cbd5e1;
	--ai-pager-active-bg: #111827;
	--ai-pager-active-text: #ffffff;
	--ai-pager-active-border: #111827;
	--ai-pager-disabled-bg: transparent;
	--ai-pager-disabled-text: #94a3b8;
	--ai-pager-disabled-border: #e5e7eb;
	--ai-pager-muted: var(--ai-pager-disabled-text);
	--ai-pager-nav-bg: #f8fafc;
	--ai-pager-nav-hover-bg: #111827;
	--ai-pager-nav-hover-text: #ffffff;
	--ai-pager-accent: #111827;
	--ai-pager-accent-strong: #0f172a;
	--ai-pager-chip-bg: var(--ai-pager-nav-bg);
	--ai-pager-summary-bg: #f8fafc;
	--ai-pager-summary-border: #e5e7eb;

	/* Tipografía */
	--ai-pager-font-family: inherit;
	--ai-pager-font-size: 15px;
	--ai-pager-font-weight: 500;

	/* Neutralizar variables de Bootstrap 5 para paginación dentro del scope */
	--bs-pagination-bg: var(--ai-pager-item-bg);
	--bs-pagination-color: var(--ai-pager-text);
	--bs-pagination-border-color: var(--ai-pager-border);
	--bs-pagination-hover-bg: var(--ai-pager-hover-bg);
	--bs-pagination-hover-color: var(--ai-pager-hover-text);
	--bs-pagination-focus-color: var(--ai-pager-active-bg);
	--bs-pagination-focus-box-shadow: none;
	--bs-pagination-active-bg: var(--ai-pager-active-bg);
	--bs-pagination-active-border-color: var(--ai-pager-active-border);
	--bs-pagination-disabled-color: var(--ai-pager-disabled-text);
	--bs-pagination-border-radius: var(--ai-pager-radius);
	
	/* Asegurar que el contenedor principal use flex column para evitar que se pongan al lado */
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 0 !important;
	width: 100% !important;
}

.apis-pagination > nav {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	flex-shrink: 0 !important;
	order: 2 !important;
	display: block !important;
}

.apis-pagination .pagination {
	margin: 0 !important;
	padding: var(--ai-pager-container-padding) !important;
	gap: var(--ai-pager-gap) !important;
	list-style: none !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--ai-pager-container-bg) !important;
	border: 1px solid var(--ai-pager-border) !important;
	border-radius: var(--ai-pager-container-radius) !important;
	box-shadow: none !important;
	flex-wrap: wrap !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.apis-pagination .page-item {
	margin: 0;
}

.apis-pagination .page-link,
.apis-pagination .page-item .page-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ai-pager-min-width);
	height: var(--ai-pager-height);
	padding: 0 14px;
	background: var(--ai-pager-item-bg) !important;
	border: var(--ai-pager-border-width) solid var(--ai-pager-border) !important;
	color: var(--ai-pager-text) !important;
	text-decoration: none !important;
	border-radius: var(--ai-pager-radius) !important;
	font-size: var(--ai-pager-font-size);
	font-weight: var(--ai-pager-font-weight);
	font-family: var(--ai-pager-font-family, inherit);
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
	position: relative;
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
}

.apis-pagination .page-link:focus,
.apis-pagination .page-link:focus-visible {
	outline: 2px solid var(--ai-pager-active-bg) !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
}

.apis-pagination .page-link:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none !important;
}

.apis-pagination .page-link:hover {
	color: var(--ai-pager-hover-text) !important;
	background: var(--ai-pager-hover-bg) !important;
	border-color: var(--ai-pager-hover-border) !important;
}

.apis-pagination .page-item.active .page-link {
	background: var(--ai-pager-active-bg) !important;
	color: var(--ai-pager-active-text) !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	border-color: var(--ai-pager-active-border) !important;
	position: relative;
	z-index: 1;
}

.apis-pagination .page-item.disabled .page-link {
	background: var(--ai-pager-disabled-bg) !important;
	color: var(--ai-pager-disabled-text) !important;
	cursor: not-allowed !important;
	opacity: 0.6 !important;
	pointer-events: none !important;
	border-color: var(--ai-pager-disabled-border) !important;
}

.apis-pagination .page-item.disabled .page-link:hover {
	color: var(--ai-pager-disabled-text) !important;
	background: var(--ai-pager-disabled-bg) !important;
	border-color: var(--ai-pager-disabled-border) !important;
	transform: none;
}
.apis-pagination-summary {
    text-align: center !important;
    color: var(--ai-pager-text) !important;
    font-size: var(--ai-pager-font-size, 15px) !important;
    font-weight: var(--ai-pager-font-weight, 400) !important;
    font-family: var(--ai-pager-font-family, inherit) !important;
    margin-bottom: 30px !important;
    margin-top: 0 !important;
    padding: 16px 24px !important;
    background: var(--ai-pager-summary-bg, var(--ai-pager-hover-bg)) !important;
    border-radius: var(--ai-pager-container-radius) !important;
    border: var(--ai-pager-border-width) solid var(--ai-pager-summary-border, var(--ai-pager-border)) !important;
    box-shadow: none !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    display: block !important;
    flex-shrink: 0 !important;
    order: 1 !important;
    box-sizing: border-box !important;
}

.apis-pagination-summary i
{
    color: var(--ai-pager-accent, #111827) !important;
}

.apis-pagination-summary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ai-pager-accent, #111827);
}

/* Estilos adicionales para el contenedor de paginación */
.apis-pagination {
	margin: 20px 0 !important;
}

.apis-properties-pagination .pagination { /* mantenido por compatibilidad si existiera en plantillas antiguas */
	margin: 0;
	padding: var(--ai-pager-container-padding);
	gap: var(--ai-pager-gap);
	list-style: none;
	display: flex;
	align-items: center;
	background: var(--ai-pager-container-bg);
	border-radius: var(--ai-pager-container-radius);
	box-shadow: none;
	border: 1px solid var(--ai-pager-border);
}

/* Flechas de navegación especiales */

.apis-pagination .page-link[aria-label="Anterior"],
.apis-pagination .page-link[aria-label="Siguiente"] {
	min-width: var(--ai-pager-min-width);
	font-weight: 600;
	background: var(--ai-pager-nav-bg) !important;
	border: var(--ai-pager-border-width) solid var(--ai-pager-border) !important;
	margin: 0 4px;
}

.apis-pagination .page-link[aria-label="Anterior"]:hover,
.apis-pagination .page-link[aria-label="Siguiente"]:hover {
	background: var(--ai-pager-nav-hover-bg) !important;
	color: var(--ai-pager-nav-hover-text) !important;
	border-color: var(--ai-pager-nav-hover-bg) !important;
}

/* Puntos suspensivos */
.apis-pagination .page-item.disabled > span.page-link {
	background: transparent !important;
	border: none !important;
	color: var(--ai-pager-disabled-text) !important;
	font-weight: 600;
	cursor: default;
	min-width: 20px;
	opacity: 1 !important;
	pointer-events: none !important;
}

/* Primera y última página destacadas */
.apis-pagination .page-item:first-child .page-link,
.apis-pagination .page-item:last-child .page-link {
	font-weight: 600;
}

/* Responsive para móviles */
@media (max-width: 576px) {
    .apis-pagination-summary {
        font-size: 14px;
        padding: 12px 16px;
        margin-bottom: 25px;
    }
    
    .apis-pagination .pagination {
        gap: calc(var(--ai-pager-gap) * 0.5);
        padding: calc(var(--ai-pager-container-padding) * 0.75);
    }
    
    .apis-pagination .page-link {
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
        font-size: 14px;
    }
    
    .apis-pagination .page-link[aria-label="Anterior"],
    .apis-pagination .page-link[aria-label="Siguiente"] {
        min-width: 42px;
        margin: 0 2px;
    }
}

/* Animación de carga para el paginador */
.apis-pagination.loading {
    opacity: 0.6;
    pointer-events: none;
}

.apis-pagination.loading .pagination {
    position: relative;
}

.apis-pagination.loading .pagination::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid var(--ai-pager-accent-strong);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .apis-properties-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }
    
    .apis-property-features {
        flex-wrap: wrap;
    }
    
    .apis-pagination {
        flex-wrap: wrap !important;
        flex-direction: column !important;
    }
    
    .apis-pagination > nav,
    .apis-pagination .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
} 

/* Información adicional de paginación */
.pagination-info {
    text-align: center;
    margin-top: 15px;
}

.pagination-info small {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: #f8fafc;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
}

.pagination-info small i {
    color: var(--ai-pager-accent-strong, #111827);
}

/* Mejoras para iconos en paginación */
.apis-pagination .page-link i {
    font-size: 14px;
    line-height: 1;
}

.apis-pagination .page-link[aria-label="Anterior"] i,
.apis-pagination .page-link[aria-label="Siguiente"] i {
    font-size: 16px;
    font-weight: bold;
}

/* Hover especial para primera y última página */
.apis-pagination .page-item:first-child .page-link:hover,
.apis-pagination .page-item:last-child .page-link:hover {
	background: var(--ai-pager-hover-bg) !important;
	color: var(--ai-pager-hover-text) !important;
	border-color: var(--ai-pager-hover-border) !important;
}

/* Responsive para información de página */
@media (max-width: 576px) {
    .pagination-info {
        margin-top: 12px;
    }
    
    .pagination-info small {
        font-size: 12px;
        padding: 4px 10px;
    }
} 

/* Botón "Cargar más" */
.apis-load-more-wrapper .apis-load-more {
	background-color: var(--ai-pager-bg, #ffffff) !important;
	color: var(--ai-pager-accent-strong, #111827) !important;
	border: 1px solid var(--ai-pager-accent-strong, #111827) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
	padding: 10px 20px !important;
	font-weight: 600 !important;
	letter-spacing: 0.2px;
	text-transform: none;
}

.apis-load-more-wrapper .apis-load-more:hover,
.apis-load-more-wrapper .apis-load-more:focus {
	background-color: var(--ai-pager-accent-strong, #111827) !important;
	color: #ffffff !important;
	border-color: var(--ai-pager-accent-strong, #111827) !important;
	transform: translateY(-1px);
}

.apis-load-more-wrapper .apis-load-more:active {
	transform: translateY(0);
}

.apis-load-more-wrapper .apis-load-more.disabled,
.apis-load-more-wrapper .apis-load-more[aria-disabled="true"] {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
}

/* Contenedor listado con mapa (Premium) */
.apis-listado-with-map {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	overflow: visible;
}

.apis-listado-with-map.apis-listado-map-layout-left,
.apis-listado-with-map.apis-listado-map-layout-right {
	flex-direction: row;
	align-items: flex-start;
}

.apis-listado-with-map.apis-listado-map-layout-left .apis-listing-map-wrapper,
.apis-listado-with-map.apis-listado-map-layout-right .apis-listing-map-wrapper {
	flex: 0 0 40%;
	max-width: 40%;
}

.apis-listado-with-map.apis-listado-map-layout-left .apis-listing-map-container,
.apis-listado-with-map.apis-listado-map-layout-right .apis-listing-map-container {
	width: 100%;
}

.apis-listado-with-map.apis-listado-map-layout-right .apis-listing-map-wrapper {
	order: 2;
}

.apis-listado-with-map.apis-listado-map-layout-right .apis-properties-grid {
	order: 1;
}

.apis-listado-with-map.apis-listado-map-layout-left .apis-properties-grid,
.apis-listado-with-map.apis-listado-map-layout-right .apis-properties-grid {
	flex: 1 1 60%;
	min-width: 0;
}

.apis-listado-with-map.apis-listado-map-layout-bottom .apis-listing-map-wrapper {
	order: 2;
}

.apis-listado-with-map.apis-listado-map-layout-top .apis-listing-map-wrapper {
	order: 0;
}

.apis-listado-with-map.apis-listado-map-layout-bottom .apis-properties-grid {
	order: 1;
}

/* Sticky: el wrapper es el que hace sticky para que el mapa quede fijo al hacer scroll */
.apis-listado-with-map.apis-listado-map-layout-left.apis-listado-map-sticky .apis-listing-map-wrapper,
.apis-listado-with-map.apis-listado-map-layout-right.apis-listado-map-sticky .apis-listing-map-wrapper {
	position: sticky;
	top: 0;
	align-self: flex-start;
	min-height: 100vh;
}

.apis-listado-with-map.apis-listado-map-layout-left.apis-listado-map-sticky .apis-listing-map-container,
.apis-listado-with-map.apis-listado-map-layout-right.apis-listado-map-sticky .apis-listing-map-container {
	height: 100vh;
	min-height: 100vh;
}

.apis-listing-map-container {
	min-height: 280px;
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
	background: var(--apis-map-bg, #f5f5f5);
}

.apis-listing-map-container .gm-style iframe {
	border-radius: 8px;
}

/* Tarjeta enfocada desde el mapa (scroll/highlight) */
.apis-properties-grid .property-card-modern.apis-card-focused,
.apis-properties-grid .property-card-minimal.apis-card-focused,
.apis-properties-grid .property-card-detailed.apis-card-focused,
.apis-properties-grid .property-card-newhome.apis-card-focused {
	box-shadow: 0 0 0 2px var(--apis-focus-color, #0284c7);
	transition: box-shadow 0.25s ease;
}

/* InfoWindow del mapa */
.apis-map-infowindow {
	padding: 0.25rem 0;
	min-width: 160px;
}

.apis-map-infowindow a {
	color: var(--apis-link-color, #0284c7);
	text-decoration: underline;
	display: inline;
	padding: 0;
	margin-top: 4px;
	border-radius: 0;
	background: transparent;
	font-size: 12px;
	font-weight: 500;
}

/* Móvil: altura del mapa y colapsable */
.apis-listado-with-map.apis-map-mobile-height .apis-listing-map-container {
	min-height: var(--apis-map-mobile-height, 280px);
}

.apis-map-mobile-collapsible .apis-map-toggle-mobile {
	display: none;
}

@media (max-width: 991.98px) {
	.apis-listado-with-map.apis-listado-map-layout-left,
	.apis-listado-with-map.apis-listado-map-layout-right {
		flex-direction: column;
	}

	.apis-listado-with-map.apis-listado-map-layout-left .apis-listing-map-wrapper,
	.apis-listado-with-map.apis-listado-map-layout-right .apis-listing-map-wrapper {
		flex: 0 0 auto;
		max-width: 100%;
		position: relative;
		min-height: 0;
	}

	.apis-listado-with-map.apis-listado-map-layout-left.apis-listado-map-sticky .apis-listing-map-wrapper,
	.apis-listado-with-map.apis-listado-map-layout-right.apis-listado-map-sticky .apis-listing-map-wrapper {
		position: relative;
		min-height: 0;
	}

	.apis-listado-with-map.apis-listado-map-layout-left .apis-listing-map-container,
	.apis-listado-with-map.apis-listado-map-layout-right .apis-listing-map-container {
		height: auto;
		min-height: var(--apis-map-mobile-height, 280px);
	}

	.apis-listado-with-map.apis-listado-map-layout-left.apis-listado-map-sticky .apis-listing-map-container,
	.apis-listado-with-map.apis-listado-map-layout-right.apis-listado-map-sticky .apis-listing-map-container {
		height: auto;
		min-height: var(--apis-map-mobile-height, 280px);
	}

	.apis-map-mobile-collapsible .apis-map-toggle-mobile {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		right: 16px;
		bottom: 16px;
		width: auto;
		max-width: 70%;
		padding: 8px 14px;
		margin: 0;
		border: 1px solid #0f172a;
		border-radius: 999px;
		background: #0f172a;
		color: #ffffff;
		font-size: 13px;
		cursor: pointer;
		gap: 6px;
		box-shadow: 0 10px 25px rgba(15, 23, 42, 0.35);
		z-index: 9998;
	}

	.apis-map-mobile-collapsible.apis-map-mobile-collapsed .apis-listing-map-container {
		max-height: 0;
		min-height: 0;
		overflow: hidden;
	}

	/* Overlay de mapa a pantalla completa en móvil */
	.apis-listing-map-wrapper.apis-map-mobile-overlay-open {
		position: fixed;
		inset: 0;
		z-index: 9999;
		background: rgba(15, 23, 42, 0.9);
		padding: 12px;
		display: flex;
		align-items: stretch;
		justify-content: center;
	}

	.apis-listing-map-wrapper.apis-map-mobile-overlay-open .apis-listing-map-container {
		height: 100vh;
		min-height: 100vh;
		border-radius: 12px;
		overflow: hidden;
	}

	.apis-listing-map-wrapper.apis-map-mobile-overlay-open .apis-map-toggle-mobile {
		position: absolute;
		top: 14px;
		right: 16px;
		bottom: auto;
		box-shadow: none;
		background: rgba(15, 23, 42, 0.9);
	}

	.apis-map-mobile-collapsible.apis-map-mobile-collapsed .apis-map-toggle-mobile .apis-map-toggle-expand-text {
		display: inline;
	}

	.apis-map-mobile-collapsible.apis-map-mobile-collapsed .apis-map-toggle-mobile .apis-map-toggle-collapse-text {
		display: none;
	}

	.apis-map-mobile-collapsible:not(.apis-map-mobile-collapsed) .apis-map-toggle-mobile .apis-map-toggle-expand-text {
		display: none;
	}

	.apis-map-mobile-collapsible:not(.apis-map-mobile-collapsed) .apis-map-toggle-mobile .apis-map-toggle-collapse-text {
		display: inline;
	}
}