@charset "UTF-8";

/* ----------------------------------------------
   Estilos generales antiguos
---------------------------------------------- */

<!-- Estilos generales -->
        #logogoogle {
            right: 15px;
            position: absolute;
            top: 20%;
            margin-top: -5px;
            width:470px;
            height: 59px;
            display:block;
        }

        @media (max-width: 700px) {
            #logogoogle {
                display:none;
            }
        }

        .alignleft {
            margin-top: 5px;
            float: left;
        }

        .alignright {
            margin-top: 5px;
            float: right;
            vertical-align: middle;
        }

        .vcenter {
            float: none;
            display: table-cell;
            vertical-align: middle;
        }

        #search-box .gsc-control-cse {
            border-color: transparent;
            background-color: transparent;
        }

        #search-box .button.gsc-search-button {
            padding: 6px !important;
            background-color: #666 !important;
            border-radius: 3px !important;
        }

        #search-box .gsc-search-button-v2 {
            font-size: 0;
            padding: 6px 27px;
            width: auto;
            vertical-align: middle;
        }

        #bootstrap-container hr {
            margin-top: 3px;
            margin-bottom: 3px;
            border: 0;
            border-top: 1px solid #ddd;
        }

        .separacion {
            margin-bottom: 3px;
            padding:5px;
            border-left: 1px solid #FFFFFF;
            border-bottom: 2px solid #ddd;
        }


/* ----------------------------------------------
   Estilos generales para dark mode
---------------------------------------------- */

.new-bootstrap {
  transition: background-color 0.3s ease;
}

/* Estilos adicionales para dark mode */
.new-bootstrap[data-bs-theme="dark"] {
  --bs-body-bg: #212529;
  --bs-body-color: #f8f9fa;

  /* Colores para cards en dark mode */
  --bs-primary: #6ea8fe;
  --bs-secondary: #a7acb1;
  --bs-border-color: #495057;

  /* Fondo para cards */
  --bs-card-bg: #2c3034;
}

.new-bootstrap[data-bs-theme="dark"] .card {
  background-color: var(--bs-card-bg);
  border-color: var(--bs-border-color);
}

/* Estilo para el interruptor en dark mode */
.new-bootstrap[data-bs-theme="dark"] .form-switch .form-check-input {
  background-color: var(--bs-secondary);
}


/* ----------------------------------------------
   Estilos personalizados para el buscador
---------------------------------------------- */

// Search cabecera
/* Estilos base */
.mendiak-search {
margin: 0px 0;
max-width: 600px;
background-color: transparent !important;
}



/* Contenedor de Google con padding cero y fondo transparente */
#___gcse_0 {padding: 0px 0px !important;
margin: 0 !important;
} 
.mendiak-search .gsc-control-cse, .gsc-control-cse-es {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Estado normal del input */
.mendiak-search input.gsc-input,
.mendiak-search .gsc-input-box,
.mendiak-search .gsc-input {
background-color: transparent !important;
color: white !important;
border: 0px solid rgba(255, 255, 255, 0.3) !important;
font-family: inherit !important;
font-size: 14px !important;
padding: 0px 0px !important;
border-radius: 4px !important;
transition: all 0.3s ease !important; /* Transición suave */
}

.mendiak-search input.gsc-input {
background-color: rgba(255, 255, 255, 0.3) !important;
color: white !important;
border: 1px solid rgba(255, 255, 255, 0.5) !important;
font-family: inherit !important;
font-size: 14px !important;
padding: 0px 0px !important;
border-radius: 4px !important;
transition: all 0.3s ease !important;
}

/* Estado cuando el input está enfocado (seleccionado) */
.mendiak-search input.gsc-input:focus,
.mendiak-search .gsc-input-box:focus,
.mendiak-search .gsc-input:focus {
background-color: rgba(255, 255, 255, 0.1) !important;
outline: none !important;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Placeholder */
.mendiak-search input::placeholder {
color: rgba(255, 255, 255, 0.7) !important;
}

/* Icono de búsqueda */
.mendiak-search .gsst_a .gscb_a {
color: white !important;
}

/* Botón de búsqueda */
.mendiak-search .gsc-search-button {
background-color: transparent !important;
border: none !important;
}

/* Sugerencias de autocompletado */
.mendiak-search .gssb_c {
background-color: rgba(0, 0, 0, 0.8) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.mendiak-search .gssb_a {
color: white !important;
}

.mendiak-search .gssb_a:hover {
background-color: rgba(255, 255, 255, 0.1) !important;
}

.mendiak-search input.gsc-input {
    background-color: rgba(0, 0, 0, 0.3) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4) !important;
    font-size: 14px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
}

.mendiak-search input.gsc-input:hover,
.mendiak-search input.gsc-input:focus {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-color: white !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
}

.mendiak-search input::placeholder {
    color: rgba(255, 255, 255, 0.8) !important;
    font-style: italic;
}



/* Responsive */
@media (max-width: 768px) {
.mendiak-search {
width: 100% !important;
}
}


/* ----------------------------------------------
   Cabecera y Logo
---------------------------------------------- */

/* Estilos personalizados para la cabecera */
.headerbar {
    background-color: transparent;
    background-image: url(https://www.mendiak.net/images/mountains5.jpg);
    background-repeat: repeat-x;
        background-attachment: scroll;
        background-position: -10px -170px;
    background-color: transparent;
     /* Propiedades adicionales recomendadas */
        background-size: auto; /* O 'cover' si prefieres que cubra todo el espacio */
        position: relative; /* Para manejar mejor los elementos hijos */
    overflow: hidden; /* Para contener el border-radius correctamente */
    
    // background-size: cover;
    // background-position: center;
    // background-repeat: no-repeat;
    min-height: 70px;
    border-radius: 5px;
}

/* Logo responsive */
.logo img {
    max-height: 60px;
    width: auto;
    transition: all 0.3s ease;
}

/* Buscador responsive */
.mendiak-search {
    padding: 5px 0;
}

/* Ajustes para móviles */
@media (max-width: 991.98px) {
    .headerbar {
        min-height: auto;
        padding: 10px 0;
    }

    .logo img {
        max-height: 50px;
        display: block;
        margin: 0 auto;
    }

    .mendiak-search {
        padding: 10px 0;
    }

    #banner-space {
        display: none; /* Ocultamos el banner en móviles para ahorrar espacio */
    }
}

@media (max-width: 767.98px) {
    .logo img {
        max-height: 40px;
    }

    .mendiak-search {
        padding: 5px 15px;
    }
}