/* 
Theme Name: Caboel
Theme URI: https://marcelcl.com/
Description: A child custom theme by Marcel CL. For any help or support please feel free to reach us at anytime at marcel@marcelcl.com
Author: Caboel - by Marcel CL
Author URI: https://marcelcl.com/
Template: hello-elementor
Text Domain: caboel
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/
/*********************************************************/
/* GENERAL */
/*********************************************************/
html,body{overflow-x:hidden;}
*:focus{outline: none;}

.home .home-top{position:absolute;z-index:999;border:none !important;}
/*********************************************************/
/* MENU */
/*********************************************************/
/* ARCHIVES CUSTOM */
.post-type-archive-inmuebles .box-archives{grid-template-columns: repeat(5, 1fr);}
.status-not-allowed{opacity: 0.6;cursor: not-allowed;}
.box-ribbon{text-align: center;position: absolute;width: 100%;background: #bf5a08;color: #e5e5e5;top: 57px;text-transform: uppercase;}
/* PAGE INMUEBLES */
.acf-blocks .elementor-shortcode span{display: block;color: #bf5a08;}
.acf-blocks .elementor-shortcode{font-size:14px;}
.mt-10{margin-top:10px;}
/* SEARCH FORMS */
form.searchandfilter{border-radius: 25px;overflow: hidden;background:#F5F4F2;}
form.searchandfilter ul{display: flex;padding: 0px;}
form.searchandfilter ul li{padding: 0px;}
li.sf-field-search {width: 100%;}
li.sf-field-search label{width: 100%;}
li.sf-field-search input,select.sf-input-select {border: none;}
li.sf-field-search input,select.sf-input-select,li.sf-field-submit input[type="submit"]{height: 50px;background: #F5F4F2;}
li.sf-field-submit {margin-left: 10px !important;}
li.sf-field-submit input[type="submit"]{background:#bf5a08;color: #fff;border: none;min-width: 130px;padding: 5px;border-radius: 0px;border-top-right-radius: 25px;border-bottom-right-radius: 25px;}
input.sf-input-text::placeholder{font-size: 14px;color: #bdbdbd;}
h3.sf-row-title span {
    font-size: 16px;
    font-weight: normal;
}
/* CUSTOM SEARCH FORM */
li.sf-field-taxonomy-cat-inmuebles{min-width:310px;}
/* FONT */
@font-face {
    font-family: 'caboel';
    src:    url('fonts/caboel.eot');
    src:    url('fonts/caboel.eot#iefix') format('embedded-opentype'),
        url('fonts/caboel.ttf') format('truetype'),
        url('fonts/caboel.woff') format('woff'),
        url('fonts/caboel.svg#caboel') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'caboel' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-arrow-2-right:before {
    content: "\e900";
}
.icon-arrow-down:before {
    content: "\e901";
}
.icon-arrow-left:before {
    content: "\e902";
}
.icon-arrow-right:before {
    content: "\e903";
}
.icon-arrow-up:before {
    content: "\e904";
}
.icon-butt:before {
    content: "\e905";
}
.icon-close:before {
    content: "\e906";
}
.icon-comercial:before {
    content: "\e907";
}
.icon-comp1:before {
    content: "\e908";
}
.icon-comp2:before {
    content: "\e909";
}
.icon-comp3:before {
    content: "\e90a";
}
.icon-hotelero:before {
    content: "\e90b";
}
.icon-logistico:before {
    content: "\e90c";
}
.icon-menu:before {
    content: "\e90d";
}
.icon-oficcinas:before {
    content: "\e90e";
}
.addicon:before{
    font-family: caboel;
    content: "\e90e";
    position: absolute;
    left: -1.8em;
    top: -.3em;
    color: #cec48e;
    font-size: 31px;
    line-height: normal;
}
.addicon{position:relative;}
/* SEARCH & FILTER PRO */
/* =========================================================
   CONTENEDOR PRINCIPAL (Efecto lista delimitada)
   ========================================================= */
.sf-modern-wrapper {
    background-color: #ffffff;
    border: 1px solid #eaeaea; /* Borde exterior tenue */
    border-radius: 8px;
    overflow: hidden; /* Asegura que los bordes redondeados contengan los items */
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

/* =========================================================
   FILAS INDIVIDUALES (Items)
   ========================================================= */
.sf-modern-row {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #eaeaea; /* Línea delimitadora interna */
    text-decoration: none;
    color: #2d3748;
    transition: background-color 0.2s ease;
    gap: 20px;
}

/* Quitar el borde al último elemento para que no choque con el borde exterior */
.sf-modern-wrapper .sf-modern-row:last-child {
    border-bottom: none;
}

.sf-modern-row:hover.allowed {
    background-color: #f8fafc; /* Color muy sutil al pasar el ratón */
}

.sf-modern-row.not-allowed {
    opacity: 0.6;
    cursor: not-allowed;
}

/* =========================================================
   IMAGEN
   ========================================================= */
.sf-row-img {
    width: 140px;
    height: 90px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-color: #f0f0f0;
    flex-shrink: 0; /* Evita que la imagen se deforme */
}

/* =========================================================
   CONTENIDO (Textos y Metadatos)
   ========================================================= */
.sf-row-content {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    min-width: 0; /* CRÍTICO: Permite que el texto se trunque si es muy largo y no rompa el flexbox */
    gap: 20px;
}

.sf-row-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0; /* CRÍTICO */
}

.sf-row-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 4px 0;
    white-space: nowrap; /* Evita saltos de línea en escritorio */
    overflow: hidden;
    text-overflow: ellipsis; /* Añade "..." si el título es extremo */
}

.sf-row-subtitle {
    font-size: 14px;
    color: #718096;
}

/* =========================================================
   METADATOS (Metros cuadrados)
   ========================================================= */
.sf-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0; /* Evita que los m2 se achiquen */
}

.sf-text-m2 {
    font-size: 14px;
    font-weight: 600;
    color: #4a5568;
    font-family: "Raleway", sans-serif;
    line-height: normal;
}

.sf-icon-m2 {
    display: flex;
    align-items: center;
}

/* =========================================================
   FLECHA
   ========================================================= */
.sf-row-arrow {
    color: #a0aec0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease, color 0.2s ease;
}

.sf-modern-row:hover .sf-row-arrow {
    color: #1a202c;
    transform: translateX(4px); /* Pequeña animación al hover */
}

/* =========================================================
   RESPONSIVE (Móviles)
   ========================================================= */
@media (max-width: 768px) {
    .sf-modern-row {
        display: grid;
        grid-template-columns: 1fr auto; /* Columna izquierda para medidas, derecha para flecha */
        gap: 15px 0; /* Espaciado vertical de 15px, horizontal 0 */
        padding: 15px;
    }

    .sf-row-img {
        grid-column: 1 / -1; /* Ocupa todo el ancho */
        width: 100%;
        height: 200px;
    }

    .sf-row-content {
        display: contents; /* CRÍTICO: Permite que el texto y los metadatos actúen como elementos directos del grid padre */
    }

    .sf-row-text {
        grid-column: 1 / -1; /* Ocupa todo el ancho */
    }

    .sf-row-title {
        white-space: normal;
        font-size: 17px;
    }

    /* Contenedor de medidas y futuros datos */
    .sf-row-meta {
        grid-column: 1 / 2; /* Se queda en la columna izquierda */
        display: flex;
        flex-wrap: wrap; /* Si añades muchos datos y no caben, bajan a la siguiente línea */
        justify-content: flex-start; /* Alinea los datos a la izquierda */
        align-items: center;
        gap: 15px; /* Espaciado entre los m2 y cualquier dato extra que pongas después */
        padding-top: 15px;
        border-top: 1px dashed #e2e8f0;
    }

    /* Flecha */
    .sf-row-arrow {
        grid-column: 2 / 3; /* Se va a la columna derecha */
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-top: 15px;
        border-top: 1px dashed #e2e8f0; /* Continúa la línea separadora del bloque de medidas */
        padding-left: 15px;
    }
}

/* =========================================================
   PAGINADOR
   ========================================================= */
.sf-modern-pagination {
    margin-top: 30px;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    gap: 20px;
}
.nav-next a, .nav-previous a {
    width: 35px;
    height: 35px;
    background: #7c9dab;
    color: #fff;
    padding: 3px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}
.nav-next a:hover, .nav-previous a:hover {
    background: #597b8a;
}
.sf-pagination-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 8px;
    align-items: center;
}

.sf-pagination-list li a,
.sf-pagination-list li span {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: #1a202c;
    text-decoration: none;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.sf-pagination-list li a:hover {
    background-color: #f1f5f9;
}

/* Página Activa (Color de la marca) */
.sf-pagination-list li.active span {
    background-color: #BF5A08;
    color: #ffffff;
}

/* Flechas paginación */
.sf-pagination-list li.previous a,
.sf-pagination-list li.next a {
    background-color: transparent;
    font-size: 18px;
}
.sf-no-results {
    text-align: center;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* =========================================================
   GALERÍA INMUEBLES (Shortcode sin Thumbnails)
   ========================================================= */
.swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
}

.property-gallery-container {
    width: 100%;
    margin-bottom: 25px; 
}

/* --- IMAGEN PRINCIPAL --- */
.pg-main-wrapper {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}

.pg-main-swiper {
    width: 100%;
    aspect-ratio: 4 / 3; 
    background-color: #f0f0f0; 
    /* Variables de Swiper para el color y tamaño de flechas */
    --swiper-navigation-color: #ffffff;
    --swiper-navigation-size: 20px;
}

.pg-main-swiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

/* --- FLECHAS SWIPER PERSONALIZADAS --- */
.swiper-button-next,
.swiper-button-prev {
    background: rgba(15, 23, 42, 0.7);
    width: 40px;
    height: 40px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    transition: background 0.2s;
    margin-top: -20px; /* Centrado vertical correcto */
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: rgba(15, 23, 42, 0.9);
}

/* Evitar que las flechas queden pegadas a los bordes */
.swiper-button-next { right: 15px; }
.swiper-button-prev { left: 15px; }

/* Imagen única (cuando no hay galería) */
.pg-single-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    cursor: pointer;
}

/* Botón de expandir */
.pg-expand-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    background: rgba(15, 23, 42, 0.7);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.2s;
    padding: 10px; 
}

.pg-expand-btn:hover {
    background: rgba(15, 23, 42, 0.9);
}

.pg-expand-btn svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.pg-hidden-gallery {
    display: none;
}

.swiper-button-next, .swiper-button-prev {
    width: 30px !important;
    height: 30px !important;
}

/* =========================================================
   BOTÓN PLANOS PDF
   ========================================================= */
.contenedor-boton-planos {
    margin: 20px 0;
}

.btn-ver-planos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #2d3748;
    outline: 1px solid #2d3748;
    color: #ffffff !important;
    font-family: "Raleway", sans-serif;
    gap: 15px;
    letter-spacing: 1px;
    line-height: normal;
    padding: 12px 24px;
    border-radius: 2px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-ver-planos:hover {
    background-color: #1a202c;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0,0,0,0.15);
}

/* Evitar miniaturas rotas de Fancybox en PDFs */
.fancybox__thumb {
    display: none !important;
}

/* =========================================================
   BOTÓN GOOGLE MAPS
   ========================================================= */
.contenedor-boton-mapa {
    margin: 20px 0;
}

.btn-ver-mapa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    outline: 1px solid #2d3748;
    color: #2d3748 !important;
    font-family: "Raleway", sans-serif;
    gap: 15px;
    letter-spacing: 1px;
    line-height: normal;
    padding: 12px 24px;
    border-radius: 2px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-ver-mapa:hover {
    background-color: #1a202c;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0,0,0,0.15);
}

.pm-icon-map {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/*==================================================================
  SHORTCODE: Cliente Asociado
==================================================================*/
.superficies .cliente-asociado-container { margin-bottom: 20px; }
.superficies .cliente-asociado-box{margin-bottom: 10px;}

.cliente-asociado-box {
    display: flex;
    align-items: center; 
    flex-direction: row;
    gap: 12px;
    font-family: "Raleway", Sans-serif;
}

.cliente-logo-wrapper {
    width: 25px;
    height: auto;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cliente-logo-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.cliente-info-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1; 
}

.cliente-titulo {
    font-size: 15px;
    font-weight: 700;
    color: #4a4a4a;
    line-height: 1.1;
    margin-bottom: 2px;
}

.cliente-nombre {
    font-size: 15px;
    color: #7892a3;
    line-height: 1.1;
    display: flex; 
    align-items: center; 
}

.no-bold { font-weight: normal; }

/* Enlace e Icono SVG */
.cliente-nombre a {
    color: inherit;
    text-decoration: none;
    display: flex; 
    align-items: center; 
    transition: color 0.2s ease;
}

.cliente-nombre a:hover {
    color: #4a4a4a; 
    text-decoration: underline; 
}

.icono-enlace-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px; 
    opacity: 0.8; 
    transition: opacity 0.2s ease;
}

.icono-enlace-externo {
    width: 12px;
    height: 12px;
    color: inherit; 
}

.cliente-nombre a:hover .icono-enlace-wrapper {
    opacity: 1; 
}

/* Estilos para el acordeón (Multiinquilino) */
.cliente-toggle-wrapper {
    display: flex;
    align-items: center;
    margin-left: auto; 
}

.multi-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: #f1f1f1;
    color: #7892a3;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    user-select: none;
    transition: background-color 0.2s ease;
}

.multi-toggle-btn:hover {
    background-color: #e2e2e2;
}

.multiinquilino-content {
    margin-top: 15px;
    padding: 12px 15px;
    background-color: #f9f9f9;
    border-left: 3px solid #7892a3; 
    border-radius: 0 4px 4px 0;
    font-family: "Raleway", Sans-serif;
    font-size: 14px;
    color: #4a4a4a;
    line-height: 1.6;
}

/*==================================================================
  SHORTCODE: Grid Categorías Inmuebles (Flexbox Adaptativo - Light)
==================================================================*/
.grid-categorias-inmuebles {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 15px;
    width: 100%;
    margin: 20px 0;
    justify-content: flex-start;
}

.card-categoria-inmueble {
    flex: 1 1 calc(20% - 15px); 
    min-width: 130px; 
    max-width: 180px; 
    
    background-color: #ffffff; /* Fondo blanco */
    border: 1px solid #e5e5e5; /* Borde gris muy suave */
    border-radius: 8px;
    padding: 20px 15px;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: center;
    aspect-ratio: 1 / 1; 
}

.card-categoria-inmueble:hover {
    background-color: #fafafa; /* Fondo ligeramente gris al pasar el ratón */
    border-color: #c2a878; /* Mantiene el acento dorado */
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* Sombra suave, ideal para modo claro */
}

.icono-categoria-wrapper {
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

.card-categoria-inmueble:hover .icono-categoria-wrapper {
    transform: scale(1.05);
}

.icono-categoria-wrapper img,
.icono-categoria-wrapper svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.nombre-categoria {
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    color: #4a4a4a; /* Gris oscuro para contraste y lectura fácil */
    letter-spacing: 0.5px;
    line-height: 1.2;
    transition: color 0.3s ease;
}

.card-categoria-inmueble:hover .nombre-categoria {
    color: #c2a878; /* Mantiene el dorado en hover */
}

/* Ajuste para móviles */
@media (max-width: 480px) {
    .grid-categorias-inmuebles {
        gap: 10px;
        grid-template-columns: 1fr 1fr;
    }
    .card-categoria-inmueble {
        flex: 1 1 calc(50% - 10px); 
        min-width: 110px;
        aspect-ratio: auto; 
        min-height: 120px;
    }
}

/* =========================================================
   MAPA DE INMUEBLES (Shortcode [render_map])
   ========================================================= */
.property-map-container {
    width: 100%;
    margin-bottom: 25px;
}

.pm-wrapper {
    position: relative;
    width: 100%;
    height: 400px; /* Altura máxima fija solicitada */
    max-height: 400px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f0f0f0; /* Fondo gris neutro durante la carga */
}

.pm-wrapper iframe {
    width: 100%;
    height: 100%;
    display: block;
}

/* Control de altura responsivo para dispositivos móviles */
@media (max-width: 768px) {
    .pm-wrapper {
        height: 300px;
    }
}

/* Pie de mapa con el botón minimalista */
.pm-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.pm-btn-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem; /* Tamaño sutil */
    font-weight: 500;
    color: #64748b; /* Gris pizarra suave */
    text-decoration: none;
    transition: color 0.2s ease;
}

.pm-btn-link:hover {
    color: #0f172a; /* Contraste oscuro al pasar el cursor */
    text-decoration: none;
}

.pm-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
/*********************************************************/
/* MOBILE */
/*********************************************************/
@media only screen and (max-width: 768px) {
    /* SEARCH FORM */
    form.searchandfilter ul{flex-direction: column;}
    li.sf-field-submit{margin-left:0px !important;}
    li.sf-field-submit input[type="submit"]{width:100%;border-radius: 0px;}
    .post-type-archive-inmuebles .box-archives{grid-template-columns: repeat(2, 1fr);}
    /* CUSTOM PAGE INMUEBLE */
    div#gallery-1{display: flex;}
    /* CUSTOM BLOG */
    .list-blog{flex-direction: column;padding-bottom: 10px;}
    .list-blog-img{width:100%;}
    /* FICHA */
    .contenedor-boton-planos{margin-top: 10px;margin-bottom: 0px;}
    .btn-ver-mapa, a.btn-ver-planos{width: 100%;}
    .sf-modern-wrapper{gap:20px;}
}
/*********************************************************/
/* ONLY DESKTOP */
/*********************************************************/
@media only screen and (min-width: 769px) {

}