/* estilos.css */
body, html {
    margin: 0;
    padding: 0;
    background-color: #000;
    color: white;
    font-family: Arial, sans-serif;
}

.header {
    display: flex;
    align-items: center; /* Alinea verticalmente el texto y el ícono */
    padding: 10px 20px; /* Espacio alrededor del contenido en el encabezado */
    background-color: #222; /* Un fondo ligeramente más claro que el cuerpo para el encabezado */
    font-size: 24px; /* Tamaño del texto del encabezado */
    font-weight: bold; /* Texto del encabezado en negrita */
}
.header-container {
    display: flex;
    flex-direction: column; /* Organiza los elementos secundarios en una columna */
    justify-content: center; /* Centra los elementos secundarios verticalmente */
    align-items: center; /* Centra los elementos secundarios horizontalmente */
    background-color: #000; /* Fondo negro para el contenedor */
    padding: 20px 0; /* Espacio superior e inferior para el contenedor */
}
.header-title {
    color: white; /* Color de texto blanco */
    font-size: 24px; /* Tamaño de la fuente */
    font-weight: bold; /* Negrita para el texto */
    margin: 20px 0; /* Margen superior e inferior para el título */
}
.location-filter {
    display: flex;
    justify-content: center; /* Centra los botones horizontalmente */
    flex-wrap: wrap; /* Permite que los botones pasen a la siguiente línea si no hay espacio */
    gap: 10px; /* Espacio entre botones */
}
.header-content {
    text-align: center; /* Asegura que el texto dentro del contenedor también esté centrado */
    padding: 20px; /* Espacio alrededor del contenido */
}
h1 {
    margin: 0; /* Elimina el margen predeterminado del h1 */
    color: white; /* Color de texto blanco */
    font-size: 24px; /* Tamaño de la fuente */
    /* Añade más estilos según sea necesario para ajustar el diseño a tu imagen */
}

.search-box {
    display: flex;
    flex-grow: 1;
    justify-content: center;
}

.search-box input[type="text"] {
    padding: 5px;
    margin: 0 10px;
    border: none;
    border-radius: 15px;
    width: 20%;
}

.search-box button {
    padding: 5px 15px;
    border: none;
    border-radius: 15px;
    background-color: #f60;
    color: white;
    cursor: pointer;
}

.auth-links {
    display: flex;
    align-items: center;
}

.auth-links a {
    background-color: transparent;
    border: 1px solid white;
    border-radius: 15px;
    padding: 5px 15px;
    margin-left: 5px;
}

.auth-links a:hover {
    background-color: white;
    color: black;
}

.location-filter {
    display: flex;
    justify-content: center; /* Centra los botones horizontalmente */
    flex-wrap: wrap; /* Permite que los botones pasen a la siguiente línea si no hay espacio */
    gap: 10px; /* Espacio entre botones */
    padding: 20px; /* Espacio alrededor de los botones */
}

.location-filter button {
    background-color: #f00; /* Color de fondo de los botones */
    color: white; /* Color del texto de los botones */
    border: none; /* Elimina el borde de los botones */
    border-radius: 5px; /* Esquinas redondeadas para los botones */
    padding: 10px 20px; /* Espacio dentro de los botones */
    cursor: pointer; /* Cambia el cursor a mano al pasar sobre los botones */
    font-size: 16px; /* Tamaño del texto */
    font-weight: bold; /* Negrita para el texto */
}

.location-filter button:hover {
    background-color: #c00; /* Color de fondo de los botones al pasar el mouse */
}
.register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #000; /* Ajusta esto según tu diseño */
}

.register-form {
    background-color: #222; /* Fondo del formulario */
    padding: 40px;
    border-radius: 8px; /* Esquinas redondeadas */
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); /* Sombra para efecto 3D */
    width: 300px;
    max-width: 100%; /* Asegura que el formulario no sobrepase el ancho de la pantalla */
}

.register-form h2 {
    text-align: center;
    margin-bottom: 30px; /* Espacio debajo del título */
    color: white;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.register-form input {
    width: 100%; /* Hace que los inputs ocupen el ancho total del formulario */
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #555; /* Borde sutil para los inputs */
}

.register-form button {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: none;
    background-color: #f60; /* Ajusta el color de fondo del botón */
    color: white;
    cursor: pointer;
    margin-top: 10px;
}

.register-form button:hover {
    background-color: #e55; /* Color al pasar el mouse sobre el botón */
}
.form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.form-group {
    margin-bottom: 15px; /* Espacio entre los campos del formulario */
}
.form-group label {
    display: block;
    color: #ccc; /* Color claro para las etiquetas */
    margin-bottom: 5px;
}

.form-group input {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px; /* Espacio debajo de cada input */
    border: 1px solid #555;
    border-radius: 4px; /* Esquinas redondeadas para los inputs */
    background-color: #fff;
    color: #333;
}
.register-button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: #f60; /* Botón de color naranja */
    color: white;
    cursor: pointer;
    font-weight: bold;
    margin-top: 20px; /* Espacio encima del botón */
}

.register-button:hover {
    background-color: #e55; /* Cambia el color al pasar el ratón */
}


/* Estilos base para dispositivos más grandes */
.location-filter button {
    background-color: #f00; /* Color de fondo de los botones */
    color: white; /* Color del texto de los botones */
    border: none; /* Elimina el borde de los botones */
    border-radius: 5px; /* Esquinas redondeadas para los botones */
    padding: auto; /* Espacio dentro de los botones */
    margin: 5px; /* Asegúrate de tener un pequeño margen entre botones */
    font-size: 10px; /* Tamaño del texto */
    font-weight: bold; /* Negrita para el texto */
    /* ... otros estilos ... */
}
.location-buttons {
    background-color: #000; /* Fondo negro para el contenedor */
    color: #fff; /* Texto en blanco */
    padding: 10px; /* Espaciado dentro del contenedor */
    text-align: center; /* Centrar el texto y los botones */
}

.location-buttons span {
    display: block; /* Asegura que el texto esté en su propia línea */
    margin-bottom: 10px; /* Espacio debajo del texto */
    font-size: 1.5em; /* Tamaño del texto */
}

.location-btn {
    background-color: #ff0000; /* Fondo rojo para los botones */
    color: #fff; /* Texto en blanco */
    border: none; /* Sin borde */
    padding: 10px 20px; /* Espaciado dentro de los botones */
    margin: 0 5px; /* Margen entre los botones */
    cursor: pointer; /* Cursor de puntero */
    font-size: 1em; /* Tamaño de texto dentro de los botones */
    border-radius: 5px; /* Bordes redondeados */
}
.botonpublicar {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    height: 60px; /* Ajusta la altura al tamaño de tu barra de navegación */
    /* No es necesario padding-top si estás usando flexbox para centrar */
}
.menupublicarlocation-btn  {
    /* Estilos para tu botón... */
    padding: 10px 20px;
    border: none;
    background-color: red;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    /* Asegúrate de que no haya margen adicional que pueda empujar el botón */
    margin: 0;
}