/*
Theme Name: EcoCubilete
Theme URI: http://www.ecocubilete.net/
Description: Diseño para el sitio web EcoCubilete
Version: 3.4
Author: www.aprendamos.org
Author URI: http://www.aprendamos.org
*/

@charset "utf-8";

a {
color: #57672e;
}

.alignleft {
float: left;
margin-right: 8px;
}

.alignright {
float: right;
margin-left: 8px;
}

.aligncenter {
margin: auto;
}

.text-ecocubilete {
color: #57672e;
}

/* Página de Categorías */
.img-category img {
margin: 8px;
float: left;
width: 80px;
height: auto;
border-color: #000000;
border-style: solid;
border-width: thin;
border-radius: 100px;
}

/* Menú */
.navbar { transition: all 0.4s !important; }

.navbar-brand img,
.custom-logo {
height: 140px !important;
width: auto !important;
object-fit: contain !important;
display: inline-block;
}

/* Estado comprimido al hacer scroll (mantiene proporción) */
.navbar.compressed .navbar-brand img,
.navbar.compressed .custom-logo {
height: 60px !important;
width: auto !important;
}

/* Mantener regla antigua para compatibilidad */
.navbar img { height: 140px; transition: all 0.4s !important; }
.navbar.compressed img { height: 60px; }

/* Buscador del Menú Principal */
.ecocubilete-search input[type="search"] {
width: 110px !important;
transition: all 0.4s !important;
}

.ecocubilete-search input[type="search"]:hover, .ecocubilete-search input[type="search"]:focus, .ecocubilete-search.show input[type="search"] {
width: 200px !important;
transition: all 0.4s !important;
}

/* Layout derecho del navbar: buscador arriba, redes abajo */
.ecocubilete-right {
display: flex;
align-items: center;
gap: 0.5rem;
}

/* por defecto en móviles y pantallas pequeñas se muestran en fila */
.ecocubilete-search-wrapper,
.ecocubilete-socials {
display: flex;
align-items: center;
}

/* Forzar orden: buscador primero, redes después */
.ecocubilete-search-wrapper { order: 0; }
.ecocubilete-socials { order: 1; }

/* evita que el área del menú haga wrap en escritorio */
#main-menu .navbar-nav {
flex-wrap: nowrap;
}

/* ----- En tablets/desktop: apilar buscador (arriba) y redes (abajo) ----- */
/* Usamos punto de quiebre >= 768px (tablet) para evitar el problema que mencionas */
@media (min-width: 176px) {
.ecocubilete-right {
flex-direction: column;/* columna: buscador arriba, redes abajo */
align-items: flex-end; /* alinear todo a la derecha */
gap: 0.25rem;
min-width: 180px;/* reservar un ancho mínimo para que no se corte */
}

/* Asegurar que el buscador use un ancho razonable y no rompa la línea */
.ecocubilete-search .form-control {
width: 160px; /* ajusta si quieres más o menos */
transition: width 0.25s ease;
}

/* si quieres, reducir iconos ligeramente en pantallas intermedias */
.ecocubilete-socials a {
font-size: 1.05rem;
padding: 0.15rem;
}
}

/* En pantallas muy grandes, permitir más espacio al buscador */
@media (min-width: 1200px) {
.ecocubilete-search .form-control {
width: 200px;
}
}

/* Restaurar wrap normal en pantallas pequeñas para que collapse funcione sin problema */
@media (max-width: 576px) {
#main-menu .navbar-nav {
flex-wrap: wrap;
}
.ecocubilete-right {
flex-direction: row;
align-items: center;
margin-left: 0.5rem;
}
.ecocubilete-socials { margin-left: 0.5rem; }
}

/* Asegurar que el buscador compacto no se muestre partido */
.ecocubilete-search input[type="search"] {
min-width: 0; /* evita ancho forzado que provoque wrapping */
}