@charset "utf-8";

html,
body,
.container,
.container-fluid{
    min-width:360px; }

/* =====================================================
   CVALL – ESTILOS GENERALES LIMPIOS Y ESTABLES
   Navbar unificado / Sin duplicaciones / Responsive OK
===================================================== */

#colorfondo { background-color: #f7f2f2; padding: 20px 10px; }

.modal-content { background-color: #85c7e7 !important; }


body { background-color: #e5e5e5; }

/* =====================================================
   NAVBAR – SISTEMA UNIFICADO
===================================================== */

/* ===============================
   PAGINAS INTERNAS
   Usan container-fluid normal
=============================== */
body:not(.tpl-home) #header-nav > .container-fluid {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
}

/* ======================================
   NAVBAR HOME – CONTAINER CONTROLADO
====================================== */

.tpl-home #header-nav > #home {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Aire extra en desktop grande */
@media (min-width: 1200px) {
    .tpl-home #header-nav > #home {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .tpl-home #header-nav > #home {
        padding-left: 15px;
        padding-right: 15px;
    }
}


/* ---------- Wrapper interno único ---------- */
/* Usamos .container-home como contenedor lógico */

#header-nav .container-home {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    max-width: 1280px !important ; /* cvall */

    margin-left: auto;
    margin-right: auto;

    padding-left: 20px;
    padding-right: 20px;

    box-sizing: border-box;
}

/* Mantiene tamaño natural de los hijos */
#header-nav .container-home > * {
    flex: 0 0 auto;
}

/* ---------- HOME ---------- */
.tpl-home #header-nav {
    background: #312b2b !important; }

.text-dark {
	color: #fff !important; }

a.text-white:hover, 
a.text-dark:hover {
	color: #e537d2 !important; }


.btn-outline-light {
	background-color: #353379 !important;
	border: 2px solid #fff !important;}

.navbar-user-btn{
    background:#4457d8 !important;
    color:#fff !important;
    border:2px solid #fff !important;
    border-radius:12px;
    padding:10px 18px;
    font-weight:600;
}

.navbar-user-btn:hover{
    background:#3046c8 !important;
    color:#fff !important;
    border-color:#fff !important;
}

.navbar-user-btn i{
    color:#fff !important;
}


/* HOME un poco más aire en pantallas grandes */
@media (min-width: 1200px) {
    .tpl-home #header-nav .container-home {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 576px) {
    #header-nav .container-home {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Separación visual del menú */
.navbar-nav {
    gap: 12px;
}

/* =====================================================
   NAVBAR – COLORES / SCROLL
===================================================== */

body.tpl-listing  #header-nav,
body.tpl-categories  #header-nav, 
body.tpl-results #header-nav {
    background: #312b2b !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

body.tpl-listing #header-nav.scrolled,
body.tpl-categories #header-nav.scrolled,
body.tpl-results #header-nav.scrolled {
    background-color: #312b2b !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

body.tpl-listings #header-nav {
    background: #e5e5e5 !important;
}

body.tpl-listings #header-nav.scrolled {
    background-color: #e5e5e5 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

/* =====================================================
   DUMMY NAVBAR SPACER
===================================================== */

#header-nav-dummy {
    height: 90px; }

@media (max-width: 768px) {
    #header-nav-dummy { 
		height: 70px; }
}

#business-header { 
	margin-top: 15px !important; }

/* =====================================================
   MENSAJE SIN RESULTADOS – PEGADO AL HERO
===================================================== */

.no-results-wrapper {
    background: #fff3cd;
    padding: 40px 20px 50px;
    margin-top: 0;
}

.no-results-wrapper .alert {
    max-width: 1280px;
    margin: 0 auto;
    background: transparent;
    border: none;
}

.no-results-wrapper .alert h4 {
    margin-top: 0;
}

body.tpl-results .jumbotron {
    margin-bottom: 0;
}

/* =====================================================
   TARJETAS / LISTADOS
===================================================== */

.card { 
    border: 1px solid #b4b4b4 !important;
}

.card:hover, 
.list-item:hover { 
    filter: grayscale(80%); 
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}

.full { width:100%; }

.list-item:hover { 
    background: #e2faff; 
}

/* =====================================================
   SPLIDE
===================================================== */

.splide svg { 
    fill: #fff; 
    background-color: #000; 
    padding: 5px; 
    border-radius: 3px; 
}

.card-img-overlay { 
    position: inherit !important; 
    padding: 0.625rem !important; 
    background-color: #30c2ca; 
}

.card-img-overlay h5 { 
    font-size: 14px !important; 
}

.card-title { 
    margin-bottom: 0 !important; 
}

.cat-name-figure { 
    position: inherit !important; 
    color:#000 !important; 
	background-color: #7ae16b !important;
}

.listado { 
    background-color: #0003; 
    position: inherit !important; 
    display: inline-block; 
    width:100%; 
}

#featured-listings h1 { 
    font-size:1rem !important; 
}

#direccion { 
    margin:0 !important; 
}

#direccion p { 
    line-height: 0.625rem !important; 
    margin-bottom:5px !important; 
}

#desc p { 
    line-height: 0.8125rem !important; 
}

#espacio { 
    padding: 1px 0.75rem !important; 
}

.center { 
    text-align:center !important;
}


