/* ==================================================
    Estilos específicos para la página add_product.php
    ================================================== */

/* Contenedor que limita el ancho y centra el formulario */
.form-wrapper {
    max-width: 600px; /* Ajusta este valor para hacer el formulario más o menos pequeño */
    margin: 2rem auto; /* Centra el wrapper horizontalmente y le da espacio vertical */
    padding: 0 1.5rem; /* Espacio a los lados para pantallas más pequeñas */
}

/* Estilos específicos para el botón de regresar en esta página */
.back-button-container {
    /* Posicionamiento en el grid del .right */
    display: flex;
    justify-content: flex-end; /* Alinea a la derecha */
    margin-top: 1.4rem; /* Espacio superior, similar a tu .date */
    margin-right: 1.8rem; /* Espacio a la derecha */
}

.back-button {
    display: inline-flex; /* Permite que el span esté al lado del texto */
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    background-color: #7380ec; /* Tu color primario */
    color: #fff; /* Texto blanco */
    border: none;
    border-radius: 0.8rem; /* Bordes redondeados */
    cursor: pointer;
    text-decoration: none; /* Elimina el subrayado si es un <a> */
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.back-button:hover {
    background-color: #5a64b9; /* Tono más oscuro al pasar el ratón */
}

.back-button span {
    font-size: 1.2rem; /* Tamaño del icono */
}

/* Media query para móviles: El botón "Atrás" estará en el "top" de la barra derecha si existe */
@media screen and (max-width: 768px) {
    /* Ajustes para el contenedor del formulario en móvil */
    .form-wrapper {
        max-width: 100%; /* Permite que ocupe todo el ancho disponible en móvil */
        padding: 0 1rem; /* Reduce el padding lateral en móvil */
        margin-top: 1rem; /* Ajusta el margen superior en móvil si es necesario */
        margin-left: 0;
        margin-right: 0;
    }

    /* Ocultamos el botón "Regresar" en la sección derecha en móvil */
    /* ya que el menú hamburguesa es la navegación principal */
    .back-button-container {
        display: none;
    }
}

/* Media query para pantallas muy pequeñas, si el formulario sigue siendo demasiado grande */
@media screen and (max-width: 400px) {
    .form-container {
        padding: 1rem; /* Reduce aún más el padding interno del formulario */
    }
}