* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Open Sans', Arial, sans-serif;
  }


h1, h2, h3, h4, h5, h6 {
	color: black;
	font-family: "Oswald", Arial, Sans-serif;
	font-weight: normal;
}






/* --- Header ---*/





/* --- Post --- */
.post {
    width: 100%;
    background: #0f0f38;
    box-shadow: 0px 0px 5px rgba(0,0,0, .5);
    margin-bottom: -100px;
    padding: 0px;
    margin-top: 144px; /* AÃÃ‬šÃ‚¡ÃƒƒÆ’‚±ade este margen superior para mover la caja hacia abajo */
}


.post article .titulo {
	font-family: "Oswald", Arial, Sans-serif;
	font-size: 28px;
	font-weight: normal;
	line-height: 28px;
	margin-bottom: -48px;
}

.post article .titulo a {
	color: #00d0ff;
}

.post article .fecha {
	color:#747474;
	font-size: 14px;
	margin-bottom: 20px;
}





.post article .thumb {
	position: relative;
	margin-bottom: 20px;
}

.post article .thumb img {
    width: 100%;
    height: auto;
    display: block; /* Asegura que la imagen no tenga espacio extra debajo */
}





.post article .extracto {
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 20px;
}

.post article .continuar {
	color:#BB1F35;
	font-weight: bold;
}

.btn {
	padding: 15px;
	display: inline-block;
	margin: 15px 0;
	background: #595959;
	color:#fff;
	font-size: 1em;
	font-family: Arial, sans-serif, helvetica;
	border-radius: 2px;
	border:none;
}

.btn:hover {
	text-decoration: none;
	background: #BB1F35;
}



/* --- Paginacion --- */

.paginacion {
    margin-top: 93px; /* Agrega margen en la parte superior para bajar la paginaciÃÃâ€Ãâ€ŬšÂ¬Ã…¡Ã‚¬Ã…¡Ãƒâ€šÃ‚³n */
    margin-bottom: 30px;
}

.paginacion ul {
    list-style: none;
    text-align: center;
    margin-top: 123px; /* Ajusta este valor según sea necesario */
}


.paginacion ul li {
    display: inline-block;
    margin: 0 5px;
    color: #fff;
}

.paginacion ul li a {
    display: block;
    padding: 10px 20px;
    background: #595959;
    color: #fff;
}

.paginacion ul li a:hover {
    background: #BB1F35;
    text-decoration: none;
}

.paginacion ul .active {
    background: #BB1F35;
    padding: 10px 20px;
}

.paginacion ul .disabled {
    background: #a8a8a8;
    padding: 10px 20px;
    cursor: not-allowed;
}

.paginacion ul .disabled:hover {
    background: #a8a8a8;
}


/* --- Formularios --- */
.formulario {
	width: 100%;
	overflow: hidden;
}

.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="password"],
.formulario textarea {
	border: 1px solid #A8A8A8;
	border-radius: 2px;
	padding: 16px;
	width: 100%;
	display: block;
	margin-bottom: 40px;
	font-family: Arial, sans-serif, helvetica;
	font-size: 1em;
	color: #141938;
}

.formulario input[type="text"]:focus,
.formulario input[type="email"]:focus,
.formulario input[type="password"]:focus,
.formulario textarea:focus {
	border: 2px solid #595959;
	padding: 15px;
}

.formulario textarea {
	max-width: 100%;
	min-width: 100%;
	min-height: 300px;
}

.formulario input[type="submit"] {
	padding: 15px;
	background: #595959;
	color: #fff;
	font-size: 1em;
	font-family: Arial, sans-serif, helvetica;
	border-radius: 2px;
	border: none;
	cursor: pointer;
    /* Evita flotar a la derecha para asegurar la responsividad */
	width: 100%; /* Hacer que el botón se expanda al ancho completo en dispositivos móviles */
	margin-top: 10px; /* Añadir un poco de margen superior */
}

.formulario input[type="submit"]:hover {
	background: #BB1F35;
}

/* Media queries para ajustar el formulario en diferentes anchos de pantalla */

/* Estilos para pantallas muy pequeñas */
@media (max-width: 360px) {
	.formulario {
		margin-top: 20px; /* Valor positivo para empujar hacia abajo */
	}
}

/* Estilos para pantallas medianas */
@media (min-width: 361px) and (max-width: 768px) {
	.formulario {
		margin-top: 50px; /* Ajusta según sea necesario */
	}
}

/* Estilos para pantallas grandes */
@media (min-width: 769px) {
	.formulario {
		margin-top: 80px; /* Ajusta según sea necesario */
	}
}

/* --- Footer --- */


footer {
	background: #000;
}

footer .copyright {
	text-align: center;
	padding: 15px 0;
	color: #fff;
	margin-top: 104px; /* Empuja el footer hacia abajo */
}
.content {
  padding-bottom: 50px; /* Ajusta según sea necesario */
}





/* usuarios conectados */
/* USERS ON/OFF Section */
.usuarios-onoff {
  margin-top: 20px;
  text-align: center;
}

