/* =========================================================
   ESTILOS GENERALES
   ========================================================= */

/* Estilos generales de toda la aplicación. */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #1e1e1e;
    color: #f5f5f5;
}


/* =========================================================
   HEADER
   ========================================================= */

/* Organizamos horizontalmente el contenido principal del encabezado. */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background-color: #252525;
    border-bottom: 1px solid #8B5CF6;
}

/* Eliminamos el margen predeterminado del título. */
header h1 {
    margin: 0;
}

/* Estilos para el enlace principal de TaskFlow. */
header h1 a {
    color: #8B5CF6;
    text-decoration: none;
}

/* Cambiamos el estilo de TaskFlow cuando el usuario pasa el cursor sobre él. */
header h1 a:hover {
    color: #A78BFA;
    text-decoration: underline;
}

/* =========================================================
   INFORMACIÓN DEL USUARIO
   ========================================================= */

/* Identificamos visualmente al usuario autenticado. */
.user-info {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 8px;
    background-color: #252525;
    border: 1px solid #444444;
    color: #c7c7c7;
    font-size: 14px;
}

/* Eliminamos el estilo predeterminado del formulario de cierre de sesión. */
header nav form {
    margin: 0;
}

/* Estilos para el botón de cerrar sesión. */
header nav button {
    padding: 7px 12px;
    border: none;
    border-radius: 8px;
    background-color: #ff6b77;
    color: #f7f7f7;
    font-weight: 600;
    cursor: pointer;
}

/* Cambiamos el color del botón cuando el usuario pasa el cursor sobre él. */
header nav button:hover {
    background-color: #fd3243;
}

/* =========================================================
   NAVEGACIÓN
   ========================================================= */

/* Organizamos horizontalmente los elementos de navegación. */
header nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Estilos generales para los enlaces de navegación. */
header nav a {
    color: #A78BFA;
    text-decoration: none;
    font-weight: 600;
}

/* Cambiamos el estilo de los enlaces cuando el usuario pasa el cursor sobre ellos. */
header nav a:hover {
    color: #DCB0F2;
    text-decoration: underline;
}

/* Agregamos espacio interno al contenido principal de la aplicación. */
main {
    padding: 30px;
}

/* =========================================================
   MENSAJES
   ========================================================= */

/* Estilo general de los mensajes enviados por Django. */
.messages {
    margin-bottom: 20px;
}

/* Mensaje mostrado cuando una operación se realiza correctamente. */
.success {
    display: inline-block;
    margin: 0 0 20px 0;
    padding: 10px 14px;
    border-radius: 8px;
    background-color: #8ac265;
    color: #1e1e1e;
    font-weight: 600;
}


/* =========================================================
   RESPONSIVE - HEADER
   ========================================================= */

/* Ajustamos la navegación para pantallas pequeñas. */
@media (max-width: 600px) {

    header {
        padding: 15px;
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    header nav {
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
    }

}