/* Estilos generales */
/* Estilos generales */
body {
    font-family: Arial, sans-serif;
    background: linear-gradient(to bottom, #000000, #333333); /* Gradiente de negro a gris oscuro */
    color: #fff; /* Blanco */
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Estilos para encabezados */
h1, h2, h3 {
    color: #ffc107; /* Amarillo */
    text-align: center;
}

/* Estilos para formularios */
form {
    max-width: 400px;
    margin: 0 auto;
}

label {
    display: block;
    margin-bottom: 5px;
    color: #fff; /* Blanco */
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff; /* Blanco */
    color: #000; /* Negro */
}

input[type="submit"] {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #ffc107; /* Amarillo */
    color: #000; /* Negro */
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #ffca28; /* Amarillo más claro al pasar el mouse */
}

img[name="fotoinicio"] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 100px; /* Tamaño más pequeño */
    z-index: 9999; /* Para asegurarse de que esté por encima de otros elementos */
}

.sesion {
    height: 100vh; /* 100% del viewport */
    background: linear-gradient(to bottom, #000000, #333333); /* Gradiente de negro a gris */
}

.panel {
    width: fit-content; /* Ancho ajustado al contenido */
    padding: 5px;
    border-radius: 10px;
    border: 2px solid #ffc107; /* Borde de 2 píxeles de ancho, sólido y de color negro */
    margin-left: auto;
    margin-right: auto;
}

.cerrar {
    margin-top: -40px;
}

.tienda {
    width: 100%;
    max-width: 450px; /* Ancho máximo del rectángulo */
    height: 70px; /* Alto ajustado */
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #ffc107;
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
}

.enlaces {
    margin-top: -35px;
}

.uno, .dos, .tres, .cuatro, .cinco, .seis {
    width: 80px; /* Ancho del rectángulo */
    border-radius: 10px;
    border: 2px solid #ffc107;
    position: relative; /* Asegúrate de que el elemento tenga una posición relativa */
}

.uno {
    height: 300px;
    top: -175px;
    right: -570px;
}

.dos {
    height: 220px;
    top: -438px;
    right: -475px;
}

.tres {
    height: 300px;
    top: -705px;
    right: -1155px;
}

.cuatro {
    height: 220px;
    top: -970px;
    right: -1250px;
}

.cinco {
    height: 100px;
    top: -1135px;
    right: -1340px;
}

.seis {
    height: 100px;
    top: -1235px;
    right: -385px;
}

/* Estilos para enlaces */
a {
    color: #ffc107; /* Amarillo */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Media queries para hacer el diseño responsive */
@media (max-width: 1200px) {
    .uno, .dos, .tres, .cuatro, .cinco, .seis {
        right: auto;
        top: auto;
        margin: 10px auto;
    }

    .uno { order: 1; }
    .dos { order: 2; }
    .tres { order: 3; }
    .cuatro { order: 4; }
    .cinco { order: 5; }
    .seis { order: 6; }
}

@media (max-width: 768px) {
    .container {
        width: 90%;
        padding: 15px;
    }

    .tienda {
        margin-top: 150px;
    }

    input[type="submit"] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .container {
        width: 95%;
        padding: 10px;
    }

    .tienda {
        margin-top: 100px;
    }

    .panel, .tienda {
        padding: 10px;
        font-size: 14px;
    }

    input[type="submit"] {
        padding: 8px;
    }
}