.usuarios-title {
  font-size: 1.2em;
  font-weight: bold;
  color: #fff;
  margin-bottom: 15px;
}

.usuarios-conectados,
.usuarios-desconectados {
  margin-bottom: 20px;
}

.usuarios-conectados .toggle-button,
.usuarios-desconectados .toggle-button {
  width: 90%;
  padding: 8px;
  border: none;
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
  margin: 0 auto 10px;
}

.usuarios-conectados .toggle-button {
  background-color: #28a745; /* Verde */
  color: #fff;
}

.usuarios-desconectados .toggle-button {
  background-color: #dc3545; /* Rojo */
  color: #fff;
}

#lista-usuarios,
#lista-usuarios-desconectados {
  background-color: #f9f9f9;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  max-height: 150px;
  overflow-y: auto;
  text-align: left;
}

#lista-usuarios .usuario,
#lista-usuarios-desconectados .usuario {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

.green-dot {
  background-color: #28a745; /* Verde */
}

.red-dot {
  background-color: #dc3545; /* Rojo */
}

.usuario-link {
  text-decoration: none;
  color: #333;
}

.usuario-link:hover {
  text-decoration: underline;
}

/* Adjusted positioning for USERS ON/OFF in sidebar */
.sidebar .usuarios-onoff {
  top: 41em;
  position: absolute;
  bottom: 10%;
  width: 100%;
}



/* Reducir el margen en la clase .unlocknowtitle */
.unlocknowtitle {
    margin-top: -19em; /* Ajusta este valor para reducir el espacio */
    font-size: 24px; /* Ejemplo: Reducir el tamaño de la fuente si es necesario */
    text-align: center; /* Centrar el título si es necesario */
    padding: 10px 0; /* Añadir relleno para mantener algo de espacio con elementos arriba */
    color: gold; /* Ejemplo: Cambiar color para visibilidad */
}


/* Asegurar que no haya márgenes o rellenos heredados de estilos globales */
* {
    margin: 0;
    padding: 0;
}

/* Estilos base */
.copyright {
    position: relative;
    right: -7em;
    font-size: 18px;
    color: #ffffff;
    text-align: center;
    margin-top: 221px;
    padding: 10px;
    background-color: #000000;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Pantallas muy pequeñas (320px a 479px) */
@media (max-width: 479px) {
    .copyright {
        right: 0;
        font-size: 12px; /* Reduce el tamaño de fuente */
        margin-top: 224px; /* Reduce el margen superior */
        padding: 8px; /* Reduce el padding */
        border-radius: 3px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Reduce la sombra */
    }
}

/* Pantallas pequeñas (480px a 767px) */
@media (min-width: 480px) and (max-width: 767px) {
    .copyright {
        right: 0;
        font-size: 14px;
        margin-top: 225px;
        padding: 9px;
        border-radius: 4px;
        box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
    }
}

/* Pantallas medianas (768px a 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .copyright {
        right: -3em;
        font-size: 16px;
        margin-top: 225px;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    }
}

/* Pantallas grandes (1024px a 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
    .copyright {
        right: -5em;
        font-size: 17px;
        margin-top: 225px;
        padding: 12px;
        border-radius: 6px;
        box-shadow: 0 0 9px rgba(0, 0, 0, 0.4);
    }
}

/* Pantallas muy grandes (1200px a 1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
    .copyright {
        right: -6em;
        font-size: 18px;
        margin-top: 226px;
        padding: 14px;
        border-radius: 7px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
}

/* Pantallas extra grandes (1600px a 1999px) */
@media (min-width: 1600px) and (max-width: 1999px) {
    .copyright {
        right: -7em;
        font-size: 20px;
        margin-top: 220px;
        padding: 16px;
        border-radius: 8px;
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
    }
}

/* Pantallas ultra grandes (2000px a 2999px) */
@media (min-width: 2000px) and (max-width: 2999px) {
    .copyright {
        right: -8em;
        font-size: 22px;
        margin-top: 240px;
        padding: 18px;
        border-radius: 10px;
        box-shadow: 0 0 14px rgba(0, 0, 0, 0.5);
    }
}

/* Pantallas extremadamente grandes (3000px y más) */
@media (min-width: 3000px) {
    .copyright {
        right: -10em;
        font-size: 24px;
        margin-top: 260px;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 0 16px rgba(0, 0, 0, 0.6);
    }
}
    
        
        /* estilos.css */
.sidebar {
  width: 250px;
  height: 100vh;
  background-color: #fff;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  position: fixed;
}

.profile-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.profile-pic {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.username {
  color: #00ff1d;
}

.menu-list {
  list-style: none;
  width: 100%;
  padding: 0;
}

.menu-list li {
  width: 100%;
  margin-bottom: 10px;
}



.menu-list li a:hover {
  background: #f0f0f0;
}

.menu-list li a i {
  margin-right: 10px;
}

.new-post-btn {
  width: 80%;
  padding: 10px 0;
  margin-top: auto;
  background: #00BFFF;
  color: #fff;
  border: none;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  transition: background 0.3s;
}

.new-post-btn:hover {
  background: #0099cc;
}