/*
Theme Name: Worthy - Free Powerful Theme by HtmlCoder
Author:HtmlCoder
Author URI:http://www.htmlcoder.me
Version:1.0.0
Created:November 2014
License: Creative Commons Attribution 3.0 License (https://creativecommons.org/licenses/by/3.0/)
File Description: Place here your custom CSS styles
*/

/* ================================================== */
/*          STICKY HEADER & BARS                    */
/* ================================================== */

/* --- Estado Inicial de la barra de navegación --- */
#main-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.4s ease-in-out;
    padding-top: 10px;
    padding-bottom: 10px;
    border: none;
}

#main-nav #logo1,
#main-nav .header-banner {
    transition: all 0.4s ease-in-out;
}

#main-content-wrapper {
    padding-top: 210px;
}

/* --- Estado "Scrolled" (Al bajar) --- */
#main-nav.navbar-scrolled {
    position: fixed;
    padding-top: 0;
    padding-bottom: 0;
    background-color: #222222;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

#main-nav.navbar-scrolled .header-banner {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

#main-nav.navbar-scrolled #logo1 {
    height: 60px !important;
}

#main-nav.navbar-scrolled .navbar-collapse {
    padding-top: 5px;
}


/* ================================================== */
/*          ESTILOS PARA CABECERA MÓVIL (SOLUCIÓN)    */
/* ================================================== */

@media (max-width: 767px) {
    /* Convierte el header en un contenedor Flexbox */
    .navbar-header {
        display: flex;
        justify-content: space-between; /* Empuja el logo a la izquierda y el resto a la derecha */
        /*align-items: center; Centra todo verticalmente */
        width: 100%;
        /* ANULAMOS el padding por defecto para que los elementos puedan ir a los bordes */
        padding-left: 0;
        padding-right: 0;
    }

    /* Devolvemos el padding al logo para que no se pegue al borde izquierdo */
    .navbar-brand {
        padding-left: 15px;
    }

    /* Contenedor para los elementos de la derecha (hora y botón) */
    .navbar-header-right {
        display: flex;
        align-items: center;
        /* Añadimos padding a la derecha para que el botón no se pegue al borde */
        padding-right: 15px;
    }

    /* Estilos para la hora en móvil */
    .mobile-datetime {
        color: #9d9d9d;
        margin-right: 15px;
        text-align: right;
        font-size: 12px;
        line-height: 1.3;
    }

    .mobile-datetime span {
        display: block;
    }

    /* Anula los estilos por defecto del botón para que funcione bien con Flexbox */
    .navbar-toggle {
        float: none;
        margin-right: 0;
    }
	
	/* Controla la visibilidad de las versiones de la hora */
	.desktop-datetime {
		display: none;
	}
	.mobile-datetime {
		display: block;
	}
}

@media (min-width: 768px) {
	/* En desktop, invierte la visibilidad */
	.desktop-datetime {
		display: block;
	}
	.mobile-datetime {
		display: none;
	}
}


/* ========================================================== */
/*  ESTILOS RESPONSIVOS PARA IMÁGENES EN MODALES (NOTICIAS)  */
/* ========================================================== */

.modal-body .modal-image {
    display: block;
    float: none !important;
    max-width: 100%;
    margin: 0 auto 20px auto;
}

.modal-body .clear-float {
    display: none;
}

@media (min-width: 768px) {
    .modal-body .clear-float {
        display: block;
        clear: both;
    }
    .modal-body .modal-image.float-left-md {
        float: left !important;
        max-width: 45%;
        margin: 0 20px 10px 0;
    }
    .modal-body .modal-image.float-right-md {
        float: right !important;
        max-width: 45%;
        margin: 0 0 10px 20px;
    }
}