@media only screen and (max-width:540px) {
    .navbar { 
        padding: .5rem !important; 
    }

    .navbar-brand { 
        margin-right: 1px !important; 
    }

    .navbar-toggler { 
        padding: 2px !important; 
    }

    .lead { 
        font-size: 1rem !important; 
        font-weight: 300; 
    }

    .h1, h1 { 
        font-size: 20px !important; 
    }

    .h2, h2 { 
        font-size: 16px !important; 
    }

    .form-control-lg { 
        padding: .5rem 1rem; 
    }
}

/* =====================================================
   FORMULARIOS
===================================================== */

.form-control::placeholder { 
    opacity: 0.50 !important; 
    color: #000 !important; 
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media only screen and (max-width:767px) {
    .container { 
        max-width: 700px !important; 
    }

    .tpl-home .jumbotron { 
        padding:10px 0 !important; 
    }
}

/* =====================================================
   MAPA MÁS ANCHO
===================================================== */

@media (min-width: 992px) {
    #map-col {
        width: 58% !important;
        right: 0;
        left: auto;
        max-width: none !important;
    }

    #content > .col-lg-5 {
        width: 42% !important;
        max-width: none !important;
    }
}


/* =====================================================
   LAYOUT ANCHO EXTENDIDO – SOLO CONTENIDO
   No afecta navbar / header / home
===================================================== */

@media (min-width: 1200px) {

    /* Páginas internas (NO HOME) */
    body:not(.tpl-home) .container,
    body:not(.tpl-home) .container-fluid {

        max-width: 1600px;     /* puedes subir a 1700px si quieres */
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 30px;
        padding-right: 30px;
    }

    /* Resultados / listados más aire */
    body.tpl-results #public-listings,
    body.tpl-listings #public-listings {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Fichas (galería + mapa) */
    body.tpl-listing #content {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }

}

/* Mobile y tablets no se tocan */


/* ======================================
   CONTAINER ANCHO GENERAL (LAYOUT)
====================================== */

:root {
    --layout-max-width: 1600px;
    --layout-padding: 30px;
}

/* Contenedor ancho base */
.layout-wide {
    max-width: var(--layout-max-width);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--layout-padding);
    padding-right: var(--layout-padding);
}

/* HOME – ampliar solo bloque categorías */
body.tpl-home .container.my-5,
body.tpl-home .container.mb-5 {
    max-width: var(--layout-max-width);
    padding-left: var(--layout-padding);
    padding-right: var(--layout-padding);
}


/* LISTINGS – ampliar panel de resultados */
body.tpl-listings .scrollable-content,
body.tpl-listings .container-fluid {
    max-width: var(--layout-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--layout-padding);
    padding-right: var(--layout-padding);
}


/* RESULTS – layout ancho */
body.tpl-results .container,
body.tpl-results .container-fluid {
    max-width: var(--layout-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--layout-padding);
    padding-right: var(--layout-padding);
}


/* FICHA – layout ancho */
body.tpl-listing .container,
body.tpl-listing .container-fluid {
    max-width: var(--layout-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--layout-padding);
    padding-right: var(--layout-padding);
}

@media (max-width: 768px) {
    :root {
        --layout-padding: 15px;
    }
}

/* CVALL – Centrar imágenes Splide */
#primary-slider .splide__slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    overflow: hidden;
}

#primary-slider .splide__slide img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 700px;
    object-fit: contain !important;
    margin: 0 auto;
    display: block;
}


/* CVALL – Mejora visual ficha anuncio */

.place-main-wrapper,
.listing-main,
.listing-detail,
.card,
.item {
	border-radius: 14px;
}

.container {
	max-width: 1180px;
}

.listing-title,
.place-title,
h1 {
	font-size: 32px;
	font-weight: 800;
	margin-bottom: 10px;
	color: #1f2937;
}

.listing-desc,
.place-description,
.description {
	background: #ffffff;
	border-radius: 14px;
	padding: 24px;
	box-shadow: 0 4px 18px rgba(0,0,0,.06);
	line-height: 1.7;
	font-size: 16px;
}

.sidebar,
.listing-sidebar {
	background: #ffffff; border-radius: 14px; padding: 18px; box-shadow: 0 4px 18px rgba(0,0,0,.07); }

.btn-primary,
.btn-contact,
a.btn {
	border-radius: 10px; font-weight: 700; padding: 11px 18px; }

.gallery,
.place-gallery,
.listing-gallery {
	border-radius: 16px; overflow: hidden; margin-bottom: 24px; }

.gallery img,
.place-gallery img,
.listing-gallery img {
	border-radius: 12px; object-fit: cover; }

.badge,
.category-badge {
	border-radius: 999px; padding: 7px 12px; font-size: 13px; }

@media (max-width: 768px) {
	h1,
	.listing-title,
	.place-title {
		font-size: 25px; }

	.listing-desc,
	.place-description,
	.description {
		padding: 18px; }

	.sidebar,
	.listing-sidebar {
		margin-top: 18px; }
}

.card-header {
  padding: .75rem 1.25rem;
  margin-bottom: 0;
  background-color: #312b2b !important;
  border-bottom: 1px solid #dee3e5;
}


.form-row > .col, .form-row > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

/* ===== Buscador Home ===== */
@media (max-width: 767px){

   .jumbotron .container{
        width:100%;
        max-width:100%;
        padding:0 15px;
    }

    .jumbotron form{
        width:100%;
    }

    .jumbotron .input-group{
        margin-right:0 !important;
        width:100%;
    }

    .jumbotron .btn-primary{
        width:100%;
    }
}