/* Estilos para la página web Todoroma */

body {
    font-family: 'Arial', sans-serif;
    background-color: #f8f8f8;
    margin: 0;
    padding: 0;
}

header {
    background-color: #ffccf2;
    padding: 20px;
    text-align: center;
}

header h1 {
    color: #ff6699;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    background-color: #ffe6f7;
    flex-wrap: wrap;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    text-decoration: none;
    color: #ff6699;
    font-weight: bold;
}

main {
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
    width: 90%;
    max-width: 1200px; /* Ajustar para pantallas más grandes */
}

footer {
    text-align: center;
    padding: 10px;
    background-color: #ffccf2;
    width: 100%;
    color: #ff6699;
    position: relative;
}

img {
    max-width: 100%;
    height: auto;
}

/* Estilos uniformes para todos los campos del formulario */
form {
    display: flex;
    justify-content: space-between;  /* Distribuye uniformemente los campos */
    align-items: center;  /* Alinea los campos verticalmente en el centro */
    gap: 10px;  /* Espacio entre los elementos */
    flex-wrap: wrap;
    margin-bottom: 30px;  /* Permite que los campos se ajusten en múltiples filas si es necesario */
}

input[type="text"], input[type="email"], input[type="tel"], select {
    padding: 10px;
    border: 2px solid #ff6699;
    border-radius: 5px;
    width: 200px;  /* Asegura un ancho uniforme para todos los campos */
    font-size: 16px;
    box-sizing: border-box;  /* Asegura que el padding no cambie el ancho */
}

button[type="submit"] {
    background-color: #ff6699;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    align-self: flex-end;  /* Alinea el botón a la derecha */
}

button[type="submit"]:hover {
    background-color: #e05b85;
}

/* Ajustes para el contenedor de productos */
.productos {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;  /* Espacio entre productos */
    justify-content: center;  /* Alinea los productos en el centro */
    max-width: 1200px;  /* Reduce el ancho total de la sección de productos */
    margin: 20px auto;  /* Centrar los productos */
    padding: 0 20px;  /* Padding lateral */
}

/* Ajustes para los productos individuales */
.producto {
    flex: 1 1 calc(30% - 20px);  /* Cada producto ocupa un 30% del ancho disponible */
    max-width: 100%;  /* Evita que los productos se extiendan más allá de su contenedor */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    background-color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.producto:hover {
    transform: scale(1.05);  /* Efecto hover */
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
}

.producto img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.producto h3 {
    margin: 15px 0;
    font-size: 18px;
}

.producto p {
    font-size: 16px;
    margin: 10px 0;
}

.producto button {
    background-color: #ff6699;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.producto button:hover {
    background-color: #e05b85;
}

/* Estilo para la tabla del carrito */
.table-carrito {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.table-carrito th, .table-carrito td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

.table-carrito th {
    background-color: #ffccf2;
    color: #ff6699;
}

.table-carrito td {
    background-color: #fff;
}

.table-carrito tfoot td {
    font-weight: bold;
}

/* Estilo para los botones */
.btn {
    background-color: #ff6699;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    display: inline-block;
}

.btn-primary {
    background-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-success {
    background-color: #28a745;
}

.btn-success:hover {
    background-color: #218838;
}

.btn-danger {
    background-color: #ff4d4d;
}

.btn-danger:hover {
    background-color: #cc0000;
}

/* Estilo para los campos de cantidad */
input[type="number"] {
    width: 50px;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #ddd;
}

/* Estilos generales */
.inicio-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    font-family: 'Arial', sans-serif;
}

.texto-introduccion h2 {
    font-size: 36px;
    color: #ff6699;
    font-weight: bold;
    text-align: center;
}

.texto-introduccion p {
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    text-align: center;
}

.marca {
    color: #ff6699;
}

/* Estilos del carrusel */
.carousel-container {
    width: 100%;
    max-width: 500px; /* Limitar ancho para pantallas grandes */
    height: auto;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

.carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%; /* Asegura que el ancho del carrusel sea consistente */
}

.carousel img {
    flex-shrink: 0;
    width: 100%; /* Esto asegura que las imágenes ocupen todo el espacio disponible */
    height: auto;
    object-fit: cover;
    border-radius: 15px;
}

/* Estilos para pantallas pequeñas */
@media (max-width: 767px) {
    nav ul {
        flex-direction: column;  /* Menú en columnas en pantallas pequeñas */
    }

    .productos {
        flex-direction: column;  /* Productos en una sola columna en móviles */
    }

    .producto {
        flex: 1 1 100%;  /* Cada producto ocupa todo el ancho en pantallas pequeñas */
    }

    form {
        grid-template-columns: 1fr;  /* Formularios en una sola columna */
    }

    button[type="submit"] {
        width: 100%;  /* Botón de envío ocupa todo el ancho en pantallas pequeñas */
    }

    .carousel-container {
        width: 100%;  /* Carrusel ocupa todo el ancho */
    }

    .carousel img {
        width: 100%;
    }
}

.input-precio {
    width: 150px;  /* Ajusta el ancho según lo que necesites */
    font-size: 18px;  /* Tamaño de la fuente más grande */
    padding: 40px;    /* Espacio interno para que se vea más amplio */
    border-radius: 5px;  /* Borde redondeado */
    border: 1px solid #ccc;  /* Color del borde */
}

.miniaturas img {
    cursor: pointer;
    margin-right: 5px;
    border: 2px solid #ddd;
    border-radius: 5px;
}

.miniaturas img:hover {
    border-color: #ff6699;
}