html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 310px;
  background-color:#FAFAFA;
}
.navbar-gradiente {
    background: linear-gradient(to right, #0d6efd, #6c8ea4);
}

footer {
    height: 310px;
    background: linear-gradient(to right, #0d6efd, #6c8ea4);
    display: flex;
    align-items: center;
    justify-content: center; /* centra horizontalmente el contenido */
    position: relative; /* mantiene el footer dentro del flujo normal */
}

footer .container {
    color: #fff;
}

footer img {
    max-width: 100%; /* nunca excede el ancho del contenedor */
    height: auto; /* mantiene la proporción original */
    display: block; /* elimina espacios extra alrededor de la imagen */
    margin: 0 auto; /* opcional: centra la imagen dentro del div */
}




/* Estilos personalizados para el botón + */ 
.btn-icon-add-photo {
    width: 50px; /* ancho fijo */
    height: 50px; /* alto fijo (igual al ancho → círculo perfecto) */
    font-weight: bold; /* negrita */
    font-size: 1.5rem; /* tamaño del ícono */
    padding: 0; /* quitar padding extra */
}

.btn-icon-delete-photo {
    width: 40px; /* ancho fijo */
    height: 40px; /* alto fijo → círculo perfecto */
    padding: 0; /* quitar padding extra */
    border-radius: 50%; /* círculo */
    font-size: 1.2rem; /* tamaño del ícono */
}

.formularios {
    background-color: #7193B3;
    padding: 20px;
    border-radius: 8px;
}

.image-container {
    width: 140px;
    height: 140px;
    overflow: hidden; /* oculta lo que se pasa del cuadro */
    margin: 10px auto 0 auto; /* centra la imagen dentro de la tarjeta */
}

 .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* escala proporcional y recorta el exceso */
 }

.camposNoPublicos {
    border: solid #D4A017 1px;
    background-color: #D4A017;
    border-radius: 8px;
    margin-bottom: 12px
}

.cargaImagenes {
    border:solid 2px white; 
    border-radius: 8px; 
    margin-bottom:12px
}

.textOfPublicTitles {
    font-size: 0.75rem; /* más pequeño que fs-6 (≈0.875rem) */
}
.col-md-4 a.textOfLinks {
    font-size: 0.75rem; /* más pequeño que fs-6 (≈0.875rem) */
    color: white;
    text-decoration: none;
    margin-left: 40px;
}



/* thumbnail-row y thumbnail son clases utilizadas para la fila de miniaturas*/
.thumbnail-row {
    border: none;
    display: flex; /* Coloca las miniaturas en fila */
    flex-wrap: nowrap; /* Evita que se vayan a otra línea */
    overflow-x: auto; /* Activa scroll horizontal si no entran */
    overflow-y: hidden; /* Oculta scroll vertical */
    height: 50px; /* Alto fijo */
    padding-bottom: 30px; /* ajusta según el grosor del scroll */
    box-sizing: content-box;
}
.thumbnail {
    width: 50px;
    height: 50px;
    object-fit: contain; /* Ajusta proporcionalmente dentro del cuadro */
    flex: 0 0 auto; /* Evita que se encojan */
}









#imagenPrincipal {
    width: 100%; /* ocupa todo el ancho del div */
    height: 100%; /* ocupa todo el alto del div */
    object-fit: cover; /* mantiene proporción y entra completa */
    object-position: center;
}


.col-12.text-center {
    height: 550px; /* alto fijo del contenedor */
    display: flex; /* centra la imagen */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* evita que la imagen se salga */
}






/*Esta parte es el formato de los datos de la publicación como modelo, marca, puertas, metros cuadrados, etc.*/
.item-producto {
    border-bottom: solid #DFDFDF 1px;
    display: flex; /* coloca label y valor en la misma línea */
    justify-content: space-between; /* separa label a la izquierda y valor a la derecha */
    align-items: center;
    margin-bottom: 5px; /* espacio entre filas */
    height: 40px;
    font-size:large;
}

.label {
    
}
.labelPrincipal {
    font-weight: bold;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: x-large;
}

.valor {
    font-weight: bold;
    text-align: right; /* asegura que el texto se alinee a la derecha */
}


/* Cuadro gris con borde redondeado y fondo blanco*/
.cuadroGeneral {
    border: 2px solid #d3d3d3; /* gris claro */
    border-radius: 8px; /* bordes redondeados */
    background-color: #ffffff; /* fondo blanco */
    padding: 16px; /* espacio interno opcional */
}
.cuadroGeneral i {
        font-size: 1rem; /* agranda el ícono */
    }



.categoria {
    border: 1px solid #0d6efd; /* azul */
    border-radius: 50px; /* radio grande → bordes semicirculares */
    color: #0d6efd; /* texto e ícono en azul */
    padding: 4px 12px; /* menos espacio arriba/abajo, normal a los lados */
    display: inline-flex; /* ícono y texto en línea */
    align-items: center; /* centrado vertical */
    gap: 8px; /* espacio entre ícono y texto */
    font-weight: bold;
}

.informacionDelVendedor {
    border-top: solid #DFDFDF 3px;
    margin-top:20px;
    padding-top: 20px;
    
}

.ImagenDelComercio {
    max-width:100px; 
    height:100px; 
    object-fit:cover; 
    border:2px solid black;
}


.barraDeBotones {
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 5px;
    background-color: #d3d3d3
}

.barraDeBotonesSinFondo {
    padding-top: 5px;
    padding-bottom: 0px;
    margin-bottom: 0px;
 }

.perfil-negocio {
    text-align: center;
}

.perfil-negocio img {
    display: block;
    margin: 0 auto;
}

.perfil-negocio iframe {
    width: 100%;
    height: 450px;
    border: 0;
}

#bannerCarousel img {
    max-height: 350px; /* ajusta según tu diseño */
    object-fit: cover; /* recorta la imagen para que se vea bien */
}

.carousel-caption h5 {
    font-size: 2rem;
    color: white;
    font-weight: bold;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.banner-img {
    transform: scale(1.1); /* arranca un poco más grande */
    transition: transform 1s ease; /* animación suave */
}

.carousel-inner {
    padding: 0 5px;
}
.carousel-item img {
    width: 100%;
    height: auto;
    display: block;
}

.carousel-item.active .banner-img {
    transform: scale(1); /* se hace más chica al mostrarse */
}

.carousel-item {
    border-radius: 10px; /* el radio que quieras */
    overflow: hidden; /* recorta la imagen dentro del div */
}


.table td.actions {
    white-space: nowrap; /* evita que el contenido se corte en varias líneas */
    width: 1%; /* fuerza a que la columna se ajuste al contenido */
}

.separacion-top {
    margin-top:10px;
}